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 12:06:33 +08:00
parent b7545173c6
commit d00f0b7412
83 changed files with 3901 additions and 2354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pages/mall/admin/order/cashier-order/index.uvue
View File

@@ -1,49 +1,49 @@
<template>
<template>
<view class="admin-cashier-order">
<view class="content-body">
<!-- 顶部过滤栏 -->
<!-- 椤堕儴杩囨护鏍?-->
<view class="filter-card border-shadow">
<view class="filter-item">
<text class="label-txt">创建时间:</text>
<text class="label-txt">鍒涘缓鏃堕棿:</text>
<view class="date-picker-mock">
<text class="date-txt">开始日期</text>
<text class="date-txt">寮€濮嬫棩鏈?/text>
<text class="date-split">-</text>
<text class="date-txt">结束日期</text>
<text class="calendar-ic">📅</text>
<text class="date-txt">缁撴潫鏃ユ湡</text>
<text class="calendar-ic">馃搮</text>
</view>
</view>
<view class="filter-item">
<text class="label-txt">订单号:</text>
<input class="search-input" placeholder="请输入订单号" v-model="orderId" />
<text class="label-txt">璁㈠崟鍙?</text>
<input class="search-input" placeholder="璇疯緭鍏ヨ鍗曞彿" v-model="orderId" />
</view>
<view class="filter-item">
<text class="label-txt">用户名:</text>
<input class="search-input" placeholder="请输入用户名" v-model="username" />
<text class="label-txt">鐢ㄦ埛鍚?</text>
<input class="search-input" placeholder="璇疯緭鍏ョ敤鎴峰悕" v-model="username" />
</view>
<view class="btn-query" @click="handleQuery">
<text class="query-txt">查询</text>
<text class="query-txt">鏌ヨ</text>
</view>
</view>
<!-- 主要内容区域 -->
<!-- 涓昏鍐呭鍖哄煙 -->
<view class="table-card border-shadow">
<view class="card-header">
<view class="btn-primary-blue" @click="openQrModal">
<text class="btn-txt">查看收款二维码</text>
<text class="btn-txt">鏌ョ湅鏀舵浜岀淮鐮?/text>
</view>
</view>
<!-- 数据表格 -->
<!-- 鏁版嵁琛ㄦ牸 -->
<view class="table-container">
<view class="table-header-row">
<view class="th" style="flex: 1.5;">订单号</view>
<view class="th" style="flex: 1.2;">用户信息</view>
<view class="th" style="width: 150px;">实际支付</view>
<view class="th" style="width: 150px;">优惠价格</view>
<view class="th" style="width: 200px;">支付时间</view>
<view class="th" style="flex: 1.5;">璁㈠崟鍙?/view>
<view class="th" style="flex: 1.2;">鐢ㄦ埛淇℃伅</view>
<view class="th" style="width: 150px;">瀹為檯鏀粯</view>
<view class="th" style="width: 150px;">浼樻儬浠锋牸</view>
<view class="th" style="width: 200px;">鏀粯鏃堕棿</view>
</view>
<view class="table-body">
@@ -57,13 +57,13 @@
</view>
</view>
<!-- 分页 -->
<!-- 鍒嗛〉 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ total }} 条</text>
<text class="total-txt">鍏?{{ total }} 鏉?/text>
</view>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
<text class="page-val">15鏉?椤?鈻?/text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
@@ -71,31 +71,31 @@
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<text class="jump-txt">鍓嶅線</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
<text class="jump-txt">椤?/text>
</view>
</view>
</view>
</view>
<!-- 收款码弹窗 -->
<!-- 鏀舵鐮佸脊绐?-->
<view v-if="showQrModal" :class="['modal-mask', isClosing ? 'mask-fade-out' : '']" @click="closeQrModal">
<view :class="['modal-content', isClosing ? 'scale-out' : 'scale-in']" @click.stop="">
<view class="modal-header">
<text class="modal-title">收款码</text>
<text class="close-btn" @click="closeQrModal">×</text>
<text class="modal-title">鏀舵鐮?/text>
<text class="close-btn" @click="closeQrModal">脳</text>
</view>
<view class="modal-body">
<view class="qr-item">
<image class="qr-img" src="https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg" mode="aspectFit"></image>
<text class="qr-label">公众号二维码</text>
<text class="qr-label">鍏紬鍙蜂簩缁寸爜</text>
</view>
<view class="qr-item">
<view class="qr-placeholder-mp">
<image class="mp-qr-mock" src="https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg" mode="aspectFit"></image>
</view>
<text class="qr-label">小程序二维码</text>
<text class="qr-label">灏忕▼搴忎簩缁寸爜</text>
</view>
</view>
</view>
@@ -118,14 +118,14 @@ const orderId = ref('')
const username = ref('')
const total = ref(12)
const orderList = ref<CashierOrder[]>([
{ orderId: 'hy536720518414336000', userInfo: '东流 | 76058', payPrice: 1.00, discountPrice: 0.00, payTime: '2026-01-21 01:35:43' },
{ orderId: 'hy529509398574268416', userInfo: '半个栗子 | 81997', payPrice: 10000.00, discountPrice: 0.00, payTime: '2026-01-01 04:01:18' },
{ orderId: 'hy511477797936431104', userInfo: '莉莉 | 80736', payPrice: 10.00, discountPrice: 0.00, payTime: '2025-11-12 09:50:09' },
{ orderId: 'hy536720518414336000', userInfo: '涓滄祦 | 76058', payPrice: 1.00, discountPrice: 0.00, payTime: '2026-01-21 01:35:43' },
{ orderId: 'hy529509398574268416', userInfo: '鍗婁釜鏍楀瓙 | 81997', payPrice: 10000.00, discountPrice: 0.00, payTime: '2026-01-01 04:01:18' },
{ orderId: 'hy511477797936431104', userInfo: '鑾夎帀 | 80736', payPrice: 10.00, discountPrice: 0.00, payTime: '2025-11-12 09:50:09' },
{ orderId: 'hy507152261823070208', userInfo: '. . . | 71546', payPrice: 0.10, discountPrice: 0.00, payTime: '2025-10-31 11:22:01' },
{ orderId: 'hy506826113427701760', userInfo: 'A梁 | 80363', payPrice: 0.10, discountPrice: 0.00, payTime: '2025-10-30 13:46:01' },
{ orderId: 'hy504707908026499072', userInfo: '前前前前 | 80225', payPrice: 2252.00, discountPrice: 0.00, payTime: '2025-10-24 17:29:02' },
{ orderId: 'hy494505602832138240', userInfo: '张总说 | 40028', payPrice: 1.00, discountPrice: 0.00, payTime: '2025-09-26 13:48:43' },
{ orderId: 'hy490819329198129152', userInfo: '虚伪 | 79027', payPrice: 10.00, discountPrice: 0.00, payTime: '2025-09-16 09:40:47' }
{ orderId: 'hy506826113427701760', userInfo: 'A姊?| 80363', payPrice: 0.10, discountPrice: 0.00, payTime: '2025-10-30 13:46:01' },
{ orderId: 'hy504707908026499072', userInfo: '鍓嶅墠鍓嶅墠 | 80225', payPrice: 2252.00, discountPrice: 0.00, payTime: '2025-10-24 17:29:02' },
{ orderId: 'hy494505602832138240', userInfo: '寮犳€昏 | 40028', payPrice: 1.00, discountPrice: 0.00, payTime: '2025-09-26 13:48:43' },
{ orderId: 'hy490819329198129152', userInfo: '铏氫吉 | 79027', payPrice: 10.00, discountPrice: 0.00, payTime: '2025-09-16 09:40:47' }
])
const showQrModal = ref(false)
@@ -166,7 +166,7 @@ const closeQrModal = () => {
gap: 20px;
}
/* 过滤栏 */
/* 杩囨护鏍?*/
.filter-card {
padding: 24px;
display: flex;
@@ -221,7 +221,7 @@ const closeQrModal = () => {
}
.query-txt { color: #fff; font-size: 14px; }
/* 表格区域 */
/* 琛ㄦ牸鍖哄煙 */
.table-card {
background-color: #fff;
display: flex;
@@ -272,7 +272,7 @@ const closeQrModal = () => {
.td-txt { font-size: 14px; color: #515a6e; }
/* 分页 */
/* 鍒嗛〉 */
.pagination-footer {
padding: 24px;
display: flex;
@@ -301,7 +301,7 @@ const closeQrModal = () => {
.jump-txt { font-size: 14px; color: #606266; }
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
/* Modal 弹窗逻辑 */
/* Modal 寮圭獥閫昏緫 */
.modal-mask {
position: fixed;
top: 0;
@@ -317,7 +317,7 @@ const closeQrModal = () => {
.modal-content {
width: 600px;
background-color: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -371,7 +371,7 @@ const closeQrModal = () => {
.qr-label { font-size: 14px; color: #666; }
/* 动画 */
/* 鍔ㄧ敾 */
.scale-in { animation: scaleIn 0.3s ease-out forwards; }
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
@@ -392,3 +392,4 @@ const closeQrModal = () => {
</style>

153
pages/mall/admin/order/list.uvue
View File

@@ -1,49 +1,49 @@
<template>
<template>
<view class="order-list-page">
<!-- 筛选区域 -->
<!-- 绛涢€夊尯鍩?-->
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">订单类型：</text>
<text class="label">璁㈠崟绫诲瀷锛?/text>
<view class="mock-select">
<text>全部订单</text>
<text>鍏ㄩ儴璁㈠崟</text>
<view class="arrow-down"></view>
</view>
</view>
<view class="filter-item">
<text class="label">支付方式：</text>
<text class="label">鏀粯鏂瑰紡锛?/text>
<view class="mock-select">
<text>全部</text>
<text>鍏ㄩ儴</text>
<view class="arrow-down"></view>
</view>
</view>
<view class="filter-item long">
<text class="label">创建时间：</text>
<text class="label">鍒涘缓鏃堕棿锛?/text>
<view class="mock-date-range">
<image class="cal-icon" src="/static/icons/calendar.png" mode="aspectFit" />
<text class="placeholder">开始日期 - 结束日期</text>
<text class="placeholder">寮€濮嬫棩鏈? - 缁撴潫鏃ユ湡</text>
</view>
</view>
<view class="filter-item search">
<text class="label">订单搜索：</text>
<text class="label">璁㈠崟鎼滅储锛?/text>
<view class="search-group">
<view class="search-select">
<text>全部</text>
<text>鍏ㄩ儴</text>
<view class="arrow-down"></view>
</view>
<input class="search-input" placeholder="请输入" />
<input class="search-input" placeholder="璇疯緭鍏? />
</view>
</view>
</view>
<view class="btn-row">
<button class="btn btn-primary">查询</button>
<button class="btn btn-default">重置</button>
<button class="btn btn-primary">鏌ヨ</button>
<button class="btn btn-default">閲嶇疆</button>
</view>
</view>
<!-- 列表数据区域 -->
<!-- 鍒楄〃鏁版嵁鍖哄煙 -->
<view class="content-card">
<!-- 状态 Tabs -->
<!-- 鐘舵€?Tabs -->
<view class="status-tabs">
<view
v-for="(tab, index) in statusTabs"
@@ -57,28 +57,28 @@
</view>
</view>
<!-- 操作按钮 -->
<!-- 鎿嶄綔鎸夐挳 -->
<view class="action-bar">
<button class="action-btn btn-blue">订单核销</button>
<button class="action-btn btn-outline">批量发货</button>
<button class="action-btn btn-outline">批量删除</button>
<button class="action-btn btn-outline">订单导出</button>
<button class="action-btn btn-blue">璁㈠崟鏍搁攢</button>
<button class="action-btn btn-outline">鎵归噺鍙戣揣</button>
<button class="action-btn btn-outline">鎵归噺鍒犻櫎</button>
<button class="action-btn btn-outline">璁㈠崟瀵煎嚭</button>
</view>
<!-- 数据表格 -->
<!-- 鏁版嵁琛ㄦ牸 -->
<view class="order-table">
<view class="thead">
<view class="th col-check">
<checkbox :checked="false" color="#1890ff" />
</view>
<view class="th col-order">订单号 | 类型</view>
<view class="th col-product">商品信息</view>
<view class="th col-user">用户信息</view>
<view class="th col-price">实际支付</view>
<view class="th col-pay">支付方式</view>
<view class="th col-time">支付时间</view>
<view class="th col-status">订单状态</view>
<view class="th col-op">操作</view>
<view class="th col-order">璁㈠崟鍙?| 绫诲瀷</view>
<view class="th col-product">鍟嗗搧淇℃伅</view>
<view class="th col-user">鐢ㄦ埛淇℃伅</view>
<view class="th col-price">瀹為檯鏀粯</view>
<view class="th col-pay">鏀粯鏂瑰紡</view>
<view class="th col-time">鏀粯鏃堕棿</view>
<view class="th col-status">璁㈠崟鐘舵€?/view>
<view class="th col-op">鎿嶄綔</view>
</view>
<view class="tbody">
@@ -86,45 +86,45 @@
<view class="td col-check">
<checkbox :checked="false" color="#1890ff" />
</view>
<!-- 订单号|类型 -->
<!-- 璁㈠崟鍙穦绫诲瀷 -->
<view class="td col-order">
<text class="order-sn">{{ item.sn }}</text>
<text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
<text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
</view>
<!-- 商品信息 -->
<!-- 鍟嗗搧淇℃伅 -->
<view class="td col-product">
<view class="product-info-wrap">
<image class="p-img" :src="item.product.img" mode="aspectFill" />
<text class="p-name">{{ item.product.name }}</text>
</view>
</view>
<!-- 用户信息 -->
<!-- 鐢ㄦ埛淇℃伅 -->
<view class="td col-user">
<text class="u-info">{{ item.user.phone }} | {{ item.user.id }}</text>
</view>
<!-- 实际支付 -->
<!-- 瀹為檯鏀粯 -->
<view class="td col-price">
<text class="price-val">{{ item.actualPrice }}</text>
</view>
<!-- 支付方式 -->
<!-- 鏀粯鏂瑰紡 -->
<view class="td col-pay">
<text class="pay-text">{{ item.payMethod }}</text>
</view>
<!-- 支付时间 -->
<!-- 鏀粯鏃堕棿 -->
<view class="td col-time">
<text class="time-text">{{ item.payTime }}</text>
</view>
<!-- 订单状态 -->
<!-- 璁㈠崟鐘舵€?-->
<view class="td col-status">
<text class="status-text">{{ item.statusName }}</text>
</view>
<!-- 操作 -->
<!-- 鎿嶄綔 -->
<view class="td col-op">
<view class="op-links">
<text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
<view class="op-link-more">
<text class="more-text">更多</text>
<text class="more-text">鏇村</text>
<view class="arrow-down-blue"></view>
</view>
</view>
@@ -139,93 +139,93 @@
<script setup lang="uts">
import { ref } from 'vue'
const activeTab = ref(2) // 默认选中待发货或待核销（手动对齐截图）
const activeTab = ref(2) // 榛樿閫変腑寰呭彂璐ф垨寰呮牳閿€锛堟墜鍔ㄥ榻愭埅鍥撅級
const statusTabs = [
{ name: '全部', count: null },
{ name: '待支付', count: 793 },
{ name: '待发货', count: 3695 },
{ name: '待核销', count: null },
{ name: '待收货', count: null },
{ name: '待评价', count: null },
{ name: '已完成', count: null },
{ name: '已退款', count: null },
{ name: '已删除', count: null }
{ name: '鍏ㄩ儴', count: null },
{ name: '寰呮敮浠?, count: 793 },
{ name: '寰呭彂璐?, count: 3695 },
{ name: '寰呮牳閿€', count: null },
{ name: '寰呮敹璐?, count: null },
{ name: '寰呰瘎浠?, count: null },
{ name: '宸插畬鎴?, count: null },
{ name: '宸查€€娆?, count: null },
{ name: '宸插垹闄?, count: null }
]
const orderData = ref([
{
sn: 'cp541336970228400128',
typeName: '秒杀订单',
typeName: '绉掓潃璁㈠崟',
typeColor: 'blue',
cancelStatus: '用户已取消',
cancelStatus: '鐢ㄦ埛宸插彇娑?,
product: {
img: '/static/logo.png',
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
name: '鐖卞鑹烘櫤鑳?濂囬亣LT01 鎶曞奖浠?瀹剁敤鍗у 瓒呴珮娓呮墜鏈轰究鎼烘姇褰辨満 (4K瓒呮竻 鏀寔...'
},
user: { phone: '188****4074', id: '82694' },
actualPrice: '未支付',
actualPrice: '鏈敮浠?,
payMethod: '--',
payTime: '--',
statusName: '未支付',
statusName: '鏈敮浠?,
primaryAction: ''
},
{
sn: 'cp541289248708362240',
typeName: '核销订单',
typeName: '鏍搁攢璁㈠崟',
typeColor: 'purple',
cancelStatus: '',
product: {
img: '/static/logo.png',
name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水...'
name: '闃胯开杈炬柉瀹樼綉 adidas BBALL CAP COT 鐢峰コ璁粌杩愬姩甯藉瓙FQ5270 浼犲澧ㄦ按...'
},
user: { phone: '你就给', id: '82703' },
user: { phone: '浣犲氨缁?, id: '82703' },
actualPrice: '90.1',
payMethod: '余额支付',
payMethod: '浣欓鏀粯',
payTime: '2026-02-02 16:10:17',
statusName: '未核销',
primaryAction: '立即核销'
statusName: '鏈牳閿€',
primaryAction: '绔嬪嵆鏍搁攢'
},
{
sn: 'cp541268226856714240',
typeName: '普通订单',
typeName: '鏅€氳鍗?,
typeColor: 'green',
cancelStatus: '',
product: {
img: '/static/logo.png',
name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060'
name: 'UR2024澶忓鏂版濂宠澶嶅彜绾姘涘洿鎰熶竴瀛楄偐鐭T鎭よ～UWG440060'
},
user: { phone: '王毅不睡了', id: '82689' },
actualPrice: '未支付',
user: { phone: '鐜嬫瘏涓嶇潯浜?, id: '82689' },
actualPrice: '鏈敮浠?,
payMethod: '--',
payTime: '--',
statusName: '未支付',
primaryAction: '编辑'
statusName: '鏈敮浠?,
primaryAction: '缂栬緫'
},
{
sn: 'cp541262080745930752',
typeName: '秒杀订单',
typeName: '绉掓潃璁㈠崟',
typeColor: 'blue',
cancelStatus: '',
product: {
img: '/static/logo.png',
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
name: '鐖卞鑹烘櫤鑳?濂囬亣LT01 鎶曞奖浠?瀹剁敤鍗у 瓒呴珮娓呮墜鏈轰究鎼烘姇褰辨満 (4K瓒呮竻 鏀寔...'
},
user: { phone: '177****8361', id: '82697' },
actualPrice: '未支付',
actualPrice: '鏈敮浠?,
payMethod: '--',
payTime: '--',
statusName: '未支付',
primaryAction: '编辑'
statusName: '鏈敮浠?,
primaryAction: '缂栬緫'
}
])
</script>
<style scoped lang="scss">
.order-list-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
/* padding removed */
}
.filter-card {
@@ -389,7 +389,7 @@ const orderData = ref([
.btn-blue { background-color: #1890ff; color: #fff; border: none; }
.btn-outline { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
/* 表格样式 */
/* 琛ㄦ牸鏍峰紡 */
.order-table {
width: 100%;
}
@@ -423,7 +423,7 @@ const orderData = ref([
justify-content: center;
}
/* 列宽控制 */
/* 鍒楀鎺у埗 */
.col-check { width: 50px; justify-content: center; align-items: center; }
.col-order { width: 220px; }
.col-product { flex: 1; }
@@ -434,7 +434,7 @@ const orderData = ref([
.col-status { width: 100px; }
.col-op { width: 120px; }
/* 单元格具体内容样式 */
/* 鍗曞厓鏍煎叿浣撳唴瀹规牱寮?*/
.order-sn { font-size: 13px; color: #262626; margin-bottom: 4px; }
.order-type { font-size: 12px; }
.blue { color: #1890ff; }
@@ -480,3 +480,4 @@ const orderData = ref([
border-top: 4px solid #1890ff;
}
</style>

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: 16px;
background-color: #f0f2f5;
/* padding removed */
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,3 +602,4 @@ function initTrendChart() {
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
</style>