196 lines
6.6 KiB
Vue
196 lines
6.6 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">
|
|
<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.navigateBack({
|
|
delta: -1
|
|
})
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '提交成功，请在我的订单-确认中查看',
|
|
duration: 2500
|
|
})
|
|
} 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>
|