lilishop-ui/manager/src/views/statistics/marketing.vue

<template>
  <div class="wrapper">
    <el-affix :offset="100">
      <el-card class="card fixed-bottom">
        <affixTime @selected="clickBreadcrumb" />
      </el-card>
    </el-affix>

    <el-card class="card">
      <h4>营销活动</h4>
      <div class="metric-grid">
        <div class="metric-item" v-for="item in activityMetrics" :key="item.key">
          <div class="metric-label">{{ item.label }}</div>
          <div class="metric-value">{{ formatNumber(overview[item.key]) }}</div>
        </div>
      </div>
    </el-card>

    <el-card class="card">
      <h4>优惠券与优惠</h4>
      <div class="metric-grid">
        <div class="metric-item" v-for="item in couponMetrics" :key="item.key">
          <div class="metric-label">
            <span>{{ item.label }}</span>
            <el-tooltip v-if="item.tip" :content="item.tip" placement="top">
              <el-icon class="metric-tip"><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="metric-value">
            <template v-if="item.isMoney">
              {{ $filters.unitPrice(overview[item.key] || 0, "￥") }}
            </template>
            <template v-else>
              {{ formatNumber(overview[item.key]) }}
            </template>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import * as API_Statistics from "@/api/statistics";
import affixTime from "@/components/affix-time";
import { QuestionFilled } from "@element-plus/icons-vue";

const params = ref({
  searchType: "LAST_SEVEN",
  year: "",
  month: "",
  storeId: "",
});
const overview = ref({});
const activityMetrics = ref([
  { key: "couponActiveNum", label: "进行中优惠券" },
  { key: "seckillActiveNum", label: "进行中秒杀" },
  { key: "pintuanActiveNum", label: "进行中拼团" },
  { key: "fullMinusActiveNum", label: "进行中满减" },
  { key: "fullRateActiveNum", label: "进行中满折" },
  { key: "fullGiftActiveNum", label: "进行中满赠" },
  { key: "kanjiaActiveNum", label: "进行中砍价商品" },
  { key: "pointsGoodsActiveNum", label: "进行中积分商品" },
]);
const couponMetrics = ref([
  {
    key: "couponPublishNum",
    label: "优惠券发放量",
    tip: "优惠券配置的累计发放数量",
  },
  {
    key: "couponReceivedNum",
    label: "优惠券领取量",
    tip: "客户已领取的优惠券数量",
  },
  {
    key: "couponUsedNum",
    label: "优惠券核销量",
    tip: "客户已使用的优惠券数量",
  },
  {
    key: "discountAmount",
    label: "活动优惠总额",
    isMoney: true,
    tip: "统计周期内订单产生的优惠金额合计",
  },
]);

watch(
  params,
  () => {
    loadData();
  },
  { deep: true, immediate: true }
);

function clickBreadcrumb(item) {
  params.value = {
    searchType: item.searchType || "",
    year: item.year || "",
    month: item.month || "",
    storeId: item.storeId || "",
    startTime: item.startTime || "",
    endTime: item.endTime || "",
  };
}
function formatNumber(val) {
  if (val == null || val === "") return 0;
  const num = Number(val);
  return Number.isNaN(num) ? 0 : Math.round(num);
}
async function loadData() {
  const res = await API_Statistics.getMarketingOverview({ ...params.value });
  if (res && res.success) {
    overview.value = res.result || {};
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  padding-bottom: 200px;
}
.card {
  margin-bottom: 10px;
}
h4 {
  margin: 0 0 20px 0;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.metric-item {
  background: #f3f5f7;
  border-radius: 8px;
  padding: 20px 16px;
  min-height: 90px;
}
.metric-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}
.metric-tip {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}
.metric-value {
  font-size: 22px;
  font-weight: 700;
  color: $theme_color;
}
@media (max-width: 1200px) {
  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>