314 lines
13 KiB
Vue
314 lines
13 KiB
Vue
<template>
|
||
<view class="container page">
|
||
<!-- 进度指示器 -->
|
||
<view class="process-steps_top" v-if="false">
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle active"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">申请换货</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle active active2"></view>
|
||
<view class="step-info">
|
||
<text class="step-title active">等待商家处理退货申请<text class="step-desc">还剩6天23时26分</text></text>
|
||
<text class="step-desc2">如卖家同意,请按照卖家给出的地址及时寄出</text>
|
||
<text class="step-desc2">如卖超时未及时处理,平台将自动同意,请按照平台给出的地址及时寄出</text>
|
||
<text class="step-desc2">等待买家退货</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-circle"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">
|
||
待卖家确认收货并发货
|
||
<text class="all-process-link" @click="showAllProcess">全部流程 ></text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="status-tip" v-if="false">
|
||
<text class="status-title">换货关闭</text>
|
||
<text class="status-desc">2025年7月25日 11:30</text>
|
||
<text class="status-desc">由于您主动撤销换货申请,换货关闭。</text>
|
||
</view>
|
||
|
||
<view class="status-tip">
|
||
<text class="status-title">换货关闭</text>
|
||
<text class="status-desc">2025年7月25日 11:30</text>
|
||
<text class="status-desc" style="color: #f63b08;">商家拒绝了您的换货申请,换货关闭</text>
|
||
</view>
|
||
|
||
<view class="hr"></view>
|
||
|
||
<view v-if="false">
|
||
<view class="info-item2">
|
||
<view class="address-content">
|
||
<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">
|
||
<view class="address-val">
|
||
<text>河北省衡水市桃城区路北街道中心北大街世纪名城41号楼</text>
|
||
<!-- <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
|
||
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" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<!-- 商品信息 -->
|
||
<view>
|
||
<view class="goods-info">
|
||
<view class="goods-item">
|
||
<view class="asGoodTag tag-img"
|
||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</view>
|
||
<image class="goods-image" :src="currentAfterSale.commodity_order_item[0].commodity_pic"></image>
|
||
<view class="goods-details">
|
||
<text class="goods-name">
|
||
<text class="asGoodTag asGoodTag1"
|
||
v-if="currentAfterSale.commodity_order_item[0].is_support_same_day === 1">当日达</text>
|
||
{{ currentAfterSale.commodity_order_item[0].goods_name }}
|
||
</text>
|
||
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||
<text class="goods-price">
|
||
{{ '¥' + currentAfterSale.commodity_order_item[0].sales_price.toFixed(2) + '/个' }}
|
||
<text class="goods-count">X{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退款信息 -->
|
||
<view class="refund-info">
|
||
<view class="info-item">
|
||
<text class="info-label">服务类型</text>
|
||
<text class="info-value">{{ getServiceTypeText(currentAfterSale.after_sales_type) }}</text>
|
||
<text class="info-arrow"></text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">退款原因</text>
|
||
<text class="info-value">{{ currentAfterSale.after_sales_reason }}</text>
|
||
<text class="info-arrow"></text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">换货数量</text>
|
||
<text class="info-value">{{ currentAfterSale.commodity_order_item[0].count }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">申请时间</text>
|
||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">退款编号</text>
|
||
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||
<text class="copy-icon" @click="copyRefundNo"></text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">收货地址</text>
|
||
<text class="info-value">{{ currentAfterSale.user_address }}</text>
|
||
</view>
|
||
<view class="info-item" v-if="false">
|
||
<text class="info-label">退款完结</text>
|
||
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="action-buttons" v-if="false">
|
||
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
||
</view>
|
||
|
||
<!-- 全部流程弹窗 -->
|
||
<u-popup ref="allProcessPopup" :show="allProcessPopupShow" :round="10" @close="closeAllProcessPopup">
|
||
<view class="all-process-popup">
|
||
<view class="popup-title">全部退款流程</view>
|
||
<view class="close-btn" @click="closeAllProcessPopup">取消</view>
|
||
<view class="process-steps">
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle active"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">申请换货</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle active"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">商家同意换货</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle active active2"></view>
|
||
<view class="step-info">
|
||
<text class="step-title active">等待商家处理退货申请<text class="step-desc">还剩6天23时26分</text></text>
|
||
<text class="step-desc2">卖家已同意换货，请您及时退回需更换的商品。</text>
|
||
<text class="step-desc2">如您超时未填写退货物流信息，平台将自动关闭本次换货申请。</text>
|
||
<text class="step-desc2">未经卖家同意，请不要使用到付或平邮。</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">待卖家确认收货并发货</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-line"></view>
|
||
<view class="step-circle"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">卖家已发货，请注意查收</text>
|
||
</view>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-circle"></view>
|
||
<view class="step-info">
|
||
<text class="step-title">换货完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="confirm-btn" @click="closeAllProcessPopup">我知道了</button>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {
|
||
isPhone,
|
||
picUrl,
|
||
request,
|
||
upload,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentAfterSale: {},
|
||
pickerDefaultDate: new Date(),
|
||
allProcessPopupShow: false
|
||
};
|
||
},
|
||
created() {
|
||
// 初始化日期选择器默认值为当前申请时间
|
||
this.pickerDefaultDate = new Date(this.currentAfterSale.create_time);
|
||
},
|
||
onLoad(options) {
|
||
const item = JSON.parse(options?.item);
|
||
console.log("🚀 ~ onLoad ~ item:", item)
|
||
this.currentAfterSale = item;
|
||
},
|
||
methods: {
|
||
getServiceTypeText(type) {
|
||
return type === 1 ? '退货退款' : '仅退款';
|
||
},
|
||
|
||
// 格式化日期
|
||
formatDate(dateString) {
|
||
if (!dateString) return '';
|
||
const date = new Date(dateString);
|
||
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')}:${String(date.getSeconds()).padStart(2, '0')}`;
|
||
},
|
||
|
||
// 复制商家地址
|
||
copyAdress() {
|
||
uni.setClipboardData({
|
||
data: this.currentAfterSale.after_sales_no,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '复制失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
addOrderId() {
|
||
NavgateTo(`../returnLogistics/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||
},
|
||
|
||
// 复制退款编号
|
||
copyRefundNo() {
|
||
uni.setClipboardData({
|
||
data: this.currentAfterSale.after_sales_no,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '复制失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 撤销申请
|
||
cancelRefund() {
|
||
uni.showModal({
|
||
title: "确定要撤销本次售后申请吗？",
|
||
showCancel: true,
|
||
cancelText: "暂不撤销",
|
||
confirmText: "确认撤销",
|
||
confirmColor: "#ff4d4f",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 撤销售后接口
|
||
uni.showToast({
|
||
title: '订单撤销成功',
|
||
icon: 'success'
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
// 修改申请
|
||
modifyRefund() {
|
||
NavgateTo(`../apply/index?item=${JSON.stringify(this.currentAfterSale)}`);
|
||
},
|
||
|
||
// 显示全部流程弹窗
|
||
showAllProcess() {
|
||
this.allProcessPopupShow = true;
|
||
},
|
||
|
||
// 关闭全部流程弹窗
|
||
closeAllProcessPopup() {
|
||
this.allProcessPopupShow = false;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url('./index.css')
|
||
</style> |