390 lines
9.5 KiB
Plaintext
390 lines
9.5 KiB
Plaintext
<template>
|
|
<view class="home-page">
|
|
<!-- 数据统计卡片行 (使用统一响应式网格) -->
|
|
<view class="kpi-grid">
|
|
<KpiMiniCard
|
|
class="stat-card"
|
|
title="销售额"
|
|
tagText="今日"
|
|
:valueText="statsData.sales.today.toString()"
|
|
:metaLeft="'昨日 ' + statsData.sales.yesterday"
|
|
:metaRight="'日环比 ' + statsData.sales.trend + '%'"
|
|
:trend="statsData.sales.trend > 0 ? 'up' : 'down'"
|
|
footerLeftText="本月销售额"
|
|
:footerRightText="statsData.sales.monthTotal + '元'"
|
|
/>
|
|
|
|
<KpiMiniCard
|
|
class="stat-card"
|
|
title="用户访问量"
|
|
tagText="今日"
|
|
:valueText="statsData.visits.today.toString()"
|
|
:metaLeft="'昨日 ' + statsData.visits.yesterday"
|
|
:metaRight="'日环比 ' + statsData.visits.trend + '%'"
|
|
:trend="statsData.visits.trend > 0 ? 'up' : 'down'"
|
|
footerLeftText="本月访问量"
|
|
:footerRightText="statsData.visits.monthTotal + 'Pv'"
|
|
/>
|
|
|
|
<KpiMiniCard
|
|
class="stat-card"
|
|
title="订单量"
|
|
tagText="今日"
|
|
:valueText="statsData.orders.today.toString()"
|
|
:metaLeft="'昨日 ' + statsData.orders.yesterday"
|
|
:metaRight="'日环比 ' + statsData.orders.trend + '%'"
|
|
:trend="statsData.orders.trend > 0 ? 'up' : 'down'"
|
|
footerLeftText="本月订单量"
|
|
:footerRightText="statsData.orders.monthTotal + '单'"
|
|
/>
|
|
|
|
<KpiMiniCard
|
|
class="stat-card"
|
|
title="新增用户"
|
|
tagText="今日"
|
|
:valueText="statsData.users.today.toString()"
|
|
:metaLeft="'昨日 ' + statsData.users.yesterday"
|
|
:metaRight="'日环比 ' + statsData.users.trend + '%'"
|
|
:trend="statsData.users.trend > 0 ? 'up' : 'down'"
|
|
footerLeftText="本月新增用户"
|
|
:footerRightText="statsData.users.monthTotal + '人'"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 订单趋势图表区 -->
|
|
<view class="chart-section">
|
|
<view class="chart-header">
|
|
<view class="header-left">
|
|
<view class="chart-icon-box">
|
|
<text class="chart-icon">📈</text>
|
|
</view>
|
|
<text class="chart-title">订单</text>
|
|
</view>
|
|
<view class="header-right">
|
|
<view class="period-tabs">
|
|
<view
|
|
v-for="p in periods"
|
|
:key="p.value"
|
|
class="period-tab"
|
|
:class="{ active: activePeriod === p.value }"
|
|
@click="activePeriod = p.value"
|
|
>
|
|
<text class="tab-text">{{ p.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="chart-body">
|
|
<AnalyticsComboChart
|
|
:xLabels="chartData.x"
|
|
:gmv="chartData.gmv"
|
|
:orders="chartData.orders"
|
|
:height="360"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户与购买统计行 -->
|
|
<view class="stats-row bottom-charts">
|
|
<!-- 用户趋势 -->
|
|
<view class="chart-section half-width">
|
|
<view class="chart-header">
|
|
<view class="header-left">
|
|
<view class="chart-icon-box user">
|
|
<text class="chart-icon">👤</text>
|
|
</view>
|
|
<text class="chart-title">用户</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-body">
|
|
<AnalyticsAreaChart
|
|
:xLabels="userData.x"
|
|
:data="userData.data"
|
|
:height="300"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 购买用户统计 -->
|
|
<view class="chart-section half-width">
|
|
<view class="chart-header">
|
|
<view class="header-left">
|
|
<view class="chart-icon-box buy">
|
|
<text class="chart-icon">📈</text>
|
|
</view>
|
|
<text class="chart-title">购买用户统计</text>
|
|
</view>
|
|
</view>
|
|
<view class="chart-body">
|
|
<AnalyticsPieChart
|
|
:items="buyUserData"
|
|
:height="300"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
/**
|
|
* 管理后台首页 - CRMEB 数据统计
|
|
* 1:1 复刻 CRMEB 首页设计
|
|
*/
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import AnalyticsComboChart from '@/components/analytics/AnalyticsComboChart.uvue'
|
|
import AnalyticsAreaChart from '@/components/analytics/AnalyticsAreaChart.uvue'
|
|
import AnalyticsPieChart from '@/components/analytics/AnalyticsPieChart.uvue'
|
|
import KpiMiniCard from '@/pages/mall/admin/homePage/components/KpiMiniCard.uvue'
|
|
|
|
// Filter periods
|
|
const periods = [
|
|
{ label: '30天', value: '30d' },
|
|
{ label: '周', value: 'week' },
|
|
{ label: '月', value: 'month' },
|
|
{ label: '年', value: 'year' }
|
|
]
|
|
const activePeriod = ref('30d')
|
|
|
|
// Mock data generator for different periods
|
|
function getMockChartData(period: string): any {
|
|
if (period === '30d') {
|
|
return {
|
|
x: ['01-04', '01-06', '01-08', '01-10', '01-12', '01-14', '01-16', '01-18', '01-20', '01-22', '01-24', '01-26', '01-28', '01-30', '02-02'],
|
|
gmv: [10000, 15000, 130000, 20000, 15000, 10000, 40000, 25000, 100000, 30000, 5000, 70000, 20000, 15000, 10000],
|
|
orders: [15, 12, 18, 10, 8, 14, 12, 11, 15, 12, 35, 10, 11, 15, 8]
|
|
}
|
|
} else if (period === 'week') {
|
|
return {
|
|
x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
gmv: [45000, 52000, 48000, 61000, 55000, 89000, 95000],
|
|
orders: [42, 48, 45, 56, 51, 82, 88]
|
|
}
|
|
} else if (period === 'month') {
|
|
return {
|
|
x: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
gmv: [1200000, 1500000, 1350000, 1800000, 2100000, 1950000],
|
|
orders: [1200, 1500, 1350, 1800, 2100, 1950]
|
|
}
|
|
} else { // year
|
|
return {
|
|
x: ['2021', '2022', '2023', '2024', '2025'],
|
|
gmv: [12000000, 15000000, 18500000, 22000000, 28000000],
|
|
orders: [12000, 15000, 18500, 22000, 28000]
|
|
}
|
|
}
|
|
}
|
|
|
|
// Chart data tied to activePeriod
|
|
const chartData = computed(() => {
|
|
return getMockChartData(activePeriod.value)
|
|
})
|
|
|
|
// Mock data for User and Buying stats
|
|
const userData = ref({
|
|
x: ['01-3', '01-4', '01-5', '01-6', '01-7', '01-8', '01-9', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-1', '02-2'],
|
|
data: [8, 32, 38, 28, 30, 33, 18, 26, 22, 18, 12, 6, 20, 32, 35, 30, 25, 23, 14, 12, 22, 30, 32, 29, 30, 22, 18, 22, 10, 8, 17]
|
|
})
|
|
|
|
const buyUserData = ref([
|
|
{ name: '未消费用户', value: 850, itemStyle: { color: '#3b82f6' } },
|
|
{ name: '消费一次用户', value: 120, itemStyle: { color: '#a78bfa' } },
|
|
{ name: '留存客户', value: 45, itemStyle: { color: '#10b981' } },
|
|
{ name: '回流客户', value: 15, itemStyle: { color: '#f59e0b' } }
|
|
])
|
|
|
|
// TODO: 后续接入真实数据接口
|
|
const statsData = ref({
|
|
sales: {
|
|
today: 91.1,
|
|
yesterday: 2740,
|
|
monthTotal: 2831.1,
|
|
trend: -96.67
|
|
},
|
|
visits: {
|
|
today: 224,
|
|
yesterday: 136,
|
|
monthTotal: 360,
|
|
trend: 64.7
|
|
},
|
|
orders: {
|
|
today: 4,
|
|
yesterday: 8,
|
|
monthTotal: 12,
|
|
trend: -50
|
|
},
|
|
users: {
|
|
today: 21,
|
|
yesterday: 6,
|
|
monthTotal: 27,
|
|
trend: 250
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-page {
|
|
padding: 0;
|
|
background-color: #f0f2f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 兼容旧布局标识，样式逻辑已由 .kpi-grid 接管 */
|
|
.stat-card {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* 图表区样式 */
|
|
.chart-section {
|
|
margin-top: 12px;
|
|
background-color: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.chart-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chart-icon-box {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #e6f7ff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chart-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
|
|
.period-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.period-tab {
|
|
padding: 5px 16px;
|
|
background-color: #fff;
|
|
border-left: 1px solid #d9d9d9;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.period-tab:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.period-tab.active {
|
|
background-color: #1890ff;
|
|
border-color: #1890ff;
|
|
}
|
|
|
|
.period-tab.active .tab-text {
|
|
color: #fff;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 14px;
|
|
color: #595959;
|
|
}
|
|
|
|
.chart-body {
|
|
width: 100%;
|
|
}
|
|
|
|
.bottom-charts {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
}
|
|
|
|
.half-width {
|
|
flex: 1;
|
|
min-width: 400px;
|
|
}
|
|
|
|
.chart-icon-box.user { background-color: #e6f7ff; }
|
|
.chart-icon-box.buy { background-color: #f0f5ff; }
|
|
|
|
/* 卡片底部 */
|
|
.card-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.footer-label {
|
|
font-size: 13px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.footer-value {
|
|
font-size: 13px;
|
|
color: #262626;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.home-page {
|
|
padding: 0;
|
|
}
|
|
|
|
.bottom-charts {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.half-width {
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* 调整图表头部在移动端的展示 */
|
|
.chart-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-right {
|
|
width: 100%;
|
|
}
|
|
|
|
.period-tabs {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.period-tab {
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|