haha/haha-admin-mp/src/pages/statistics/repurchase.vue

<template>
  <view class="page">
    <NavBar title="复购统计" :showBack="true" />
    <scroll-view class="list-scroll" scroll-y v-if="data">
      <view class="section">
        <text class="section-title">复购概况</text>
        <view class="stats-grid">
          <view class="stat-item"><text class="stat-value">{{ (data.repurchaseRate || 0).toFixed(1) }}%</text><text class="stat-label">复购率</text></view>
          <view class="stat-item"><text class="stat-value">{{ data.repurchaseUsers || 0 }}</text><text class="stat-label">复购用户</text></view>
          <view class="stat-item"><text class="stat-value">{{ data.totalUsers || 0 }}</text><text class="stat-label">总用户</text></view>
        </view>
      </view>
      <view class="end-tip"><text>-- 数据截至最近30天 --</text></view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import { get } from '@/utils/request';
import { formatDate } from '@/utils/common';
const data = ref<any>(null);
const loadData = async () => {
  try {
    const end = formatDate(new Date()); const start = formatDate(new Date(Date.now()-30*86400000));
    data.value = await get('/statistics/repurchase/overview', { startDate: start, endDate: end });
  } catch { }
};
onMounted(() => loadData());
</script>

<style lang="scss" scoped>
.page { height: 100vh; background: $bg-color-page; display: flex; flex-direction: column; }
.list-scroll { flex: 1; height: 0; }
.section { background: $bg-color-card; margin-bottom: $spacing-2; padding: $spacing-3 $spacing-4; }
.section-title { display: block; font-size: 28rpx; font-weight: 600; color: $text-color-primary; margin-bottom: $spacing-3; padding-bottom: $spacing-2; border-bottom: 1rpx solid $border-color-light; }
.stats-grid { display: flex; }
.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: $spacing-3 0; }
.stat-value { font-size: $font-size-2xl; font-weight: 700; color: $text-color-primary; margin-bottom: $spacing-1; }
.stat-label { font-size: 24rpx; color: $text-color-muted; }
.end-tip { text-align: center; padding: 36rpx; font-size: 24rpx; color: $text-color-placeholder; }
</style>