dingdong-master/pages/order-manage/cancel-order.vue

222 lines
7.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">申请退单</block>
</cu-custom>
<!-- <view class="padding flex justify-start margin-top-sm bg-white">
<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.picUrl + ');'"></view>
<view class="flex flex-column-between margin-left-sm">
<view class="text-black text-lg">{{good.servTitle}}</view>
<view>
<view v-for="(item, index) in good.orderTag" class='cu-tag radius margin-right-sm'>
{{item}}</view>
</view>
</view>
</view> -->
<view class="margin-top-sm padding flex justify-between bg-white">
<view>申请原因</view>
<picker @change="reasonChange" :range="cancelReasonList" :range-key="'reasonName'">
<view class="picker">
{{formData.returnReason ? formData.returnReason : '请选择' }}
<text class="text-gray text-lg margin-left-xs"><text class="cuIcon-right"></text></text>
</view>
</picker>
</view>
<view class="margin-top-sm padding bg-white">
<view class="margin-bottom-sm">具体原因<text class="text-gray margin-left-xs">(请填写退单退货的原因)</text></view>
<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="formData.returnReasonDetail" maxlength="-1"
placeholder-style="color: #d2d1d1;"
placeholder="无故退单无理由退单引起客诉你将有责本次原因请如实填写。订单大多数由推荐分销人员带单产生注意不要产生私自成交、撬单等行为造成订单销售人员的佣金损失不利于长远合作。被带单销售人员发现恶意违规破坏合作的将追责3000元/单。"></textarea>
</view>
<view class="margin-top-sm padding bg-white">
<view class="margin-bottom-sm">上传凭证(选填)</view>
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index" @tap="viewImage($event, formData.imgList)"
:data-url="item">
<image :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.imgList)" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImgList" v-if="formData.imgList.length<9">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar tabbar fixed-bottom-bar bg-back">
<button class="bg-main-color cu-btn lg shadow-warp long-btn margin-lr" @click="submitCancelOrder">提交退单</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// good: {},
formData: {
imgList: [],
returnReason: '',
returnReasonDetail: ''
},
cancelReasonList: [],
orderId: null,
orderType: null,
detailPlaceholder: '',
isDetailOrder: null,
isSelfAcceptOrder: false
}
},
onLoad(options) {
// if (options && options.params) {
// this.good = JSON.parse(decodeURIComponent(options.params)).orderInfo;
// }
if (options && options.orderId) {
this.orderId = options.orderId
}
if(options && options.orderType) {
let reasonList
if(options.orderType === '1') {
reasonList = ['商家原因,没时间备货!', '商家原因,缺货了!', '商家原因,发货时间迟了!', '商家原因,物流原因,长时间滞留路途!', '客户原因,无法接受质量!', '客户原因,商品无法满足期望!']
} else {
reasonList = ['师傅原因,时间排不上!', '师傅原因,技术不能解决问题!', '师傅原因,迟到了无法服务!', '客户原因,约好时间没遵守!', '客户原因,要求无法达成,无法沟通。']
}
this.cancelReasonList = reasonList.map((i , index)=> {
return {
reasonId: index + 1,
reasonName: i
}
})
this.orderType = options.orderType
}
if(options && options.isDetailOrder) {
this.isDetailOrder = options.isDetailOrder
}
if(options && options.isSelfAcceptOrder) {
this.isSelfAcceptOrder = options.isSelfAcceptOrder
}
},
methods: {
chooseImgList(e) {
uni.chooseMedia({
count: 9, //默认9
mediaType: ['image'],
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
uni.showLoading({
title: '上传中',
mask: true
});
res.tempFiles.forEach((fileObj, index) => {
this.$request.uploadFile(fileObj.tempFilePath).then((url) => {
this.formData.imgList.push(url);
if (index === res.tempFiles.length - 1) {
uni.hideLoading();
}
});
});
}
});
},
viewImage(e, imgList) {
uni.previewImage({
urls: imgList,
current: e.currentTarget.dataset.url
});
},
delImg(e, imgList) {
uni.showModal({
title: '',
content: '确定要删除这张图片吗?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
reasonChange(e) {
this.formData.returnReason = this.cancelReasonList[e.detail.value].reasonName
},
submitCancelOrder() {
if(!this.formData.returnReason) {
uni.showToast({
title: '请选择申请原因',
icon: 'none'
})
return
}
if(!this.formData.returnReasonDetail) {
uni.showToast({
title: '请填写具体原因',
icon: 'none'
})
return
}
// if(this.isDetailOrder == 1 && this.isSelfAcceptOrder) {
// uni.showModal({
// title: '提示',
// content: this.orderType == 1 ? '确认后订单回到你拣货/发货栏,你可重新派单或操作彻底退单' : '确认后订单回到你未约/未排栏,你可重新派单或操作彻底退单',
// success: (res) => {
// if(res.confirm) {
// this.cancelSend()
// }
// },
// })
// } else {
this.cancelSend()
// }
},
async cancelSend() {
const params = {
id: this.orderId,
returnImages: this.formData.imgList.length ? this.formData.imgList.toString() : '',
returnReason: this.formData.returnReason,
returnReasonDetail: this.formData.returnReasonDetail
}
let funcName = 'rejectMasterOrderWhenAccepted'
if(this.isDetailOrder == 1) {
funcName = 'rejectDetailOrder'
}
let res = await this.$request[funcName](params);
if (res && res.code === 0) {
uni.showToast({
icon: 'none',
title: '退单成功',
duration: 1000
})
await this.$request.addOrderOperate({
orderId: this.orderId,
orderType: '01',
content: '师傅退单'
})
uni.navigateBack({
delta: -1
})
} else {
uni.showToast({
icon: 'none',
title: res.msg,
duration: 2000
})
}
}
},
}
</script>
<style scoped>
.xxl-view {
min-width: 100rpx;
min-height: 100rpx;
}
</style>