online-order-h5/src/views/admin/merchants.vue

<template>
  <div class="admin-merchants">
    <van-nav-bar title="商家管理" left-arrow @click-left="$router.back()" fixed placeholder>
      <template #right>
        <van-icon name="plus" size="20" @click="addMerchant" />
      </template>
    </van-nav-bar>

    <van-search v-model="searchText" placeholder="搜索商家/公司名" />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="merchant-list">
        <div v-for="merchant in merchants" :key="merchant.id" class="merchant-card">
          <div class="merchant-header">
            <div class="merchant-info">
              <h3>{{ merchant.companyName }}</h3>
              <p>老板: {{ merchant.ownerName }} | {{ merchant.shopCount }}家店铺</p>
            </div>
            <van-tag :type="merchant.status === 'active' ? 'success' : 'warning'">
              {{ merchant.status === 'active' ? '正常' : '暂停' }}
            </van-tag>
          </div>
          <div class="merchant-stats">
            <div class="stat-item">
              <span class="value">¥{{ formatNumber(merchant.totalRevenue) }}</span>
              <span class="label">总营业额</span>
            </div>
            <div class="stat-item">
              <span class="value">{{ merchant.totalOrders }}</span>
              <span class="label">总订单</span>
            </div>
            <div class="stat-item">
              <span class="value">{{ merchant.memberCount }}</span>
              <span class="label">会员数</span>
            </div>
          </div>
          <div class="merchant-actions">
            <van-button size="small" plain @click="viewMerchant(merchant)">查看详情</van-button>
            <van-button size="small" plain type="primary" @click="editMerchant(merchant)">编辑</van-button>
            <van-button
              size="small"
              plain
              :type="merchant.status === 'active' ? 'warning' : 'success'"
              @click="toggleStatus(merchant)"
            >
              {{ merchant.status === 'active' ? '暂停' : '启用' }}
            </van-button>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

interface Merchant {
  id: string
  companyName: string
  ownerName: string
  shopCount: number
  status: 'active' | 'suspended'
  totalRevenue: number
  totalOrders: number
  memberCount: number
}

const searchText = ref('')
const refreshing = ref(false)

const merchants = ref<Merchant[]>([
  {
    id: '1',
    companyName: 'XXX餐饮集团',
    ownerName: '张老板',
    shopCount: 3,
    status: 'active',
    totalRevenue: 258000,
    totalOrders: 1560,
    memberCount: 380
  },
  {
    id: '2',
    companyName: 'YYY美食连锁',
    ownerName: '李老板',
    shopCount: 5,
    status: 'active',
    totalRevenue: 480000,
    totalOrders: 2890,
    memberCount: 650
  }
])

const formatNumber = (num: number) => {
  if (num >= 10000) return (num / 10000).toFixed(1) + '万'
  return num.toLocaleString()
}

const onRefresh = () => {
  setTimeout(() => {
    refreshing.value = false
    showToast('刷新成功')
  }, 1000)
}

const addMerchant = () => {
  showToast('添加商家')
}

const viewMerchant = (merchant: Merchant) => {
  showToast(`查看: ${merchant.companyName}`)
}

const editMerchant = (merchant: Merchant) => {
  showToast(`编辑: ${merchant.companyName}`)
}

const toggleStatus = (merchant: Merchant) => {
  merchant.status = merchant.status === 'active' ? 'suspended' : 'active'
  showToast(merchant.status === 'active' ? '已启用' : '已暂停')
}
</script>

<style scoped>
.admin-merchants {
  min-height: 100vh;
  background: #f5f5f5;
}

.merchant-list {
  padding: 12px;
}

.merchant-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.merchant-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.merchant-info h3 {
  font-size: 16px;
  margin: 0 0 4px 0;
}

.merchant-info p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.merchant-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f8f8;
  border-radius: 8px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-item .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.stat-item .label {
  font-size: 12px;
  color: #999;
}

.merchant-actions {
  display: flex;
  gap: 8px;
}
</style>