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.
613 lines
14 KiB
613 lines
14 KiB
<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="#00FFFF"
|
|
/>
|
|
</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="#00FFFF"
|
|
/>
|
|
</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: #00FFFF;
|
|
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);
|
|
z-index: 999;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #00FFFF;
|
|
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: #00FFFF;
|
|
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>
|
|
|