414 lines
15 KiB
Vue
414 lines
15 KiB
Vue
<template>
|
||
<view class="ctr" v-if="data !== null">
|
||
<view class="form-group">
|
||
<view class="group-name flex-l line-after">
|
||
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
|
||
<text class="text">服务完成后请提交信息</text>
|
||
</view>
|
||
<view class="item upload">
|
||
<view class="info flex-l">
|
||
<view class="title flex-l">拍照打卡</view>
|
||
<view class="desc flex-l">请上传完成图片（最多 10 张）</view>
|
||
</view>
|
||
<view class="imgs-ctr">
|
||
<view class="img-item" v-for="(imgUrl, index) in submitData.complete_images" :key="index">
|
||
<view @click="helpers.previewImage(imgUrl)" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
|
||
<image class="img" mode="aspectFit" :src="imgUrl"></image>
|
||
</view>
|
||
<view class="del" @click="delImg('complete_images', index)">
|
||
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="submitData.complete_images.length < 10" @click="upload('complete_images')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
|
||
hover-start-time="0" hover-stay-time="50">
|
||
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
|
||
<view class="up flex-c">点击上传</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-group">
|
||
<view class="group-name flex-l line-after">
|
||
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
|
||
<text class="text">提交材料信息</text>
|
||
</view>
|
||
<view :class="[submitData.is_material_used === 1 ? 'line-after' : '', 'item', 'input', 'flex-sb']" @click="selectIsMaterialUsed">
|
||
<view class="title flex-l">是否使用材料</view>
|
||
<view class="select-ctr flex-r select">{{submitData.is_material_used === 1 ? '已使用' : '未使用'}}<me-icon class="icon" type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon></view>
|
||
</view>
|
||
<template v-if="submitData.is_material_used === 1">
|
||
<view class="item input flex-sb line-after">
|
||
<view class="title flex-l">材料成本</view>
|
||
<view class="input-ctr">
|
||
<input type="digit" v-model="submitData.material_cost" class="uni-input" placeholder-class="placeholder-class" placeholder="请输入金额"/>
|
||
</view>
|
||
</view>
|
||
<view class="item upload">
|
||
<view class="info flex-l">
|
||
<view class="title flex-l">材料凭证</view>
|
||
<view class="desc flex-l">请上传凭证图片（最多 10 张）</view>
|
||
</view>
|
||
<view class="imgs-ctr">
|
||
<view class="img-item" v-for="(imgUrl, index) in submitData.material_images" :key="index">
|
||
<view @click="helpers.previewImage(imgUrl)" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
|
||
<image class="img" mode="aspectFit" :src="imgUrl"></image>
|
||
</view>
|
||
<view class="del" @click="delImg('material_images', index)">
|
||
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="submitData.material_images.length < 10" @click="upload('material_images')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
|
||
hover-start-time="0" hover-stay-time="50">
|
||
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
|
||
<view class="up flex-c">点击上传</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="form-group" v-if="data.order_info.receive_type === 1">
|
||
<view class="group-name flex-l line-after">
|
||
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
|
||
<text class="text">提交收款信息</text>
|
||
</view>
|
||
<view class="item input flex-sb line-after" v-if="data.order_info.coupon !== null">
|
||
<view class="title flex-l">优惠信息</view>
|
||
<view class="uni-input flex-r">{{data.order_info.coupon.threshold}}元抵扣{{data.order_info.coupon.discount_value}}元</view>
|
||
</view>
|
||
<view class="item input flex-sb line-after" @click="selectFinalPaymentMethod()">
|
||
<view class="title flex-l">收款方式</view>
|
||
<view v-if="submitData.final_payment_method === null" class="select-ctr flex-r">请选择收款方式<me-icon class="icon" type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon></view>
|
||
<view v-else class="select-ctr flex-r select">{{submitData.final_payment_method === 1 ? '线下尾款' : '线上尾款'}}<me-icon class="icon" type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon></view>
|
||
</view>
|
||
<!-- 线下收款需选择尾款收款方-->
|
||
<view v-if="submitData.final_payment_method === 1" class="item input flex-sb line-after" @click="selectOfflineTotalType()">
|
||
<view class="title flex-l">尾款收款方</view>
|
||
<view v-if="submitData.offline_total_type === 0" class="select-ctr flex-r">请选择尾款收款方</view>
|
||
<view v-else class="select-ctr flex-r select">{{submitData.offline_total_type === 1 ? '师傅收' : '公司收'}}</view>
|
||
</view>
|
||
<view class="item input flex-sb line-after">
|
||
<view class="title flex-l">收款金额</view>
|
||
<view class="input-ctr">
|
||
<input type="digit" v-model="submitData.amount" class="uni-input" placeholder-class="placeholder-class" placeholder="请输入收款金额"/>
|
||
</view>
|
||
</view>
|
||
<view class="item upload line-after">
|
||
<view class="info flex-l">
|
||
<view class="title flex-l">收款信息</view>
|
||
<view class="desc flex-l">请上传收款成功图片（最多 1 张）</view>
|
||
</view>
|
||
<view class="imgs-ctr">
|
||
<view v-if="submitData.payment_image === ''" @click="upload('payment_image')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
|
||
hover-start-time="0" hover-stay-time="50">
|
||
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
|
||
<view class="up flex-c">点击上传</view>
|
||
</view>
|
||
<view v-else class="img-item">
|
||
<view @click="helpers.previewImage(submitData.payment_image)" class="img-ctr">
|
||
<image class="img" mode="aspectFit" :src="submitData.payment_image"></image>
|
||
</view>
|
||
<view class="del" @click="delPaymentImg()">
|
||
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item upload">
|
||
<view class="info flex-l">
|
||
<view class="title flex-l">定金核销凭证</view>
|
||
<view class="desc flex-l">请上传凭证图片（最多 4 张）</view>
|
||
</view>
|
||
<view class="imgs-ctr">
|
||
<view class="img-item" v-for="(imgUrl, index) in submitData.off_images" :key="index">
|
||
<view @click="helpers.previewImage(imgUrl)" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
|
||
<image class="img" mode="aspectFit" :src="imgUrl"></image>
|
||
</view>
|
||
<view class="del" @click="delImg('off_images', index)">
|
||
<me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="submitData.off_images.length < 4" @click="upload('off_images')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
|
||
hover-start-time="0" hover-stay-time="50">
|
||
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
|
||
<view class="up flex-c">点击上传</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<me-empty-space height="376"></me-empty-space>
|
||
<view class="bottom">
|
||
<me-button @click="submit()" text="提 交" width="686rpx" icon-type="icon-checkbox-circle" margin-top="32rpx"></me-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import MeIcon from "../../components/me-icon/me-icon.vue";
|
||
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
|
||
import MeButton from "../../components/me-button/me-button.vue";
|
||
import helpers from "../../utils/helpers";
|
||
import {ref, reactive} from 'vue'
|
||
import {onLoad} from '@dcloudio/uni-app'
|
||
import api from "../../api/api";
|
||
import {throttle} from "../../utils/throttle";
|
||
import enums from "../../utils/enums";
|
||
|
||
const selectIsMaterialUsed = () => {
|
||
uni.showActionSheet({
|
||
itemList: ['未使用', '已使用'],
|
||
success: function (res) {
|
||
submitData.is_material_used = res.tapIndex;
|
||
},
|
||
fail: function (res) {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 上传完成图片
|
||
* @param type 上传类型:complete=完成图片,collectPayment=收款图片
|
||
*/
|
||
const upload = (type) => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original'],
|
||
sourceType: ['camera'],
|
||
success: (chooseImageRes) => {
|
||
if (chooseImageRes.tempFiles[0].size / 1024 / 1024 > 10) {
|
||
return helpers.showToast('照片不能超过10M')
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
});
|
||
|
||
let tempFilePath = chooseImageRes.tempFilePaths[0]
|
||
api.getOssParams({name: tempFilePath}).then(res => {
|
||
uni.uploadFile({
|
||
url: res.cdnurl,
|
||
filePath: tempFilePath,
|
||
name: 'file',
|
||
timeout: 30 * 1000,
|
||
formData: {
|
||
'signature': res.signature,
|
||
'ossAccessKeyId': res.OSSAccessKeyId,
|
||
'policy': res.policy,
|
||
'key': res.key,
|
||
},
|
||
success(r) {
|
||
if (r.statusCode === undefined || r.statusCode !== 204) {
|
||
helpers.showToast('上传文件失败')
|
||
return
|
||
}
|
||
|
||
let fullUrl = res.cdnurl + '/' + res.key
|
||
|
||
if (type === 'payment_image') {
|
||
submitData.payment_image = fullUrl
|
||
} else {
|
||
submitData[type].push(fullUrl)
|
||
}
|
||
|
||
helpers.showToast('上传成功')
|
||
},
|
||
fail(e) {
|
||
helpers.showToast('上传文件失败')
|
||
console.log(e)
|
||
},
|
||
complete() {
|
||
helpers.delayHideLoading()
|
||
}
|
||
});
|
||
}).catch(() => {})
|
||
}
|
||
});
|
||
}
|
||
|
||
//删除完成图片
|
||
const delImg = (type, idx) => {
|
||
submitData[type].splice(idx, 1)
|
||
helpers.showToast('图片已删除')
|
||
}
|
||
|
||
//删除收款图片
|
||
const delPaymentImg = () => {
|
||
submitData.payment_image = ''
|
||
helpers.showToast('图片已删除')
|
||
}
|
||
|
||
//提交
|
||
const submit = throttle(() => {
|
||
if (!validate()) {
|
||
return false
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '提示信息',
|
||
confirmText: '确认',
|
||
content: '确认已完成所有服务？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.showLoading({
|
||
title: '提交中'
|
||
});
|
||
|
||
let data = helpers.deepObj(submitData)
|
||
data.complete_images = (submitData.complete_images).join(',')
|
||
data.material_images = (submitData.material_images).join(',')
|
||
data.order_dispatch_id = id.value
|
||
|
||
api.completeService(data).then(() => {
|
||
helpers.delayHideLoading()
|
||
uni.showToast({
|
||
title: '已完成服务',
|
||
icon: "success"
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
}).catch(() => {})
|
||
}
|
||
}
|
||
});
|
||
})
|
||
|
||
const id = ref(null)
|
||
onLoad((params) => {
|
||
id.value = params.id
|
||
init()
|
||
})
|
||
|
||
const data = ref(null)
|
||
const init = () => {
|
||
api.orderInfo({order_dispatch_id: id.value}).then(res => {
|
||
if (res.status !== enums.ORDER_DISPATCH_STATUS.STATUS_CLOCK) {
|
||
return helpers.showToast('该订单不可完成')
|
||
}
|
||
|
||
data.value = res
|
||
submitData.receive_type = res.order_info.receive_type
|
||
}).catch(() => {})
|
||
}
|
||
|
||
//提交数据
|
||
const submitData = reactive({
|
||
complete_images: [],//完成图片
|
||
final_payment_method: null,//尾款支付方式：1=线下尾款,2=线上尾款
|
||
offline_total_type: 0,//尾款收款方：1=师傅收,2=公司收
|
||
amount: '',//收款金额
|
||
payment_image: '',//收款图片
|
||
receive_type: null,//收款类型：1=定金,2=全款
|
||
is_material_used: 0,//是否使用材料：0=未使用,1=已使用
|
||
material_cost: 0,//材料成本
|
||
material_images: [],//材料凭证
|
||
off_images: [],//定金核销二维码
|
||
})
|
||
|
||
const selectFinalPaymentMethod = () => {
|
||
uni.showActionSheet({
|
||
itemList: ['线下尾款', '线上尾款'],
|
||
success: function (res) {
|
||
submitData.final_payment_method = res.tapIndex + 1
|
||
},
|
||
fail: function (res) {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
}
|
||
|
||
const selectOfflineTotalType = () => {
|
||
uni.showActionSheet({
|
||
itemList: ['公司收', '师傅收'],
|
||
success: function (res) {
|
||
submitData.offline_total_type = res.tapIndex === 0 ? 2 : 1;
|
||
},
|
||
fail: function (res) {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
}
|
||
|
||
//验证提交数据
|
||
const validate = () => {
|
||
if (submitData.complete_images.length === 0) {
|
||
helpers.showToast('请上传完成图片')
|
||
return false
|
||
}
|
||
|
||
if (data.value.order_info.receive_type === 2) {
|
||
return true
|
||
}
|
||
|
||
// 使用材料
|
||
if (submitData.is_material_used === 1) {
|
||
if (submitData.material_cost === 0) {
|
||
helpers.showToast('请输入材料成本')
|
||
return false
|
||
}
|
||
|
||
if (submitData.material_images.length === 0) {
|
||
helpers.showToast('请上传材料凭证图片')
|
||
return false
|
||
}
|
||
}
|
||
|
||
if (submitData.final_payment_method === null) {
|
||
helpers.showToast('请选择收款方式')
|
||
return false
|
||
}
|
||
|
||
if (submitData.final_payment_method === 1 && submitData.offline_total_type === 0) {
|
||
helpers.showToast('请选择尾款收款方')
|
||
return false
|
||
}
|
||
|
||
if (submitData.amount === '') {
|
||
helpers.showToast('请输入收款金额')
|
||
return false
|
||
}
|
||
|
||
if (submitData.payment_image === '') {
|
||
helpers.showToast('请上传收款信息')
|
||
return false
|
||
}
|
||
|
||
return true
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ctr {
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
height: 100vh;
|
||
.bottom {
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 68rpx;
|
||
background: var(--pageBgColor);
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|