207 lines
6.9 KiB
Vue
207 lines
6.9 KiB
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" :key="index">
|
||
<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.chooseMedia({
|
||
count: 12 - imgList.length, //默认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) => {
|
||
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)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
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 addOrderOperate(params = {}) {
|
||
let res = await this.$request.addOrderOperate(params);
|
||
return res;
|
||
},
|
||
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
|
||
})
|
||
this.addOrderOperate({
|
||
orderId: this.order.orderDetailId,
|
||
orderType: '02',
|
||
content: '师傅完工'
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 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>
|