501 lines
22 KiB
Vue
501 lines
22 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 选择售后商品 -->
|
|
<view>
|
|
<u-popup ref="popup" :show="afterSalePopup" :round="10" @close="closeAfterSalePopup"
|
|
:mask-close-able="false">
|
|
<view class="cancel-reason-container">
|
|
<view class="title">选择退款原因</view>
|
|
<view class="asType">
|
|
<text>请选择售后类型</text>
|
|
<view class="asTabs">
|
|
<view :class="['asTab', selectedAfterSaleType === 0 ? 'active' : '']"
|
|
@click="selectAfterSaleType(0)">
|
|
退货/退款</view>
|
|
<view :class="['asTab', selectedAfterSaleType === 1 ? 'active' : '']"
|
|
@click="selectAfterSaleType(1)">换货
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="asGoodsInfo" v-for="(item, index) in afterSaleGoods" :key="index">
|
|
<view class="asGoodInfo" @click="selectAsGood(item)">
|
|
<view :class="['radio asGoodRadio', selectedAsGood == item.id ? 'active' : '']"></view>
|
|
<view class="asGoodTag tag-img" v-if="item.is_support_same_day === 1">当日达</view>
|
|
<image :src="item.commodity_pic" class="asGoodImg"></image>
|
|
<view class="asGoodDetail">
|
|
<view class="asGoodTitle">
|
|
<text class="asGoodTag asGoodTag1" v-if="item.is_support_same_day === 1">当日达</text>
|
|
{{ item.goods_name}}
|
|
</view>
|
|
<view class="asGoodDesc">{{ item.goods_spec }}</view>
|
|
<view class="asGoodPrice">¥{{ item.cost_price }}/个</view>
|
|
</view>
|
|
<view class="asGoodNum">x{{ item.count }}</view>
|
|
</view>
|
|
</view>
|
|
<button class="confirm-btn" @click="confirmAfterSaleCancel">下一步</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
|
|
<!------------------------ 退货退款逻辑 ------------------------>
|
|
<!-- 选择退款原因 -->
|
|
<view v-if="selectedAfterSaleType === 0">
|
|
<u-popup ref="popup" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
|
:mask-close-able="false">
|
|
<view class="cancel-reason-container">
|
|
<view class="title">选择退款原因</view>
|
|
<view class="asTabs2">
|
|
<view :class="['asTab2', selectedAfterSaleType2 === 0 ? 'active' : '']"
|
|
@click="selectAfterSaleType2(0)">
|
|
退货退款</view>
|
|
<view :class="['asTab2', selectedAfterSaleType2 === 1 ? 'active' : '']"
|
|
@click="selectAfterSaleType2(1)">退货
|
|
</view>
|
|
</view>
|
|
<view class="reason-list" v-if="selectedAfterSaleType2 === 0">
|
|
<view v-for="(reason, index) in applyRefundReasons" :key="index" class="reason-item"
|
|
@click="selectAsReason(index)">
|
|
<view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
|
|
<text>{{ reason }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="reason-list" v-if="selectedAfterSaleType2 === 1">
|
|
<view v-for="(reason, index) in cancelReasons" :key="index" class="reason-item"
|
|
@click="selectAsReason(index)">
|
|
<view :class="['radio', selectedAsReason === index ? 'active' : '']"></view>
|
|
<text>{{ reason }}</text>
|
|
</view>
|
|
</view>
|
|
<button class="confirm-btn" @click="confirmAfterSaleCancel2">下一步</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
<!-- 确认退款信息 -->
|
|
<view v-if="selectedAfterSaleType === 0">
|
|
<u-popup ref="popup" :show="afterSalePopup3" :round="10" @close="closeAfterSalePopup3"
|
|
:mask-close-able="false">
|
|
<view class="refund-info-container">
|
|
<view class="refund-title">确认退款信息</view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">服务类型<text class="required">*</text></view>
|
|
|
|
<view class="refund-value" @click="openAfterSalePopup2('serviceType')">
|
|
{{ selectedServiceType || '请选择服务类型' }}
|
|
<text class="arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">退款原因<text class="required">*</text></view>
|
|
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
|
{{ selectedRefundReason || '请选择退款原因' }}
|
|
<text class="arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="refund-item" style="border-bottom: none;">
|
|
<view class="refund-label">退款金额<text class="required">*</text></view>
|
|
<view class="refund-value">
|
|
<text class="price">¥{{ refundAmount || '0.00' }}</text>
|
|
<text class="modify-btn" @click="modifyRefundAmount">修改</text>
|
|
<view class="refund-hint">可修改，最多¥{{ maxRefundAmount || '0.00' }}，含发货邮费¥{{ postage || '0.00'
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="refund-item2">
|
|
<view class="refund-label">补充描述和凭证</view>
|
|
<textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题"
|
|
v-model="refundDescription" maxlength="200"></textarea>
|
|
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
|
:maxCount="3">
|
|
<view class="imgCon">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
|
mode="widthFix"></image>
|
|
上传凭证
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">退款方式</view>
|
|
<view class="refund-value" style="margin-bottom: 30rpx;">
|
|
{{ refundMethod || '自行寄回' }}
|
|
<view class="refund-hint">您可自行安排将商品退回商家</view>
|
|
</view>
|
|
</view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">商家地址</view>
|
|
<view class="refund-value" @click="viewAddressDetails">
|
|
{{ merchantAddress || '未设置' }}
|
|
<text class="arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="contact-info">
|
|
<text>{{ merchantContact || '未设置' }}</text>
|
|
</view>
|
|
<button class="submit-btn" @click="submitRefundApplication">提交申请</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
|
|
<!------------------------ 换货逻辑 ------------------------>
|
|
<!-- 选择退款原因 -->
|
|
<view v-if="selectedAfterSaleType === 1">
|
|
<u-popup ref="popup" :show="afterSalePopup2" :round="10" @close="closeAfterSalePopup2"
|
|
:mask-close-able="false">
|
|
<view class="cancel-reason-container">
|
|
<view class="title">选择换货原因</view>
|
|
<view class="reason-list">
|
|
<view v-for="(reason, index) in exchangeReasons" :key="index" class="reason-item"
|
|
@click="selectReason(index)">
|
|
<view :class="['radio', selectedReason === index ? 'active' : '']"></view>
|
|
<text>{{ reason }}</text>
|
|
</view>
|
|
</view>
|
|
<button class="confirm-btn" @click="confirmChange">下一步</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
<!-- 确认退款信息 -->
|
|
<view v-if="selectedAfterSaleType === 1">
|
|
<u-popup ref="popup" :show="afterSalePopup3" :round="10" @close="closeAfterSalePopup3"
|
|
:mask-close-able="false">
|
|
<view class="refund-info-container">
|
|
<view class="refund-title">申请退换</view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">换货原因<text class="required">*</text></view>
|
|
<view class="refund-value" @click="openAfterSalePopup2('refundReason')">
|
|
{{ changeRefundReason || '请选择退换原因' }}
|
|
<text class="arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="refund-item">
|
|
<view class="refund-label">换货商品<text class="required">*</text></view>
|
|
<view class="refund-value" @click="changeGood()">
|
|
{{ changeServiceType || '请选择需要换的商品' }}
|
|
<text class="arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="text-wrapper_8">
|
|
<text class="text_41">高尚</text>
|
|
<text class="text_42">15901518415</text>
|
|
</view>
|
|
<view class="block_15">
|
|
<view class="address-view">
|
|
<text> {{ merchantAddress }} </text>
|
|
<view class="copy-icon" @click="copyRefundNo"></view>
|
|
</view>
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/af_update_address.png" class="icon_2"></image>
|
|
</view>
|
|
<view class="hr"></view>
|
|
<view class="refund-item2">
|
|
<view class="refund-label">补充描述和凭证</view>
|
|
<textarea class="refund-description" placeholder="补充描述，有助于商家更好的处理售后问题"
|
|
v-model="refundDescription" maxlength="200"></textarea>
|
|
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
|
:maxCount="3">
|
|
<view class="imgCon">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
|
mode="widthFix"></image>
|
|
上传凭证
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
<button class="submit-btn" @click="submitRefundApplication">提交申请</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
|
|
<!-- 选择商品 -->
|
|
<u-popup :show="showSize" round="20rpx" mode="bottom" @close="closeSize">
|
|
<view class="popup-header">
|
|
<h3 class="popup-header-h3">选择款式</h3>
|
|
<view class="popup-header-view" @click="closeSize">取消</view>
|
|
</view>
|
|
<view class="itemSize_top">
|
|
<image :src="changeImg" class="itemSize-img"></image>
|
|
<view class="itemSize_info">
|
|
<view class="itemSize_name">{{ changeName }}</view>
|
|
<view class="itemSize_price">￥{{ changePrice }}/袋</view>
|
|
</view>
|
|
</view>
|
|
<view class="itemSize" v-for="(item, index) in info.commodity_goods_info_list" :key="item.id"
|
|
@click="changeGG(item, index)" :class="index == currentGGIndex ? 'itemSize_active' : ''">
|
|
{{ item.goods_name }} {{ item.goods_spec }} / {{ item.goods_unit }}
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { upload, picUrl } from '../../../../../utils';
|
|
|
|
export default {
|
|
name: 'AfterSalePopup',
|
|
props: {
|
|
afterSaleGoods: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
afterSalePopup: false,
|
|
afterSalePopup2: false,
|
|
afterSalePopup3: false,
|
|
selectedAsGood: '',
|
|
selectedAfterSaleType: 0, // 0:退货/退款, 1:换货
|
|
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
|
|
selectedAsReason: 0,
|
|
selectedReason: 0,//换货原因
|
|
selectedServiceType: '',
|
|
selectedRefundReason: '',
|
|
changeRefundReason: '', // 换货原因回显
|
|
changeServiceType: '', // 换货商品回显
|
|
showSize: false,//选择款式弹窗
|
|
changeImg: "",
|
|
changeName: "",
|
|
changePrice: "",
|
|
|
|
refundAmount: 0,
|
|
maxRefundAmount: 0,
|
|
postage: 0,
|
|
refundDescription: '',
|
|
refundMethod: '自行寄回',
|
|
merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
|
|
merchantContact: '高尚 18032753127',
|
|
imgList: [],
|
|
applyRefundReasons: [
|
|
'商品质量问题',
|
|
'商品与描述不符',
|
|
'商品破损',
|
|
'商品错发/漏发',
|
|
'其他原因'
|
|
],
|
|
cancelReasons: [
|
|
'不想要了',
|
|
'拍错了',
|
|
'商品质量问题',
|
|
'其他原因'
|
|
],
|
|
exchangeReasons: [
|
|
'不想要了，无理由换货',
|
|
'商品信息拍错',
|
|
'没用/少用优惠',
|
|
'缺货',
|
|
'其他'
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
// 打开售后弹窗
|
|
openAfterSalePopup() {
|
|
this.$nextTick(() => {
|
|
if (this.afterSaleGoods && this.afterSaleGoods.length > 0) {
|
|
this.selectedAsGood = this.afterSaleGoods[0].id;
|
|
this.afterSalePopup = true;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 选择售后商品
|
|
selectAsGood(item) {
|
|
this.selectedAsGood = item.id;
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closeAfterSalePopup() {
|
|
this.afterSalePopup = false;
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closeAfterSalePopup() {
|
|
this.afterSalePopup = false;
|
|
},
|
|
|
|
closeAfterSalePopup2() {
|
|
if (this.selectedReason !== null && this.selectedReason !== undefined) {
|
|
this.changeRefundReason = this.exchangeReasons[this.selectedReason];
|
|
}
|
|
this.afterSalePopup2 = false;
|
|
},
|
|
|
|
closeAfterSalePopup3() {
|
|
this.afterSalePopup3 = false;
|
|
},
|
|
|
|
// 选择售后类型
|
|
selectAfterSaleType(index) {
|
|
this.selectedAfterSaleType = index;
|
|
},
|
|
|
|
selectAfterSaleType2(index) {
|
|
this.selectedAfterSaleType2 = index;
|
|
},
|
|
|
|
// 确认售后商品选择
|
|
confirmAfterSaleCancel() {
|
|
const afterSaleTypes = ['退货/退款', '换货'];
|
|
const selectedType = afterSaleTypes[this.selectedAfterSaleType];
|
|
console.log('售后商品 - 选中的售后类型:', selectedType);
|
|
console.log('选中的售后商品:', this.selectedAsGood);
|
|
|
|
this.afterSalePopup = false;
|
|
this.afterSalePopup2 = true;
|
|
},
|
|
|
|
// 选择退款原因
|
|
selectAsReason(index) {
|
|
this.selectedAsReason = index;
|
|
},
|
|
|
|
// 换货原因
|
|
selectReason(index) {
|
|
this.selectedReason = index;
|
|
},
|
|
|
|
// 选择换货原因
|
|
confirmChange() {
|
|
let selectedReasonText = '';
|
|
selectedReasonText = this.exchangeReasons[this.selectedReason];
|
|
console.log('换货原因:', selectedReasonText);
|
|
|
|
// 将选中的换货原因赋值给changeRefundReason变量以回显
|
|
this.changeRefundReason = selectedReasonText;
|
|
|
|
this.afterSalePopup2 = false;
|
|
this.afterSalePopup3 = true;
|
|
},
|
|
|
|
// 关闭换货原因弹窗时保存选择
|
|
closeAfterSalePopup2() {
|
|
if (this.selectedReason !== null && this.selectedReason !== undefined) {
|
|
this.changeRefundReason = this.exchangeReasons[this.selectedReason];
|
|
}
|
|
this.afterSalePopup2 = false;
|
|
},
|
|
|
|
// 确认退款原因选择
|
|
confirmAfterSaleCancel2() {
|
|
const afterSaleTypes = ['退货退款', '退货'];
|
|
const selectedType = afterSaleTypes[this.selectedAfterSaleType2];
|
|
console.log('选中的售后类型:', selectedType);
|
|
|
|
let selectedReasonText = '';
|
|
if (selectedType == '退货退款') {
|
|
selectedReasonText = this.applyRefundReasons[this.selectedAsReason];
|
|
} else {
|
|
selectedReasonText = this.cancelReasons[this.selectedAsReason];
|
|
}
|
|
console.log('退款原因:', selectedReasonText);
|
|
|
|
// 设置选中的服务类型和退款原因
|
|
this.selectedServiceType = selectedType;
|
|
this.selectedRefundReason = selectedReasonText;
|
|
// 模拟退款金额数据
|
|
this.refundAmount = 4704.00;
|
|
this.maxRefundAmount = 53.80;
|
|
this.postage = 0.00;
|
|
|
|
this.selectAsReason(0);
|
|
this.afterSalePopup2 = false;
|
|
this.afterSalePopup3 = true;
|
|
},
|
|
|
|
// 打开选择服务类型或退款原因弹窗
|
|
openAfterSalePopup2(type) {
|
|
this.afterSalePopup3 = false;
|
|
this.afterSalePopup2 = true;
|
|
},
|
|
|
|
// 选择换货商品
|
|
changeGood() {
|
|
this.afterSalePopup3 = false;
|
|
this.showSize = true;
|
|
},
|
|
|
|
closeSize() {
|
|
this.showSize = false;
|
|
},
|
|
|
|
// 切换规格
|
|
changeGG(item, index) {
|
|
console.log("🚀 ~ changeGG ~ item:", item);
|
|
this.currentGG = item;
|
|
this.currentGGIndex = index;
|
|
if (this.currentGG.cart_count) {
|
|
this.currentNum = this.currentGG.cart_count.count;
|
|
} else {
|
|
this.currentGG.cart_count = { count: 0 };
|
|
}
|
|
this.changeImg = item.commodity_pic[0]
|
|
this.changeName = item.goods_alias
|
|
this.changePrice = item.sales_price
|
|
|
|
this.afterSalePopup3 = true;
|
|
this.showSize = false;
|
|
},
|
|
|
|
// 上传图片
|
|
afterReadImg(e) {
|
|
e.file.forEach(item => {
|
|
upload(item.url, res => {
|
|
this.imgList.push({ url: picUrl + res.data.path });
|
|
console.log('imgList:', this.imgList);
|
|
});
|
|
});
|
|
},
|
|
|
|
// 删除图片
|
|
deletePic(e) {
|
|
this.imgList.splice(e.index, 1);
|
|
},
|
|
|
|
// 修改退款金额
|
|
modifyRefundAmount() {
|
|
console.log('修改退款金额');
|
|
},
|
|
|
|
// 查看地址详情
|
|
viewAddressDetails() {
|
|
console.log('查看地址详情');
|
|
},
|
|
|
|
// 提交退款申请
|
|
submitRefundApplication() {
|
|
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
|
uni.showToast({
|
|
title: '请选择服务类型和退款原因',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 输出弹窗中的所有内容
|
|
const refundInfo = {
|
|
serviceType: this.selectedServiceType,
|
|
refundReason: this.selectedRefundReason,
|
|
refundAmount: this.refundAmount,
|
|
maxRefundAmount: this.maxRefundAmount,
|
|
postage: this.postage,
|
|
refundDescription: this.refundDescription,
|
|
refundMethod: this.refundMethod,
|
|
merchantAddress: this.merchantAddress,
|
|
merchantContact: this.merchantContact,
|
|
imgList: this.imgList
|
|
};
|
|
console.log('提交退款申请:', refundInfo);
|
|
|
|
this.afterSalePopup3 = false;
|
|
// 触发父组件事件，传递退款信息
|
|
this.$emit('refundSubmitted', refundInfo);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |