huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
huangzhenbao
2026-02-02 20:36:54 +08:00
parent 21f4a0fa96
commit f4af5dded9
7 changed files with 727 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

510
layouts/admin/pages/HomeIndex.uvue
View File

@@ -1,26 +1,147 @@
<template>
<view class="home-page">
<view class="welcome-section">
<text class="welcome-title">欢迎使用 CRMEB 管理后台</text>
<text class="welcome-subtitle">Welcome to CRMEB Admin</text>
<!-- 数据统计卡片行 -->
<view class="stats-row">
<!-- 销售额卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">销售额</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">91.1</view>
<view class="card-meta">
<text class="meta-text">昨日 2740</text>
<text class="meta-trend down">日环比 -96.67% ▼</text>
</view>
<view class="card-footer">
<text class="footer-label">本月销售额</text>
<text class="footer-value">2831.1元</text>
</view>
</view>
<!-- 用户访问量卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">用户访问量</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">224</view>
<view class="card-meta">
<text class="meta-text">昨日 136</text>
<text class="meta-trend up">日环比 64.7% ▲</text>
</view>
<view class="card-footer">
<text class="footer-label">本月访问量</text>
<text class="footer-value">360Pv</text>
</view>
</view>
<!-- 订单量卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">订单量</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">4</view>
<view class="card-meta">
<text class="meta-text">昨日 8</text>
<text class="meta-trend down">日环比 -50% ▼</text>
</view>
<view class="card-footer">
<text class="footer-label">本月订单量</text>
<text class="footer-value">12单</text>
</view>
</view>
<!-- 新增用户卡片 -->
<view class="stat-card">
<view class="card-header">
<text class="card-title">新增用户</text>
<view class="tag today">今日</view>
</view>
<view class="card-value">21</view>
<view class="card-meta">
<text class="meta-text">昨日 6</text>
<text class="meta-trend up">日环比 250% ▲</text>
</view>
<view class="card-footer">
<text class="footer-label">本月新增用户</text>
<text class="footer-value">27人</text>
</view>
</view>
</view>
<view class="quick-stats">
<view class="stat-card">
<text class="stat-value">0</text>
<text class="stat-label">今日订单</text>
<!-- 订单趋势图表区 -->
<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="stat-card">
<text class="stat-value">0</text>
<text class="stat-label">今日销售额</text>
<view class="chart-body">
<AnalyticsComboChart
:xLabels="chartData.x"
:gmv="chartData.gmv"
:orders="chartData.orders"
:height="360"
/>
</view>
<view class="stat-card">
<text class="stat-value">0</text>
<text class="stat-label">新增用户</text>
</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="stat-card">
<text class="stat-value">0</text>
<text class="stat-label">待处理订单</text>
<!-- 购买用户统计 -->
<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>
@@ -28,70 +149,343 @@
<script setup lang="uts">
/**
* 管理后台首页组件
* 在 AdminLayout 内部显示
* 管理后台首页 - CRMEB 数据统计
* 1:1 复刻 CRMEB 首页设计
*/
import { ref } from 'vue'
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'
// 这里可以添加首页的数据和逻辑
// 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: 24px;
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.welcome-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 48px 32px;
border-radius: 12px;
margin-bottom: 24px;
text-align: center;
}
.welcome-title {
display: block;
font-size: 32px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
}
.welcome-subtitle {
display: block;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
.quick-stats {
.stats-row {
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;
}
/* 统计卡片 */
.stat-card {
flex: 1;
min-width: 200px;
min-width: 280px;
background-color: #ffffff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
text-align: center;
border-radius: 4px;
padding: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s;
}
.stat-value {
display: block;
font-size: 36px;
font-weight: 600;
color: #1890ff;
margin-bottom: 8px;
.stat-card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.stat-label {
display: block;
/* 卡片头部 */
.card-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.card-title {
font-size: 14px;
color: #666666;
font-weight: 400;
}
.tag {
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
}
.tag.today {
background-color: #e8f4ff;
color: #1890ff;
}
/* 卡片主值 */
.card-value {
font-size: 32px;
font-weight: 500;
color: #262626;
margin-bottom: 12px;
line-height: 1.2;
}
/* 卡片元数据 */
.card-meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
}
.meta-text {
font-size: 13px;
color: #8c8c8c;
}
.meta-trend {
font-size: 13px;
font-weight: 500;
}
.meta-trend.up {
color: #ff4d4f;
}
.meta-trend.down {
color: #52c41a;
}
/* 图表区样式 */
.chart-section {
margin-top: 16px;
background-color: #ffffff;
border-radius: 4px;
padding: 20px;
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: 24px;
}
.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: 16px;
display: flex;
flex-direction: row;
gap: 16px;
}
.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: 1400px) {
.stat-card {
min-width: calc(50% - 8px);
}
}
@media screen and (max-width: 1024px) {
.bottom-charts {
flex-direction: column;
}
.half-width {
min-width: 100%;
}
}
@media screen and (max-width: 768px) {
.home-page {
padding: 12px;
}
.stats-row {
gap: 12px;
}
.stat-card {
min-width: 100%;
padding: 16px;
}
.card-value {
font-size: 28px;
}
}
</style>