todo-frontend/pages/index/index.vue

<template>
  <view class="page">
    <!-- 用户信息 -->
    <view class="user-info">
      <view class="avatar">
        <text class="username">{{ userInfo.username || '用户' }}</text>
      </view>
      <view class="role-tag">{{ userInfo.role || '销售员' }}</view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-grid">
      <view class="menu-item" @click="goTo('/pages/product/list')">
        <text class="menu-icon">📦</text>
        <text class="menu-text">商品管理</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/order/create')">
        <text class="menu-icon">📝</text>
        <text class="menu-text">创建订单</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/order/list')">
        <text class="menu-icon">📋</text>
        <text class="menu-text">订单列表</text>
      </view>
      <view class="menu-item" @click="goStock()">
        <text class="menu-icon">🏭</text>
        <text class="menu-text">库存管理</text>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="section">
      <view class="section-title">今日概览</view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ stats.orderCount || 0 }}</text>
          <text class="stat-label">今日订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥{{ stats.actualAmount || 0 }}</text>
          <text class="stat-label">今日销售额</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ stats.stockAlerts || 0 }}</text>
          <text class="stat-label">库存预警</text>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
import authApi from '@/api/auth'
import orderApi from '@/api/order'
import productApi from '@/api/product'

export default {
  data() {
    return {
      userInfo: {},
      stats: {
        orderCount: 0,
        actualAmount: 0,
        stockAlerts: 0
      }
    }
  },
  onLoad() {
    this.loadUserInfo()
    this.loadStats()
  },
  methods: {
    async loadUserInfo() {
      try {
        const userInfo = await authApi.getCurrentUser()
        this.userInfo = userInfo
      } catch (e) {
        console.error(e)
      }
    },
    async loadStats() {
      try {
        // 获取今日订单统计
        const today = new Date().toISOString().split('T')[0]
        const stats = await orderApi.getStatistics({ startDate: today })
        this.stats.orderCount = stats.orderCount || 0
        this.stats.actualAmount = stats.actualAmount || 0

        // 获取库存预警
        const alerts = await productApi.getStockAlerts()
        this.stats.stockAlerts = alerts ? alerts.length : 0
      } catch (e) {
        console.error(e)
      }
    },
    goTo(url) {
      uni.navigateTo({ url })
    },
    goStock() {
      uni.showToast({ title: '库存管理功能开发中', icon: 'none' })
    },
    async logout() {
      try {
        await authApi.logout()
      } catch (e) {
        console.error(e)
      }
      uni.removeStorageSync('token')
      uni.reLaunch({ url: '/pages/login/index' })
    }
  }
}
</script>

<style>
.page {
  padding: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  background: #3cc51f;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.username {
  color: #fff;
  font-size: 32rpx;
}

.role-tag {
  margin-left: 20rpx;
  padding: 8rpx 16rpx;
  background: #e6f7ff;
  color: #1890ff;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40rpx;
}

.menu-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.menu-icon {
  font-size: 60rpx;
}

.menu-text {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.stats-grid {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.logout-btn {
  background: #fff;
  color: #ff4d4f;
  border: none;
  margin-top: 40rpx;
}
</style>