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

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>