1054425342@qq.com
2 months ago
8 changed files with 2150 additions and 67 deletions
@ -0,0 +1,612 @@ |
|||
<template> |
|||
<view class="after-sale-add"> |
|||
<!-- 商品信息卡片 --> |
|||
<view class="card-section"> |
|||
<view class="card-header"> |
|||
<text class="card-title">商品信息</text> |
|||
</view> |
|||
<view class="product-section"> |
|||
<image |
|||
class="product-image" |
|||
:src="productInfo.image || '/static/image/default-product.png'" |
|||
mode="aspectFill" |
|||
/> |
|||
<view class="product-info"> |
|||
<text class="product-title">{{ |
|||
productInfo.title || "IP文创公仔" |
|||
}}</text> |
|||
<text class="product-subtitle">{{ |
|||
productInfo.subtitle || "这里是文创公仔的副标题" |
|||
}}</text> |
|||
<text class="product-desc">{{ |
|||
productInfo.description || "介绍" |
|||
}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 售后表单卡片 --> |
|||
<view class="card-section"> |
|||
<view class="card-header"> |
|||
<text class="card-title">售后信息</text> |
|||
</view> |
|||
<view class="form-section"> |
|||
<!-- 售后类型 --> |
|||
<view class="form-item" @click="showTypePopup"> |
|||
<text class="form-label">售后类型</text> |
|||
<view class="form-value-with-icon"> |
|||
<text class="form-value">{{ afterSaleForm.type }}</text> |
|||
<uni-icons type="right" size="16" color="#999" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 售后原因 --> |
|||
<view class="form-item" @click="showReasonPopup"> |
|||
<text class="form-label">售后原因</text> |
|||
<view class="form-value-with-icon"> |
|||
<text class="form-value">{{ afterSaleForm.reason }}</text> |
|||
<uni-icons type="right" size="16" color="#999" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 理由说明 --> |
|||
<view class="form-item"> |
|||
<text class="form-label">理由说明</text> |
|||
<textarea |
|||
class="reason-textarea" |
|||
v-model="afterSaleForm.description" |
|||
placeholder="请详细描述问题..." |
|||
maxlength="500" |
|||
/> |
|||
<text class="char-count" |
|||
>{{ afterSaleForm.description.length }}/500</text |
|||
> |
|||
</view> |
|||
|
|||
<!-- 图片上传 --> |
|||
<view class="form-item"> |
|||
<text class="form-label" |
|||
>问题图片 <text class="required">*</text></text |
|||
> |
|||
<text class="form-sub-label">最多可上传9张图片</text> |
|||
<view class="image-upload-section"> |
|||
<uni-file-picker |
|||
v-model="afterSaleForm.images" |
|||
fileMediatype="image" |
|||
mode="grid" |
|||
:limit="9" |
|||
@select="onImageSelect" |
|||
@delete="onImageDelete" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="submit-section"> |
|||
<button |
|||
class="submit-btn" |
|||
@click="submitAfterSale" |
|||
:disabled="!canSubmit" |
|||
> |
|||
提交售后申请 |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 售后类型选择弹窗 --> |
|||
<uni-popup ref="typePopup" type="bottom"> |
|||
<view class="type-popup"> |
|||
<view class="popup-header"> |
|||
<text class="popup-title">选择售后类型</text> |
|||
<text class="popup-close" @click="closeTypePopup">×</text> |
|||
</view> |
|||
<view class="popup-content"> |
|||
<view |
|||
class="type-option" |
|||
v-for="(type, index) in typeOptions" |
|||
:key="index" |
|||
@click="selectType(type)" |
|||
> |
|||
<view class="type-content"> |
|||
<text class="type-text">{{ type.text }}</text> |
|||
<uni-icons |
|||
v-if="afterSaleForm.type === type.text" |
|||
type="checkmarkempty" |
|||
size="16" |
|||
color="#ff4757" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="popup-actions"> |
|||
<button class="confirm-btn" @click="confirmType">确认</button> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
<!-- 售后原因选择弹窗 --> |
|||
<uni-popup ref="reasonPopup" type="bottom"> |
|||
<view class="reason-popup"> |
|||
<view class="popup-header"> |
|||
<text class="popup-title">选择售后原因</text> |
|||
<text class="popup-close" @click="closeReasonPopup">×</text> |
|||
</view> |
|||
<view class="popup-content"> |
|||
<view |
|||
class="reason-option" |
|||
v-for="(reason, index) in reasonOptions" |
|||
:key="index" |
|||
@click="selectReason(reason)" |
|||
> |
|||
<view class="reason-content"> |
|||
<text class="reason-text">{{ reason.text }}</text> |
|||
<uni-icons |
|||
v-if="afterSaleForm.reason === reason.text" |
|||
type="checkmarkempty" |
|||
size="16" |
|||
color="#ff4757" |
|||
/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="popup-actions"> |
|||
<button class="confirm-btn" @click="confirmReason">确认</button> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
productInfo: { |
|||
image: "", |
|||
title: "IP文创公仔", |
|||
subtitle: "这里是文创公仔的副标题", |
|||
description: "介绍", |
|||
}, |
|||
afterSaleForm: { |
|||
type: "换货", |
|||
reason: "商品质量问题", |
|||
description: "", |
|||
images: [], |
|||
}, |
|||
typeOptions: [ |
|||
{ text: "换货", value: "exchange" }, |
|||
{ text: "仅退款", value: "refund" }, |
|||
{ text: "退货", value: "return" }, |
|||
], |
|||
reasonOptions: [ |
|||
{ text: "商品质量问题", value: "quality" }, |
|||
{ text: "物流包装破损", value: "damage" }, |
|||
{ text: "未收到货", value: "not_received" }, |
|||
{ text: "商品与描述不符", value: "mismatch" }, |
|||
{ text: "其他原因", value: "other" }, |
|||
], |
|||
selectedType: null, |
|||
selectedReason: null, |
|||
}; |
|||
}, |
|||
computed: { |
|||
canSubmit() { |
|||
return ( |
|||
this.afterSaleForm.description.trim().length > 0 && |
|||
this.afterSaleForm.images.length > 0 |
|||
); |
|||
}, |
|||
}, |
|||
onLoad(options) { |
|||
// 接收商品信息参数 |
|||
if (options.productInfo) { |
|||
this.productInfo = JSON.parse(decodeURIComponent(options.productInfo)); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 显示售后类型选择弹窗 |
|||
showTypePopup() { |
|||
this.$refs.typePopup.open(); |
|||
}, |
|||
|
|||
// 关闭售后类型选择弹窗 |
|||
closeTypePopup() { |
|||
this.$refs.typePopup.close(); |
|||
}, |
|||
|
|||
// 选择售后类型 |
|||
selectType(type) { |
|||
this.selectedType = type; |
|||
}, |
|||
|
|||
// 确认售后类型 |
|||
confirmType() { |
|||
if (this.selectedType) { |
|||
this.afterSaleForm.type = this.selectedType.text; |
|||
} |
|||
this.closeTypePopup(); |
|||
}, |
|||
|
|||
// 显示售后原因选择弹窗 |
|||
showReasonPopup() { |
|||
this.$refs.reasonPopup.open(); |
|||
}, |
|||
|
|||
// 关闭售后原因选择弹窗 |
|||
closeReasonPopup() { |
|||
this.$refs.reasonPopup.close(); |
|||
}, |
|||
|
|||
// 选择售后原因 |
|||
selectReason(reason) { |
|||
this.selectedReason = reason; |
|||
}, |
|||
|
|||
// 确认售后原因 |
|||
confirmReason() { |
|||
if (this.selectedReason) { |
|||
this.afterSaleForm.reason = this.selectedReason.text; |
|||
} |
|||
this.closeReasonPopup(); |
|||
}, |
|||
|
|||
// 图片选择回调 |
|||
onImageSelect(e) { |
|||
console.log("选择图片:", e); |
|||
uni.uploadFile({ |
|||
url: this.NEWAPIURL_DES + "/system/oss/upload", //仅为示例，非真实的接口地址 |
|||
filePath: e.tempFilePaths[0], |
|||
name: "file", |
|||
|
|||
success: (uploadFileRes) => { |
|||
console.log(uploadFileRes); |
|||
let data = JSON.parse(uploadFileRes.data); |
|||
if (data.code == 200) { |
|||
this.afterSaleForm.images.push(data.url); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 图片删除回调 |
|||
onImageDelete(e) { |
|||
console.log("删除图片:", e); |
|||
}, |
|||
|
|||
// 提交售后申请 |
|||
async submitAfterSale() { |
|||
if (!this.canSubmit) { |
|||
uni.showToast({ |
|||
title: "请填写理由说明并上传图片", |
|||
icon: "none", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
try { |
|||
uni.showLoading({ |
|||
title: "提交中...", |
|||
}); |
|||
|
|||
// 构建提交数据 |
|||
const submitData = { |
|||
productId: this.productInfo.id, |
|||
type: this.afterSaleForm.type, |
|||
reason: this.afterSaleForm.reason, |
|||
description: this.afterSaleForm.description, |
|||
images: this.afterSaleForm.images.map( |
|||
(item) => item.url || item.path |
|||
), |
|||
}; |
|||
|
|||
// 调用售后申请API |
|||
this.Post(submitData, "/framework/afterSale/create", "DES") |
|||
.then((res) => { |
|||
uni.hideLoading(); |
|||
if (res.code === 200) { |
|||
uni.showToast({ |
|||
title: "售后申请提交成功", |
|||
icon: "success", |
|||
}); |
|||
|
|||
// 延迟跳转到售后列表 |
|||
setTimeout(() => { |
|||
uni.redirectTo({ |
|||
url: "/subPackages/afterSale/list", |
|||
}); |
|||
}, 1500); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || "提交失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
uni.hideLoading(); |
|||
console.error("提交售后申请失败:", error); |
|||
uni.showToast({ |
|||
title: "提交失败", |
|||
icon: "none", |
|||
}); |
|||
}); |
|||
} catch (error) { |
|||
uni.hideLoading(); |
|||
console.error("提交售后申请失败:", error); |
|||
uni.showToast({ |
|||
title: "提交失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.after-sale-add { |
|||
min-height: 100vh; |
|||
background-color: #f8f9fa; |
|||
padding: 16rpx; |
|||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); |
|||
padding-bottom: calc(120rpx + constant(safe-area-inset-bottom)); |
|||
} |
|||
|
|||
// 卡片样式 |
|||
.card-section { |
|||
background-color: #fff; |
|||
border-radius: 16rpx; |
|||
margin-bottom: 16rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.card-header { |
|||
padding: 20rpx 24rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
background-color: #fafafa; |
|||
} |
|||
|
|||
.card-title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
// 商品信息区域 |
|||
.product-section { |
|||
padding: 24rpx; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.product-image { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 12rpx; |
|||
background-color: #f0f0f0; |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.product-info { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.product-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 6rpx; |
|||
} |
|||
|
|||
.product-subtitle { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
margin-bottom: 4rpx; |
|||
} |
|||
|
|||
.product-desc { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
// 表单区域 |
|||
.form-section { |
|||
padding: 0; |
|||
} |
|||
|
|||
.form-item { |
|||
padding: 20rpx 24rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.form-label { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
margin-bottom: 12rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.required { |
|||
color: #ff4757; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.form-sub-label { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 12rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.form-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.form-value-with-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 12rpx 0; |
|||
} |
|||
|
|||
// 理由说明文本框 |
|||
.reason-textarea { |
|||
width: 100%; |
|||
min-height: 120rpx; |
|||
max-height: 200rpx; |
|||
padding: 16rpx; |
|||
border: 1rpx solid #e0e0e0; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
background-color: #fafafa; |
|||
box-sizing: border-box; |
|||
resize: none; |
|||
} |
|||
|
|||
.char-count { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
text-align: right; |
|||
margin-top: 8rpx; |
|||
display: block; |
|||
} |
|||
|
|||
// 图片上传区域 |
|||
.image-upload-section { |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
// 提交按钮区域 |
|||
.submit-section { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #fff; |
|||
padding: 20rpx 30rpx; |
|||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); |
|||
border-top: 1rpx solid #eee; |
|||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
.submit-btn { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background-color: #ff4757; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
|
|||
&:disabled { |
|||
background-color: #ccc; |
|||
} |
|||
} |
|||
|
|||
// 售后类型选择弹窗 |
|||
.type-popup { |
|||
background-color: #fff; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.popup-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.popup-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup-close { |
|||
font-size: 40rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.popup-content { |
|||
max-height: 600rpx; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.type-option { |
|||
padding: 30rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.type-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.type-text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
|
|||
.popup-actions { |
|||
padding: 30rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.confirm-btn { |
|||
width: 100%; |
|||
height: 80rpx; |
|||
background-color: #ff4757; |
|||
color: #fff; |
|||
border: none; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
// 售后原因选择弹窗 |
|||
.reason-popup { |
|||
background-color: #fff; |
|||
border-radius: 20rpx 20rpx 0 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.reason-option { |
|||
padding: 30rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.reason-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.reason-text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,632 @@ |
|||
<template> |
|||
<view class="after-sale-detail"> |
|||
<!-- 状态头部 --> |
|||
<view class="status-header"> |
|||
<view |
|||
class="status-badge" |
|||
:class="[getStatusClass(afterSaleDetail.status)]" |
|||
> |
|||
{{ getStatusText(afterSaleDetail.status) }} |
|||
</view> |
|||
<view class="status-desc">{{ |
|||
getStatusDesc(afterSaleDetail.status) |
|||
}}</view> |
|||
</view> |
|||
|
|||
<!-- 商品信息 --> |
|||
<view class="product-section"> |
|||
<view class="section-title">商品信息</view> |
|||
<view class="product-info"> |
|||
<image |
|||
class="product-image" |
|||
:src="afterSaleDetail.productImage" |
|||
mode="aspectFill" |
|||
/> |
|||
<view class="product-details"> |
|||
<text class="product-title">{{ afterSaleDetail.productTitle }}</text> |
|||
<text class="product-spec">{{ afterSaleDetail.productSpec }}</text> |
|||
<text class="order-number" |
|||
>订单号：{{ afterSaleDetail.orderNumber }}</text |
|||
> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 售后信息 --> |
|||
<view class="after-sale-section"> |
|||
<view class="section-title">售后信息</view> |
|||
<view class="info-list"> |
|||
<view class="info-item"> |
|||
<text class="info-label">售后类型</text> |
|||
<text class="info-value">{{ afterSaleDetail.type }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">售后原因</text> |
|||
<text class="info-value">{{ afterSaleDetail.reason }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">申请时间</text> |
|||
<text class="info-value">{{ |
|||
formatTime(afterSaleDetail.createTime) |
|||
}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">售后单号</text> |
|||
<text class="info-value">{{ afterSaleDetail.afterSaleNumber }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 问题描述 --> |
|||
<view class="description-section"> |
|||
<view class="section-title">问题描述</view> |
|||
<view class="description-content"> |
|||
<text class="description-text">{{ afterSaleDetail.description }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 问题图片 --> |
|||
<view |
|||
class="images-section" |
|||
v-if="afterSaleDetail.images && afterSaleDetail.images.length > 0" |
|||
> |
|||
<view class="section-title">问题图片</view> |
|||
<view class="images-grid"> |
|||
<image |
|||
class="problem-image" |
|||
v-for="(image, index) in afterSaleDetail.images" |
|||
:key="index" |
|||
:src="image" |
|||
mode="aspectFill" |
|||
@click="previewImage(index)" |
|||
/> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 处理进度 --> |
|||
<view class="progress-section"> |
|||
<view class="section-title">处理进度</view> |
|||
<view class="progress-list"> |
|||
<view |
|||
class="progress-item" |
|||
v-for="(progress, index) in afterSaleDetail.progressList" |
|||
:key="index" |
|||
:class="{ |
|||
active: progress.isActive, |
|||
completed: progress.isCompleted, |
|||
}" |
|||
> |
|||
<view class="progress-icon"> |
|||
<uni-icons |
|||
:type="progress.isCompleted ? 'checkmarkempty' : 'circle'" |
|||
size="20" |
|||
:color="progress.isCompleted ? '#34c759' : '#ddd'" |
|||
/> |
|||
</view> |
|||
<view class="progress-content"> |
|||
<text class="progress-title">{{ progress.title }}</text> |
|||
<text class="progress-time">{{ formatTime(progress.time) }}</text> |
|||
<text class="progress-desc" v-if="progress.description">{{ |
|||
progress.description |
|||
}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 客服回复 --> |
|||
<view class="reply-section" v-if="afterSaleDetail.reply"> |
|||
<view class="section-title">客服回复</view> |
|||
<view class="reply-content"> |
|||
<text class="reply-text">{{ afterSaleDetail.reply.content }}</text> |
|||
<text class="reply-time">{{ |
|||
formatTime(afterSaleDetail.reply.time) |
|||
}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 底部操作 --> |
|||
<view class="bottom-actions" v-if="showBottomActions"> |
|||
<button |
|||
class="action-btn secondary" |
|||
@click="cancelAfterSale" |
|||
v-if="afterSaleDetail.status === 'pending'" |
|||
> |
|||
取消申请 |
|||
</button> |
|||
<button class="action-btn primary" @click="contactService"> |
|||
联系客服 |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
afterSaleId: "", |
|||
afterSaleDetail: { |
|||
id: "", |
|||
status: "pending", |
|||
productImage: "", |
|||
productTitle: "", |
|||
productSpec: "", |
|||
orderNumber: "", |
|||
type: "", |
|||
reason: "", |
|||
description: "", |
|||
images: [], |
|||
createTime: "", |
|||
afterSaleNumber: "", |
|||
progressList: [], |
|||
reply: null, |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
showBottomActions() { |
|||
return ["pending", "processing"].includes(this.afterSaleDetail.status); |
|||
}, |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.afterSaleId = options.id; |
|||
this.loadAfterSaleDetail(); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 加载售后详情 |
|||
async loadAfterSaleDetail() { |
|||
try { |
|||
uni.showLoading({ |
|||
title: "加载中...", |
|||
}); |
|||
|
|||
this.Post( |
|||
{ id: this.afterSaleId }, |
|||
"/framework/afterSale/detail", |
|||
"DES" |
|||
) |
|||
.then((res) => { |
|||
uni.hideLoading(); |
|||
if (res.code === 200) { |
|||
this.afterSaleDetail = res.data; |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
uni.hideLoading(); |
|||
console.error("加载售后详情失败:", error); |
|||
uni.showToast({ |
|||
title: "加载失败", |
|||
icon: "none", |
|||
}); |
|||
}); |
|||
} catch (error) { |
|||
uni.hideLoading(); |
|||
console.error("加载售后详情失败:", error); |
|||
uni.showToast({ |
|||
title: "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 预览图片 |
|||
previewImage(index) { |
|||
uni.previewImage({ |
|||
current: index, |
|||
urls: this.afterSaleDetail.images, |
|||
}); |
|||
}, |
|||
|
|||
// 取消售后申请 |
|||
cancelAfterSale() { |
|||
uni.showModal({ |
|||
title: "确认取消", |
|||
content: "确定要取消这个售后申请吗？", |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
this.Post( |
|||
{ id: this.afterSaleId }, |
|||
"/framework/afterSale/cancel", |
|||
"DES" |
|||
) |
|||
.then((res) => { |
|||
if (res.code === 200) { |
|||
uni.showToast({ |
|||
title: "取消成功", |
|||
icon: "success", |
|||
}); |
|||
// 重新加载详情 |
|||
this.loadAfterSaleDetail(); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg || "取消失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
console.error("取消售后申请失败:", error); |
|||
uni.showToast({ |
|||
title: "取消失败", |
|||
icon: "none", |
|||
}); |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 联系客服 |
|||
contactService() { |
|||
// 这里可以跳转到客服页面或拨打电话 |
|||
uni.showModal({ |
|||
title: "联系客服", |
|||
content: "请拨打客服电话：400-123-4567", |
|||
confirmText: "拨打", |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
// 拨打电话 |
|||
uni.makePhoneCall({ |
|||
phoneNumber: "400-123-4567", |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
// 获取状态文本 |
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
pending: "待处理", |
|||
processing: "处理中", |
|||
completed: "已完成", |
|||
cancelled: "已取消", |
|||
}; |
|||
return statusMap[status] || "未知状态"; |
|||
}, |
|||
|
|||
// 获取状态描述 |
|||
getStatusDesc(status) { |
|||
const descMap = { |
|||
pending: "您的售后申请已提交，请耐心等待处理", |
|||
processing: "客服正在处理您的售后申请", |
|||
completed: "您的售后申请已处理完成", |
|||
cancelled: "您的售后申请已取消", |
|||
}; |
|||
return descMap[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-detail { |
|||
min-height: 100vh; |
|||
background-color: #f5f5f5; |
|||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); |
|||
padding-bottom: calc(120rpx + constant(safe-area-inset-bottom)); |
|||
} |
|||
|
|||
// 状态头部 |
|||
.status-header { |
|||
background-color: #fff; |
|||
padding: 40rpx 30rpx; |
|||
text-align: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.status-badge { |
|||
display: inline-block; |
|||
padding: 12rpx 24rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
font-weight: 600; |
|||
margin-bottom: 16rpx; |
|||
|
|||
&.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; |
|||
} |
|||
} |
|||
|
|||
.status-desc { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
// 通用区域样式 |
|||
.section-title { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
|
|||
// 商品信息 |
|||
.product-section { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.product-info { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.order-number { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
// 售后信息 |
|||
.after-sale-section { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.info-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
min-width: 140rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
text-align: right; |
|||
} |
|||
|
|||
// 问题描述 |
|||
.description-section { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.description-content { |
|||
background-color: #f8f9fa; |
|||
border-radius: 8rpx; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.description-text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
// 问题图片 |
|||
.images-section { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.images-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 16rpx; |
|||
} |
|||
|
|||
.problem-image { |
|||
width: 100%; |
|||
aspect-ratio: 1; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
// 处理进度 |
|||
.progress-section { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.progress-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 30rpx; |
|||
} |
|||
|
|||
.progress-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
position: relative; |
|||
|
|||
&:not(:last-child)::after { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 10rpx; |
|||
top: 40rpx; |
|||
width: 2rpx; |
|||
height: 30rpx; |
|||
background-color: #eee; |
|||
} |
|||
|
|||
&.completed:not(:last-child)::after { |
|||
background-color: #34c759; |
|||
} |
|||
} |
|||
|
|||
.progress-icon { |
|||
margin-right: 20rpx; |
|||
flex-shrink: 0; |
|||
margin-top: 4rpx; |
|||
} |
|||
|
|||
.progress-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.progress-title { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.progress-time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.progress-desc { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
// 客服回复 |
|||
.reply-section { |
|||
background-color: #fff; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.reply-content { |
|||
background-color: #f0f8ff; |
|||
border-radius: 8rpx; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.reply-text { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
margin-bottom: 12rpx; |
|||
display: block; |
|||
} |
|||
|
|||
.reply-time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
// 底部操作 |
|||
.bottom-actions { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background-color: #fff; |
|||
padding: 20rpx 30rpx; |
|||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); |
|||
border-top: 1rpx solid #eee; |
|||
display: flex; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.action-btn { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
border: none; |
|||
|
|||
&.secondary { |
|||
background-color: #fff; |
|||
color: #666; |
|||
border: 1rpx solid #ddd; |
|||
} |
|||
|
|||
&.primary { |
|||
background-color: #007aff; |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,530 @@ |
|||
<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> |
|||
Loading…
Reference in new issue