完成售后模块页面
This commit is contained in:
赵毅
parent
41f655373f
commit
b53bf393d4
190
packages/myOrders/afterSale/afterSale.json
Normal file
190
packages/myOrders/afterSale/afterSale.json
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": 9001,
|
||||||
|
"after_sales_no": "AS202508130001",
|
||||||
|
"commodity_order_id": 1001,
|
||||||
|
"after_sales_status": 1,
|
||||||
|
"applicant": "张三",
|
||||||
|
"after_sales_reason": "拍错商品/不想要了",
|
||||||
|
"after_sales_type": 1,
|
||||||
|
"application_description": "请尽快处理退款",
|
||||||
|
"application_images": "http://localhost:8080/test.png",
|
||||||
|
"is_need_process": 1,
|
||||||
|
"process_status": 1,
|
||||||
|
"refund_amount": 68.00,
|
||||||
|
"after_sales_goods": "1@8001",
|
||||||
|
"refund_method": 1,
|
||||||
|
"review_status": 1,
|
||||||
|
"creator": "customer",
|
||||||
|
"create_time": "2025-08-13T11:20:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7001,
|
||||||
|
"goods_id": 8001,
|
||||||
|
"goods_name": "澳洲牛排",
|
||||||
|
"is_support_same_day": 1,
|
||||||
|
"commodity_pic": "http://localhost:8080/test.png",
|
||||||
|
"sales_price": 68.00,
|
||||||
|
"count": 1,
|
||||||
|
"after_sales_status": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9002,
|
||||||
|
"after_sales_no": "AS202508130002",
|
||||||
|
"commodity_order_id": 1002,
|
||||||
|
"after_sales_status": 1,
|
||||||
|
"after_sales_type": 1,
|
||||||
|
"refund_no": "RF202508130001",
|
||||||
|
"refund_completed_time": "2025-08-13T14:30:00Z",
|
||||||
|
"is_need_process": 2,
|
||||||
|
"process_status": 2,
|
||||||
|
"refund_amount": 45.80,
|
||||||
|
"after_sales_goods": "2@8004",
|
||||||
|
"refund_method": 1,
|
||||||
|
"review_status": 2,
|
||||||
|
"review_remark": "审核通过，已原路退款",
|
||||||
|
"reviewer": "客服008",
|
||||||
|
"review_time": "2025-08-13T14:15:00Z",
|
||||||
|
"create_time": "2025-08-13T13:45:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7004,
|
||||||
|
"goods_id": 8004,
|
||||||
|
"goods_name": "东北大米",
|
||||||
|
"sales_price": 22.90,
|
||||||
|
"count": 2,
|
||||||
|
"after_sales_status": 3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9003,
|
||||||
|
"after_sales_no": "AS202508130003",
|
||||||
|
"commodity_order_id": 1003,
|
||||||
|
"after_sales_status": 1,
|
||||||
|
"applicant": "李四",
|
||||||
|
"after_sales_reason": "商品质量问题",
|
||||||
|
"after_sales_type": 2,
|
||||||
|
"application_description": "商品包装破损",
|
||||||
|
"application_images": "http://localhost:8080/test.png",
|
||||||
|
"return_description": "已通过顺丰寄回",
|
||||||
|
"return_images": "http://localhost:8080/test.png",
|
||||||
|
"return_tracking_no": "SF1234567890",
|
||||||
|
"return_logistics_company": "顺丰速运",
|
||||||
|
"return_contact_phone": "13800138000",
|
||||||
|
"is_need_process": 1,
|
||||||
|
"process_status": 1,
|
||||||
|
"refund_amount": 152.00,
|
||||||
|
"after_sales_goods": "1@8003",
|
||||||
|
"refund_method": 1,
|
||||||
|
"review_status": 1,
|
||||||
|
"create_time": "2025-08-13T15:30:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7003,
|
||||||
|
"goods_id": 8003,
|
||||||
|
"goods_name": "精品榴莲",
|
||||||
|
"sales_price": 152.00,
|
||||||
|
"count": 1,
|
||||||
|
"after_sales_status": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9004,
|
||||||
|
"after_sales_no": "AS202508130004",
|
||||||
|
"after_sales_type": 2,
|
||||||
|
"after_sales_status": 1,
|
||||||
|
"process_status": 2,
|
||||||
|
"refund_amount": 39.90,
|
||||||
|
"review_status": 2,
|
||||||
|
"review_remark": "商品已验货，符合退款条件",
|
||||||
|
"reviewer": "质检005",
|
||||||
|
"review_time": "2025-08-13T16:45:00Z",
|
||||||
|
"refund_no": "RF202508130002",
|
||||||
|
"refund_completed_time": "2025-08-13T17:30:00Z",
|
||||||
|
"create_time": "2025-08-13T09:30:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7005,
|
||||||
|
"goods_name": "酸奶套装",
|
||||||
|
"sales_price": 39.90,
|
||||||
|
"count": 1,
|
||||||
|
"after_sales_status": 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9005,
|
||||||
|
"after_sales_no": "AS202508130005",
|
||||||
|
"commodity_order_id": 1004,
|
||||||
|
"after_sales_type": 3,
|
||||||
|
"after_sales_status": 1,
|
||||||
|
"applicant": "王五",
|
||||||
|
"after_sales_reason": "商品发错型号",
|
||||||
|
"application_description": "购买的是XL码，收到L码",
|
||||||
|
"application_images": "http://localhost:8080/test.png",
|
||||||
|
"is_need_process": 1,
|
||||||
|
"process_status": 1,
|
||||||
|
"after_sales_goods": "1@8006",
|
||||||
|
"receiving_address": "上海市浦东新区张江高科88号",
|
||||||
|
"review_status": 1,
|
||||||
|
"create_time": "2025-08-13T10:15:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7006,
|
||||||
|
"goods_id": 8006,
|
||||||
|
"goods_name": "冷冻虾仁",
|
||||||
|
"sales_price": 76.50,
|
||||||
|
"count": 1,
|
||||||
|
"after_sales_status": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9006,
|
||||||
|
"after_sales_no": "AS202508130006",
|
||||||
|
"after_sales_type": 3,
|
||||||
|
"after_sales_status": 1,
|
||||||
|
"process_status": 2,
|
||||||
|
"processor": "客服012",
|
||||||
|
"process_time": "2025-08-13T14:20:00Z",
|
||||||
|
"process_remark": "已补发新商品，物流单号：YT987654321",
|
||||||
|
"review_status": 2,
|
||||||
|
"reviewer": "客服主管",
|
||||||
|
"review_time": "2025-08-13T13:40:00Z",
|
||||||
|
"create_time": "2025-08-13T09:00:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7007,
|
||||||
|
"goods_id": 8007,
|
||||||
|
"goods_name": "进口橙子",
|
||||||
|
"sales_price": 32.00,
|
||||||
|
"count": 2,
|
||||||
|
"after_sales_status": 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9007,
|
||||||
|
"after_sales_no": "AS202508130007",
|
||||||
|
"after_sales_status": 2,
|
||||||
|
"revoke_time": "2025-08-13T11:05:00Z",
|
||||||
|
"after_sales_type": 1,
|
||||||
|
"applicant": "赵六",
|
||||||
|
"after_sales_reason": "商品运输损坏",
|
||||||
|
"create_time": "2025-08-13T10:30:00Z",
|
||||||
|
"update_time": "2025-08-13T11:05:00Z",
|
||||||
|
"commodity_order_item": [
|
||||||
|
{
|
||||||
|
"id": 7002,
|
||||||
|
"goods_name": "有机西兰花",
|
||||||
|
"sales_price": 10.50,
|
||||||
|
"count": 1,
|
||||||
|
"after_sales_status": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
182
packages/myOrders/afterSale/index.css
Normal file
182
packages/myOrders/afterSale/index.css
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
.container {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after-sale-item{
|
||||||
|
margin: 20rpx;
|
||||||
|
min-height: 250rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 8rpx 0 8rpx 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 105rpx;
|
||||||
|
left: 40rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after-sale-no {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-time {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 42rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-count {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-amount {
|
||||||
|
font-size: 28rpx;
|
||||||
|
align-self: flex-end;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
float: right;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-container {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fafafa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #888888;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #d9d9d9;
|
||||||
|
color: black;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #ffe8e5;
|
||||||
|
color: #f84723;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
126
packages/myOrders/afterSale/index.vue
Normal file
126
packages/myOrders/afterSale/index.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view v-for="(item, index) in currentAfterSale" :key="index">
|
||||||
|
<view class="after-sale-item">
|
||||||
|
<!-- 头部信息 -->
|
||||||
|
<view class="header">
|
||||||
|
<view class="company-info">
|
||||||
|
<text class="company-name">{{ item.commodity_order_item[0].goods_name || '衡水喜屏传媒有限公司'
|
||||||
|
}}</text>
|
||||||
|
<text class="after-sale-no">退货退款</text>
|
||||||
|
</view>
|
||||||
|
<text class="order-time">提交订单：{{ formatDate(item.create_time) }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<view class="goods-info" v-for="(ite, index) in item.commodity_order_item" :key="index">
|
||||||
|
<view class="asGoodTag tag-img" v-if="ite.is_support_same_day === 1">当日达</view>
|
||||||
|
<image :src="ite.commodity_pic" class="goods-image"></image>
|
||||||
|
<view class="goods-details">
|
||||||
|
<text class="goods-name">
|
||||||
|
<text class="asGoodTag asGoodTag1" v-if="ite.is_support_same_day === 1">当日达</text>
|
||||||
|
{{ ite.goods_name }}
|
||||||
|
<text class="refund-amount">退款：¥{{ ite.sales_price }}</text>
|
||||||
|
</text>
|
||||||
|
<text class="goods-desc">{{ ite.after_sales_reason }}</text>
|
||||||
|
<view class="price-count">
|
||||||
|
<text class="goods-price">¥{{ ite.sales_price }}/个</text>
|
||||||
|
<text class="goods-count">x{{ ite.count }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 退款状态 -->
|
||||||
|
<view class="status-container">
|
||||||
|
<view class="status-item" @click="pendingPage(item)">
|
||||||
|
<text class="status-label">{{ getStatusText(item.after_sales_status) }}</text>
|
||||||
|
<text class="status-desc">商家将在<text style="color: #e73b05;">{{
|
||||||
|
calculateProcessingTime(item.create_time) }}</text>内处理</text>
|
||||||
|
<view class="arrow-right"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-buttons">
|
||||||
|
<button class="modify-btn" @click="modifyApplication">修改申请</button>
|
||||||
|
<button class="cancel-btn" @click="cancelApplication">撤销申请</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import afterSaleData from './afterSale.json';
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentAfterSale: afterSaleData
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getStatusText(status) {
|
||||||
|
// 根据状态码返回对应的状态文本
|
||||||
|
const statusMap = {
|
||||||
|
1: '商家待处理',
|
||||||
|
2: '已撤销',
|
||||||
|
3: '已完成',
|
||||||
|
4: '已拒绝'
|
||||||
|
};
|
||||||
|
return statusMap[status] || '未知状态';
|
||||||
|
},
|
||||||
|
calculateProcessingTime(createTime) {
|
||||||
|
return '2天';
|
||||||
|
},
|
||||||
|
formatDate(dateString) {
|
||||||
|
if (!dateString) return '';
|
||||||
|
const date = new Date(dateString);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
},
|
||||||
|
modifyApplication() {
|
||||||
|
console.log('修改申请');
|
||||||
|
},
|
||||||
|
cancelApplication() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定要撤销退款申请吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
console.log('撤销申请');
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pendingPage(item) {
|
||||||
|
// NavgateTo(`/packages/myOrders/pending/index?item=${JSON.stringify(item)}`); //拒绝申请
|
||||||
|
// NavgateTo(`/packages/myOrders/sendBack/index?item=${JSON.stringify(item)}`); //自行寄回
|
||||||
|
// NavgateTo(`/packages/myOrders/refundOver/index?item=${JSON.stringify(item)}`); //退款成功
|
||||||
|
NavgateTo(`/packages/myOrders/changeInfo/index?item=${JSON.stringify(item)}`); //换货
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import url(./index.css);
|
||||||
|
</style>
|
||||||
254
packages/myOrders/apply/index.css
Normal file
254
packages/myOrders/apply/index.css
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apply-container {
|
||||||
|
/* padding: 10rpx; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗样式 */
|
||||||
|
.refund-info-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #ff4500;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-left: 10rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #ff4500;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
color: #007aff;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
margin: 20rpx -30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item2 {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-description {
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon {
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border: 1rpx solid #D1D1D1;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon image {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||||
|
margin-top: 20rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview__image {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 60%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选择退款原因弹窗样式 */
|
||||||
|
.cancel-reason-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs2 {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2 {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active {
|
||||||
|
color: #ff451b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1rpx;
|
||||||
|
left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
max-height: 500rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border: 2rpx solid #999999;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #ff451b;
|
||||||
|
background-color: #ff451b;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 打开弹窗按钮样式 */
|
||||||
|
.open-popup-btn {
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin: 40rpx auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
263
packages/myOrders/apply/index.vue
Normal file
263
packages/myOrders/apply/index.vue
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
<template>
|
||||||
|
<view class="apply-container">
|
||||||
|
<!-- 确认退款信息弹窗 -->
|
||||||
|
<view class="refund-info-container">
|
||||||
|
<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: 10rpx;">
|
||||||
|
{{ 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>
|
||||||
|
</view>
|
||||||
|
<button class="submit-btn" @click="submitRefundApplication">提交申请</button>
|
||||||
|
|
||||||
|
<!-- 选择退款原因弹窗 -->
|
||||||
|
<u-popup ref="popup2" :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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentAfterSale: null,
|
||||||
|
afterSalePopup2: false,
|
||||||
|
afterSalePopup3: false,
|
||||||
|
selectedAfterSaleType2: 0, // 0:退货/退款, 1:退货
|
||||||
|
selectedAsReason: 0,
|
||||||
|
selectedServiceType: '',
|
||||||
|
selectedRefundReason: '',
|
||||||
|
refundAmount: 0,
|
||||||
|
maxRefundAmount: 0,
|
||||||
|
postage: 0,
|
||||||
|
refundDescription: '',
|
||||||
|
refundMethod: '自行寄回',
|
||||||
|
merchantAddress: '衡水市路北街道中心北大街世纪名城41号楼',
|
||||||
|
merchantContact: '高尚 18032753127',
|
||||||
|
imgList: [],
|
||||||
|
applyRefundReasons: [
|
||||||
|
'商品质量问题',
|
||||||
|
'商品与描述不符',
|
||||||
|
'商品破损',
|
||||||
|
'商品错发/漏发',
|
||||||
|
'其他原因'
|
||||||
|
],
|
||||||
|
cancelReasons: [
|
||||||
|
'不想要了',
|
||||||
|
'拍错了',
|
||||||
|
'商品质量问题',
|
||||||
|
'其他原因'
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
const item = JSON.parse(options?.item);
|
||||||
|
console.log("🚀 ~ onLoad ~ item:", item)
|
||||||
|
this.currentAfterSale = item;
|
||||||
|
// 设置初始退款金额等数据
|
||||||
|
if (item) {
|
||||||
|
this.refundAmount = item.sales_price || 0;
|
||||||
|
this.maxRefundAmount = item.sales_price || 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 关闭弹窗
|
||||||
|
closeAfterSalePopup2() {
|
||||||
|
this.afterSalePopup2 = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
closeAfterSalePopup3() {
|
||||||
|
this.afterSalePopup3 = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择售后类型
|
||||||
|
selectAfterSaleType2(index) {
|
||||||
|
this.selectedAfterSaleType2 = index;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择退款原因
|
||||||
|
selectAsReason(index) {
|
||||||
|
this.selectedAsReason = index;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认退款原因选择
|
||||||
|
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.selectAsReason(0);
|
||||||
|
this.afterSalePopup2 = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开选择服务类型或退款原因弹窗
|
||||||
|
openAfterSalePopup2(type) {
|
||||||
|
this.afterSalePopup3 = false;
|
||||||
|
this.afterSalePopup2 = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传图片
|
||||||
|
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;
|
||||||
|
// 这里可以添加提交后的处理逻辑
|
||||||
|
uni.showToast({
|
||||||
|
title: '退款申请提交成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
495
packages/myOrders/changeInfo/index.css
Normal file
495
packages/myOrders/changeInfo/index.css
Normal file
@ -0,0 +1,495 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 全部流程弹窗样式 */
|
||||||
|
.all-process-popup {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-steps_top {
|
||||||
|
padding: 30rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-steps {
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line {
|
||||||
|
width: 2rpx;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
position: absolute;
|
||||||
|
left: 12rpx;
|
||||||
|
top: 30rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line.active {
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle.active {
|
||||||
|
border-color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-circle.active2 {
|
||||||
|
border-color: #ff4d4f;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title.active {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-desc2 {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 90%;
|
||||||
|
height: 90rpx;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin: 40rpx auto;
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.all-process-link {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-left: 240rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: 20rpx;
|
||||||
|
background: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 8rpx 0 8rpx 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 133rpx;
|
||||||
|
left: 80rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-content {
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_8 {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_41 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_42 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block_15 {
|
||||||
|
flex: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-view {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-val{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
word-break: break-all;
|
||||||
|
border: 1rpx solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_2 {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-s2ize: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-arrow {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.urge-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ffe8e5;
|
||||||
|
color: #ed4d1c;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomImg{
|
||||||
|
width: 70rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 退款去向弹窗样式 */
|
||||||
|
.money-path-popup-content {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
height: 45vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-method {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-text2 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #9d9d9d;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-amount {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-status {
|
||||||
|
padding: 0 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item.active .status-dot {
|
||||||
|
border: 3rpx solid #e35e38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item.active .status-line {
|
||||||
|
/* background-color: #e35e38; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
background-color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 20rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-line {
|
||||||
|
border-left: 4rpx dotted #ea704b86;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 7rpx;
|
||||||
|
top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item:last-child .status-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
314
packages/myOrders/changeInfo/index.vue
Normal file
314
packages/myOrders/changeInfo/index.vue
Normal file
@ -0,0 +1,314 @@
|
|||||||
|
<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="http://localhost:8080/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>
|
||||||
@ -160,7 +160,7 @@ export default {
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 这里添加提交评价的API调用逻辑
|
//
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "评价提交成功",
|
title: "评价提交成功",
|
||||||
icon: "success",
|
icon: "success",
|
||||||
|
|||||||
@ -137,6 +137,16 @@ page {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.afterSaleNum {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff3710;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
right: 230rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.yfd-btn {
|
.yfd-btn {
|
||||||
width: 160rpx;
|
width: 160rpx;
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
@ -157,4 +167,404 @@ page {
|
|||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-reason-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asType {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asType text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab {
|
||||||
|
padding: 15rpx 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab.active {
|
||||||
|
border: 1rpx solid #ff5252;
|
||||||
|
color: #ff5252;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2 {
|
||||||
|
width: 50%;
|
||||||
|
padding: 15rpx 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active {
|
||||||
|
border-bottom: 1rpx solid #ff5252;
|
||||||
|
color: #ff5252;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodsInfo {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodInfo {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodRadio{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodImg {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodDetail {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 40rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 145rpx;
|
||||||
|
left: 130rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodDesc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodPrice {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff5252;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodNum {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
background-color: #e60012;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noSalePopup {
|
||||||
|
padding: 50rpx 50rpx 0 50rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noSalePopup-btn {
|
||||||
|
width: 250rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background-color: #e60012;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确认退款信息弹窗样式 */
|
||||||
|
.refund-info-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
padding-bottom: 26rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr{
|
||||||
|
position: relative;
|
||||||
|
left: -30rpx;
|
||||||
|
right: -30rpx;
|
||||||
|
width: 120%;
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item2 {
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-label {
|
||||||
|
width: 200rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
color: #989898;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: right;
|
||||||
|
position: absolute;
|
||||||
|
top: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-description {
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
border: 1rpx solid #e8e8e8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
resize: none;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-attachment {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1989fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片上传 */
|
||||||
|
.imgCon {
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border: 1rpx solid #D1D1D1;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon image {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||||
|
margin-top: 20rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview__image {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
@ -1,12 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="tabs">
|
<view class="tabs">
|
||||||
<view
|
<view v-for="(item, index) in categoryList" :key="index"
|
||||||
v-for="(item, index) in categoryList"
|
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||||||
:key="index"
|
|
||||||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
|
||||||
@click="selectTab(index, item)"
|
|
||||||
>
|
|
||||||
{{ item.category_name }}
|
{{ item.category_name }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -18,17 +14,17 @@
|
|||||||
<view v-if="selectedTab === 7">
|
<view v-if="selectedTab === 7">
|
||||||
<rated />
|
<rated />
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="selectedTab === 8">
|
||||||
|
<afterSale />
|
||||||
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
<view v-for="(item, index) in orderData" :key="index">
|
<view v-for="(item, index) in orderData" :key="index">
|
||||||
<view class="contentList">
|
<view class="contentList">
|
||||||
<!-- 订单头部信息 -->
|
<!-- 订单头部信息 -->
|
||||||
<view class="order-header" @click="toDetails(item.order_status)">
|
<view class="order-header" @click="toDetails(item)">
|
||||||
<text>提交订单：{{ item.order_time }}</text>
|
<text>提交订单：{{ item.order_time }}</text>
|
||||||
<view
|
<view v-if="item.order_status == 6 || item.order_status == 5" class="status3">{{
|
||||||
v-if="item.order_status == 6 || item.order_status == 5"
|
getOrderStatus(item.order_status) }}</view>
|
||||||
class="status3"
|
|
||||||
>{{ getOrderStatus(item.order_status) }}</view
|
|
||||||
>
|
|
||||||
<view v-else-if="item.order_status == 7" class="status2">
|
<view v-else-if="item.order_status == 7" class="status2">
|
||||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/refund.png" />
|
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/refund.png" />
|
||||||
{{ getOrderStatus(item.order_status) }}
|
{{ getOrderStatus(item.order_status) }}
|
||||||
@ -39,23 +35,15 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 商品列表 -->
|
<!-- 商品列表 -->
|
||||||
<view class="goods-list" @click="toDetails(item.order_status)">
|
<view class="goods-list" @click="toDetails(item)">
|
||||||
<view
|
<view v-for="(goods, goodsIndex) in item.commodity_order_item_list" :key="goodsIndex" class="goods-item">
|
||||||
v-for="(goods, goodsIndex) in item.commodity_order_item_list
|
<image :src="goods.commodity_pic" class="goods-img"></image>
|
||||||
.commodity_pic"
|
|
||||||
:key="goodsIndex"
|
|
||||||
class="goods-item"
|
|
||||||
>
|
|
||||||
<image :src="goods.image" class="goods-img"></image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 订单底部信息 -->
|
<!-- 订单底部信息 -->
|
||||||
<view class="order-footer">
|
<view class="order-footer">
|
||||||
<view
|
<view class="order-footer-text" @click="toDetails(item)">共{{ item.total_count }}件商品，共计
|
||||||
class="order-footer-text"
|
|
||||||
@click="toDetails(item.order_status)"
|
|
||||||
>共{{ item.total_count }}件商品，共计
|
|
||||||
<text> {{ item.total_amount }}</text>
|
<text> {{ item.total_amount }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
@ -63,29 +51,27 @@
|
|||||||
<button class="cancel-btn" @click="cancelOrder">
|
<button class="cancel-btn" @click="cancelOrder">
|
||||||
取消订单
|
取消订单
|
||||||
</button>
|
</button>
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="goToPay">立即支付</button>
|
<button class="pay-btn" @click="goToPay">立即支付</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 3">
|
<view class="btn-group" v-if="item.order_status === 3">
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<button class="cancel-btn" @click="applyRefund">申请退款</button>
|
||||||
</view>
|
|
||||||
<view class="btn-group" v-if="item.order_status === 6">
|
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
|
||||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 4">
|
<view class="btn-group" v-if="item.order_status === 4">
|
||||||
<button class="cancel-btn" @click="checkLogistics">
|
<button class="cancel-btn" @click="cancelOrder">查看物流</button>
|
||||||
查看物流
|
<button class="pay-btn" @click="confirmReceiving">确认收货</button>
|
||||||
</button>
|
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
|
||||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 5">
|
<view class="btn-group" v-if="item.order_status === 5">
|
||||||
<button class="cancel-btn" @click="orderEvaluate">
|
<text class="afterSaleNum">4笔售后</text>
|
||||||
|
<button class="cancel-btn" @click="afterSale(item)">退换/售后</button>
|
||||||
|
<button class="pay-btn" @click="cancelOrder">评价</button>
|
||||||
|
</view>
|
||||||
|
<view class="btn-group" v-if="item.order_status === 6">
|
||||||
|
<!-- <button class="cancel-btn" @click="orderEvaluate">
|
||||||
服务评价
|
服务评价
|
||||||
</button>
|
</button>
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
<button class="pay-btn" @click="cancelOrder">再来一单</button> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-group" v-if="item.order_status === 7">
|
<view class="btn-group" v-if="item.order_status === 7">
|
||||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||||
@ -96,18 +82,58 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!------------------ 以下为popup ------------------>
|
||||||
|
<!-- 取消订单 -->
|
||||||
|
<cancel-order-popup :showPopup.sync="showPopup" @orderCancelled="handleOrderCancelled" />
|
||||||
|
|
||||||
|
<!-- 申请退款 -->
|
||||||
|
<refund-popup :showPopup.sync="showTkPopup" @refundConfirmed="handleRefundConfirmed" />
|
||||||
|
|
||||||
|
<!-- 退换 售后 - 选择退款原因 -->
|
||||||
|
<!-- 售后弹窗组件 -->
|
||||||
|
<after-sale-popup :afterSaleGoods.sync="afterSaleGoods" ref="afterSalePopupRef"
|
||||||
|
@refundSubmitted="handleRefundSubmitted" />
|
||||||
|
|
||||||
|
<!-- 无售后商品 -->
|
||||||
|
<view>
|
||||||
|
<u-popup ref="popup" mode="center" :show="noSalePopup" :round="15" :mask-close-able="false">
|
||||||
|
<view class="noSalePopup">
|
||||||
|
<view>抱歉该订单已无可申请售后的商品</view>
|
||||||
|
<button class="noSalePopup-btn" @click="noSalePopup = false">我知道了</button>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { picUrl, NavgateTo, request } from "../../../utils";
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
import { apiArr } from "../../../api/order";
|
import { apiArr } from "../../../api/order";
|
||||||
import Rated from "./rated.vue";
|
import Rated from "../rated/rated.vue";
|
||||||
import AwaitRated from "./awaitRated.vue";
|
import AwaitRated from "../awaitRated/awaitRated.vue";
|
||||||
|
import AfterSale from "../afterSale/index.vue";
|
||||||
|
import cancelOrderPopup from './popup/cancelOrder/cancelOrder.vue';
|
||||||
|
import refundPopup from './popup/refund/refund.vue';
|
||||||
|
import afterSalePopup from './popup/afterSale/index.vue';
|
||||||
|
import orderMockData from "./orderMockData.json";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Rated,
|
Rated,
|
||||||
AwaitRated,
|
AwaitRated,
|
||||||
|
AfterSale,
|
||||||
|
cancelOrderPopup,
|
||||||
|
refundPopup,
|
||||||
|
afterSalePopup
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -123,7 +149,12 @@ export default {
|
|||||||
{ category_name: "售后" },
|
{ category_name: "售后" },
|
||||||
],
|
],
|
||||||
selectedTab: 0,
|
selectedTab: 0,
|
||||||
orderData: [],
|
orderData: orderMockData,
|
||||||
|
|
||||||
|
showPopup: false,//取消订单
|
||||||
|
afterSaleGoods: [],//售后商品列表
|
||||||
|
noSalePopup: false,//无售后商品
|
||||||
|
showTkPopup: false,//申请退款
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -133,23 +164,61 @@ export default {
|
|||||||
this.getOrderList();
|
this.getOrderList();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 取消订单
|
||||||
cancelOrder() {
|
cancelOrder() {
|
||||||
// 取消订单逻辑
|
this.showPopup = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理订单取消事件
|
||||||
|
handleOrderCancelled(data) {
|
||||||
|
console.log("🚀 ~ handleOrderCancelled ~ 取消原因:", data.reason);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 售后按钮
|
||||||
|
afterSale(item) {
|
||||||
|
// 根据条件判断是否可以售后
|
||||||
|
if (item) {
|
||||||
|
console.log("🚀 ~ afterSale ~ item:", item)
|
||||||
|
this.afterSaleGoods = item.commodity_order_item_list;
|
||||||
|
this.selectedAsGood = item.commodity_order_item_list[0].id;
|
||||||
|
this.$refs.afterSalePopupRef.openAfterSalePopup();
|
||||||
|
} else {
|
||||||
|
this.noSalePopup = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理退款提交事件
|
||||||
|
handleRefundSubmitted(data) {
|
||||||
|
console.log("🚀 ~ handleRefundSubmitted ~ 退款申请提交成功:", data);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 申请退款
|
||||||
|
applyRefund() {
|
||||||
|
this.showTkPopup = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理退款确认事件
|
||||||
|
handleRefundConfirmed(data) {
|
||||||
|
console.log("🚀 ~ handleRefundConfirmed ~ 退款原因:", data.reason);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 确认收货
|
||||||
|
confirmReceiving() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: "提示",
|
title: "确认收货",
|
||||||
content: "确定要取消订单吗？",
|
content: "确认收货后订单状态将变为【已完成】,如有售后需求可正常申请退款/售后,确定要确认收货吗？",
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.confirm) {
|
if (res.confirm) {
|
||||||
// 调用取消订单API
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
goToPay() {
|
goToPay() {
|
||||||
},
|
},
|
||||||
toDetails(order_status) {
|
toDetails(item) {
|
||||||
NavgateTo(
|
NavgateTo(
|
||||||
`/packages/myOrders/orderDetails/index?order_status=${order_status}`
|
`/packages/myOrders/orderDetails/index?item=${JSON.stringify(item)}`
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -186,24 +255,7 @@ export default {
|
|||||||
request(apiArr.orderList, "POST", {
|
request(apiArr.orderList, "POST", {
|
||||||
user_id: uni.getStorageSync("userId"),
|
user_id: uni.getStorageSync("userId"),
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
const orderList = res.order_list || [];
|
//
|
||||||
let filteredData = orderList;
|
|
||||||
|
|
||||||
if (this.selectedTab !== 0) {
|
|
||||||
const statusMap = {
|
|
||||||
1: 1, // 待付款
|
|
||||||
2: 3, // 待发货
|
|
||||||
3: 4, // 配送中
|
|
||||||
4: 5, // 已完成
|
|
||||||
};
|
|
||||||
const targetStatus = statusMap[this.selectedTab];
|
|
||||||
if (targetStatus) {
|
|
||||||
filteredData = orderList.filter(
|
|
||||||
(item) => item.order_status === targetStatus
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.orderData = filteredData;
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
167
packages/myOrders/index/orderMockData.json
Normal file
167
packages/myOrders/index/orderMockData.json
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": 1001,
|
||||||
|
"user_id": 2001,
|
||||||
|
"supplier_id": 3001,
|
||||||
|
"supplier_name": "生鲜优选",
|
||||||
|
"order_group_id": 5001,
|
||||||
|
"order_no": "DD202508131001",
|
||||||
|
"total_amount": 88.50,
|
||||||
|
"total_count": 3,
|
||||||
|
"order_status": 1,
|
||||||
|
"evauate_status": 2,
|
||||||
|
"after_sales_status": 2,
|
||||||
|
"receiving_name": "张三",
|
||||||
|
"receiving_phone": "13800138001",
|
||||||
|
"receiving_address": "北京市朝阳区科技园A座101",
|
||||||
|
"pay_method": "微信支付",
|
||||||
|
"payment_amount": 0,
|
||||||
|
"payment_status": "未支付",
|
||||||
|
"payment_serial": "",
|
||||||
|
"payer_name": "",
|
||||||
|
"order_time": "2025-08-13T10:30:00Z",
|
||||||
|
"is_same_day": 1,
|
||||||
|
"estimated_delivery_time": "今日14:00-16:00",
|
||||||
|
"remark": "请尽快配送",
|
||||||
|
"shiliu_score": 88.5,
|
||||||
|
"shiliu_seed": 22.1,
|
||||||
|
"timeout_time_stamp": 1755086400,
|
||||||
|
"commodity_order_item_list": [
|
||||||
|
{
|
||||||
|
"id": 7001,
|
||||||
|
"order_id": 1001,
|
||||||
|
"goods_id": 8001,
|
||||||
|
"goods_name": "澳洲牛排",
|
||||||
|
"commodity_pic": "http://localhost:8080/test.png",
|
||||||
|
"goods_unit": "盒",
|
||||||
|
"goods_spec": "200g/盒",
|
||||||
|
"cost_price": 45.0,
|
||||||
|
"sales_price": 68.0,
|
||||||
|
"count": 1,
|
||||||
|
"is_support_same_day": 1,
|
||||||
|
"is_same_day": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7002,
|
||||||
|
"goods_id": 8002,
|
||||||
|
"goods_name": "有机西兰花",
|
||||||
|
"commodity_pic": "http://localhost:8080/test.png",
|
||||||
|
"goods_unit": "份",
|
||||||
|
"goods_spec": "500g/份",
|
||||||
|
"cost_price": 8.0,
|
||||||
|
"sales_price": 10.5,
|
||||||
|
"count": 2,
|
||||||
|
"is_support_same_day": 1,
|
||||||
|
"is_same_day": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1002,
|
||||||
|
"order_no": "DD202508131002",
|
||||||
|
"total_amount": 152.0,
|
||||||
|
"total_count": 5,
|
||||||
|
"order_status": 2,
|
||||||
|
"payment_status": "支付中",
|
||||||
|
"payment_time": "2025-08-13T10:35:22Z",
|
||||||
|
"payer_name": "李四",
|
||||||
|
"order_time": "2025-08-13T10:32:15Z",
|
||||||
|
"commodity_order_item_list": [
|
||||||
|
{
|
||||||
|
"id": 7003,
|
||||||
|
"goods_id": 8003,
|
||||||
|
"goods_name": "精品榴莲",
|
||||||
|
"commodity_pic": "http://localhost:8080/test.png",
|
||||||
|
"sales_price": 152.0,
|
||||||
|
"count": 1,
|
||||||
|
"is_support_same_day": 1,
|
||||||
|
"is_same_day": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1003,
|
||||||
|
"order_no": "DD202508131003",
|
||||||
|
"total_amount": 45.8,
|
||||||
|
"order_status": 3,
|
||||||
|
"payment_status": "已支付",
|
||||||
|
"payment_amount": 45.8,
|
||||||
|
"payment_serial": "PY20250813100003",
|
||||||
|
"order_time": "2025-08-13T09:15:30Z",
|
||||||
|
"is_same_day": 2,
|
||||||
|
"commodity_order_item_list": [
|
||||||
|
{
|
||||||
|
"id": 7004,
|
||||||
|
"goods_name": "东北大米",
|
||||||
|
"count": 2,
|
||||||
|
"sales_price": 22.9
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1004,
|
||||||
|
"order_no": "DD202508131004",
|
||||||
|
"order_status": 4,
|
||||||
|
"receiving_name": "王五",
|
||||||
|
"receiving_phone": "13900139000",
|
||||||
|
"payment_serial": "PY20250813090001",
|
||||||
|
"order_time": "2025-08-13T08:45:00Z",
|
||||||
|
"is_same_day": 1,
|
||||||
|
"commodity_order_item_list": [
|
||||||
|
{
|
||||||
|
"id": 7005,
|
||||||
|
"goods_name": "酸奶套装",
|
||||||
|
"count": 1,
|
||||||
|
"sales_price": 39.9
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1005,
|
||||||
|
"order_no": "DD202508131005",
|
||||||
|
"order_status": 5,
|
||||||
|
"evauate_status": 2,
|
||||||
|
"payment_status": "已支付",
|
||||||
|
"completed_at": "2025-08-13T15:20:18Z",
|
||||||
|
"order_time": "2025-08-13T11:20:18Z",
|
||||||
|
"commodity_order_item_list": [
|
||||||
|
{
|
||||||
|
"id": 7003,
|
||||||
|
"goods_id": 8003,
|
||||||
|
"goods_name": "冷冻虾仁",
|
||||||
|
"commodity_pic": "http://localhost:8080/test.png",
|
||||||
|
"sales_price": 152.0,
|
||||||
|
"count": 3,
|
||||||
|
"is_support_same_day": 1,
|
||||||
|
"is_same_day": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7004,
|
||||||
|
"goods_id": 8004,
|
||||||
|
"goods_name": "精品榴莲",
|
||||||
|
"commodity_pic": "http://localhost:8080/test.png",
|
||||||
|
"sales_price": 152.0,
|
||||||
|
"count": 1,
|
||||||
|
"is_support_same_day": 2,
|
||||||
|
"is_same_day": false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1006,
|
||||||
|
"order_no": "DD202508131006",
|
||||||
|
"order_status": 6,
|
||||||
|
"cancelled_by": "user",
|
||||||
|
"cancel_time": "2025-08-13T10:40:05Z",
|
||||||
|
"cancel_reason": "选错商品",
|
||||||
|
"order_time": "2025-08-13T10:38:12Z",
|
||||||
|
"commodity_order_item_list": [
|
||||||
|
{
|
||||||
|
"id": 7007,
|
||||||
|
"goods_name": "进口橙子",
|
||||||
|
"count": 2,
|
||||||
|
"sales_price": 32.0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
473
packages/myOrders/index/popup/afterSale/index.css
Normal file
473
packages/myOrders/index/popup/afterSale/index.css
Normal file
@ -0,0 +1,473 @@
|
|||||||
|
.required {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-reason-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asType {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asType text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab {
|
||||||
|
padding: 15rpx 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab.active {
|
||||||
|
border: 1rpx solid #ff5252;
|
||||||
|
color: #ff5252;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2 {
|
||||||
|
width: 50%;
|
||||||
|
padding: 15rpx 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active {
|
||||||
|
border-bottom: 1rpx solid #ff5252;
|
||||||
|
color: #ff5252;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodsInfo {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodInfo {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodRadio {
|
||||||
|
margin-top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodImg {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodDetail {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTitle {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 40rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 145rpx;
|
||||||
|
left: 130rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodDesc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodPrice {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff5252;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodNum {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 14rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
background-color: #e60012;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确认退款信息弹窗样式 */
|
||||||
|
.refund-info-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
padding-bottom: 26rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
position: relative;
|
||||||
|
left: -30rpx;
|
||||||
|
right: -30rpx;
|
||||||
|
width: 120%;
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item2 {
|
||||||
|
margin-bottom: 26rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-label {
|
||||||
|
width: 200rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
color: #989898;
|
||||||
|
font-size: 26rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-align: right;
|
||||||
|
position: absolute;
|
||||||
|
top: 45rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-description {
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
border: 1rpx solid #e8e8e8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
resize: none;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999;
|
||||||
|
border-right: 2rpx solid #999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border: 1rpx dashed #e8e8e8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon image {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_42{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #a7a7a7;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block_15{
|
||||||
|
display: flex;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-view{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||||
|
background-size: cover;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_2 {
|
||||||
|
width: 55rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
position: relative;
|
||||||
|
top: -30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
padding-left: 80rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header-h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header-view {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #959595;
|
||||||
|
margin: 20rpx 0 5rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp_img {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.temp_img1 {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin: 5rpx 5rpx 0 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize {
|
||||||
|
width: 30%;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 10rpx 15rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin:20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_active {
|
||||||
|
background: #FF370B;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize-img{
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border:1rpx solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_top{
|
||||||
|
display: flex;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_info {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemSize_price {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
502
packages/myOrders/index/popup/afterSale/index.vue
Normal file
502
packages/myOrders/index/popup/afterSale/index.vue
Normal file
@ -0,0 +1,502 @@
|
|||||||
|
<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_desc }}</view>
|
||||||
|
<view class="asGoodPrice">¥{{ item.sales_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="http://localhost:8080/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>
|
||||||
64
packages/myOrders/index/popup/cancelOrder/cancelOrder.css
Normal file
64
packages/myOrders/index/popup/cancelOrder/cancelOrder.css
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
.cancel-reason-container {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20rpx 0 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #ff4400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
background-color: #ff4400;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
background-color: #ff4400;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
81
packages/myOrders/index/popup/cancelOrder/cancelOrder.vue
Normal file
81
packages/myOrders/index/popup/cancelOrder/cancelOrder.vue
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<u-popup ref="popup" :show="showPopup" :round="10" @close="closePopup" :mask-close-able="false">
|
||||||
|
<view class="cancel-reason-container">
|
||||||
|
<view class="title">选择取消原因</view>
|
||||||
|
<view class="reason-list">
|
||||||
|
<view v-for="(reason, index) in cancelReasons" :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="confirmCancel">确认取消</button>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { NavgateTo } from '../../../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'cancelOrderPopup',
|
||||||
|
props: {
|
||||||
|
showPopup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cancelReasons: [
|
||||||
|
'商品价格不稳定',
|
||||||
|
'买错规格/品种',
|
||||||
|
'未按时发货',
|
||||||
|
'业务反馈没货',
|
||||||
|
'不想要了，无理由退货'
|
||||||
|
],
|
||||||
|
selectedReason: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closePopup() {
|
||||||
|
this.$emit('update:showPopup', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
selectReason(index) {
|
||||||
|
this.selectedReason = index;
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmCancel() {
|
||||||
|
const selectedText = this.cancelReasons[this.selectedReason];
|
||||||
|
console.log("🚀 ~ confirmCancel ~ 取消原因:", selectedText);
|
||||||
|
uni.showModal({
|
||||||
|
title: "取消订单",
|
||||||
|
content: "千辛万苦挑选的商品，确定要取消吗？",
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.$emit('update:showPopup', false);
|
||||||
|
this.$emit('orderCancelled', { reason: selectedText });
|
||||||
|
uni.showToast({
|
||||||
|
title: '订单取消成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
showPopup(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.selectedReason = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './cancelOrder.css';
|
||||||
|
</style>
|
||||||
67
packages/myOrders/index/popup/refund/refund.css
Normal file
67
packages/myOrders/index/popup/refund/refund.css
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
.cancel-reason-container {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20rpx 0 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border: 2rpx solid #999;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #ff4400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
background-color: #ff4400;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
background-color: #ff4400;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
74
packages/myOrders/index/popup/refund/refund.vue
Normal file
74
packages/myOrders/index/popup/refund/refund.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-popup ref="popup" :show="showPopup" :round="10" @close="closePopup" :mask-close-able="false">
|
||||||
|
<view class="cancel-reason-container">
|
||||||
|
<view class="title">选择退款原因</view>
|
||||||
|
<view class="reason-list">
|
||||||
|
<view v-for="(reason, index) in applyRefundReasons" :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="confirmRefund">确认取消</button>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { NavgateTo } from '../../../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'refundPopup',
|
||||||
|
props: {
|
||||||
|
showPopup: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
applyRefundReasons: [
|
||||||
|
'不想要了，无理由退货',
|
||||||
|
'商品信息拍错',
|
||||||
|
'没用/少用优惠',
|
||||||
|
'缺货',
|
||||||
|
'其他'
|
||||||
|
],
|
||||||
|
selectedReason: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closePopup() {
|
||||||
|
this.$emit('update:showPopup', false);
|
||||||
|
},
|
||||||
|
|
||||||
|
selectReason(index) {
|
||||||
|
this.selectedReason = index;
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmRefund() {
|
||||||
|
const selectedText = this.applyRefundReasons[this.selectedReason];
|
||||||
|
console.log("🚀 ~ confirmRefund ~ 退款原因:", selectedText);
|
||||||
|
this.$emit('update:showPopup', false);
|
||||||
|
this.$emit('refundConfirmed', { reason: selectedText });
|
||||||
|
uni.showToast({
|
||||||
|
title: '退款申请成功',
|
||||||
|
content: "将在审核后完成退款",
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
showPopup(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.selectedReason = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import './refund.css';
|
||||||
|
</style>
|
||||||
@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<!-- 顶部状态栏 -->
|
<!-- 顶部状态栏 -->
|
||||||
<view class="status-bar" v-if="status === '待付款'">
|
<view class="status-bar" v-if="status === '1'">
|
||||||
<view class="status">待付款</view>
|
<view class="status">待付款</view>
|
||||||
<view class="countdown">剩余支付时间: {{ countdown }}</view>
|
<view class="countdown">剩余支付时间: {{ countdown }}</view>
|
||||||
<view class="tips">10分钟内未支付订单自动取消</view>
|
<view class="tips">10分钟内未支付订单自动取消</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '待发货'">
|
<view class="status-bar" v-if="status === '3'">
|
||||||
<view class="status">待发货</view>
|
<view class="status">待发货</view>
|
||||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||||
<view class="tips">商家正在加急打包中了，请耐心等候</view>
|
<view class="tips">商家正在加急打包中了，请耐心等候</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '配送中'">
|
<view class="status-bar" v-if="status === '4'">
|
||||||
<view class="status">待配送</view>
|
<view class="status">待配送</view>
|
||||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||||
<view class="tips">
|
<view class="tips">
|
||||||
@ -19,12 +19,12 @@
|
|||||||
<img class="phone" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/phone.png" />
|
<img class="phone" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/phone.png" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '已完成' || status === '退款中'">
|
<view class="status-bar" v-if="status === '5' || status === '退款中'">
|
||||||
<view class="status">已完成</view>
|
<view class="status">已完成</view>
|
||||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||||
<view class="tips">感谢对我们的信任，期待下次光临</view>
|
<view class="tips">感谢对我们的信任，期待下次光临</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status-bar" v-if="status === '已取消'">
|
<view class="status-bar" v-if="status === '6'">
|
||||||
<view class="status">已取消</view>
|
<view class="status">已取消</view>
|
||||||
<view class="countdown">订单已取消</view>
|
<view class="countdown">订单已取消</view>
|
||||||
<view class="tips">您的订单已取消，再来一单吧</view>
|
<view class="tips">您的订单已取消，再来一单吧</view>
|
||||||
@ -39,27 +39,22 @@
|
|||||||
<!-- 订单金额 -->
|
<!-- 订单金额 -->
|
||||||
<view class="amount-section">
|
<view class="amount-section">
|
||||||
<view v-if="status !== '退款中'">
|
<view v-if="status !== '退款中'">
|
||||||
<view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
|
<view class="total-amount">¥{{ orderInfo.shiliu_score }}</view>
|
||||||
<view class="original-price"
|
<view class="original-price">商品下单应付
|
||||||
>商品下单应付
|
<text> ¥{{ orderInfo.shiliu_score }}</text>
|
||||||
<text> ¥{{ orderInfo.originalPrice }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="goods-item" v-for="(item, index) in orderInfo.commodity_order_item_list" :key="index">
|
||||||
class="goods-item"
|
|
||||||
v-for="(item, index) in orderInfo.goodsList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<view class="goods-content">
|
<view class="goods-content">
|
||||||
<image :src="item.image" class="goods-img"></image>
|
<image :src="item.commodity_pic" class="goods-img"></image>
|
||||||
<view class="goods-info">
|
<view class="goods-info">
|
||||||
<view>
|
<view>
|
||||||
<view class="goods-name">{{ item.name }}</view>
|
<view class="goods-name">{{ item.goods_name }}</view>
|
||||||
<view class="goods-desc">{{ item.desc }}</view>
|
<view class="goods-desc">{{ item.desc }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<view class="goods-price">¥{{ item.price }}</view>
|
<view class="goods-price">¥{{ item.sales_price }}</view>
|
||||||
<view class="goods-info-right"> x{{ item.quantity }}</view>
|
<view class="goods-info-right"> x{{ item.count }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -67,14 +62,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="hr"></view>
|
<view class="hr"></view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label1"
|
<view class="info-label1">下单总金额( ¥{{ orderInfo.orderAmount }} )</view>
|
||||||
>下单总金额( ¥{{ orderInfo.orderAmount }} )</view
|
|
||||||
>
|
|
||||||
<view class="info-action">明细</view>
|
<view class="info-action">明细</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">商品下单总金额</view>
|
<view class="info-label">商品下单总金额</view>
|
||||||
<view class="info-value">¥{{ orderInfo.goodsTotal }}</view>
|
<view class="info-value">¥{{ orderInfo.total_amount }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">运费总计</view>
|
<view class="info-label">运费总计</view>
|
||||||
@ -88,11 +81,12 @@
|
|||||||
<view class="section-title">配送信息</view>
|
<view class="section-title">配送信息</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">配送方式</view>
|
<view class="info-label">配送方式</view>
|
||||||
<view class="info-value">{{ orderInfo.deliveryType }}</view>
|
<!-- <view class="info-value">{{ orderInfo.deliveryType }}</view> -->
|
||||||
|
<view class="info-value">商家自配</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">预计配送时间</view>
|
<view class="info-label">预计配送时间</view>
|
||||||
<view class="info-value">{{ orderInfo.deliveryTime }}</view>
|
<view class="info-value"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -101,14 +95,13 @@
|
|||||||
<view class="section-title">收货信息</view>
|
<view class="section-title">收货信息</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">收货人</view>
|
<view class="info-label">收货人</view>
|
||||||
<view class="info-value"
|
<view class="info-value">{{ orderInfo.receiving_name }}
|
||||||
>{{ orderInfo.recipientName }}
|
<text> {{ orderInfo.receiving_phone }}</text>
|
||||||
<text> {{ orderInfo.recipientPhone }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">收货地址</view>
|
<view class="info-label">收货地址</view>
|
||||||
<view class="info-value">{{ orderInfo.recipientAddress }}</view>
|
<view class="info-value">{{ orderInfo.receiving_address }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -117,15 +110,15 @@
|
|||||||
<view class="section-title">订单信息</view>
|
<view class="section-title">订单信息</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">订单编号</view>
|
<view class="info-label">订单编号</view>
|
||||||
<view class="info-value">{{ orderInfo.orderNumber }}</view>
|
<view class="info-value">{{ orderInfo.order_no }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">支付方式</view>
|
<view class="info-label">支付方式</view>
|
||||||
<view class="info-value">{{ orderInfo.paymentMethod }}</view>
|
<view class="info-value">{{ orderInfo.pay_method }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">下单时间</view>
|
<view class="info-label">下单时间</view>
|
||||||
<view class="info-value">{{ orderInfo.orderTime }}</view>
|
<view class="info-value">{{ orderInfo.order_time }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item">
|
||||||
<view class="info-label">备注</view>
|
<view class="info-label">备注</view>
|
||||||
@ -134,28 +127,28 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部操作按钮 -->
|
<!-- 底部操作按钮 -->
|
||||||
<view class="bottom-buttons" v-if="status === '待付款'">
|
<view class="bottom-buttons" v-if="status === '1'">
|
||||||
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '待发货'">
|
<view class="bottom-buttons" v-if="status === '3'">
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
||||||
<!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
|
<!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '配送中'">
|
<view class="bottom-buttons" v-if="status === '4'">
|
||||||
<button class="cancel-btn" @click="checkLogistics">查看物流</button>
|
<button class="cancel-btn" @click="checkLogistics">查看物流</button>
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '已完成'">
|
<view class="bottom-buttons" v-if="status === '5'">
|
||||||
<button class="cancel-btn" @click="orderEvaluate">服务评价</button>
|
<button class="cancel-btn" @click="orderEvaluate">服务评价</button>
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||||
</view>
|
</view>
|
||||||
<view class="bottom-buttons" v-if="status === '已取消'">
|
<view class="bottom-buttons" v-if="status === '6'">
|
||||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||||
<!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
|
<!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
|
||||||
<button class="pay-btn" @click="gotoPayment">再来一单</button>
|
<button class="pay-btn" @click="gotoPayment">再来一单</button>
|
||||||
</view>
|
</view>
|
||||||
@ -172,57 +165,20 @@ export default {
|
|||||||
return {
|
return {
|
||||||
status: "",
|
status: "",
|
||||||
countdown: "9:59:59",
|
countdown: "9:59:59",
|
||||||
orderInfo: {
|
orderInfo: {},
|
||||||
totalAmount: "4704.00",
|
|
||||||
payAmount: "4704.00",
|
|
||||||
originalPrice: "4704.00",
|
|
||||||
orderAmount: "290.00",
|
|
||||||
goodsTotal: "4704.00",
|
|
||||||
freight: "4704.00",
|
|
||||||
deliveryType: "商家配送",
|
|
||||||
deliveryTime: "2021-04-16 20:00-22:00",
|
|
||||||
recipientName: "杜先生",
|
|
||||||
recipientPhone: "15901518415",
|
|
||||||
recipientAddress: "河北省衡水市桃城区上海公馆",
|
|
||||||
orderNumber: "159144551545654",
|
|
||||||
paymentMethod: "微信支付",
|
|
||||||
orderTime: "2021-03-16 20:00-22:00",
|
|
||||||
remark: "明天9点之前送到",
|
|
||||||
goodsList: [
|
|
||||||
{
|
|
||||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_details.png",
|
|
||||||
name: "泰国金枕榴莲",
|
|
||||||
desc: "泰国金枕榴莲 软糯 香甜",
|
|
||||||
price: "125.9",
|
|
||||||
quantity: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_details.png",
|
|
||||||
name: "泰国金枕榴莲",
|
|
||||||
desc: "泰国金枕榴莲 软糯 香甜",
|
|
||||||
price: "125.9",
|
|
||||||
quantity: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_details.png",
|
|
||||||
name: "泰国金枕榴莲",
|
|
||||||
desc: "泰国金枕榴莲 软糯 香甜",
|
|
||||||
price: "125.9",
|
|
||||||
quantity: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
|
const item = JSON.parse(options?.item);
|
||||||
|
console.log("🚀 ~ onLoad ~ item:", item)
|
||||||
// 启动倒计时
|
// 启动倒计时
|
||||||
options?.status === "待付款" ? this.startCountdown() : "";
|
item.order_status == "1" ? this.startCountdown() : "";
|
||||||
this.status = options?.status;
|
this.status = JSON.stringify(item.order_status);
|
||||||
|
this.orderInfo = item;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
startCountdown() {
|
startCountdown() {
|
||||||
// 实际项目中应该从服务器获取剩余时间
|
// 倒计时模拟
|
||||||
// 这里使用模拟倒计时
|
|
||||||
let seconds = 10 * 60; // 10分钟
|
let seconds = 10 * 60; // 10分钟
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
seconds--;
|
seconds--;
|
||||||
@ -234,7 +190,7 @@ export default {
|
|||||||
.padStart(2, "0")}`;
|
.padStart(2, "0")}`;
|
||||||
if (seconds <= 0) {
|
if (seconds <= 0) {
|
||||||
clearInterval(timer);
|
clearInterval(timer);
|
||||||
// 倒计时结束，处理订单取消逻辑
|
// 倒计时结束，处理订单
|
||||||
uni.showToast({ title: "订单已取消", icon: "none" });
|
uni.showToast({ title: "订单已取消", icon: "none" });
|
||||||
setTimeout(() => uni.navigateBack(), 1500);
|
setTimeout(() => uni.navigateBack(), 1500);
|
||||||
}
|
}
|
||||||
|
|||||||
245
packages/myOrders/pending/index.css
Normal file
245
packages/myOrders/pending/index.css
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
.page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item.active .progress-text {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-line {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
align-self: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: 20rpx;
|
||||||
|
background: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 8rpx 0 8rpx 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 133rpx;
|
||||||
|
left: 80rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-amount {
|
||||||
|
font-size: 28rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
left: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-arrow {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ffebcb;
|
||||||
|
color: #983012;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.urge-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
195
packages/myOrders/pending/index.vue
Normal file
195
packages/myOrders/pending/index.vue
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<view class="progress-container" v-if="false">
|
||||||
|
<view class="progress-item active">
|
||||||
|
<text class="progress-text">商家处理</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">寄回商品</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">退款结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="progress-container">
|
||||||
|
<view class="progress-item active">
|
||||||
|
<text class="progress-text">商家处理</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">退款结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态提示 -->
|
||||||
|
<view class="status-tip" v-if="false">
|
||||||
|
<text class="status-title">请等待商家处理</text>
|
||||||
|
<text class="status-desc"><text style="font-weight: bold;">2天</text>后商家未处理将自动同意</text>
|
||||||
|
<text class="status-desc">您已成功发起退款申请，请耐心等待商家处理</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="status-tip">
|
||||||
|
<text class="status-title">商家拒绝申请,请您处理</text>
|
||||||
|
<text class="status-desc"><text style="color: #f63b08;">2天</text>后未处理将自动关闭</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="hr"></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 class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
|
</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 style="color: #fc3811;">*</text></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 style="color: #fc3811;">*</text></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 style="color: #fc3811;">*</text></text>
|
||||||
|
<text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">申请时间<text style="color: #fc3811;">*</text></text>
|
||||||
|
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">退款编号<text style="color: #fc3811;">*</text></text>
|
||||||
|
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||||
|
<text class="copy-icon" @click="copyRefundNo"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-buttons">
|
||||||
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
|
<button class="modify-btn" @click="modifyRefund">修改申请</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentAfterSale: {},
|
||||||
|
pickerDefaultDate: new Date()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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')}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 复制退款编号
|
||||||
|
copyRefundNo() {
|
||||||
|
// 使用uni-app的复制API
|
||||||
|
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)}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 催处理
|
||||||
|
urgeProcess() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '已发送催处理通知',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import url('./index.css')
|
||||||
|
</style>
|
||||||
392
packages/myOrders/refundOver/index.css
Normal file
392
packages/myOrders/refundOver/index.css
Normal file
@ -0,0 +1,392 @@
|
|||||||
|
.page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item.active .progress-text {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-line {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
align-self: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc2 {
|
||||||
|
font-size: 24rpx;
|
||||||
|
background-color: #ffeeeb;
|
||||||
|
color: #fe441a;
|
||||||
|
width: 80%;
|
||||||
|
margin: 20rpx auto 0;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addOrderIdBtn{
|
||||||
|
width: 70%;
|
||||||
|
margin: 10rpx auto 0;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #ff3f14;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: 20rpx;
|
||||||
|
background: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 8rpx 0 8rpx 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 133rpx;
|
||||||
|
left: 80rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-amount {
|
||||||
|
font-size: 28rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
left: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-arrow {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ffebcb;
|
||||||
|
color: #983012;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.urge-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ffe8e5;
|
||||||
|
color: #ed4d1c;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomImg{
|
||||||
|
width: 70rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 退款去向弹窗样式 */
|
||||||
|
.money-path-popup-content {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top-left-radius: 30rpx;
|
||||||
|
border-top-right-radius: 30rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
height: 45vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-method {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-text2 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #9d9d9d;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-amount {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-status {
|
||||||
|
padding: 0 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item.active .status-dot {
|
||||||
|
border: 3rpx solid #e35e38;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item.active .status-line {
|
||||||
|
/* background-color: #e35e38; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #d9d9d9;
|
||||||
|
background-color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 20rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-line {
|
||||||
|
border-left: 4rpx dotted #ea704b86;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 7rpx;
|
||||||
|
top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-item:last-child .status-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
270
packages/myOrders/refundOver/index.vue
Normal file
270
packages/myOrders/refundOver/index.vue
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<view class="progress-container" v-if="false">
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">商家处理</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">寄回商品</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item active">
|
||||||
|
<text class="progress-text">退款结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="progress-container">
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">商家处理</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item active">
|
||||||
|
<text class="progress-text">退款结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态提示 -->
|
||||||
|
<view class="status-tip">
|
||||||
|
<text class="status-title">退款成功</text>
|
||||||
|
<text class="status-desc">若您的问题未解决，可在有效期内再次申请售后</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="hr"></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 class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
|
</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 amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</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" v-if="false">
|
||||||
|
<text class="info-label">退款完结</text>
|
||||||
|
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-buttons" v-if="false">
|
||||||
|
<button class="modify-btn" @click="modifyRefund">寄件详情</button>
|
||||||
|
<button class="cancel-btn" @click="moneyGo">钱款去向</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="action-buttons">
|
||||||
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
|
<button class="urge-btn" @click="modifyRefund">修改申请</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view>
|
||||||
|
<u-popup ref="popup" :show="moneyGoPopup" :round="10" @close="closeMoneyGoPopup" :mask-close-able="false"
|
||||||
|
mode="bottom">
|
||||||
|
<view class="money-path-popup-content">
|
||||||
|
<!-- 弹窗头部 -->
|
||||||
|
<view class="popup-header">
|
||||||
|
<text class="header-title">退款总额 ¥{{ currentAfterSale.refund_amount ?
|
||||||
|
currentAfterSale.refund_amount.toFixed(2) : '34.18' }}</text>
|
||||||
|
<text class="close-btn" @click="closeMoneyGoPopup">取消</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 退款方式 -->
|
||||||
|
<view class="refund-method">
|
||||||
|
<view class="method-item">
|
||||||
|
<view class="wechat-icon">
|
||||||
|
<image
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
||||||
|
class="icon-image"></image>
|
||||||
|
</view>
|
||||||
|
<text class="method-text">退回微信</text>
|
||||||
|
<text class="method-amount">{{ currentAfterSale.refund_amount ? '¥' +
|
||||||
|
currentAfterSale.refund_amount.toFixed(2) : '¥34.18' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 退款状态 -->
|
||||||
|
<view class="refund-status">
|
||||||
|
<view class="method-text2">微信</view>
|
||||||
|
<view class="status-item active">
|
||||||
|
<view class="status-dot"></view>
|
||||||
|
<view class="status-line"></view>
|
||||||
|
<view class="status-info">
|
||||||
|
<text class="status-text">到账成功</text>
|
||||||
|
<text class="status-desc">钱已退回至微信账户</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="status-item active">
|
||||||
|
<view class="status-dot"></view>
|
||||||
|
<view class="status-info">
|
||||||
|
<text class="status-text">卖家退款</text>
|
||||||
|
<text class="status-desc">卖家已退款</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentAfterSale: {},
|
||||||
|
pickerDefaultDate: new Date(),
|
||||||
|
moneyGoPopup: 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)}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示钱款去向弹窗
|
||||||
|
moneyGo() {
|
||||||
|
this.moneyGoPopup = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭钱款去向弹窗
|
||||||
|
closeMoneyGoPopup() {
|
||||||
|
this.moneyGoPopup = false;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import url('./index.css')
|
||||||
|
</style>
|
||||||
254
packages/myOrders/returnLogistics/index.css
Normal file
254
packages/myOrders/returnLogistics/index.css
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apply-container {
|
||||||
|
/* padding: 10rpx; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹窗样式 */
|
||||||
|
.refund-info-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #ff4500;
|
||||||
|
margin-left: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-left: 10rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #ff4500;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
color: #007aff;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-hint {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: 20rpx;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
margin: 20rpx -30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-item2 {
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-description {
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon {
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border: 1rpx solid #D1D1D1;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCon image {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 10rpx 0rpx 10rpx 10rpx !important;
|
||||||
|
margin-top: 20rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-upload__wrap__preview__image {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 60%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选择退款原因弹窗样式 */
|
||||||
|
.cancel-reason-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTabs2 {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2 {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active {
|
||||||
|
color: #ff451b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asTab2.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1rpx;
|
||||||
|
left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 4rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-list {
|
||||||
|
max-height: 500rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reason-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio {
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
border: 2rpx solid #999999;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active {
|
||||||
|
border-color: #ff451b;
|
||||||
|
background-color: #ff451b;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 打开弹窗按钮样式 */
|
||||||
|
.open-popup-btn {
|
||||||
|
height: 88rpx;
|
||||||
|
background-color: #ff451b;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin: 40rpx auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
152
packages/myOrders/returnLogistics/index.vue
Normal file
152
packages/myOrders/returnLogistics/index.vue
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<view class="apply-container">
|
||||||
|
<!-- 确认退款信息弹窗 -->
|
||||||
|
<view class="refund-info-container">
|
||||||
|
<view class="refund-item">
|
||||||
|
<view class="refund-label">物流单号<text class="required">*</text></view>
|
||||||
|
<input class="refund-value" v-model="selectedServiceType" placeholder="请填写物流单号" type="text">
|
||||||
|
</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">联系电话</view>
|
||||||
|
<view class="refund-value">
|
||||||
|
111111111
|
||||||
|
</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>
|
||||||
|
<button class="submit-btn" @click="submitRefundApplication">提交</button>
|
||||||
|
|
||||||
|
<!-- 选择退款原因弹窗 -->
|
||||||
|
<u-popup ref="popup2" :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="(company, index) in logisticsCompanies" :key="index" class="reason-item"
|
||||||
|
@click="selectLogisticsCompany(index)">
|
||||||
|
<view :class="['radio', selectedRefundReason === company ? 'active' : '']"></view>
|
||||||
|
<text>{{ company }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
afterSalePopup2: false,
|
||||||
|
selectedServiceType: '',
|
||||||
|
selectedRefundReason: '',
|
||||||
|
refundDescription: '',
|
||||||
|
imgList: [],
|
||||||
|
logisticsCompanies: [
|
||||||
|
'顺丰速运',
|
||||||
|
'京东物流',
|
||||||
|
'中通快递',
|
||||||
|
'圆通速递',
|
||||||
|
'申通快递',
|
||||||
|
'韵达快递',
|
||||||
|
'百世快递',
|
||||||
|
'邮政EMS'
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 可以在这里添加物流相关的初始化逻辑
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 关闭弹窗
|
||||||
|
closeAfterSalePopup2() {
|
||||||
|
this.afterSalePopup2 = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开选择物流公司弹窗
|
||||||
|
openAfterSalePopup2(type) {
|
||||||
|
this.afterSalePopup2 = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传图片
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择物流公司
|
||||||
|
selectLogisticsCompany(index) {
|
||||||
|
this.selectedRefundReason = this.logisticsCompanies[index];
|
||||||
|
this.afterSalePopup2 = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提交物流信息
|
||||||
|
submitRefundApplication() {
|
||||||
|
if (!this.selectedServiceType || !this.selectedRefundReason) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请完善物流信息',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输出提交的物流信息
|
||||||
|
const logisticsInfo = {
|
||||||
|
serviceType: this.selectedServiceType,
|
||||||
|
refundReason: this.selectedRefundReason,
|
||||||
|
refundDescription: this.refundDescription,
|
||||||
|
imgList: this.imgList
|
||||||
|
};
|
||||||
|
console.log('提交物流信息:', logisticsInfo);
|
||||||
|
|
||||||
|
// 这里可以添加提交后的处理逻辑
|
||||||
|
uni.showToast({
|
||||||
|
title: '物流信息提交成功',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('./index.css');
|
||||||
|
</style>
|
||||||
269
packages/myOrders/sendBack/index.css
Normal file
269
packages/myOrders/sendBack/index.css
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
.page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item.active .progress-text {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-line {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
align-self: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tip {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-desc2 {
|
||||||
|
font-size: 24rpx;
|
||||||
|
background-color: #ffeeeb;
|
||||||
|
color: #fe441a;
|
||||||
|
width: 80%;
|
||||||
|
margin: 20rpx auto 0;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addOrderIdBtn{
|
||||||
|
width: 70%;
|
||||||
|
margin: 10rpx auto 0;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #ff3f14;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
height: 20rpx;
|
||||||
|
background: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-item {
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag {
|
||||||
|
background-color: #ff7d00;
|
||||||
|
color: white;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
|
border-radius: 8rpx 0 8rpx 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asGoodTag1 {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 133rpx;
|
||||||
|
left: 80rpx;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
background-color: #fff2f0;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-bottom: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-amount {
|
||||||
|
font-size: 28rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
position: relative;
|
||||||
|
left: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.refund-info {
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 25rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
width: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-arrow {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-top: 2rpx solid #999999;
|
||||||
|
border-right: 2rpx solid #999999;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #d9d9d9;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modify-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ffebcb;
|
||||||
|
color: #983012;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.urge-btn {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomImg{
|
||||||
|
width: 70rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
204
packages/myOrders/sendBack/index.vue
Normal file
204
packages/myOrders/sendBack/index.vue
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 进度条 -->
|
||||||
|
<view class="progress-container">
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">商家处理</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item active">
|
||||||
|
<text class="progress-text">寄回商品</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-line"></view>
|
||||||
|
<view class="progress-item">
|
||||||
|
<text class="progress-text">退款结束</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态提示 -->
|
||||||
|
<view class="status-tip">
|
||||||
|
<text class="status-title">自行寄回</text>
|
||||||
|
<text class="status-desc"><text style="color: #ff481f;">2天</text>后未寄出将撤销退货申请</text>
|
||||||
|
<view class="status-desc2">需您自行联系快递公司退回，请不要邮寄到付</view>
|
||||||
|
<view class="info-item" style="border: none;">
|
||||||
|
<text class="info-label">商家地址</text>
|
||||||
|
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||||
|
<text class="copy-icon" @click="copyAdress"></text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button class="addOrderIdBtn" @click="addOrderId">填写单号</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="hr"></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 class="refund-amount">退款：¥{{ currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
|
</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 style="color: #fc3811;">*</text></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 style="color: #fc3811;">*</text></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 style="color: #fc3811;">*</text></text>
|
||||||
|
<text class="info-value amount">{{ '¥' + currentAfterSale.refund_amount.toFixed(2) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">申请时间<text style="color: #fc3811;">*</text></text>
|
||||||
|
<text class="info-value">{{ formatDate(currentAfterSale.create_time) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-label">退款编号<text style="color: #fc3811;">*</text></text>
|
||||||
|
<text class="info-value">{{ currentAfterSale.after_sales_no }}</text>
|
||||||
|
<text class="copy-icon" @click="copyRefundNo"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-buttons">
|
||||||
|
<view>
|
||||||
|
<image class="bottomImg" src="http://localhost:8080/secdBack_bottom.png" alt=""/>
|
||||||
|
</view>
|
||||||
|
<button class="modify-btn" @click="modifyRefund">平台介入</button>
|
||||||
|
<button class="cancel-btn" @click="cancelRefund">撤销申请</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {
|
||||||
|
isPhone,
|
||||||
|
picUrl,
|
||||||
|
request,
|
||||||
|
upload,
|
||||||
|
NavgateTo
|
||||||
|
} from '../../../utils';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentAfterSale: {},
|
||||||
|
pickerDefaultDate: new Date()
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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)}`);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import url('./index.css')
|
||||||
|
</style>
|
||||||
@ -855,6 +855,12 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "申请退货退款"
|
"navigationBarTitleText": "申请退货退款"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "changeInfo/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "换货详情"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user