426 lines
12 KiB
Plaintext
426 lines
12 KiB
Plaintext
<template>
|
|
<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>
|
|
|
|
<!-- 分页 -->
|
|
<CommonPagination
|
|
v-if="total > 0"
|
|
:total="total"
|
|
:loading="false"
|
|
:currentPage="currentPage"
|
|
:pageSize="pageSize"
|
|
:pageSizeOptionLabels="pageSizeOptionLabels"
|
|
:pageSizeIndex="pageSizeIndex"
|
|
:visiblePages="visiblePages"
|
|
:totalPage="totalPage"
|
|
:jumpPageInput="jumpPageInput"
|
|
@page-size-change="handlePageSizeChange"
|
|
@page-change="handlePageChange"
|
|
@update:jumpPageInput="(val : string) => { jumpPageInput = val }"
|
|
@jump-page="handleJumpPage"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, computed } from 'vue'
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
|
|
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 currentPage = ref(1)
|
|
const pageSize = ref(15)
|
|
let jumpPageInput = ''
|
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
|
const pageSizeOptionLabels = computed((): string[] => pageSizeOptions.map((s: number): string => `${s} 条/页`))
|
|
const pageSizeIndex = computed((): number => {
|
|
const i = pageSizeOptions.indexOf(pageSize.value)
|
|
return i === -1 ? 0 : i
|
|
})
|
|
const totalPage = computed((): number => Math.ceil(total.value / pageSize.value))
|
|
const visiblePages = computed((): number[] => {
|
|
const cur = currentPage.value
|
|
const tot = totalPage.value
|
|
if (tot <= 7) {
|
|
const pages: number[] = []
|
|
for (let i = 1; i <= tot; i++) pages.push(i)
|
|
return pages
|
|
}
|
|
if (cur <= 4) return [1, 2, 3, 4, 5, -1, tot]
|
|
if (cur >= tot - 3) return [1, -1, tot - 4, tot - 3, tot - 2, tot - 1, tot]
|
|
return [1, -1, cur - 1, cur, cur + 1, -1, tot]
|
|
})
|
|
const handlePageChange = (p: number) => {
|
|
if (p < 1 || p > totalPage.value || p === currentPage.value) return
|
|
currentPage.value = p
|
|
jumpPageInput = ''
|
|
}
|
|
const handlePageSizeChange = (e: any) => {
|
|
let val = 0
|
|
if (typeof e.detail.value === 'string') val = parseInt(e.detail.value)
|
|
else val = e.detail.value as number
|
|
pageSize.value = pageSizeOptions[val]
|
|
currentPage.value = 1
|
|
}
|
|
const handleJumpPage = () => {
|
|
let jumpTo = parseInt(jumpPageInput)
|
|
if (isNaN(jumpTo)) return
|
|
if (jumpTo < 1) jumpTo = 1
|
|
if (jumpTo > totalPage.value) jumpTo = totalPage.value
|
|
jumpPageInput = String(jumpTo)
|
|
if (jumpTo !== currentPage.value) currentPage.value = jumpTo
|
|
}
|
|
const orderList = ref<RefundOrder[]>([
|
|
{
|
|
id: 1,
|
|
refundId: '541647750949765120',
|
|
orderId: 'cp541646979248160768',
|
|
productImg: '/static/logo.png',
|
|
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: '/static/logo.png',
|
|
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: '/static/logo.png',
|
|
productName: '爱奇艺智能 奇遇LT01 投影仪 家用卧室超高清手机便携式投影机 (4K超清 支...',
|
|
userInfo: '隆胜科技',
|
|
payPrice: 1.00,
|
|
refundTime: '2026-02-01 18:44:16',
|
|
refundStatus: '仅退款',
|
|
orderStatus: '未发货',
|
|
refundReason: '收货地址填错了'
|
|
},
|
|
{
|
|
id: 4,
|
|
refundId: '5409655559492149248',
|
|
orderId: 'cp540964778781179904',
|
|
productImg: '/static/logo.png',
|
|
productName: '广儿穿了就会霹死',
|
|
userInfo: '隆胜科技',
|
|
payPrice: 579.00,
|
|
refundTime: '2026-02-01 18:44:00',
|
|
refundStatus: '仅退款',
|
|
orderStatus: '未发货',
|
|
refundReason: '收货地址填错了'
|
|
},
|
|
{
|
|
id: 5,
|
|
refundId: '540965491796082688',
|
|
orderId: 'cp540964551848361984',
|
|
productImg: '/static/logo.png',
|
|
productName: 'CHICVEN「摩登工业」科技感反光渐变羽绒服立领面包服外套女冬季',
|
|
userInfo: '隆胜科技',
|
|
payPrice: 900.00,
|
|
refundTime: '2026-02-01 18:43:43',
|
|
refundStatus: '仅退款',
|
|
orderStatus: '未发货',
|
|
refundReason: '收货地址填错了'
|
|
},
|
|
{
|
|
id: 6,
|
|
refundId: '540579611755413504',
|
|
orderId: 'cp537676043612323840',
|
|
productImg: '/static/logo.png',
|
|
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">
|
|
.admin-aftersale-order {
|
|
/* 使用 Layout 的背景和内边距 */
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.content-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--admin-section-gap);
|
|
}
|
|
|
|
/* 过滤栏 */
|
|
.filter-card {
|
|
padding: var(--admin-card-padding);
|
|
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;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 1400px;
|
|
}
|
|
|
|
.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;
|
|
flex-shrink: 0;
|
|
}
|
|
.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; }
|
|
|
|
/* 分页区域已迁至 CommonPagination 组件 */
|
|
</style>
|
|
|
|
|