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

99
pages/mall/admin/order/order-statistics/index.uvue
View File

@@ -1,9 +1,9 @@
<template>
<template>
<view class="order-statistic-page">
<!-- 鏃堕棿閫夋嫨鍗＄墖 -->
<!-- 时间选择卡片 -->
<view class="filter-card">
<view class="filter-item">
<text class="filter-label">鏃堕棿閫夋嫨锛?/text>
<text class="filter-label">时间选择：</text>
<view class="date-picker-mock">
<image class="calendar-icon" src="/static/icons/calendar.png" mode="aspectFit" />
<text class="date-range">2026/01/04 - 2026/02/02</text>
@@ -11,71 +11,71 @@
</view>
</view>
<!-- 鏁版嵁姹囨€诲崱鐗?-->
<!-- 数据汇总卡片 -->
<view class="stat-cards-row">
<!-- 璁㈠崟閲?-->
<!-- 订单量 -->
<view class="stat-card">
<view class="icon-wrap blue-bg">
<view class="custom-icon icon-order"></view>
</view>
<view class="stat-info">
<text class="stat-value">209</text>
<text class="stat-desc">璁㈠崟閲?/text>
<text class="stat-desc">订单量</text>
</view>
</view>
<!-- 璁㈠崟閿€鍞 -->
<!-- 订单销售额 -->
<view class="stat-card">
<view class="icon-wrap orange-bg">
<view class="custom-icon icon-money"></view>
</view>
<view class="stat-info">
<text class="stat-value">443254.62</text>
<text class="stat-desc">璁㈠崟閿€鍞</text>
<text class="stat-desc">订单销售额</text>
</view>
</view>
<!-- 閫€娆捐鍗曟暟 -->
<!-- 退款订单数 -->
<view class="stat-card">
<view class="icon-wrap green-bg">
<view class="custom-icon icon-refund"></view>
</view>
<view class="stat-info">
<text class="stat-value">0</text>
<text class="stat-desc">閫€娆捐鍗曟暟</text>
<text class="stat-desc">退款订单数</text>
</view>
</view>
<!-- 閫€娆鹃噾棰?-->
<!-- 退款金额 -->
<view class="stat-card last-card">
<view class="icon-wrap pink-bg">
<view class="custom-icon icon-refund-money"></view>
</view>
<view class="stat-info">
<text class="stat-value">0</text>
<text class="stat-desc">閫€娆鹃噾棰?/text>
<text class="stat-desc">退款金额</text>
</view>
</view>
</view>
<!-- 钀ヤ笟瓒嬪娍鍥捐〃 -->
<!-- 营业趋势图表 -->
<view class="chart-card">
<view class="card-header">
<text class="card-title">钀ヤ笟瓒嬪娍</text>
<text class="card-title">营业趋势</text>
</view>
<view class="chart-container">
<EChartsView :option="trendOption" class="trend-chart" />
</view>
</view>
<!-- 搴曢儴鍙屽浘琛ㄥ尯鍩?-->
<!-- 底部双图表区域 -->
<view class="bottom-charts-row">
<!-- 璁㈠崟鏉ユ簮鍒嗘瀽 -->
<!-- 订单来源分析 -->
<view class="bottom-chart-card">
<view class="card-header-row">
<text class="card-title">璁㈠崟鏉ユ簮鍒嗘瀽</text>
<text class="card-title">订单来源分析</text>
<view class="style-toggle">
<text class="toggle-text">鍒囨崲鏍峰紡</text>
<text class="toggle-text">切换样式</text>
</view>
</view>
<view class="pie-chart-container">
@@ -83,20 +83,20 @@
</view>
</view>
<!-- 璁㈠崟绫诲瀷鍒嗘瀽 -->
<!-- 订单类型分析 -->
<view class="bottom-chart-card">
<view class="card-header-row">
<text class="card-title">璁㈠崟绫诲瀷鍒嗘瀽</text>
<text class="card-title">订单类型分析</text>
<view class="style-toggle">
<text class="toggle-text">鍒囨崲鏍峰紡</text>
<text class="toggle-text">切换样式</text>
</view>
</view>
<view class="type-table-container">
<view class="table-header">
<text class="th-text col-id">搴忓彿</text>
<text class="th-text col-name">鏉ユ簮</text>
<text class="th-text col-money">閲戦</text>
<text class="th-text col-rate">鍗犳瘮鐜?/text>
<text class="th-text col-id">序号</text>
<text class="th-text col-name">来源</text>
<text class="th-text col-money">金额</text>
<text class="th-text col-rate">占比率</text>
</view>
<view class="table-body">
<view v-for="(item, index) in orderTypeData" :key="index" class="table-row">
@@ -121,16 +121,16 @@
import { ref, onMounted } from 'vue'
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
const title = ref<string>('璁㈠崟缁熻')
const title = ref<string>('订单统计')
const trendOption = ref<any>({})
const sourceOption = ref<any>({})
const orderTypeData = ref([
{ name: '鏅€氳鍗?, amount: '430986.62', rate: '97.23' },
{ name: '鎷煎洟璁㈠崟', amount: '7127', rate: '1.60' },
{ name: '棰勫敭璁㈠崟', amount: '4835', rate: '1.09' },
{ name: '绉掓潃璁㈠崟', amount: '306', rate: '0.06' },
{ name: '鐮嶄环璁㈠崟', amount: '0', rate: '0.00' }
{ name: '普通订单', amount: '430986.62', rate: '97.23' },
{ name: '拼团订单', amount: '7127', rate: '1.60' },
{ name: '预售订单', amount: '4835', rate: '1.09' },
{ name: '秒杀订单', amount: '306', rate: '0.06' },
{ name: '砍价订单', amount: '0', rate: '0.00' }
])
onMounted(() => {
@@ -140,7 +140,7 @@ onMounted(() => {
})
/**
* 杞崲 UTS 瀵硅薄涓虹函 JS 瀵硅薄锛岀‘淇?ECharts 鑳芥纭В鏋?
* 转换 UTS 对象为纯 JS 对象，确保 ECharts 能正确解析
*/
function toPlainObject(obj: any): any {
if (obj == null) return null
@@ -188,7 +188,7 @@ function initSourceChart() {
color: ['#1890ff', '#52c41a', '#597ef7', '#ffc53d', '#ff7875'],
series: [
{
name: '璁㈠崟鏉ユ簮',
name: '订单来源',
type: 'pie',
radius: ['45%', '70%'],
center: ['40%', '50%'],
@@ -202,8 +202,8 @@ function initSourceChart() {
show: true
},
data: [
{ value: 1048, name: '鍏紬鍙? },
{ value: 735, name: '灏忕▼搴? },
{ value: 1048, name: '公众号' },
{ value: 735, name: '小程序' },
{ value: 580, name: 'H5' },
{ value: 484, name: 'PC' },
{ value: 300, name: 'APP' }
@@ -236,7 +236,7 @@ function initTrendChart() {
}
},
legend: {
data: ['璁㈠崟閲戦', '璁㈠崟閲?, '閫€娆鹃噾棰?, '閫€娆捐鍗曢噺'],
data: ['订单金额', '订单量', '退款金额', '退款订单量'],
top: 10,
right: 'center',
icon: 'circle',
@@ -263,7 +263,7 @@ function initTrendChart() {
},
series: [
{
name: '璁㈠崟閲戦',
name: '订单金额',
type: 'line',
smooth: false,
symbol: 'circle',
@@ -273,19 +273,19 @@ function initTrendChart() {
data: orderAmount
},
{
name: '璁㈠崟閲?,
name: '订单量',
type: 'line',
itemStyle: { color: '#5ad8a6' },
data: dates.map((_ : string) : number => Math.floor(Math.random() * 20))
},
{
name: '閫€娆鹃噾棰?,
name: '退款金额',
type: 'line',
itemStyle: { color: '#ff9d4d' },
data: dates.map((_ : string) : number => 0)
},
{
name: '閫€娆捐鍗曢噺',
name: '退款订单量',
type: 'line',
itemStyle: { color: '#9270ca' },
data: dates.map((_ : string) : number => 0)
@@ -299,8 +299,8 @@ function initTrendChart() {
<style scoped lang="scss">
.order-statistic-page {
/* padding removed */
padding: 16px;
background-color: #f0f2f5;
min-height: 100%;
}
@@ -438,7 +438,7 @@ function initTrendChart() {
color: #595959;
}
/* 缁熶竴鍒楀涓庡榻愭柟寮?*/
/* 统一列宽与对齐方式 */
.col-id { width: 80px; text-align: center; }
.col-name { flex: 1; text-align: left; padding-left: 40px; }
.col-money { width: 180px; text-align: left; }
@@ -461,7 +461,7 @@ function initTrendChart() {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start; /* 鏀逛负宸﹀榻愶紝涓庤〃澶村榻愭牱寮忎竴鑷?*/
justify-content: flex-start; /* 改为左对齐，与表头对齐样式一致 */
}
.progress-wrap {
@@ -505,7 +505,7 @@ function initTrendChart() {
margin-right: 20px;
}
/* 棰滆壊鑳屾櫙 - 1:1 鍖归厤鎴浘 */
/* 颜色背景 - 1:1 匹配截图 */
.blue-bg {
background-color: #e6f7ff;
border: 2px solid #bae7ff;
@@ -541,7 +541,7 @@ function initTrendChart() {
margin-top: 4px;
}
/* 鑷畾涔夊浘鏍?1:1 褰㈢姸妯℃嫙 - 鍐呴儴浣跨敤浼厓绱犳垨褰㈢姸妯℃嫙鎴浘褰㈢姸 */
/* 自定义图标 1:1 形状模拟 - 内部使用伪元素或形状模拟截图形状 */
.custom-icon {
width: 24px;
height: 24px;
@@ -563,7 +563,7 @@ function initTrendChart() {
background-color: #faad14;
border-radius: 50%;
&::after {
content: '锟?;
content: '￥';
color: #fff;
font-size: 12px;
font-weight: bold;
@@ -575,7 +575,7 @@ function initTrendChart() {
background-color: #52c41a;
border-radius: 4px;
&::before {
content: '鈫?;
content: '↺';
color: #fff;
font-size: 16px;
display: flex; justify-content: center; align-items: center; height: 100%;
@@ -586,7 +586,7 @@ function initTrendChart() {
background-color: #eb2f96;
border-radius: 50%;
&::after {
content: '鈭?;
content: '−';
color: #fff;
font-size: 18px;
display: flex; justify-content: center; align-items: center; height: 100%;
@@ -602,4 +602,3 @@ function initTrendChart() {
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
</style>