完善
This commit is contained in:
@@ -1,8 +1,100 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">售后订单管理与申请处理</text>
|
||||
<view class="admin-aftersale-order">
|
||||
<view class="content-body">
|
||||
<!-- 顶部过滤栏 -->
|
||||
<view class="filter-card border-shadow">
|
||||
<view class="filter-item">
|
||||
<text class="label-txt">退款状态:</text>
|
||||
<view class="select-mock">
|
||||
<text class="select-val">全部</text>
|
||||
<text class="arrow-down">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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>
|
||||
<input class="search-input" placeholder="请输入订单号" v-model="searchQuery" />
|
||||
</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: 180px;">退款订单号</view>
|
||||
<view class="th" style="width: 180px;">原订单号</view>
|
||||
<view class="th" style="flex: 1.5;">商品信息</view>
|
||||
<view class="th" style="width: 120px;">用户信息</view>
|
||||
<view class="th" style="width: 100px;">实际支付</view>
|
||||
<view class="th" style="width: 160px;">发起退款时间</view>
|
||||
<view class="th" style="width: 100px;">退款状态</view>
|
||||
<view class="th" style="width: 100px;">订单状态</view>
|
||||
<view class="th" style="width: 150px;">退款信息</view>
|
||||
<view class="th" style="width: 100px;">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="(item, index) in orderList" :key="item.id" class="table-row">
|
||||
<view class="td" style="width: 180px;"><text class="td-txt">{{ item.refundId }}</text></view>
|
||||
<view class="td" style="width: 180px;"><text class="td-txt">{{ item.orderId }}</text></view>
|
||||
<view class="td" style="flex: 1.5;">
|
||||
<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: 120px;"><text class="td-txt">{{ item.userInfo }}</text></view>
|
||||
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.payPrice.toFixed(2) }}</text></view>
|
||||
<view class="td" style="width: 160px;"><text class="td-txt">{{ item.refundTime }}</text></view>
|
||||
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.refundStatus }}</text></view>
|
||||
<view class="td" style="width: 100px;"><text class="td-txt">{{ item.orderStatus }}</text></view>
|
||||
<view class="td" style="width: 150px;"><text class="td-txt">{{ item.refundReason }}</text></view>
|
||||
<view class="td" style="width: 100px;">
|
||||
<view class="op-more">
|
||||
<text class="op-txt">更多</text>
|
||||
<text class="op-arrow">▼</text>
|
||||
</view>
|
||||
</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 +102,307 @@
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref<string>('售后订单')
|
||||
interface RefundOrder {
|
||||
id: number
|
||||
refundId: string
|
||||
orderId: string
|
||||
productImg: string
|
||||
productName: string
|
||||
userInfo: string
|
||||
payPrice: number
|
||||
refundTime: string
|
||||
refundStatus: string
|
||||
orderStatus: string
|
||||
refundReason: string
|
||||
}
|
||||
|
||||
const searchQuery = ref('')
|
||||
const total = ref(11)
|
||||
const orderList = ref<RefundOrder[]>([
|
||||
{
|
||||
id: 1,
|
||||
refundId: '541647750949765120',
|
||||
orderId: 'cp541646979248160768',
|
||||
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
|
||||
productName: 'FOMIX 蛋壳椅 进口头层牛皮橙色单人沙发椅Egg chair设计师蛋壳椅 Egg chai...',
|
||||
userInfo: '181****3601',
|
||||
payPrice: 7580.00,
|
||||
refundTime: '2026-02-03 15:54:47',
|
||||
refundStatus: '仅退款',
|
||||
orderStatus: '未发货',
|
||||
refundReason: '其它原因'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
refundId: '541638371601022976',
|
||||
orderId: 'cp541638302298537984',
|
||||
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
|
||||
productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
|
||||
userInfo: '陌年微凉',
|
||||
payPrice: 89.05,
|
||||
refundTime: '2026-02-03 15:17:30',
|
||||
refundStatus: '仅退款',
|
||||
orderStatus: '未发货',
|
||||
refundReason: '收货地址填错了'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
refundId: '540965628471672832',
|
||||
orderId: 'cp540873996820807680',
|
||||
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
|
||||
productName: '爱奇艺智能 奇遇LT01 投影仪 家用卧室超高清手机便携式投影机 (4K超清 支...',
|
||||
userInfo: '隆胜科技',
|
||||
payPrice: 1.00,
|
||||
refundTime: '2026-02-01 18:44:16',
|
||||
refundStatus: '仅退款',
|
||||
orderStatus: '未发货',
|
||||
refundReason: '收货地址填错了'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
refundId: '5409655559492149248',
|
||||
orderId: 'cp540964778781179904',
|
||||
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
|
||||
productName: '广儿穿了就会霹死',
|
||||
userInfo: '隆胜科技',
|
||||
payPrice: 579.00,
|
||||
refundTime: '2026-02-01 18:44:00',
|
||||
refundStatus: '仅退款',
|
||||
orderStatus: '未发货',
|
||||
refundReason: '收货地址填错了'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
refundId: '540965491796082688',
|
||||
orderId: 'cp540964551848361984',
|
||||
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
|
||||
productName: 'CHICVEN「摩登工业」科技感反光渐变羽绒服立领面包服外套女冬季',
|
||||
userInfo: '隆胜科技',
|
||||
payPrice: 900.00,
|
||||
refundTime: '2026-02-01 18:43:43',
|
||||
refundStatus: '仅退款',
|
||||
orderStatus: '未发货',
|
||||
refundReason: '收货地址填错了'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
refundId: '540579611755413504',
|
||||
orderId: 'cp537676043612323840',
|
||||
productImg: 'https://p.demo.crmeb.net/uploads/attach/2024/09/20240905/66d87e35b7e9b.jpg',
|
||||
productName: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060',
|
||||
userInfo: '杨咩咩Tel',
|
||||
payPrice: 0.00,
|
||||
refundTime: '2026-01-31 17:10:22',
|
||||
refundStatus: '仅退款',
|
||||
orderStatus: '未发货',
|
||||
refundReason: '收货地址填错了'
|
||||
}
|
||||
])
|
||||
|
||||
const handleQuery = () => { console.log('Querying...') }
|
||||
</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-aftersale-order {
|
||||
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; }
|
||||
|
||||
.select-mock {
|
||||
width: 220px;
|
||||
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: #606266; }
|
||||
.arrow-down { font-size: 10px; color: #c0c4cc; }
|
||||
|
||||
.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; }
|
||||
|
||||
.search-input {
|
||||
width: 260px;
|
||||
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;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #ebf7ff;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 12px 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: 4px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.product-detail {
|
||||
flex: 1;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 操作列 */
|
||||
.op-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.op-txt { font-size: 14px; }
|
||||
.op-arrow { font-size: 10px; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px;
|
||||
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>
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,104 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">收银台订单，管理线下收银记录</text>
|
||||
<view class="admin-cashier-order">
|
||||
<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>
|
||||
<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" />
|
||||
</view>
|
||||
|
||||
<view class="btn-query" @click="handleQuery">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="(item, index) in orderList" :key="index" class="table-row">
|
||||
<view class="td" style="flex: 1.5;"><text class="td-txt">{{ item.orderId }}</text></view>
|
||||
<view class="td" style="flex: 1.2;"><text class="td-txt">{{ item.userInfo }}</text></view>
|
||||
<view class="td" style="width: 150px;"><text class="td-txt">{{ item.payPrice.toFixed(2) }}</text></view>
|
||||
<view class="td" style="width: 150px;"><text class="td-txt">{{ item.discountPrice.toFixed(2) }}</text></view>
|
||||
<view class="td" style="width: 200px;"><text class="td-txt">{{ item.payTime }}</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 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>
|
||||
</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>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -10,14 +106,289 @@
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref<string>('收银订单')
|
||||
interface CashierOrder {
|
||||
orderId: string
|
||||
userInfo: string
|
||||
payPrice: number
|
||||
discountPrice: number
|
||||
payTime: string
|
||||
}
|
||||
|
||||
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: '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' }
|
||||
])
|
||||
|
||||
const showQrModal = ref(false)
|
||||
const isClosing = ref(false)
|
||||
|
||||
const handleQuery = () => { console.log('Querying...') }
|
||||
|
||||
const openQrModal = () => {
|
||||
showQrModal.value = true
|
||||
isClosing.value = false
|
||||
}
|
||||
|
||||
const closeQrModal = () => {
|
||||
isClosing.value = true
|
||||
setTimeout(() => {
|
||||
showQrModal.value = false
|
||||
isClosing.value = false
|
||||
}, 300)
|
||||
}
|
||||
</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-cashier-order {
|
||||
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; }
|
||||
|
||||
.search-input {
|
||||
width: 220px;
|
||||
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;
|
||||
}
|
||||
|
||||
.card-header { padding: 20px; }
|
||||
|
||||
.btn-primary-blue {
|
||||
background-color: #2d8cf0;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-txt { color: #fff; font-size: 14px; }
|
||||
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 15px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.td-txt { font-size: 14px; color: #515a6e; }
|
||||
|
||||
/* 分页 */
|
||||
.pagination-footer {
|
||||
padding: 24px;
|
||||
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; }
|
||||
|
||||
/* Modal 弹窗逻辑 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 600px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title { font-size: 16px; font-weight: bold; color: #333; }
|
||||
.close-btn { font-size: 24px; color: #999; cursor: pointer; line-height: 1; }
|
||||
|
||||
.modal-body {
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.qr-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.qr-placeholder-mp {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mp-qr-mock { width: 140px; height: 140px; border-radius: 70px; }
|
||||
|
||||
.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); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.scale-out { animation: scaleOut 0.3s ease-in forwards; }
|
||||
@keyframes scaleOut {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(0.9); }
|
||||
}
|
||||
|
||||
.mask-fade-out { animation: fadeOut 0.3s ease-in forwards; }
|
||||
@keyframes fadeOut {
|
||||
from { background-color: rgba(0, 0, 0, 0.4); }
|
||||
to { background-color: rgba(0, 0, 0, 0); }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +1,463 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">订单配置，设置订单相关参数</text>
|
||||
<view class="admin-order-config">
|
||||
<view class="content-body">
|
||||
<!-- 顶部选项卡 -->
|
||||
<view class="tabs-card border-shadow">
|
||||
<scroll-view class="tabs-scroll" direction="horizontal" :show-scrollbar="false">
|
||||
<view class="tabs-list">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab-item', currentTab == index ? 'tab-active' : '']"
|
||||
@click="currentTab = index"
|
||||
>
|
||||
<text :class="['tab-txt', currentTab == index ? 'tab-txt-active' : '']">{{ tab }}</text>
|
||||
<view v-if="currentTab == index" class="tab-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 配置内容区 -->
|
||||
<view class="config-card border-shadow">
|
||||
<!-- 1. 包邮设置 -->
|
||||
<view v-if="currentTab == 0" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">满额包邮:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.freeShippingPrice" placeholder="请输入满额包邮金额" />
|
||||
<text class="hint-txt">商城商品满多少金额即可包邮，此项优先于其他的运费设置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">线下支付是否包邮:</text></view>
|
||||
<view class="input-box">
|
||||
<radio-group class="radio-group" @change="e => config.offlineFreeShipping = e.detail.value == '1'">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="config.offlineFreeShipping" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">包邮</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="!config.offlineFreeShipping" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">不包邮</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="hint-txt">用户选择线下支付时是否包邮</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 2. 发票功能配置 -->
|
||||
<view v-if="currentTab == 1" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">发票功能启用:</text></view>
|
||||
<view class="input-box">
|
||||
<radio-group class="radio-group" @change="e => config.invoiceEnabled = e.detail.value == '1'">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="config.invoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">开启</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="!config.invoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">关闭</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="hint-txt">发票功能开启|关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">专用发票启用:</text></view>
|
||||
<view class="input-box">
|
||||
<radio-group class="radio-group" @change="e => config.specialInvoiceEnabled = e.detail.value == '1'">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="config.specialInvoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">开启</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="!config.specialInvoiceEnabled" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">关闭</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="hint-txt">专用发票功能开启|关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 3. 售后退款配置 -->
|
||||
<view v-if="currentTab == 2" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">退货收货人姓名:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" v-model="config.refundContactName" placeholder="请输入退货收货人姓名" />
|
||||
<text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员姓名</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">退货收货人电话:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" v-model="config.refundContactPhone" placeholder="请输入退货收货人电话" />
|
||||
<text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员电话</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">退货收货人地址:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" v-model="config.refundAddress" placeholder="请输入退货收货人地址" />
|
||||
<text class="hint-txt">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员地址信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">退货理由:</text></view>
|
||||
<view class="input-box">
|
||||
<textarea class="textarea-base" v-model="config.refundReasons" placeholder="请输入退货理由" />
|
||||
<text class="hint-txt">配置退货理由，一行一个理由</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">优惠券退还状态:</text></view>
|
||||
<view class="input-box">
|
||||
<radio-group class="radio-group" @change="e => config.refundCoupon = e.detail.value == '1'">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="config.refundCoupon" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">退还</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="!config.refundCoupon" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">不退还</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="hint-txt">优惠券是否退回开关，商品成功退款后，退回/不退回使用的优惠券</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">售后期限:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.afterSalesDays" placeholder="0" />
|
||||
<text class="hint-txt">订单收货之后，在多少天内可以进行退款，超出天数前端不显示退款按钮，设置0则永远显示</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 4. 订单取消配置 -->
|
||||
<view v-if="currentTab == 3" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">普通未支付订单取消:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.normalOrderCancelHour" />
|
||||
<text class="hint-txt">普通商品未支付订单的自动取消时间，单位（小时）</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">活动未支付订单取消:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.activityOrderCancelHour" />
|
||||
<text class="hint-txt">活动商品未支付订单的自动取消时间，单位（小时）</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">砍价未支付订单取消:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.bargainOrderCancelHour" />
|
||||
<text class="hint-txt">砍价未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">秒杀未支付订单取消:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.seckillOrderCancelHour" />
|
||||
<text class="hint-txt">秒杀未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">拼团未支付订单取消:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.combinationOrderCancelHour" />
|
||||
<text class="hint-txt">拼团未支付订单自动取消时间，单位（小时），如果为0将使用默认活动取消时间，优先使用单独活动配置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 5. 自动收货配置 -->
|
||||
<view v-if="currentTab == 4" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">自动收货时间:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.autoReceiveDays" />
|
||||
<text class="hint-txt">商城订单发货之后，用户如果不手动点击收货，则在N天后自动收货，设置0为不自动收货，单位（天）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 6. 自动评价配置 -->
|
||||
<view v-if="currentTab == 5" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">自动评价时间:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.autoCommentDays" />
|
||||
<text class="hint-txt">商城订单在收货之后，用户如果不主动评价订单商品，则在N天后自动评价，设置0为永远不自动评价</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">自动评价文字:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" v-model="config.autoCommentText" />
|
||||
<text class="hint-txt">自动评价显示的评价文字</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 7. 到店自提配置 -->
|
||||
<view v-if="currentTab == 6" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">开启到店自提:</text></view>
|
||||
<view class="input-box">
|
||||
<radio-group class="radio-group" @change="e => config.storeSelfPickup = e.detail.value == '1'">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="config.storeSelfPickup" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">开启</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="!config.storeSelfPickup" color="#2d8cf0" style="transform:scale(0.8)" />
|
||||
<text class="radio-txt">关闭</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="hint-txt">开启后下单页面支持到店自提，需要在设置->发货设置->提货点设置中添加提货点，关闭则隐藏此功能</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 8. 警戒库存配置 -->
|
||||
<view v-if="currentTab == 7" class="form-container">
|
||||
<view class="form-item">
|
||||
<view class="label-box"><text class="label-txt">警戒库存:</text></view>
|
||||
<view class="input-box">
|
||||
<input class="input-base" type="number" v-model="config.stockWarningCount" />
|
||||
<text class="hint-txt">商品库存数量低于多少时，提示库存不足</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="btn-footer">
|
||||
<view class="btn-submit" @click="handleSave">
|
||||
<text class="btn-submit-txt">提交</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const title = ref<string>('订单配置')
|
||||
const tabs = ['包邮设置', '发票功能配置', '售后退款配置', '订单取消配置', '自动收货配置', '自动评价配置', '到店自提配置', '警戒库存配置']
|
||||
const currentTab = ref(0)
|
||||
|
||||
const config = reactive({
|
||||
// 1. 包邮设置
|
||||
freeShippingPrice: 1000000,
|
||||
offlineFreeShipping: false,
|
||||
// 2. 发票功能配置
|
||||
invoiceEnabled: true,
|
||||
specialInvoiceEnabled: true,
|
||||
// 3. 售后退款配置
|
||||
refundContactName: '',
|
||||
refundContactPhone: '',
|
||||
refundAddress: '',
|
||||
refundReasons: '收货地址填错了\n与描述不符\n信息填错了，重新拍\n收到商品损坏了\n未按预定时间发货\n其它原因',
|
||||
refundCoupon: true,
|
||||
afterSalesDays: 0,
|
||||
// 4. 订单取消配置
|
||||
normalOrderCancelHour: 1,
|
||||
activityOrderCancelHour: 1,
|
||||
bargainOrderCancelHour: 1,
|
||||
seckillOrderCancelHour: 1,
|
||||
combinationOrderCancelHour: 1,
|
||||
// 5. 自动收货配置
|
||||
autoReceiveDays: 7,
|
||||
// 6. 自动评价配置
|
||||
autoCommentDays: 0,
|
||||
autoCommentText: '此用户未做评价',
|
||||
// 7. 到店自提配置
|
||||
storeSelfPickup: true,
|
||||
// 8. 警戒库存配置
|
||||
stockWarningCount: 10
|
||||
})
|
||||
|
||||
const handleSave = () => {
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}, 500)
|
||||
}
|
||||
</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-order-config {
|
||||
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;
|
||||
}
|
||||
|
||||
/* 顶部选项卡 */
|
||||
.tabs-card {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.tabs-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-txt {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tab-txt-active {
|
||||
color: #2d8cf0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 2px;
|
||||
background-color: #2d8cf0;
|
||||
}
|
||||
|
||||
/* 配置内容区 */
|
||||
.config-card {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.label-box {
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.label-txt {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-base {
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textarea-base {
|
||||
height: 120px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hint-txt {
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 30px;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio-txt {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.btn-footer {
|
||||
margin-top: 40px;
|
||||
padding-left: 170px;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background-color: #2d8cf0;
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-submit-txt {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user