haha/haha-admin-mp/src/pages/index/index.vue

<template>
  <view class="page">
    <!-- 顶部导航 - 与内容融合 -->
    <view class="header">
      <view class="header-bg"></view>
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="header-content">
        <view class="greeting">
          <text class="greeting-time">{{ getTimeGreeting() }}</text>
          <text class="greeting-name">运营管理员</text>
        </view>
        <view class="avatar" @click="navigateTo('/pages/my/my')">
          <view class="avatar-icon"></view>
        </view>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-card main">
        <view class="stats-item" @click="navigateTo('/pages/orders/list')">
          <text class="stats-value">{{ stats.todayStats?.orderCount || 0 }}</text>
          <text class="stats-label">今日订单</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-value accent">¥{{ formatMoney(stats.todayStats?.orderAmount || 0) }}</text>
          <text class="stats-label">今日销售额</text>
        </view>
      </view>

      <view class="stats-row">
        <view class="stats-card mini success" @click="navigateTo('/pages/device/list')">
          <view class="stats-dot green"></view>
          <view class="stats-info">
            <text class="stats-value">{{ stats.todayStats?.deviceOnline || 0 }}</text>
            <text class="stats-label">在线设备</text>
          </view>
        </view>
        <view class="stats-card mini warning">
          <view class="stats-dot amber"></view>
          <view class="stats-info">
            <text class="stats-value">{{ stats.todayStats?.deviceOffline || 0 }}</text>
            <text class="stats-label">离线设备</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷功能 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">快捷功能</text>
      </view>
      <view class="quick-grid">
        <view class="quick-item" @click="navigateTo('/pages/orders/list')">
          <view class="quick-icon green">
            <view class="icon-order"></view>
          </view>
          <text class="quick-name">订单管理</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/device/list')">
          <view class="quick-icon cyan">
            <view class="icon-device"></view>
          </view>
          <text class="quick-name">设备管理</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/shop/list')">
          <view class="quick-icon amber">
            <view class="icon-shop"></view>
          </view>
          <text class="quick-name">门店管理</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/products/list')">
          <view class="quick-icon purple">
            <view class="icon-product"></view>
          </view>
          <text class="quick-name">商品管理</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/inventory/query')">
          <view class="quick-icon blue">
            <view class="icon-chart"></view>
          </view>
          <text class="quick-name">库存查询</text>
        </view>
        <view class="quick-item" @click="navigateTo('/pages/checkin/index')">
          <view class="quick-icon rose">
            <view class="icon-checkin"></view>
          </view>
          <text class="quick-name">签到打卡</text>
        </view>
      </view>
    </view>

    <!-- 订单趋势 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">订单趋势</text>
        <text class="section-tag">近7天</text>
      </view>
      <view class="chart-card">
        <view class="chart-container">
          <view 
            class="chart-bar-wrapper" 
            v-for="(item, index) in stats.orderTrend || []" 
            :key="index"
          >
            <text class="chart-value">{{ item.count }}</text>
            <view class="chart-bar-bg">
              <view 
                class="chart-bar" 
                :style="{ height: getBarHeight(item.count) + '%' }"
              ></view>
            </view>
            <text class="chart-label">{{ item.date.slice(-2) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 热销商品 -->
    <view class="section" v-if="stats.hotProducts && stats.hotProducts.length > 0">
      <view class="section-header">
        <text class="section-title">热销商品</text>
        <text class="section-tag hot">TOP 5</text>
      </view>
      <view class="hot-list">
        <view 
          class="hot-item" 
          v-for="(item, index) in stats.hotProducts || []" 
          :key="item.id"
        >
          <view class="hot-rank" :class="{ top: Number(index) < 3 }">
            <text>{{ Number(index) + 1 }}</text>
          </view>
          <view class="hot-info">
            <text class="hot-name">{{ item.name }}</text>
            <text class="hot-sales">销量 {{ item.sales }}</text>
          </view>
          <view class="hot-progress">
            <view class="hot-progress-bar" :style="{ width: getProgress(item.sales) + '%' }"></view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getDashboardData } from '@/api/dashboard';
import { formatMoney as formatMoneyUtil } from '@/utils/common';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 获取系统信息用于计算状态栏高度
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = ref(systemInfo.statusBarHeight || 20);

const stats = ref<any>({});
const maxCount = ref(0);
const maxSales = ref(0);

const formatMoney = (amount: number) => formatMoneyUtil(amount);

const getTimeGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 12) return '上午好';
  if (hour < 18) return '下午好';
  return '晚上好';
};

