完成售后模块页面
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;
|
||||
}
|
||||
// 这里添加提交评价的API调用逻辑
|
||||
//
|
||||
uni.showToast({
|
||||
title: "评价提交成功",
|
||||
icon: "success",
|
||||
|
||||
@ -137,6 +137,16 @@ page {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.afterSaleNum {
|
||||
font-size: 26rpx;
|
||||
color: #ff3710;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
right: 230rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.yfd-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
@ -157,4 +167,404 @@ page {
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
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>
|
||||
<view class="container">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
||||
@click="selectTab(index, item)"
|
||||
>
|
||||
<view v-for="(item, index) in categoryList" :key="index"
|
||||
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||||
{{ item.category_name }}
|
||||
</view>
|
||||
</view>
|
||||
@ -18,17 +14,17 @@
|
||||
<view v-if="selectedTab === 7">
|
||||
<rated />
|
||||
</view>
|
||||
<view v-if="selectedTab === 8">
|
||||
<afterSale />
|
||||
</view>
|
||||
<view v-else>
|
||||
<view v-for="(item, index) in orderData" :key="index">
|
||||
<view class="contentList">
|
||||
<!-- 订单头部信息 -->
|
||||
<view class="order-header" @click="toDetails(item.order_status)">
|
||||
<view class="order-header" @click="toDetails(item)">
|
||||
<text>提交订单：{{ item.order_time }}</text>
|
||||
<view
|
||||
v-if="item.order_status == 6 || item.order_status == 5"
|
||||
class="status3"
|
||||
>{{ getOrderStatus(item.order_status) }}</view
|
||||
>
|
||||
<view v-if="item.order_status == 6 || item.order_status == 5" class="status3">{{
|
||||
getOrderStatus(item.order_status) }}</view>
|
||||
<view v-else-if="item.order_status == 7" class="status2">
|
||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/refund.png" />
|
||||
{{ getOrderStatus(item.order_status) }}
|
||||
@ -39,23 +35,15 @@
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list" @click="toDetails(item.order_status)">
|
||||
<view
|
||||
v-for="(goods, goodsIndex) in item.commodity_order_item_list
|
||||
.commodity_pic"
|
||||
:key="goodsIndex"
|
||||
class="goods-item"
|
||||
>
|
||||
<image :src="goods.image" class="goods-img"></image>
|
||||
<view class="goods-list" @click="toDetails(item)">
|
||||
<view v-for="(goods, goodsIndex) in item.commodity_order_item_list" :key="goodsIndex" class="goods-item">
|
||||
<image :src="goods.commodity_pic" class="goods-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单底部信息 -->
|
||||
<view class="order-footer">
|
||||
<view
|
||||
class="order-footer-text"
|
||||
@click="toDetails(item.order_status)"
|
||||
>共{{ item.total_count }}件商品，共计
|
||||
<view class="order-footer-text" @click="toDetails(item)">共{{ item.total_count }}件商品，共计
|
||||
<text> {{ item.total_amount }}</text>
|
||||
</view>
|
||||
<view>
|
||||
@ -63,29 +51,27 @@
|
||||
<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="goToPay">立即支付</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 3">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</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>
|
||||
<button class="cancel-btn" @click="applyRefund">申请退款</button>
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 4">
|
||||
<button class="cancel-btn" @click="checkLogistics">
|
||||
查看物流
|
||||
</button>
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
<button class="cancel-btn" @click="cancelOrder">查看物流</button>
|
||||
<button class="pay-btn" @click="confirmReceiving">确认收货</button>
|
||||
</view>
|
||||
<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 class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button> -->
|
||||
</view>
|
||||
<view class="btn-group" v-if="item.order_status === 7">
|
||||
<button class="pay-btn" @click="cancelOrder">再来一单</button>
|
||||
@ -96,18 +82,58 @@
|
||||
</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>
|
||||
</template>
|
||||
<script>
|
||||
import { picUrl, NavgateTo, request } from "../../../utils";
|
||||
import {
|
||||
isPhone,
|
||||
picUrl,
|
||||
request,
|
||||
upload,
|
||||
NavgateTo
|
||||
} from '../../../utils';
|
||||
import { apiArr } from "../../../api/order";
|
||||
import Rated from "./rated.vue";
|
||||
import AwaitRated from "./awaitRated.vue";
|
||||
import Rated from "../rated/rated.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 {
|
||||
components: {
|
||||
Rated,
|
||||
AwaitRated,
|
||||
AfterSale,
|
||||
cancelOrderPopup,
|
||||
refundPopup,
|
||||
afterSalePopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -123,7 +149,12 @@ export default {
|
||||
{ category_name: "售后" },
|
||||
],
|
||||
selectedTab: 0,
|
||||
orderData: [],
|
||||
orderData: orderMockData,
|
||||
|
||||
showPopup: false,//取消订单
|
||||
afterSaleGoods: [],//售后商品列表
|
||||
noSalePopup: false,//无售后商品
|
||||
showTkPopup: false,//申请退款
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -133,23 +164,61 @@ export default {
|
||||
this.getOrderList();
|
||||
}
|
||||
},
|
||||
// 取消订单
|
||||
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({
|
||||
title: "提示",
|
||||
content: "确定要取消订单吗？",
|
||||
title: "确认收货",
|
||||
content: "确认收货后订单状态将变为【已完成】,如有售后需求可正常申请退款/售后,确定要确认收货吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 调用取消订单API
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
goToPay() {
|
||||
},
|
||||
toDetails(order_status) {
|
||||
toDetails(item) {
|
||||
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", {
|
||||
user_id: uni.getStorageSync("userId"),
|
||||
}).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>
|
||||
<view class="container">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="status-bar" v-if="status === '待付款'">
|
||||
<view class="status-bar" v-if="status === '1'">
|
||||
<view class="status">待付款</view>
|
||||
<view class="countdown">剩余支付时间: {{ countdown }}</view>
|
||||
<view class="tips">10分钟内未支付订单自动取消</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '待发货'">
|
||||
<view class="status-bar" v-if="status === '3'">
|
||||
<view class="status">待发货</view>
|
||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||
<view class="tips">商家正在加急打包中了，请耐心等候</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '配送中'">
|
||||
<view class="status-bar" v-if="status === '4'">
|
||||
<view class="status">待配送</view>
|
||||
<view class="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||
<view class="tips">
|
||||
@ -19,12 +19,12 @@
|
||||
<img class="phone" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/phone.png" />
|
||||
</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="countdown">预计到货时间: 2025-09-09 9:59:59</view>
|
||||
<view class="tips">感谢对我们的信任，期待下次光临</view>
|
||||
</view>
|
||||
<view class="status-bar" v-if="status === '已取消'">
|
||||
<view class="status-bar" v-if="status === '6'">
|
||||
<view class="status">已取消</view>
|
||||
<view class="countdown">订单已取消</view>
|
||||
<view class="tips">您的订单已取消，再来一单吧</view>
|
||||
@ -39,27 +39,22 @@
|
||||
<!-- 订单金额 -->
|
||||
<view class="amount-section">
|
||||
<view v-if="status !== '退款中'">
|
||||
<view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
|
||||
<view class="original-price"
|
||||
>商品下单应付
|
||||
<text> ¥{{ orderInfo.originalPrice }}</text>
|
||||
<view class="total-amount">¥{{ orderInfo.shiliu_score }}</view>
|
||||
<view class="original-price">商品下单应付
|
||||
<text> ¥{{ orderInfo.shiliu_score }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="goods-item"
|
||||
v-for="(item, index) in orderInfo.goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="goods-item" v-for="(item, index) in orderInfo.commodity_order_item_list" :key="index">
|
||||
<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>
|
||||
<view class="goods-name">{{ item.name }}</view>
|
||||
<view class="goods-name">{{ item.goods_name }}</view>
|
||||
<view class="goods-desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="goods-price">¥{{ item.price }}</view>
|
||||
<view class="goods-info-right"> x{{ item.quantity }}</view>
|
||||
<view class="goods-price">¥{{ item.sales_price }}</view>
|
||||
<view class="goods-info-right"> x{{ item.count }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -67,14 +62,12 @@
|
||||
</view>
|
||||
<view class="hr"></view>
|
||||
<view class="info-item">
|
||||
<view class="info-label1"
|
||||
>下单总金额( ¥{{ orderInfo.orderAmount }} )</view
|
||||
>
|
||||
<view class="info-label1">下单总金额( ¥{{ orderInfo.orderAmount }} )</view>
|
||||
<view class="info-action">明细</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">商品下单总金额</view>
|
||||
<view class="info-value">¥{{ orderInfo.goodsTotal }}</view>
|
||||
<view class="info-value">¥{{ orderInfo.total_amount }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">运费总计</view>
|
||||
@ -88,11 +81,12 @@
|
||||
<view class="section-title">配送信息</view>
|
||||
<view class="info-item">
|
||||
<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 class="info-item">
|
||||
<view class="info-label">预计配送时间</view>
|
||||
<view class="info-value">{{ orderInfo.deliveryTime }}</view>
|
||||
<view class="info-value"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -101,14 +95,13 @@
|
||||
<view class="section-title">收货信息</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">收货人</view>
|
||||
<view class="info-value"
|
||||
>{{ orderInfo.recipientName }}
|
||||
<text> {{ orderInfo.recipientPhone }}</text>
|
||||
<view class="info-value">{{ orderInfo.receiving_name }}
|
||||
<text> {{ orderInfo.receiving_phone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">收货地址</view>
|
||||
<view class="info-value">{{ orderInfo.recipientAddress }}</view>
|
||||
<view class="info-value">{{ orderInfo.receiving_address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -117,15 +110,15 @@
|
||||
<view class="section-title">订单信息</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">订单编号</view>
|
||||
<view class="info-value">{{ orderInfo.orderNumber }}</view>
|
||||
<view class="info-value">{{ orderInfo.order_no }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">支付方式</view>
|
||||
<view class="info-value">{{ orderInfo.paymentMethod }}</view>
|
||||
<view class="info-value">{{ orderInfo.pay_method }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">下单时间</view>
|
||||
<view class="info-value">{{ orderInfo.orderTime }}</view>
|
||||
<view class="info-value">{{ orderInfo.order_time }}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-label">备注</view>
|
||||
@ -134,28 +127,28 @@
|
||||
</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="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||
</view>
|
||||
<view class="bottom-buttons" v-if="status === '待发货'">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<view class="bottom-buttons" v-if="status === '3'">
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="cancel-btn" @click="cancelOrder">取消订单</button>
|
||||
<!-- <button class="pay-btn" @click="gotoPayment">立即支付</button> -->
|
||||
</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="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||
</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="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">立即支付</button>
|
||||
</view>
|
||||
<view class="bottom-buttons" v-if="status === '已取消'">
|
||||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||||
<view class="bottom-buttons" v-if="status === '6'">
|
||||
<!-- <button class="yfd-btn" @click="cancelOrder">运费单</button> -->
|
||||
<!-- <button class="cancel-btn" @click="cancelOrder">服务评价</button> -->
|
||||
<button class="pay-btn" @click="gotoPayment">再来一单</button>
|
||||
</view>
|
||||
@ -172,57 +165,20 @@ export default {
|
||||
return {
|
||||
status: "",
|
||||
countdown: "9:59:59",
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
orderInfo: {},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
const item = JSON.parse(options?.item);
|
||||
console.log("🚀 ~ onLoad ~ item:", item)
|
||||
// 启动倒计时
|
||||
options?.status === "待付款" ? this.startCountdown() : "";
|
||||
this.status = options?.status;
|
||||
item.order_status == "1" ? this.startCountdown() : "";
|
||||
this.status = JSON.stringify(item.order_status);
|
||||
this.orderInfo = item;
|
||||
},
|
||||
methods: {
|
||||
startCountdown() {
|
||||
// 实际项目中应该从服务器获取剩余时间
|
||||
// 这里使用模拟倒计时
|
||||
// 倒计时模拟
|
||||
let seconds = 10 * 60; // 10分钟
|
||||
const timer = setInterval(() => {
|
||||
seconds--;
|
||||
@ -234,7 +190,7 @@ export default {
|
||||
.padStart(2, "0")}`;
|
||||
if (seconds <= 0) {
|
||||
clearInterval(timer);
|
||||
// 倒计时结束，处理订单取消逻辑
|
||||
// 倒计时结束，处理订单
|
||||
uni.showToast({ title: "订单已取消", icon: "none" });
|
||||
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": {
|
||||
"navigationBarTitleText": "申请退货退款"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "changeInfo/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "换货详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user