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-03 21:35:57 +08:00
parent 93b42a277a
commit 3922409a25
105 changed files with 14758 additions and 5861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

366
pages/mall/admin/order/write-off-records/index.uvue
View File

@@ -1,8 +1,98 @@
<template>
<view class="page">
<view class="header">
<text class="title">{{ title }}</text>
<text class="sub-title">核销记录，查看优惠券和卡券核销情况</text>
<view class="admin-write-off">
<view class="content-body">
<!-- 顶部过滤栏 -->
<view class="filter-card border-shadow">
<view class="filter-item">
<text class="label-txt">核销日期:</text>
<view class="date-picker-mock">
<text class="date-txt">开始日期</text>
<text class="date-split">-</text>
<text class="date-txt">结束日期</text>
<text class="calendar-ic">📅</text>
</view>
</view>
<view class="filter-item">
<text class="label-txt">筛选条件:</text>
<view class="select-mock" style="width: 100px;">
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
<input class="search-input" style="width: 180px;" placeholder="请输入搜索内容" v-model="searchQuery" />
</view>
<view class="filter-item">
<text class="label-txt">选择门店:</text>
<view class="select-mock" style="width: 260px;">
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
<view class="btn-query" @click="handleQuery">
<text class="query-txt">搜索</text>
</view>
</view>
<!-- 主要内容区域 -->
<view class="table-card border-shadow">
<!-- 数据表格 -->
<view class="table-container">
<view class="table-header-row">
<view class="th" style="width: 200px;">订单号</view>
<view class="th" style="width: 150px;">用户信息</view>
<view class="th" style="width: 320px;">商品信息</view>
<view class="th" style="width: 100px;">实际支付</view>
<view class="th" style="width: 100px;">核销员</view>
<view class="th" style="width: 120px;">核销门店</view>
<view class="th" style="width: 100px;">支付状态</view>
<view class="th" style="width: 100px;">订单状态</view>
<view class="th" style="width: 160px;">下单时间</view>
</view>
<view class="table-body">
<view v-for="(item, index) in recordList" :key="index" class="table-row">
<view class="td" style="width: 200px;"><text class="td-txt">{{ item.orderId }}</text></view>
<view class="td" style="width: 150px;"><text class="td-txt">{{ item.userInfo }}</text></view>
<view class="td" style="width: 320px;">
<view class="product-info">
<image class="product-img" :src="item.productImg" mode="aspectFill"></image>
<view class="product-detail">
<text class="p-name ellipsis-2">{{ item.productName }}</text>
</view>
</view>
</view>
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.payPrice }}</text></view>
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.verifier }}</text></view>
<view class="td" style="width: 120px;"><text class="td-txt">{{ item.storeName }}</text></view>
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.payStatus }}</text></view>
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.orderStatus }}</text></view>
<view class="td" style="width: 160px;"><text class="td-txt">{{ item.createTime }}</text></view>
</view>
</view>
</view>
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
<text class="p-btn active">1</text>
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
</view>
</template>
@@ -10,14 +100,270 @@
<script setup lang="uts">
import { ref } from 'vue'
const title = ref<string>('核销记录')
interface WriteOffRecord {
orderId: string
userInfo: string
productImg: string
productName: string
payPrice: string
verifier: string
storeName: string
payStatus: string
orderStatus: string
createTime: string
}
const searchQuery = ref('')
const total = ref(10)
const recordList = ref<WriteOffRecord[]>([
{
orderId: 'cp470547161164021760',
userInfo: '张迪/77418',
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
productName: '小米家保温杯云米电热水杯杯旅行便携式烧水壶真空304不锈钢热水壶智能恒...',
payPrice: '93',
verifier: '总平台',
storeName: '提货点222',
payStatus: '余额支付',
orderStatus: '已完成',
createTime: '2025-07-22 11:06:25'
},
{
orderId: 'cp470289876680441856',
userInfo: '130****0000/22919',
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
productName: '米妍 (meyarn) 刮舌苔清洁器舌苔刷清新口气成人清洁舌苔口腔2支装 粉+蓝',
payPrice: '28.4',
verifier: '总平台',
storeName: '提货点222',
payStatus: '余额支付',
orderStatus: '待评价',
createTime: '2025-07-21 18:04:04'
},
{
orderId: 'cp462914742369910784',
userInfo: '您好亲亲/76738',
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
productName: '小米家保温杯云米电热水杯杯旅行便携式烧水壶真空304不锈钢热水壶智能恒...',
payPrice: '89.1',
verifier: '总平台',
storeName: '关东科技',
payStatus: '线下支付',
orderStatus: '已完成',
createTime: '2025-07-01 09:37:55'
},
{
orderId: 'cp450327064277417984',
userInfo: 'Leo/74412',
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
productName: '361度运动鞋男鞋【飞羽2】夏季轻透气网面缓震回弹便捷跑步鞋 羽毛白冰河...',
payPrice: '369',
verifier: '总平台',
storeName: '提货点222',
payStatus: '线下支付',
orderStatus: '待评价',
createTime: '2025-05-27 15:58:58'
},
{
orderId: 'cp439425186874261504',
userInfo: '白茶/73171',
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
productName: '【明星同款】FILA FUSION裴乐潮牌卫衣情侣老花男女宽松上衣',
payPrice: '649',
verifier: '总平台',
storeName: '关东科技',
payStatus: '余额支付',
orderStatus: '待评价',
createTime: '2025-04-27 13:58:48'
}
])
const handleQuery = () => { console.log('Searching...') }
</script>
<style scoped lang="scss">
@import '@/uni.scss';
.page { padding: $space-lg; }
.header { padding: $space-lg; border-radius: $radius; background: $background-primary; box-shadow: $shadow-xs; }
.title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $text-primary; }
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
.admin-write-off {
background-color: #f0f2f5;
min-height: 100vh;
padding: 24px;
}
.border-shadow {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.content-body {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 过滤栏 */
.filter-card {
padding: 24px;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.label-txt { font-size: 14px; color: #606266; }
.date-picker-mock {
width: 240px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
gap: 8px;
}
.date-txt { font-size: 14px; color: #c0c4cc; }
.date-split { color: #dcdfe6; }
.calendar-ic { font-size: 14px; color: #c0c4cc; margin-left: auto; }
.select-mock {
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 12px;
cursor: pointer;
}
.select-val { font-size: 14px; color: #c0c4cc; }
.arrow-down { font-size: 10px; color: #c0c4cc; }
.search-input {
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
font-size: 14px;
}
.btn-query {
background-color: #2d8cf0;
padding: 0 24px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
}
.query-txt { color: #fff; font-size: 14px; }
/* 表格区域 */
.table-card {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 20px;
}
.table-header-row {
display: flex;
flex-direction: row;
background-color: #f8f8f9;
border-bottom: 1px solid #e8eaec;
}
.th {
padding: 15px 10px;
font-size: 14px;
color: #515a6e;
font-weight: bold;
display: flex;
align-items: center;
}
.table-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #e8eaec;
min-height: 80px;
}
.table-row:hover {
background-color: #ebf7ff;
}
.td {
padding: 15px 10px;
display: flex;
align-items: center;
}
.td-txt { font-size: 14px; color: #515a6e; }
/* 商品信息列 */
.product-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.product-img {
width: 40px;
height: 40px;
border-radius: 2px;
background-color: #f5f5f5;
}
.p-name {
font-size: 12px;
color: #515a6e;
line-height: 1.4;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* 分页 */
.pagination-footer {
padding: 24px 0 0 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.total-txt { font-size: 14px; color: #606266; }
.page-val { font-size: 14px; color: #606266; border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-btns { display: flex; flex-direction: row; gap: 8px; }
.p-btn {
width: 32px;
height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; }
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.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; }
</style>