const getBarHeight = (count: number) => {
  if (maxCount.value === 0) return 0;
  return Math.max(15, (count / maxCount.value) * 100);
};

const getProgress = (sales: number) => {
  if (maxSales.value === 0) return 0;
  return Math.max(10, (sales / maxSales.value) * 100);
};

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

const loadData = async () => {
  try {
    const data = await getDashboardData();
    stats.value = data;
    if (data.orderTrend && data.orderTrend.length > 0) {
      maxCount.value = Math.max(...data.orderTrend.map((item: any) => item.count));
    }
    if (data.hotProducts && data.hotProducts.length > 0) {
      maxSales.value = Math.max(...data.hotProducts.map((item: any) => item.sales));
    }
  } catch (error) {
    console.error('获取仪表盘数据失败', error);
  }
};

onMounted(() => {
  loadData();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8fafc;
  padding-bottom: 200rpx;
}

/* 顶部导航 */
.header {
  position: relative;
  background: #ffffff;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280rpx;
  background: #ecfdf5;
  border-radius: 0 0 40rpx 40rpx;
}

.status-bar {
  width: 100%;
  position: relative;
  z-index: 1;
}

.header-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 24rpx 24rpx;
}

.greeting {
  .greeting-time {
    display: block;
    font-size: 26rpx;
    color: #64748b;
    margin-bottom: 4rpx;
  }
  
  .greeting-name {
    font-size: 40rpx;
    font-weight: 700;
    color: #1e293b;
  }
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #10b981;
  position: relative;
  
  .avatar-icon {
    width: 36rpx;
    height: 36rpx;
    background: #10b981;
    border-radius: 50%;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -16rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 22rpx;
      height: 18rpx;
      background: #10b981;
      border-radius: 18rpx 18rpx 0 0;
    }
  }
}

/* 统计卡片 */
.stats-section {
  padding: 16rpx 24rpx;
}

.stats-card {
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 20rpx;
  
  &.main {
    display: flex;
    padding: 32rpx 0;
    margin-bottom: 16rpx;
    
    .stats-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .stats-value {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48rpx;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8rpx;
      
      &.accent {
        color: #f97316;
      }
    }
    
    .stats-label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #64748b;
    }
    
    .stats-divider {
      width: 1rpx;
      background: #e2e8f0;
    }
  }
  
  &.mini {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx;
    
    &:not(:last-child) {
      margin-right: 12rpx;
    }
    
    .stats-dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      flex-shrink: 0;
      
      &.green { background: #10b981; }
      &.amber { background: #f97316; }
    }
    
    .stats-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .stats-value {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: 700;
        color: #1e293b;
      }
      
      .stats-label {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22rpx;
        color: #64748b;
      }
    }
  }
}

.stats-row {
  display: flex;
}

/* 区块 */
.section {
  margin: 16rpx 24rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1e293b;
}

.section-tag {
  font-size: 22rpx;
  color: #10b981;
  background: #ecfdf5;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  
  &.hot {
    color: #f97316;
    background: #fff7ed;
  }
}

