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

89
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>
<image class="qr-img" src="/static/logo.png" mode="aspectFit"></image>
<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>
<image class="mp-qr-mock" src="/static/logo.png" 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,4 +392,3 @@ const closeQrModal = () => {
</style>