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

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">上传完工照片</block>
		</cu-custom>
		<!-- 具体服务栏 -->
		<view class="bg-white margin-top-sm flex justify-start padding" v-if="order">
			<view class="cu-avatar"
				:style="'width: 120rpx; height: 120rpx; background-image:url(' + order.goodsLogoUrl + ');'"></view>
			<view class="flex flex-column-between margin-left">
				<view class="text-bold">{{order.goodsName}}</view>
				<!-- <view>
					<view v-for="(tag, index1) in servInfo.tags" v-if="tag.level === 'error'" class='cu-tag margin-right-xs radius line-red margin-top-xs'>{{tag.content}}</view>
					<view v-else-if="tag.level === 'info'" class='cu-tag margin-right-xs radius line-main-color margin-top-xs'>{{tag.content}}</view>
				</view> -->
				<view class='cu-tag margin-right-xs radius bg-main-color light margin-top-xs' v-if="order.orderType === 0">商城订单</view>
			</view>
		</view>
		<view class="margin-top-sm bg-white padding">
			<!-- 服务指标 -->
			<checkbox-group class="block" @change="changeServIndexChecked">
				<view style="min-width: 50%;" class="flex justify-start align-center margin-top-sm float-left" v-for="(item, index) in servIndex">
					<checkbox style="transform:scale(1)" class="main-color margin-right-xs" :value="item.code">
					</checkbox>
					<text class="text-sm">{{item.desc}}</text>
				</view>
			</checkbox-group>
			<!-- 完工图片上传 -->
			<view class="padding-top-lg float-clear">
				<view>
					<text class="text-bold text-black">上传完工照片 {{finishImgList.length}}/12</text>
					<text>（按订单要求上传）</text>
				</view>
				<view class="grid col-3 grid-square flex-sub margin-top-sm">
					<view class="bg-img" v-for="(item,index) in finishImgList" :key="index"
						@tap="viewImage($event, finishImgList)" :data-url="item">
						<image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg($event, finishImgList)" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="chooseImgList(e, finishImgList)" v-if="finishImgList.length < 12">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			<!-- 备注 -->
			<view class="padding-top text-bold text-black">备注</view>
			<view class="margin-top-sm">
				<textarea style="width: 100%; height: 300rpx;" class="solid radius text-left padding-sm" v-model="remark"
					maxlength="-1" placeholder="温馨提示：服务过程中有分歧存在客诉隐患或未能及时处理彻底的，请急报说明情况，将由平台客服一起协调沟通，否则造成你有责任的客诉将不利于服务评价；上述勾选需真实，被反映虚假或回访不实属恶意反馈，可能会被商家投诉。"></textarea>
			</view>
			<view class="margin-top-sm text-sm">
				<text class="text-red">注：</text>
				<text class="text-main-color">完工验收满意后必须让客户在下单处评价，标示为“商城订单”的，务必确保让客户进行评价</text>
			</view>
			<!-- 确认按钮 -->
			<view class="margin-lr margin-bottom padding-top-xl">
				<button class="cu-btn bg-main-color long-btn radius shadow-blur" @click="finishOrder">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkIndexArr: [],
				servIndex: [
					{ code: '1', desc: '本单准时上门'},
					{ code: '2', desc: '鞋套口罩/工装设备齐全'},
					{ code: '3', desc: '服务前后已试机/查验'},
					{ code: '4', desc: '水电隐患/服务内容已核查'},
					{ code: '5', desc: '订单备注处理完成'},
					{ code: '6', desc: '卫生已清理(略超范围清理)'},
					{ code: '7', desc: '服务中客户有提出异议的意见，已充分理解并妥善处理完毕'},
					{ code: '8', desc: '产生的额外费用/加单费用，是服务前报予客户的，客户同意'},
					{ code: '9', desc: '已让客户验收，并提示客户验收内容，请客户评价！'},
				],
				finishImgList: [],
				remark: '',
				order: null
			}
		},
		onLoad(options) {
			if (options && options.order) {
				let orderInfo = JSON.parse(decodeURIComponent(options.order));
				this.loadData(orderInfo);
			}
		},
		methods: {
			loadData (orderInfo) {
				this.order = orderInfo;
			},
			chooseImgList(e, imgList) {
				uni.chooseImage({
					count: 12 - 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.finishImgList || this.finishImgList.length === 0) {
					errMsg = "至少上传一张完工图片"
				} else if (!this.order || !this.order.orderDetailId) {
					errMsg = "订单信息异常，请稍后重新发起完单"
				}
				if (errMsg) {
					uni.showToast({
						title: errMsg,
						icon: 'none'
					})
					return false;
				}
				return true;
			},
			async finishOrder() {
				if (!this.validData()) {
					return;
				}
				
				let res = await this.$request.applyFinishOrder({
					orderDetailId: this.order.orderDetailId,
					finishImgList: this.finishImgList,
					remark: this.remark,
					assessLabels: this.checkIndexArr
				});
				if (res && res.code === 0) {
					uni.showToast({
						icon: 'success',
						title: '提交成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/order-manage/order-manage?tabCur=3'
						})
					}, 1500);
				} else if (res && res.msg) {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: '提交失败'
					})
				}
			},
			changeServIndexChecked(e) {
				this.checkIndexArr = e.detail.value;
			}
		},
	}
</script>

<style>
</style>