dingdong-mall/pages/my/components/modal/apply-after-service.vue

<template>
	<view class="cu-modal" :class="show?'show':''">
		<view class="cu-dialog bg-white">
			<view class="cu-bar">
				<view class="content">{{afterServiceType === 1 ? '退单退款' : '发起售后'}}</view>
				<view class="action" @click="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="padding text-left">
				<view class="flex justify-start align-center">
					<view class="title">选择子单：</view>
					<my-uni-combox class="form-val-area inline-input" :candidates="detailList" placeholder="请选择" :showField="'remark'"
						v-model="detailObj">
					</my-uni-combox>
				</view>
				<view class="flex justify-start align-center margin-top-sm">
					<view class="title">申请原因：</view>
					<my-uni-combox class="form-val-area inline-input" :candidates="customerReasonTypeArr" placeholder="请选择" :showField="'name'"
						v-model="customerReasonType">
					</my-uni-combox>
				</view>
				<view class="margin-top-sm flex justify-start align-center margin-top-sm" v-if="afterServiceType === 1">
					<text>最大可退款金额：</text>
					<text class="text-price text-red">{{detailObj ? detailObj.payMoney : 0}}</text>
				</view>
				<view class="margin-top-sm flex justify-start align-center margin-top-sm" v-if="afterServiceType === 1">
					<view>退款金额：</view>
					<input type="digit" class="radius-input inline-input" v-model="refund" style="flex-basis: 70%;"></input>
				</view>
				<view class="margin-top-sm flex justify-start margin-top-sm">
					<view>具体原因：</view>
					<textarea style="height: 200rpx;" class="solid radius text-left padding-sm inline-input"
						v-model="remark" maxlength="-1"></textarea>
				</view>
				<!-- 上传图片 -->
				<view class="padding-top">
					<view class="grid col-3 grid-square flex-sub margin-top-sm">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index"
							@tap="viewImage($event, imgList)" :data-url="item">
							<image :src="item" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="delImg($event, imgList)" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseImgList(e, imgList)" v-if="imgList.length < 3">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar solid-top">
				<view class="action margin-0 flex-sub text-black" @click="hideModal">取消</view>
				<view class="action margin-0 flex-sub text-main-color solid-left" @click="apply">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
	
	export default {
		name: 'applyAfterSale',
		components: {
			myUniCombox
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				show: false,
				afterServiceType: 2, // 1为申请退款，2为发起售后
				customerReasonType: null,
				refund: null,
				remark: null,
				imgList: [],
				detailList: [],
				detailObj: null,
				toUpdateStatus: false
			}
		},
		methods: {
			async init(curOrder) {
				let res = await this.$request.getDetailListByMasterId({
					orderMasterId: curOrder.orderMasterId
				});
				if (res && res.code === 0) {
					this.detailList = res.data;
				}
			},
			showModal(curOrder, params) {
				this.init(curOrder);
				this.afterServiceType = params.afterServiceType;
				this.toUpdateStatus = params.toUpdateStatus;
				this.show = true;
			},
			hideModal(e) {
				this.resetData();
				this.$emit('cancel');
				this.show = false;
			},
			resetData() {
				this.afterServiceType = null;
				this.customerReasonType = null;
				this.data = null;
				this.refund = null;
				this.imgList = [];
				this.remark = null;
			},
			chooseImgList(e, imgList) {
				uni.chooseImage({
					count: 3 - imgList.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						res.tempFilePaths.forEach((tmpUrl, index) => {
							this.$request.uploadFile(tmpUrl).then((url) => {
								imgList.push(url);
								if (index === res.tempFilePaths.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)
						}
					}
				})
			},
			validData() {
				let errMsg = null;
				if (!this.detailObj) {
					errMsg = "请选择子单";
				} else if (this.afterServiceType == 1 && this.refund == null) {
					errMsg = "退款金额不能为空";
				} else if (this.afterServiceType == 1 && this.refund > this.detailObj.payMoney) {
					errMsg = "不可超出最大退款金额";
				}
				if (errMsg) {
					uni.showToast({
						title: errMsg,
						duration: 1500,
						icon: 'none'
					})
					return false;
				}
				return true;
			},
			async apply() {
				if (!this.validData()) {
					return;
				}
				
				let imgObjList = [];
				this.imgList.forEach(url => {
					imgObjList.push({
						imgUrl: url,
						imgUploadBy: 1
					})
				})
				let res = await this.$request.addAfterServiceRecord({
					customerReasonType: this.customerReasonType,
					customerReason: this.remark,
					orderDetailId: this.detailObj.orderDetailId,
					operType: this.afterServiceType,
					refund: this.refund,
					imgsList: imgObjList,
					createBy: 1
				});
				if (res && res.code === 0) {
					let updateStatusRes = {
						code: 0
					}
					if (this.toUpdateStatus) {
						updateStatusRes = await this.$request.updateOrder({
							id: this.data.orderMasterId,
							orderStatus: 3
						});
					}
					if (updateStatusRes && updateStatusRes.code === 0) {
						this.hideModal();
						this.$emit('confirmFeedback');
						uni.showToast({
							title: '已发起售后，进度可在订单详情内查看',
							icon: 'none',
							duration: 2000
						})
						return;
					}
				}
				uni.showToast({
					title: '无法对同一个订单重复发起售后或退款',
					icon: 'none',
					duration: 2000
				})
			}
		},
	}
</script>

<style scoped>
	.inline-input {
		flex-basis: 74%;
	}
</style>