<template>
|
<view class="content p30">
|
<view class="c2 f30 count-title">正在进行第{{hcServerCount + 1}}次服务</view>
|
<view class="bg_w p30 mt20 rd8">
|
|
<view class="mt30 mb30">
|
<view class="c2 f28 mb10 must">现场照片</view>
|
<view class="c9 f26 mb30">拍摄多张照片，核查人员需要出镜</view>
|
<u-upload
|
:fileList="fileList2"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
:previewFullImage="true"
|
:sizeType="['compressed']"
|
width="194rpx"
|
height="152rpx"
|
name="2"
|
>
|
<image src="../../static/ic_uploadimg@2x.png" mode="widthFix" class="uploadImage"></image>
|
</u-upload>
|
</view>
|
<u-line color="#e5e5e5"></u-line>
|
<view class="mt30 mb30">
|
<view class="c2 f28 mb10 must">核查资料</view>
|
<view class="c9 f26 mb30">服务过程证明资料包括签到表、会议纪要</view>
|
<view class="upload-btn ">
|
<u-button color="#216EEE" text="点击上传" @click="uploadFileList" plain></u-button>
|
</view>
|
<view class="mt30 bX f28" v-for="(item, index) in fileList">
|
<view class="mc file-style">{{item.name}}</view>
|
<view class="wc delet-btn" @click="fileList.splice(index, 1)">删除</view>
|
</view>
|
</view>
|
<u-line color="#e5e5e5"></u-line>
|
<view class="mt30 mb30" v-if="hcServerCount!==0">
|
<view class="c2 f28 mb10">补充资料</view>
|
<view class="c9 f26 mb30">服务过程证明资料包括签到表、会议纪要</view>
|
<view class="upload-btn ">
|
<u-button color="#216EEE" text="点击上传" @click="uploadFileExtraList" plain></u-button>
|
</view>
|
<view class="mt30 bX f28" v-for="(item, index) in fileExtraList">
|
<view class="mc file-style">{{item.name}}</view>
|
<view class="wc delet-btn" @click="fileExtraList.splice(index, 1)">删除</view>
|
</view>
|
</view>
|
<u-line color="#e5e5e5"></u-line>
|
<view class="mt30 mb30">
|
<view class="c2 f28 mb10">核查时间</view>
|
<view class="bX" @click="show=true">
|
<view class="fx1 c3 f30">{{ serviceDate || '请选择' }}</view>
|
<u-icon name="arrow-right" color="#666" size="18"></u-icon>
|
</view>
|
<u-datetime-picker
|
ref="datetimePicker"
|
:show="show"
|
:formatter="formatter"
|
v-model="date"
|
mode="date"
|
@confirm="confirmDate"
|
@cancel="show=false"
|
></u-datetime-picker>
|
</view>
|
<u-line color="#e5e5e5"></u-line>
|
<view class="mt30 mb30">
|
<view class="c2 f28 mb10">核查说明</view>
|
<u--textarea v-model="content" border="none" placeholder="请输入服务说明" ></u--textarea>
|
</view>
|
</view>
|
|
<!-- 底部处理 -->
|
<view class="pt30">
|
<view class="ptb15">
|
<u-button color="#216EEE00"></u-button>
|
</view>
|
<u-safe-bottom></u-safe-bottom>
|
</view>
|
<view class="fixedBottom bg_w" style="z-index: 9999;">
|
<view class="plr30 ptb15 bX">
|
<view class="save-btn">
|
<u-button color="#216EEE" text="保存" plain @click="submit(0)"></u-button>
|
</view>
|
<view class="submit-btn">
|
<u-button color="#216EEE" text="提交" type="primary" @click="submit(1)"></u-button>
|
</view>
|
</view>
|
<u-safe-bottom></u-safe-bottom>
|
</view>
|
<canvas :style="{
|
position: 'fixed',
|
width: canvasWidth + 'px',
|
height: canvasHeight + 'px',
|
bottom: -canvasHeight - 150 + 'px',
|
right: -canvasWidth - 300 + 'px'
|
}" canvas-id="imgId"></canvas>
|
</view>
|
</template>
|
|
<script>
|
import { baseUrl } from '@/common/config'
|
import { getAddrByLatAndLng, declareService, uploadHCData } from '@/util/api/index.js'
|
export default {
|
data() {
|
return {
|
date: Number(new Date()),
|
declareId: '',
|
fileList2: [],
|
fileList: [],
|
fileExtraList: [],
|
serviceDate: '',
|
content: '',
|
show: false,
|
hcServerCount: 0,
|
canvasWidth: '',
|
canvasHeight: '',
|
address:{}
|
};
|
},
|
onLoad({declareId, hcServerCount}) {
|
this.declareId = declareId
|
this.hcServerCount = +hcServerCount
|
declareService({ id:declareId, type:1 })
|
.then(res => {
|
if (res && res.status==0) {
|
this.fileList = res.fileDiagnosisList || []
|
this.fileExtraList = res.fileExtraList
|
res.hcSceneFileList.forEach(item => {
|
this.fileList2.push({
|
...item,
|
url: item.fileurlfull
|
})
|
})
|
this.serviceDate = res.serviceDate ? res.serviceDate.substring(0, res.serviceDate.length - 9) : ''
|
this.content = res.content
|
}
|
})
|
.catch(err => {
|
|
})
|
uni.getLocation({
|
geocode: true,
|
success: ({latitude, longitude}) => {
|
getAddrByLatAndLng({latitude, longitude})
|
.then(res => {
|
this.address = res
|
})
|
.then(err => {})
|
},
|
fail: (err) => {
|
console.log(err);
|
}
|
})
|
},
|
onReady() {
|
this.$refs.datetimePicker.setFormatter(this.formatter)
|
},
|
methods: {
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
return value
|
},
|
getInfoImage(url, callback) {
|
// 小程序没有document，只能在页面中建一个canvas，然后在成功时给他隐藏。
|
// this.flag = false
|
// 这个函数是可以拿到图片的一些信息，宽高等
|
uni.getImageInfo({
|
// 初始化photoIndex=0，拿到第一张图片，并添加水印
|
src: url,
|
success: res => {
|
console.log(res);
|
// 设置画布高度和宽度
|
this.canvasWidth = res.width
|
this.canvasHeight = res.height
|
|
//获取当前时间
|
// let roleNameInfo = date(new Date(), 'long') + '\n' + this.from.data.address
|
let timestamp = new Date().getTime()
|
// uni.$u.timeFormat(timestamp, 'yyyy-mm-dd hh:MM:ss')
|
let timeInfo = uni.$u.timeFormat(timestamp, 'yyyy-mm-dd hh:MM:ss')
|
let address =`${this.address.province} ${this.address.city} ${this.address.district} ${this.address.street_number || this.address.street}`
|
var ctx = uni.createCanvasContext('imgId', this)
|
ctx.drawImage(url, 0, 0, res.width, res.height)
|
// 为图片添加水印
|
ctx.setFontSize(30) //水印字体大小
|
ctx.setFillStyle('white') //水印颜色
|
// 水印位置
|
ctx.fillText(timeInfo, 60, res.height - 100)
|
ctx.fillText(address, 60, res.height - 60)
|
// 开始绘制添加水印的图片并显示在页面中
|
ctx.draw(false, () => {
|
setTimeout(() => {
|
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入自定义组件实例，以操作组件内 <canvas> 组件。
|
// 这里主要为了拿到路径
|
uni.canvasToTempFilePath({
|
canvasId: 'imgId',
|
// 设置输出的图片的宽度高度，会加快输出图片时间
|
destWidth: res.width,
|
destHeight: res.height,
|
fileType: 'jpg', //jpg为了压缩
|
quality: 0.8, //图片的质量
|
success: res => {
|
// 返回有水印的图片
|
callback(res.tempFilePath)
|
},
|
fail: err => {
|
uni.hideLoading()
|
}
|
})
|
}, 500)
|
})
|
},
|
fail: err => {
|
console.log('err')
|
}
|
})
|
},
|
// 删除图片
|
deletePic(event) {
|
this[`fileList${event.name}`].splice(event.index, 1)
|
},
|
// 新增图片
|
async afterRead(event) {
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
setTimeout(() => {
|
let lists = [].concat(event.file)
|
let fileListLen = this[`fileList${event.name}`].length
|
lists.map((item) => {
|
this[`fileList${event.name}`].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
this.getInfoImage(lists[i].url, async res => {
|
const result = await this.uploadFilePromise(res)
|
console.log(result);
|
let item = this[`fileList${event.name}`][fileListLen]
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
...result.data,
|
type: '',
|
message: '',
|
status: 'success',
|
fileurlfull: result.data.url,
|
fileurl: result.data.imgaddr
|
}))
|
fileListLen++
|
})
|
}
|
}, 1500)
|
},
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: `${baseUrl}/public/uploadWechat`,
|
filePath: url,
|
header: {
|
token: this.$store.state.token,
|
'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
|
},
|
name: 'file',
|
formData: {
|
folder: 'znzz/project_file'
|
},
|
success: (res) => {
|
resolve(JSON.parse(res.data))
|
uni.$u.toast('上传成功')
|
},
|
fail: (err) => {
|
uni.$u.toast(err)
|
},
|
complete: () => {
|
|
}
|
});
|
})
|
},
|
confirmDate(val) {
|
this.show=false
|
const timeFormat = uni.$u.timeFormat
|
this.serviceDate = timeFormat(val.value, 'yyyy-mm-dd')
|
},
|
uploadFileList() {
|
uni.chooseImage({
|
count: 1,
|
success: res => {
|
console.log(res);
|
this.uploadFilePromise(res.tempFiles[0].path)
|
.then(result => {
|
this.fileList.push({
|
...result.data,
|
name: result.data.imgname,
|
type: '',
|
fileurlfull: result.data.url,
|
fileurl: result.data.imgaddr
|
})
|
})
|
}
|
})
|
},
|
uploadFileExtraList() {
|
uni.chooseImage({
|
count: 1,
|
success: res => {
|
this.uploadFilePromise(res.tempFiles[0].path)
|
.then(result => {
|
this.fileExtraList.push({
|
...result.data,
|
name: result.data.imgname,
|
type: '',
|
fileurlfull: result.data.url,
|
fileurl: result.data.imgaddr
|
})
|
})
|
}
|
})
|
},
|
submit(status) {
|
if (status) {
|
if (!this.fileList2.length) {
|
uni.$u.toast('至少上传现场照片')
|
return
|
}
|
if (!this.fileList.length) {
|
uni.$u.toast('请上核查资料')
|
return
|
}
|
// if (!this.serviceDate) {
|
// uni.$u.toast('请上选择服务时间')
|
// }
|
}
|
uploadHCData({
|
status,
|
type: 1,
|
declareId: this.declareId,
|
hcSceneFileList: this.fileList2,
|
content: this.content,
|
serviceDate: this.serviceDate + ' 00:00:00',
|
fileList: this.fileList,
|
fileExtraList: this.fileExtraList
|
})
|
.then(() => {
|
uni.$u.toast(status?'提交成功':'保存成功')
|
uni.$emit("success")
|
uni.navigateBack()
|
})
|
.catch(err => {
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content {
|
font-weight: 400;
|
|
.count-title {
|
height: 42rpx;
|
line-height: 42rpx;
|
}
|
.file-style {
|
color: #216EEE;
|
min-width: 0;
|
min-height: 0;
|
word-wrap: break-word;
|
}
|
.delet-btn {
|
width: 60rpx;
|
flex-shrink: 0;
|
}
|
.uploadImage {
|
width: 196rpx;
|
height: 152rpx;
|
}
|
.upload-btn {
|
width: 184rpx;
|
}
|
.must::after {
|
content: ' *';
|
color: #F98107;
|
font-size: 28rpx;
|
font-weight: 400;
|
height: 40rpx;
|
line-height: 40rpx;
|
}
|
}
|
|
.save-btn {
|
width: 224rpx;
|
}
|
|
.submit-btn {
|
width: 446rpx;
|
}
|
</style>
|
