online-order-h5/src/views/merchant/dashboard.vue

<template>
  <div class="merchant-dashboard">
    <van-nav-bar
      :title="$t('merchant.dashboard.title')"
      left-arrow
      @click-left="goBack"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="dashboard-content">
        <!-- 店铺信息 -->
        <div class="shop-card">
          <h3>{{ shopInfo.name || $t('merchant.dashboard.myShop') }}</h3>
          <van-tag :type="shopInfo.isOpen ? 'success' : 'default'">
            {{ shopInfo.isOpen ? $t('merchant.dashboard.operating') : $t('merchant.dashboard.resting') }}
          </van-tag>
          <p>{{ shopInfo.hours }}</p>
        </div>

        <!-- 今日数据 -->
        <div class="stats-section">
          <h4>{{ $t('merchant.dashboard.todayData') }}</h4>
          <van-grid :column-num="2" :border="false">
            <van-grid-item icon="gold-coin-o">
              <template #text>
                <div class="grid-value">¥{{ todayStats.revenue }}</div>
                <div class="grid-label">{{ $t('merchant.dashboard.todayRevenue') }}</div>
              </template>
            </van-grid-item>
            <van-grid-item icon="shopping-cart-o">
              <template #text>
                <div class="grid-value">{{ todayStats.orderCount }}</div>
                <div class="grid-label">{{ $t('merchant.dashboard.todayOrders') }}</div>
              </template>
            </van-grid-item>
            <van-grid-item icon="logistics">
              <template #text>
                <div class="grid-value">{{ todayStats.takeoutCount }}</div>
                <div class="grid-label">{{ $t('merchant.dashboard.todayTakeout') }}</div>
              </template>
            </van-grid-item>
            <van-grid-item icon="shop-o">
              <template #text>
                <div class="grid-value">{{ todayStats.dineInCount }}</div>
                <div class="grid-label">{{ $t('merchant.dashboard.todayDineIn') }}</div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>

        <!-- 订单统计 -->
        <div class="order-stats-section">
          <h4>{{ $t('merchant.dashboard.orderStats') }}</h4>
          <div class="order-stats-grid">
            <div class="stat-card" @click="goToOrders('pending')">
              <div class="stat-count" style="color: #ff976a">{{ orderStats.pending }}</div>
              <div class="stat-name">{{ $t('merchant.dashboard.pending') }}</div>
            </div>
            <div class="stat-card" @click="goToOrders('preparing')">
              <div class="stat-count" style="color: #1989fa">{{ orderStats.preparing }}</div>
              <div class="stat-name">{{ $t('merchant.dashboard.preparing') }}</div>
            </div>
            <div class="stat-card" @click="goToOrders('delivering')">
              <div class="stat-count" style="color: #07c160">{{ orderStats.delivering }}</div>
              <div class="stat-name">{{ $t('merchant.dashboard.delivering') }}</div>
            </div>
            <div class="stat-card" @click="goToOrders('completed')">
              <div class="stat-count" style="color: #969799">{{ orderStats.completed }}</div>
              <div class="stat-name">{{ $t('merchant.dashboard.completed') }}</div>
            </div>
          </div>
        </div>

        <!-- 常用功能 -->
        <div class="menu-section">
          <h4>{{ $t('merchant.menu.commonFunctions') }}</h4>
          <van-grid :column-num="3" clickable>
             <van-grid-item icon="apps-o" :text="$t('merchant.menu.products')" @click="goToProducts" />
             <van-grid-item icon="label-o" :text="$t('merchant.menu.buffetPlans')" to="/merchant/buffet-plans" />
             <van-grid-item icon="setting-o" :text="$t('merchant.menu.settings')" />
          </van-grid>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showToast } from 'vant'
import { useMerchantStore } from '@/store/modules/merchant'

const { t } = useI18n()
const router = useRouter()
const merchantStore = useMerchantStore()

const refreshing = ref(false)

const shopInfo = computed(() => merchantStore.shopInfo)
const todayStats = computed(() => merchantStore.todayStats)
const orderStats = computed(() => merchantStore.orderStats)

const loadData = async () => {
  try {
    await merchantStore.loadDashboardData()
  } catch (error) {
    showToast(t('merchant.dashboard.loadFailed'))
  }
}

const onRefresh = async () => {
  await loadData()
  refreshing.value = false
  showToast(t('common.refreshSuccess'))
}

const goBack = () => {
  router.push('/mine')
}

const goToOrders = (status: string) => {
  showToast(t('merchant.dashboard.orderManagementInDev'))
}

const goToProducts = () => {
  router.push('/merchant/products')
}

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

<style scoped lang="scss">
.merchant-dashboard {
  min-height: 100vh;
  background: #f5f5f5;
}

.dashboard-content {
  padding: 15px;
}

.shop-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: #fff;
  margin-bottom: 15px;

  h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
  }

  p {
    margin: 10px 0 0 0;
    font-size: 14px;
    opacity: 0.9;
  }
}

.stats-section,
.order-stats-section,
.menu-section {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;

  h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
  }
}

.grid-value {
  font-size: 24px;
  font-weight: bold;
  color: #323233;
  margin-bottom: 5px;
}

.grid-label {
  font-size: 12px;
  color: #969799;
}

.order-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  text-align: center;
  padding: 15px;
  background: #f7f8fa;
  border-radius: 8px;
  cursor: pointer;

  &:active {
    transform: scale(0.95);
  }

  .stat-count {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .stat-name {
    font-size: 12px;
    color: #969799;
  }
}
</style>