You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
530 lines
12 KiB
530 lines
12 KiB
<template>
|
|
<view class="after-sale-list">
|
|
<!-- 状态筛选 -->
|
|
<view class="filter-section">
|
|
<view class="filter-tabs">
|
|
<view
|
|
class="filter-tab"
|
|
:class="{ active: currentStatus === item.value }"
|
|
v-for="item in statusOptions"
|
|
:key="item.value"
|
|
@click="changeStatus(item.value)"
|
|
>
|
|
<text class="tab-text">{{ item.text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 售后列表 -->
|
|
<scroll-view
|
|
class="list-scroll"
|
|
scroll-y
|
|
@scrolltolower="loadMore"
|
|
@refresherrefresh="onRefresh"
|
|
:refresher-enabled="true"
|
|
:refresher-triggered="refresherTriggered"
|
|
>
|
|
<view class="list-content">
|
|
<view
|
|
class="after-sale-item"
|
|
v-for="item in afterSaleList"
|
|
:key="item.id"
|
|
@click="goToDetail(item)"
|
|
>
|
|
<!-- 商品信息 -->
|
|
<view class="product-info">
|
|
<image
|
|
class="product-image"
|
|
:src="item.productImage"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="product-details">
|
|
<text class="product-title">{{ item.productTitle }}</text>
|
|
<text class="product-spec">{{ item.productSpec }}</text>
|
|
<view class="product-meta">
|
|
<text class="order-number">订单号：{{ item.orderNumber }}</text>
|
|
<text class="create-time">{{
|
|
formatTime(item.createTime)
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 售后信息 -->
|
|
<view class="after-sale-info">
|
|
<view class="info-row">
|
|
<text class="info-label">售后类型：</text>
|
|
<text class="info-value">{{ item.type }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">售后原因：</text>
|
|
<text class="info-value">{{ item.reason }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">申请时间：</text>
|
|
<text class="info-value">{{ formatTime(item.createTime) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 状态和操作 -->
|
|
<view class="status-section">
|
|
<view class="status-badge" :class="[getStatusClass(item.status)]">
|
|
{{ getStatusText(item.status) }}
|
|
</view>
|
|
<view class="action-buttons">
|
|
<button
|
|
class="action-btn"
|
|
@click.stop="cancelAfterSale(item)"
|
|
v-if="item.status === 'pending'"
|
|
>
|
|
取消申请
|
|
</button>
|
|
<button class="action-btn primary" @click.stop="goToDetail(item)">
|
|
查看详情
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load-more" v-if="hasMore">
|
|
<text class="load-text">加载中...</text>
|
|
</view>
|
|
<view class="no-more" v-else>
|
|
<text class="no-more-text">没有更多数据了</text>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-if="afterSaleList.length === 0 && !loading">
|
|
<image
|
|
class="empty-image"
|
|
:src="showImg('/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png')"
|
|
mode="aspectFit"
|
|
/>
|
|
<text class="empty-text">暂无售后记录</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentStatus: "all",
|
|
statusOptions: [
|
|
{ text: "全部", value: "all" },
|
|
{ text: "待处理", value: "pending" },
|
|
{ text: "处理中", value: "processing" },
|
|
{ text: "已完成", value: "completed" },
|
|
{ text: "已取消", value: "cancelled" },
|
|
],
|
|
afterSaleList: [],
|
|
page: 1,
|
|
pageSize: 10,
|
|
hasMore: true,
|
|
loading: false,
|
|
refresherTriggered: false,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.loadAfterSaleList();
|
|
},
|
|
onShow() {
|
|
// 页面显示时刷新数据
|
|
this.refreshList();
|
|
},
|
|
methods: {
|
|
// 切换状态筛选
|
|
changeStatus(status) {
|
|
if (this.currentStatus === status) return;
|
|
this.currentStatus = status;
|
|
this.resetList();
|
|
this.loadAfterSaleList();
|
|
},
|
|
|
|
// 重置列表
|
|
resetList() {
|
|
this.afterSaleList = [];
|
|
this.page = 1;
|
|
this.hasMore = true;
|
|
},
|
|
|
|
// 加载售后列表
|
|
async loadAfterSaleList() {
|
|
if (this.loading || !this.hasMore) return;
|
|
|
|
try {
|
|
this.loading = true;
|
|
|
|
const params = {
|
|
page: this.page,
|
|
pageSize: this.pageSize,
|
|
status: this.currentStatus === "all" ? "" : this.currentStatus,
|
|
};
|
|
|
|
this.Post(params, "/framework/afterSale/list", "DES")
|
|
.then((res) => {
|
|
this.loading = false;
|
|
if (res.code === 200) {
|
|
const newList = res.data.list || [];
|
|
|
|
if (this.page === 1) {
|
|
this.afterSaleList = newList;
|
|
} else {
|
|
this.afterSaleList.push(...newList);
|
|
}
|
|
|
|
this.hasMore = newList.length === this.pageSize;
|
|
this.page++;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || "加载失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
this.loading = false;
|
|
console.error("加载售后列表失败:", error);
|
|
uni.showToast({
|
|
title: "加载失败",
|
|
icon: "none",
|
|
});
|
|
});
|
|
} catch (error) {
|
|
this.loading = false;
|
|
console.error("加载售后列表失败:", error);
|
|
uni.showToast({
|
|
title: "加载失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
},
|
|
|
|
// 上拉加载更多
|
|
loadMore() {
|
|
this.loadAfterSaleList();
|
|
},
|
|
|
|
// 下拉刷新
|
|
onRefresh() {
|
|
this.refresherTriggered = true;
|
|
this.resetList();
|
|
this.loadAfterSaleList().finally(() => {
|
|
this.refresherTriggered = false;
|
|
});
|
|
},
|
|
|
|
// 刷新列表
|
|
refreshList() {
|
|
this.resetList();
|
|
this.loadAfterSaleList();
|
|
},
|
|
|
|
// 跳转到详情页
|
|
goToDetail(item) {
|
|
uni.navigateTo({
|
|
url: `/subPackages/afterSale/detail?id=${item.id}`,
|
|
});
|
|
},
|
|
|
|
// 取消售后申请
|
|
cancelAfterSale(item) {
|
|
uni.showModal({
|
|
title: "确认取消",
|
|
content: "确定要取消这个售后申请吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.Post({ id: item.id }, "/framework/afterSale/cancel", "DES")
|
|
.then((res) => {
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: "取消成功",
|
|
icon: "success",
|
|
});
|
|
this.refreshList();
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || "取消失败",
|
|
icon: "none",
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("取消售后申请失败:", error);
|
|
uni.showToast({
|
|
title: "取消失败",
|
|
icon: "none",
|
|
});
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
// 获取状态文本
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
pending: "待处理",
|
|
processing: "处理中",
|
|
completed: "已完成",
|
|
cancelled: "已取消",
|
|
};
|
|
return statusMap[status] || "未知状态";
|
|
},
|
|
|
|
// 获取状态样式类
|
|
getStatusClass(status) {
|
|
const classMap = {
|
|
pending: "status-pending",
|
|
processing: "status-processing",
|
|
completed: "status-completed",
|
|
cancelled: "status-cancelled",
|
|
};
|
|
return classMap[status] || "status-default";
|
|
},
|
|
|
|
// 格式化时间
|
|
formatTime(time) {
|
|
if (!time) return "";
|
|
const date = new Date(time);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
|
|
2,
|
|
"0"
|
|
)}-${String(date.getDate()).padStart(2, "0")} ${String(
|
|
date.getHours()
|
|
).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.after-sale-list {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
// 筛选区域
|
|
.filter-section {
|
|
background-color: #fff;
|
|
padding: 20rpx 0;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.filter-tab {
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
background-color: #007aff;
|
|
|
|
.tab-text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 列表区域
|
|
.list-scroll {
|
|
height: calc(100vh - 120rpx);
|
|
}
|
|
|
|
.list-content {
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.after-sale-item {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
// 商品信息
|
|
.product-info {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.product-image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.product-details {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.product-spec {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.product-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.order-number {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.create-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// 售后信息
|
|
.after-sale-info {
|
|
background-color: #f8f9fa;
|
|
border-radius: 8rpx;
|
|
padding: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
min-width: 140rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
// 状态和操作
|
|
.status-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
|
|
&.status-pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.status-processing {
|
|
background-color: #007aff;
|
|
}
|
|
|
|
&.status-completed {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.status-cancelled {
|
|
background-color: #999;
|
|
}
|
|
|
|
&.status-default {
|
|
background-color: #999;
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
border: 1rpx solid #ddd;
|
|
background-color: #fff;
|
|
color: #666;
|
|
min-width: 120rpx;
|
|
|
|
&.primary {
|
|
background-color: #007aff;
|
|
color: #fff;
|
|
border-color: #007aff;
|
|
}
|
|
}
|
|
|
|
// 加载更多
|
|
.load-more,
|
|
.no-more {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.load-text,
|
|
.no-more-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// 空状态
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100rpx 0;
|
|
}
|
|
|
|
.empty-image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
|