517 lines
11 KiB
Vue
517 lines
11 KiB
Vue
<template>
|
|
<view class="afterSales">
|
|
<!-- 退款原因 -->
|
|
<view class="afterSales-detail">
|
|
<up-cell-group :border="false" class="cellGroup">
|
|
<up-cell title="退款原因" :value="refundForm.refund_message?refundForm.refund_message:'请选择'"
|
|
titleStyle="color:#444;font-size:30rpx;" isLink :required="true" @click="show = true"></up-cell>
|
|
<!-- <up-cell title="退款件数" :border="false">
|
|
<template #value>
|
|
<up-number-box v-model="refundForm.refund_num"></up-number-box>
|
|
</template>
|
|
</up-cell> -->
|
|
</up-cell-group>
|
|
</view>
|
|
|
|
<!-- 商品信息 -->
|
|
<view class="afterSales-goods">
|
|
<view class="afterSales-goods-wrap" v-for="(item,indx) in goodsList" :key="indx">
|
|
<view class="afterSales-goods-left">
|
|
<up-image width="140rpx" height="140rpx" radius="8rpx" :src="item.image" />
|
|
</view>
|
|
<view class="afterSales-goods-right">
|
|
<view class="afterSales-goods-right-title">
|
|
<text class="goods_name">{{item.store_name}}</text>
|
|
<text class="goods_price">
|
|
<text style='font-size: 24rpx;'>￥</text>
|
|
<text style="font-size: 32rpx;">{{item.price}}</text>
|
|
</text>
|
|
</view>
|
|
<view class="afterSales-goods-right-info">
|
|
<text class="goods_desc">{{item.unit}}</text>
|
|
<text class="goods_num">x5</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="afterSales-return">
|
|
<view class="afterSales-return-input">
|
|
<text>申请退款金额</text>
|
|
<up-input border="none" placeholder="最多可输入金额" fontSize="24rpx"
|
|
:placeholderStyle="{color:'#ccc',fontSize:'24rpx'}"></up-input>
|
|
</view>
|
|
<view class="afterSales-return-edit">
|
|
<view>
|
|
<text style='font-size: 24rpx;'>￥</text>
|
|
<text style="font-size: 32rpx;">0.00</text>
|
|
</view>
|
|
<up-icon name="edit-pen" size="26" color="#989898"></up-icon>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="afterSales-remark">
|
|
<view class="afterSales-remark-title">
|
|
<view class="afterSales-remark-title-txt">备注说明</view>
|
|
<view class="afterSales-remark-title-count"></view>
|
|
</view>
|
|
|
|
<view class="afterSales-remark-textarea">
|
|
<up-textarea :count="true" v-model="refundForm.mark"></up-textarea>
|
|
</view>
|
|
|
|
<view class="afterSales-remark-title">
|
|
<view class="afterSales-remark-title-txt">上传凭证</view>
|
|
</view>
|
|
|
|
<view class="afterSales-remark-img">
|
|
<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
:maxCount="10"></up-upload>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- btn -->
|
|
<view class="afterSales-btn" @click="onSubmitApply">
|
|
<view class="afterSales-btn-wrap">
|
|
<text>提交申请</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退款原因 -->
|
|
<up-popup :show="show" closeable round="10" @close="close">
|
|
<view class="address-popup">
|
|
<view class="head-title">退款原因</view>
|
|
<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
|
|
<block v-for="(item,index) in refundReasonList" :key="index">
|
|
<view class="row" @click="refundType = item.value">
|
|
<view class="content">
|
|
<view class="top"></view>
|
|
<view class="bottom u-line-2">{{item.value}}</view>
|
|
</view>
|
|
<image v-if="refundType==item.value" src="@/static/icon/check.png"></image>
|
|
<image v-else src="@/static/icon/n-check.png"></image>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<up-button color="#20B128" shape="circle" @click="onSubmitReason">提交</up-button>
|
|
</view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref,
|
|
getCurrentInstance
|
|
} from "vue";
|
|
import {
|
|
orderListApi,
|
|
refundReasonListApi,
|
|
applyRefundApi
|
|
} from "@/api/order.js";
|
|
import {
|
|
config
|
|
} from "@/config/app.js"
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onReachBottom
|
|
} from "@dcloudio/uni-app";
|
|
import useUserStore from '@/store/user';
|
|
const userStore = useUserStore();
|
|
const instance = getCurrentInstance().proxy;
|
|
|
|
// 取消原因
|
|
const show = ref(false);
|
|
const refundType = ref('');
|
|
const refundForm = reactive({
|
|
refund_message: '', //退款原因
|
|
refund_num: '', //退款数量
|
|
id: '', //订单id
|
|
old_cart_id: [], //购物车id
|
|
refund_type: '', //0 仅退款 1 退款退货 2换货
|
|
refund_reason_wap_img: '',
|
|
mark: ''
|
|
});
|
|
const goodsList = ref([]);
|
|
|
|
onLoad(() => {
|
|
getRefundReasonData();
|
|
|
|
// 上一个页面传递的售后参数
|
|
const eventChannel = instance.getOpenerEventChannel();
|
|
eventChannel.on('orderDetail', function(data) {
|
|
console.log(data);
|
|
refundForm.id = data.id;
|
|
refundForm.old_cart_id = data.old_cart_id;
|
|
refundForm.refund_type = data.refund_type;
|
|
goodsList.value = data.goodsList;
|
|
})
|
|
});
|
|
|
|
// 图片上传
|
|
const fileList1 = ref([]);
|
|
// 删除图片
|
|
const deletePic = (event) => {
|
|
fileList1.value.splice(event.index, 1);
|
|
};
|
|
|
|
// 新增图片
|
|
const afterRead = async (event) => {
|
|
let lists = [].concat(event.file);
|
|
let fileListLen = fileList1.value.length;
|
|
lists.map((item) => {
|
|
fileList1.value.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中',
|
|
});
|
|
});
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await uploadFilePromise(lists[i].url);
|
|
let item = fileList1.value[fileListLen];
|
|
fileList1.value.splice(fileListLen, 1, {
|
|
...item,
|
|
status: 'success',
|
|
message: '',
|
|
url: result,
|
|
});
|
|
fileListLen++;
|
|
}
|
|
};
|
|
|
|
const uploadFilePromise = (url) => {
|
|
return new Promise((resolve, reject) => {
|
|
let a = uni.uploadFile({
|
|
url: config.HTTP_REQUEST_URL + '/api/upload/image',
|
|
filePath: url,
|
|
name: 'file',
|
|
header: {
|
|
token: userStore.token
|
|
},
|
|
success: (res) => {
|
|
setTimeout(() => {
|
|
if (typeof res.data == 'string') {
|
|
res.data = JSON.parse(res.data)
|
|
}
|
|
resolve(res.data.data);
|
|
}, 1000);
|
|
},
|
|
});
|
|
});
|
|
};
|
|
|
|
// 退款原因
|
|
const onSubmitReason = () => {
|
|
show.value = false;
|
|
refundForm.refund_message = refundType.value;
|
|
}
|
|
|
|
// 申请提交
|
|
const onSubmitApply = () => {
|
|
if (!refundForm.refund_message) return uni.$u.toast('请选择退款原因');
|
|
let urls = [];
|
|
//图片 refund_reason_wap_img
|
|
if (fileList1.value.length > 0) {
|
|
fileList1.value.map(i => {
|
|
console.log(i.url.uri);
|
|
urls.push(i.url.uri);
|
|
});
|
|
refundForm.refund_reason_wap_img = urls.join(',');
|
|
}
|
|
|
|
applyRefundApi(refundForm).then(res => {
|
|
if (res.code == 1) {
|
|
uni.$u.toast(res.msg);
|
|
uni.$u.sleep(1500).then(res => {
|
|
uni.navigateBack();
|
|
})
|
|
} else {
|
|
uni.$u.toast(res.msg);
|
|
}
|
|
})
|
|
}
|
|
|
|
// 取消原因列表
|
|
const refundReasonList = ref([]);
|
|
const getRefundReasonData = () => {
|
|
refundReasonListApi().then(res => {
|
|
refundReasonList.value = res.data;
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.afterSales {
|
|
margin: 0 20rpx;
|
|
padding: 20rpx 0 200rpx 0;
|
|
|
|
.afterSales-detail {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 28rpx;
|
|
|
|
::v-deep.u-cell__title-text {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "*";
|
|
display: block;
|
|
position: absolute;
|
|
right: -14rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 28rpx;
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.afterSales-goods {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.afterSales-goods-wrap {
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
|
|
.afterSales-goods-left {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.afterSales-goods-right {
|
|
flex: 1;
|
|
|
|
.afterSales-goods-right-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.goods_name {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.goods_price {
|
|
font-weight: 600;
|
|
font-size: 24rpx;
|
|
color: #060606;
|
|
}
|
|
}
|
|
|
|
.afterSales-goods-right-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
color: #777777;
|
|
}
|
|
}
|
|
}
|
|
|
|
.afterSales-return {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.afterSales-return-input {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 28rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
|
|
.afterSales-return-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
font-weight: 600;
|
|
font-size: 24rpx;
|
|
color: #060606;
|
|
}
|
|
|
|
.symbol {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.afterSales-remark {
|
|
padding: 30rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
|
|
.afterSales-remark-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.afterSales-remark-title-txt {
|
|
font-size: 28rpx;
|
|
color: #444444;
|
|
}
|
|
|
|
.afterSales-remark-title-count {
|
|
font-size: 28rpx;
|
|
color: #989898;
|
|
}
|
|
}
|
|
|
|
.afterSales-remark-textarea {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.afterSales-remark-title {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.afterSales-remark-img {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.img-wrap {
|
|
margin-bottom: 16rpx;
|
|
|
|
&:not(:nth-child(4n)) {
|
|
margin-right: 14rpx;
|
|
}
|
|
}
|
|
|
|
.import {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 152rpx;
|
|
height: 152rpx;
|
|
background: #F9F9F9;
|
|
border-radius: 16rpx;
|
|
|
|
text {
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #777777;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.afterSales-btn {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
background-color: #F6F6F6;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
/* 兼容 iOS < 11.2 */
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.afterSales-btn-wrap {
|
|
width: 670rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background: linear-gradient(132deg, #38BE41 0%, #20B128 100%);
|
|
border-radius: 40rpx;
|
|
margin: 0 auto;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.address-popup {
|
|
padding: 30rpx;
|
|
|
|
.head-title {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.list-admin {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
|
|
.admin-btn {
|
|
display: flex;
|
|
color: #20B128;
|
|
|
|
.btn {
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:active {
|
|
color: rgba(#20B128, 0.8);
|
|
transition: background-color 0.5s;
|
|
animation: disappear 0.5s 0.5s forwards;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx solid #f6f6f6;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.content {
|
|
.top {
|
|
display: flex;
|
|
|
|
view {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.bottom {}
|
|
}
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes disappear {
|
|
to {
|
|
opacity: 0;
|
|
/* 渐隐 */
|
|
transform: scale(0);
|
|
/* 缩小 */
|
|
}
|
|
}
|
|
}
|
|
</style> |