/* 快捷功能 */
.quick-grid {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .quick-icon {
    width: 88rpx;
    height: 88rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12rpx;
    transition: transform 0.15s;
    
    &:active {
      transform: scale(0.92);
    }
    
    &.green { background: #ecfdf5; }
    &.cyan { background: #ecfeff; }
    &.amber { background: #fff7ed; }
    &.purple { background: #faf5ff; }
    &.blue { background: #f0f9ff; }
    &.rose { background: #fff1f2; }
    
    /* 图标 - 纯CSS几何图形 */
    .icon-order {
      width: 32rpx;
      height: 40rpx;
      border: 3rpx solid #10b981;
      border-radius: 4rpx;
      position: relative;
      
      &::before, &::after {
        content: '';
        position: absolute;
        left: 6rpx;
        width: 14rpx;
        height: 3rpx;
        background: #10b981;
        border-radius: 2rpx;
      }
      &::before { top: 12rpx; }
      &::after { top: 20rpx; width: 10rpx; }
    }
    
    .icon-device {
      width: 24rpx;
      height: 40rpx;
      border: 3rpx solid #0ea5e9;
      border-radius: 6rpx;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 6rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 8rpx;
        height: 4rpx;
        background: #0ea5e9;
        border-radius: 2rpx;
      }
    }
    
    .icon-shop {
      position: relative;
      width: 36rpx;
      height: 36rpx;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 20rpx solid transparent;
        border-right: 20rpx solid transparent;
        border-bottom: 14rpx solid #f97316;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 32rpx;
        height: 18rpx;
        background: #f97316;
        border-radius: 0 0 4rpx 4rpx;
      }
    }
    
    .icon-product {
      width: 32rpx;
      height: 32rpx;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10rpx solid transparent;
        border-right: 10rpx solid transparent;
        border-bottom: 12rpx solid #a855f7;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28rpx;
        height: 16rpx;
        background: #a855f7;
        border-radius: 4rpx;
      }
    }
    
    .icon-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 32rpx;
      height: 28rpx;
      
      &::before, &::after, & {
        content: '';
        width: 8rpx;
        background: #0ea5e9;
        border-radius: 4rpx;
      }
      &::before { height: 12rpx; }
      & { height: 24rpx; }
      &::after { height: 16rpx; }
    }
    
    .icon-checkin {
      width: 28rpx;
      height: 28rpx;
      border: 3rpx solid #f43f5e;
      border-radius: 50%;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8rpx;
        height: 8rpx;
        background: #f43f5e;
        border-radius: 50%;
      }
      
      &::after {
        content: '';
        position: absolute;
        top: -6rpx;
        right: -6rpx;
        width: 12rpx;
        height: 12rpx;
        background: #f43f5e;
        border-radius: 50%;
      }
    }
  }
  
  .quick-name {
    font-size: 24rpx;
    color: #475569;
  }
}

/* 图表卡片 */
.chart-card {
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 20rpx;
  padding: 24rpx;
}

.chart-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 240rpx;
  padding-top: 32rpx;
}

.chart-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  
  .chart-value {
    font-size: 22rpx;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8rpx;
  }
  
  .chart-bar-bg {
    flex: 1;
    width: 28rpx;
    display: flex;
    align-items: flex-end;
    background: #f1f5f9;
    border-radius: 6rpx;
    
    .chart-bar {
      width: 100%;
      background: #10b981;
      border-radius: 6rpx;
      min-height: 20rpx;
    }
  }
  
  .chart-label {
    font-size: 20rpx;
    color: #94a3b8;
    margin-top: 10rpx;
  }
}

/* 热销列表 */
.hot-list {
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 20rpx;
  padding: 8rpx 20rpx;
}

.hot-item {
  display: flex;
  align-items: center;
  padding: 20rpx 8rpx;
  border-bottom: 1rpx solid #f1f5f9;
  
  &:last-child {
    border-bottom: none;
  }
  
  .hot-rank {
    width: 44rpx;
    height: 44rpx;
    border-radius: 12rpx;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: #94a3b8;
    
    &.top {
      background: #10b981;
      color: #fff;
    }
  }
  
  .hot-info {
    flex: 1;
    
    .hot-name {
      display: block;
      font-size: 28rpx;
      color: #1e293b;
      margin-bottom: 4rpx;
      font-weight: 500;
    }
    
    .hot-sales {
      font-size: 24rpx;
      color: #94a3b8;
    }
  }
  
  .hot-progress {
    width: 80rpx;
    height: 8rpx;
    background: #f1f5f9;
    border-radius: 4rpx;
    overflow: hidden;
    
    .hot-progress-bar {
      height: 100%;
      background: #f97316;
      border-radius: 4rpx;
    }
  }
}
</style>