285 lines
7.0 KiB
Vue
285 lines
7.0 KiB
Vue
<template>
|
|
<view class="ctr" v-if="data !== null">
|
|
<view class="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">
|
|
<view class="title flex-l">拍照打卡</view>
|
|
<view class="desc flex-l">请上传上门的打卡照片</view>
|
|
</view>
|
|
<view class="imgs-ctr">
|
|
<view v-for="(imgUrl, index) in images" :key="index" @click="delImg(index)" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
|
|
<image class="img" mode="aspectFill" :src="imgUrl"></image>
|
|
</view>
|
|
<view @click="upload()" 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, computed} from 'vue'
|
|
import {onLoad} from '@dcloudio/uni-app'
|
|
import api from "../../api/api";
|
|
import {throttle} from "../../utils/throttle";
|
|
import enums from "../../utils/enums";
|
|
|
|
const images = ref([])
|
|
|
|
const upload = () => {
|
|
if (images.value.length >= 10) {
|
|
return helpers.showToast('最多上传 10 张图片')
|
|
}
|
|
|
|
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
|
|
images.value.push(fullUrl)
|
|
helpers.showToast('上传成功')
|
|
},
|
|
fail(e) {
|
|
helpers.showToast('上传文件失败')
|
|
console.log(e)
|
|
},
|
|
complete() {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}).catch(() => {})
|
|
}
|
|
});
|
|
}
|
|
|
|
const delImg = (idx) => {
|
|
images.value.splice(idx, 1)
|
|
helpers.showToast('图片已删除')
|
|
}
|
|
|
|
//提交上门信息
|
|
const submit = throttle(() => {
|
|
if (images.value.length === 0) {
|
|
return helpers.showToast('请上传上门的打卡照片')
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '提示信息',
|
|
confirmText: '确认',
|
|
content: '确认已到达客户地址？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.showLoading({
|
|
title: '提交中'
|
|
});
|
|
|
|
let imagesStr = (images.value).join(',')
|
|
api.arrivedOnSite({order_dispatch_id: id.value, images: imagesStr}).then(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '已上门',
|
|
icon: "success"
|
|
})
|
|
setTimeout(() => {
|
|
helpers.jumpToPage('order-info', `id=${id.value}`, 'redirectTo')
|
|
}, 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_PLANIT) {
|
|
return helpers.showToast('该订单不可上门')
|
|
}
|
|
|
|
data.value = res
|
|
}).catch(() => {})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ctr {
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
height: 100vh;
|
|
.group {
|
|
width: 100%;
|
|
background: var(--containerBgColor);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 32rpx;
|
|
.group-name {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
position: relative;
|
|
.text {
|
|
font-size: 30rpx;
|
|
color: #E18F00;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.item {
|
|
width: 100%;
|
|
}
|
|
.time {
|
|
.item-row {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
.title {
|
|
width: 200rpx;
|
|
height: 100rpx;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.value {
|
|
width: 446rpx;
|
|
height: 100rpx;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.value-empty {
|
|
color: var(--summaryColor);
|
|
}
|
|
}
|
|
.desc {
|
|
width: 100%;
|
|
min-height: 50rpx;
|
|
font-size: 28rpx;
|
|
color: var(--descriptionColor);
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
.upload {
|
|
.info {
|
|
width: 100%;
|
|
height: 130rpx;
|
|
.title {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.desc {
|
|
width: 100%;
|
|
height: 50rpx;
|
|
font-size: 28rpx;
|
|
color: var(--descriptionColor);
|
|
}
|
|
}
|
|
.imgs-ctr {
|
|
width: 100%;
|
|
min-height: 100rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.img-ctr {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-right: 36rpx;
|
|
margin-top: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
.up-ctr {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: var(--contentBgColor);
|
|
border-radius: 8rpx;
|
|
margin-top: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
//margin-left: 36rpx;
|
|
.up {
|
|
width: 100%;
|
|
height: 36rpx;
|
|
font-size: 20rpx;
|
|
color: var(--summaryColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 68rpx;
|
|
background: var(--pageBgColor);
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|