422 lines
11 KiB
Plaintext
422 lines
11 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>
|
|
|
|
<!-- 分页 -->
|
|
<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', page <= 1 ? 'disabled' : '']" @click="prevPage"><</text>
|
|
<text class="p-btn active">{{ page }}</text>
|
|
<text :class="['p-btn', page >= totalPages ? 'disabled' : '']" @click="nextPage">></text>
|
|
</view>
|
|
<view class="page-jump">
|
|
<text class="jump-txt">前往</text>
|
|
<input class="jump-input" placeholder="1" v-model="jumpPage" @confirm="goToJumpPage" />
|
|
<text class="jump-txt">页</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { fetchRefundOrderPage } from '@/services/orderService.uts'
|
|
|
|
interface RefundOrder {
|
|
id: string
|
|
refundId: string
|
|
orderId: string
|
|
productName: string
|
|
productImg: string
|
|
userInfo: string
|
|
payPrice: number
|
|
refundTime: string
|
|
refundStatus: string
|
|
orderStatus: string
|
|
refundReason: string
|
|
}
|
|
|
|
const searchQuery = ref('')
|
|
const total = ref(0)
|
|
const orderList = ref<RefundOrder[]>([])
|
|
const loading = ref(false)
|
|
const page = ref(1)
|
|
const pageSize = ref(15)
|
|
const jumpPage = ref('')
|
|
|
|
const totalPages = computed((): number => {
|
|
if (pageSize.value <= 0) return 1
|
|
const pages = Math.ceil(total.value / pageSize.value)
|
|
return pages <= 0 ? 1 : pages
|
|
})
|
|
|
|
const refundStatusFilter = ref<number | null>(null)
|
|
|
|
const loadRefundOrders = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await fetchRefundOrderPage(
|
|
page.value,
|
|
pageSize.value,
|
|
refundStatusFilter.value,
|
|
searchQuery.value
|
|
)
|
|
|
|
orderList.value = res.items.map((item: any): RefundOrder => {
|
|
const refundStatusCode = parseInt(String(item.refund_status ?? '0'))
|
|
const orderStatusCode = parseInt(String(item.order_status ?? '0'))
|
|
|
|
return {
|
|
id: String(item.id),
|
|
refundId: String(item.refund_no ?? '--'),
|
|
orderId: String(item.order_no ?? '--'),
|
|
productName: String(item.product_summary?.product_name ?? '多商品订单'),
|
|
productImg: String(item.product_summary?.image_url ?? ''),
|
|
userInfo: `${String(item.customer_name ?? '未知')} | ${String(item.customer_phone ?? '')}`,
|
|
payPrice: parseFloat(String(item.refund_amount ?? '0')),
|
|
refundTime: String(item.applied_at ?? '--'),
|
|
refundStatus: getRefundStatusName(refundStatusCode),
|
|
orderStatus: String(item.order_status_text ?? orderStatusCode),
|
|
refundReason: String(item.refund_reason ?? '')
|
|
} as RefundOrder
|
|
})
|
|
|
|
total.value = res.total
|
|
} catch (e) {
|
|
uni.showToast({ title: '退款订单加载失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const getRefundStatusName = (status: number): string => {
|
|
switch (status) {
|
|
case 1: return '申请中'
|
|
case 2: return '已同意'
|
|
case 3: return '已拒绝'
|
|
case 4: return '已完成'
|
|
default: return '未知'
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadRefundOrders()
|
|
})
|
|
|
|
const handleQuery = () => {
|
|
page.value = 1
|
|
loadRefundOrders()
|
|
}
|
|
|
|
const prevPage = () => {
|
|
if (page.value > 1) {
|
|
page.value--
|
|
loadRefundOrders()
|
|
}
|
|
}
|
|
|
|
const nextPage = () => {
|
|
if (page.value < totalPages.value) {
|
|
page.value++
|
|
loadRefundOrders()
|
|
}
|
|
}
|
|
|
|
const goToJumpPage = () => {
|
|
const targetPage = parseInt(jumpPage.value)
|
|
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
|
page.value = targetPage
|
|
loadRefundOrders()
|
|
jumpPage.value = ''
|
|
} else {
|
|
uni.showToast({ title: '请输入有效的页码', icon: 'none' })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.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>
|
|
|
|
|