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-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
pages/mall/admin/finance/balance_stats.uvue
View File

@@ -1,63 +1,63 @@
<template>
<template>
<view class="finance-balance-stats">
<!-- 椤堕儴鏁版嵁缁熻鍗＄墖 (3鍒楀竷灞€) -->
<!-- 顶部数据统计卡片 (3列布局) -->
<view class="stats-grid">
<view class="stat-card border-shadow">
<view class="stat-icon-circle bg-blue">
<text class="icon-white">馃挵</text>
<text class="icon-white">💰</text>
</view>
<view class="stat-content">
<text class="stat-value">1447117274.55</text>
<text class="stat-label">褰撳墠浣欓</text>
<text class="stat-label">当前余额</text>
</view>
</view>
<view class="stat-card border-shadow">
<view class="stat-icon-circle bg-orange">
<text class="icon-white">馃彟</text>
<text class="icon-white">🏦</text>
</view>
<view class="stat-content">
<text class="stat-value">1602611838.49</text>
<text class="stat-label">绱浣欓</text>
<text class="stat-label">累计余额</text>
</view>
</view>
<view class="stat-card border-shadow">
<view class="stat-icon-circle bg-green">
<text class="icon-white">馃挸</text>
<text class="icon-white">💳</text>
</view>
<view class="stat-content">
<text class="stat-value">155494563.94</text>
<text class="stat-label">绱娑堣€椾綑棰?/text>
<text class="stat-label">累计消耗余额</text>
</view>
</view>
</view>
<!-- 鏃堕棿绛涢€夊尯 -->
<!-- 时间筛选区 -->
<view class="filter-bar border-shadow">
<view class="filter-item">
<text class="filter-label">鏃堕棿閫夋嫨:</text>
<text class="filter-label">时间选择:</text>
<view class="date-picker-wrap">
<text class="calendar-icon">馃搮</text>
<text class="calendar-icon">📅</text>
<text class="date-range">2026/01/05 - 2026/02/03</text>
</view>
</view>
</view>
<!-- 瓒嬪娍鍥捐〃鍖?(CRMEB 1:1) -->
<!-- 趋势图表区 (CRMEB 1:1) -->
<view class="chart-box border-shadow">
<view class="chart-header">
<text class="chart-title">浣欓浣跨敤瓒嬪娍</text>
<text class="chart-title">余额使用趋势</text>
<view class="chart-legend">
<view class="legend-item">
<view class="dot blue-dot"></view>
<text class="legend-txt">浣欓绉疮</text>
<text class="legend-txt">余额积累</text>
</view>
<view class="legend-item">
<view class="dot green-dot"></view>
<text class="legend-txt">浣欓娑堣€?/text>
<text class="legend-txt">余额消耗</text>
</view>
</view>
<view class="chart-ops">
<text class="op-icon">馃摜</text>
<text class="op-icon">📥</text>
</view>
</view>
<view class="main-chart-wrap">
@@ -65,26 +65,26 @@
</view>
</view>
<!-- 搴曢儴鍙屽垪鍒嗘瀽 -->
<!-- 底部双列分析 -->
<view class="bottom-analysis">
<view class="analysis-box border-shadow">
<view class="box-header">
<text class="box-title">浣欓鏉ユ簮鍒嗘瀽</text>
<text class="box-title">余额来源分析</text>
<view class="btn-toggle" @click="toggleSourceStyle">
<text class="toggle-txt">鍒囨崲鏍峰紡</text>
<text class="toggle-txt">切换样式</text>
</view>
</view>
<view class="chart-container">
<!-- 鏍峰紡 0: 鍥捐〃 -->
<!-- 样式 0: 图表 -->
<EChartsView v-if="sourceStyleMode == 0 && sourceOption != null" :option="sourceOption" class="pie-chart" />
<!-- 鏍峰紡 1: 鍒楄〃 -->
<!-- 样式 1: 列表 -->
<view v-if="sourceStyleMode == 1" class="stats-table">
<view class="table-header">
<text class="th col-idx">搴忓彿</text>
<text class="th col-name">鏉ユ簮</text>
<text class="th col-amount">閲戦</text>
<text class="th col-percent">鍗犳瘮鐜?/text>
<text class="th col-idx">序号</text>
<text class="th col-name">来源</text>
<text class="th col-amount">金额</text>
<text class="th col-percent">占比率</text>
</view>
<scroll-view class="table-body">
<view class="table-row" v-for="(item, index) in sourceData" :key="index">
@@ -104,22 +104,22 @@
</view>
<view class="analysis-box border-shadow">
<view class="box-header">
<text class="box-title">浣欓娑堣€?/text>
<text class="box-title">余额消耗</text>
<view class="btn-toggle" @click="toggleConsumptionStyle">
<text class="toggle-txt">鍒囨崲鏍峰紡</text>
<text class="toggle-txt">切换样式</text>
</view>
</view>
<view class="chart-container">
<!-- 鏍峰紡 0: 鍥捐〃 -->
<!-- 样式 0: 图表 -->
<EChartsView v-if="consumptionStyleMode == 0 && consumptionOption != null" :option="consumptionOption" class="pie-chart" />
<!-- 鏍峰紡 1: 鍒楄〃 -->
<!-- 样式 1: 列表 -->
<view v-if="consumptionStyleMode == 1" class="stats-table">
<view class="table-header">
<text class="th col-idx">搴忓彿</text>
<text class="th col-name">鏉ユ簮</text>
<text class="th col-amount">閲戦</text>
<text class="th col-percent">鍗犳瘮鐜?/text>
<text class="th col-idx">序号</text>
<text class="th col-name">来源</text>
<text class="th col-amount">金额</text>
<text class="th col-percent">占比率</text>
</view>
<scroll-view class="table-body">
<view class="table-row" v-for="(item, index) in consumptionDataList" :key="index">
@@ -149,28 +149,28 @@ const trendOption = ref<any>(null)
const sourceOption = ref<any>(null)
const consumptionOption = ref<any>(null)
// 鏍峰紡鍒囨崲鐘舵€? 0=鍥捐〃, 1=鍒楄〃
// 样式切换状态: 0=图表, 1=列表
const sourceStyleMode = ref(0)
const consumptionStyleMode = ref(0)
// 缁熻鏁版嵁 (浣跨敤 ref 淇濊瘉鍝嶅簲寮?
// 统计数据 (使用 ref 保证响应式)
const sourceData = ref([
{ value: 125000.00, name: '绯荤粺澧炲姞', percent: 40.00 },
{ value: 93750.00, name: '鐢ㄦ埛鍏呭€?, percent: 30.00 },
{ value: 78125.00, name: '浣ｉ噾鎻愮幇', percent: 25.00 },
{ value: 62500.00, name: '鎶藉璧犻€?, percent: 20.00 },
{ value: 46875.00, name: '鍟嗗搧閫€娆?, percent: 15.00 }
{ value: 125000.00, name: '系统增加', percent: 40.00 },
{ value: 93750.00, name: '用户充值', percent: 30.00 },
{ value: 78125.00, name: '佣金提现', percent: 25.00 },
{ value: 62500.00, name: '抽奖赠送', percent: 20.00 },
{ value: 46875.00, name: '商品退款', percent: 15.00 }
])
const consumptionDataList = ref([
{ value: 435692.51, name: '璐拱鍟嗗搧', percent: 50.00 },
{ value: 8060.18, name: '璐拱浼氬憳', percent: 20.00 },
{ value: 0.00, name: '鍏呭€奸€€娆?, percent: 15.00 },
{ value: 0.00, name: '绯荤粺鍑忓皯', percent: 15.00 }
{ value: 435692.51, name: '购买商品', percent: 50.00 },
{ value: 8060.18, name: '购买会员', percent: 20.00 },
{ value: 0.00, name: '充值退款', percent: 15.00 },
{ value: 0.00, name: '系统减少', percent: 15.00 }
])
/**
* 杞崲 Plain Object 宸ュ叿
* 转换 Plain Object 工具
*/
function toPlainObject(obj : any) : any {
if (obj == null) return null
@@ -225,14 +225,14 @@ function initTrendChart() {
},
series: [
{
name: '浣欓绉疮',
name: '余额积累',
type: 'line',
smooth: true,
data: accumulationData,
itemStyle: { color: '#1890ff' }
},
{
name: '浣欓娑堣€?,
name: '余额消耗',
type: 'line',
smooth: true,
data: consumptionData,
@@ -250,12 +250,12 @@ function initSourceChart() {
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16', '#e8684a'],
series: [
{
name: '浣欓鏉ユ簮',
name: '余额来源',
type: 'pie',
radius: '70%',
center: ['40%', '50%'],
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
// 鍏抽敭鐐癸細灏嗗浘琛ㄦ暟鎹槧灏勫埌 percent 瀛楁
// 关键点：将图表数据映射到 percent 字段
data: sourceData.value.map(item => ({ value: item.percent, name: item.name }))
}
]
@@ -270,12 +270,12 @@ function initConsumptionChart() {
color: ['#5b8ff9', '#5ad8a6', '#5d7092', '#f6bd16'],
series: [
{
name: '浣欓娑堣€?,
name: '余额消耗',
type: 'pie',
radius: '70%',
center: ['40%', '50%'],
label: { show: true, fontSize: 11, formatter: '{b}\n{c}%' },
// 鍏抽敭鐐癸細灏嗗浘琛ㄦ暟鎹槧灏勫埌 percent 瀛楁
// 关键点：将图表数据映射到 percent 字段
data: consumptionDataList.value.map(item => ({ value: item.percent, name: item.name }))
}
]
@@ -311,7 +311,7 @@ function toggleConsumptionStyle() {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
/* 椤堕儴鍗＄墖 */
/* 顶部卡片 */
.stats-grid {
display: flex;
flex-direction: row;
@@ -365,7 +365,7 @@ function toggleConsumptionStyle() {
margin-top: 4px;
}
/* 鏃堕棿绛涢€夊尯 */
/* 时间筛选区 */
.filter-bar {
padding: 16px 24px;
margin-bottom: 20px;
@@ -397,7 +397,7 @@ function toggleConsumptionStyle() {
.calendar-icon { font-size: 14px; color: #c0c4cc; margin-right: 10px; }
.date-range { font-size: 14px; color: #606266; }
/* 瓒嬪娍鍥捐〃鍖?*/
/* 趋势图表区 */
.chart-box {
padding: 24px;
margin-bottom: 20px;
@@ -436,7 +436,7 @@ function toggleConsumptionStyle() {
height: 100%;
}
/* 搴曢儴鍒嗘瀽 */
/* 底部分析 */
.bottom-analysis {
display: flex;
flex-direction: row;
@@ -478,7 +478,7 @@ function toggleConsumptionStyle() {
height: 100%;
}
/* 鍒楄〃鏍峰紡 */
/* 列表样式 */
.stats-table {
display: flex;
flex-direction: column;
@@ -521,7 +521,7 @@ function toggleConsumptionStyle() {
.progress-container {
flex: 1;
height: 8px;
background-color: #f5f5f5;
border-radius: 4px;
margin-right: 10px;
overflow: hidden;
@@ -539,4 +539,3 @@ function toggleConsumptionStyle() {
color: #666;
}
</style>