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="checkServIndex">
				<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" :checked="checkIndexArr[index] === '1'" value='1'>
					</checkbox>
					<text @click="checkedCurBox(index)">{{item}}</text>
				</view>
			</checkbox-group> -->
			<!-- 完工图片上传 -->
			<view class="padding-top-lg float-clear">
				<view>
					<text class="text-bold text-black">上传完工照片 {{finishImgList.length}}/3</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 < 3">
						<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-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: [
					'本单准时上门',
					'鞋套工装设备完善',
					'订单备注处理完成',
					'水电隐患已核查',
					'服务前后都已试机',
					'卫生已清理',
					'服务中出现过问题，已和客户沟通并同意',
					'产生的费用是服务前说明并报给予客户，客户同意',
					'已让客户验收，并提示客户验收内容，已完成此项'
				],
				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: 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.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
				});
				if (res && res.code === 0) {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
				} else if (res && res.msg) {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: '提交失败'
					})
				}
			}
			// checkedCurBox(index) {
			// 	this.checkIndexArr[index] = 1;
			// }
		},
	}
</script>

<style>
</style>