daimp-front/sub-operation-service/src/views/brand/components/UsageMonitor.vue

<template>
  <div class="usage-monitor">
    <!-- 状态筛选 -->
    <el-tabs v-model="activeStatus" class="mb-24">
      <el-tab-pane label="在售中" name="onSale" />
      <el-tab-pane label="未上架" name="notListed" />
      <el-tab-pane label="已失效" name="expired" />
    </el-tabs>

    <!-- 商品列表 -->
    <el-row :gutter="16">
      <el-col v-for="product in filteredProducts" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6" class="mb-16">
        <el-card class="product-card">
          <!-- 商品状态 -->
          <div class="status-tag">
            <el-tag :type="statusMap[product.status]" size="small">
              {{ product.statusLabel }}
            </el-tag>
          </div>

          <!-- 商品信息 -->
          <div class="product-content">
            <h4 class="product-name">{{ product.name }}</h4>

            <div class="sales-info">
              <div class="data-item">
                <span class="label">月售</span>
                <span class="value">{{ product.monthlySales }}</span>
              </div>
              <div class="data-item">
                <span class="label">库存</span>
                <span class="value">{{ product.stock }}</span>
              </div>
            </div>

            <div class="price">
              {{ product.price }}
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="product-actions">
            <el-button v-if="product.status !== 'expired'" size="small" @click="handleInspect(product)">抽查</el-button>
            <el-button v-if="product.status === 'onSale'" size="small" type="danger" plain @click="handleRevoke(product)">取消授权</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const activeStatus = ref('onSale');

// 状态映射配置，用于 el-tag 的样式
const statusMap = {
  onSale: 'success',
  notListed: 'info',
  expired: 'danger',
};

// 商品数据，这里保持与原型图中的展示一致
const products = ref([
  {
    id: 1,
    name: '耿马镇沙瓢西红柿',
    monthlySales: 999,
    stock: 10000,
    price: '￥3.0/kg',
    status: 'onSale',
    statusLabel: '在售中',
  },
  {
    id: 2,
    name: '昭通乡土黄瓜',
    monthlySales: 750,
    stock: 8500,
    price: '￥2.5/kg',
    status: 'onSale',
    statusLabel: '在售中',
  },
  {
    id: 3,
    name: '昆明有机苹果',
    monthlySales: 450,
    stock: 5000,
    price: '￥6.0/kg',
    status: 'notListed', // 修改为 notListed，对应“未上架”
    statusLabel: '未上架',
  },
  {
    id: 4,
    name: '楚雄散养鸡蛋',
    monthlySales: 1200,
    stock: 20000,
    price: '￥8.0/斤',
    status: 'onSale',
    statusLabel: '在售中',
  },
]);

// 根据当前选择状态过滤商品列表
const filteredProducts = computed(() => {
  return products.value.filter((item) => item.status === activeStatus.value);
});

// 操作处理逻辑
const handleInspect = (product) => {
  console.log('抽查商品:', product);
};

const handleRevoke = (product) => {
  console.log('取消授权:', product);
};
</script>

<style lang="scss" scoped>
.usage-monitor {
  padding: 20px;

  .mb-24 {
    margin-bottom: 24px;
  }

  .product-card {
    position: relative;
    margin-bottom: 16px;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .status-tag {
      position: absolute;
      top: 12px;
      right: 12px;
    }

    .product-content {
      .product-name {
        margin: 0 0 12px;
        font-size: 16px;
        color: #303133;
      }

      .sales-info {
        display: flex;
        gap: 20px;
        margin-bottom: 12px;

        .data-item {
          .label {
            color: #909399;
            margin-right: 4px;
          }
          .value {
            font-weight: 500;
          }
        }
      }

      .price {
        color: #f56c6c;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .product-actions {
      margin-top: 16px;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
  }
}
</style>