行车三检带水印实时拍照
chenxinying
parent
644b805ea1
commit
c0fc40cb94
|
|
@ -33,25 +33,46 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="check-items">
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
检查照片
|
||||
<!-- <view class="cu-bar bg-white margin-top">-->
|
||||
<!-- <view class="action">-->
|
||||
<!-- 检查照片-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="action">-->
|
||||
<!-- {{ checkimgList.length }}/4-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="cu-form-group">-->
|
||||
<!-- <view class="grid col-4 grid-square flex-sub">-->
|
||||
<!-- <view class="bg-img" v-for="(item,index) in checkimgList" :key="index" @tap="viewImage(index,'checkimgList')">-->
|
||||
<!-- <image :src="baseImgPath + item.filePath" mode="aspectFill"></image>-->
|
||||
<!-- <view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :data-index="index">-->
|
||||
<!-- <text class='cuIcon-close'></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="solids" @tap="chooseImage()" v-if="checkimgList.length<4">-->
|
||||
<!-- <text class='cuIcon-cameraadd'></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<view class="de-drawer">
|
||||
<view class="cu-bar bg-white">
|
||||
<view class="action">实时照片</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
{{ checkimgList.length }}/4
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="bg-img" v-for="(item,index) in checkimgList" :key="index" @tap="viewImage(index,'checkimgList')">
|
||||
<image :src="baseImgPath + item.filePath" mode="aspectFill"></image>
|
||||
<view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :data-index="index">
|
||||
<text class='cuIcon-close'></text>
|
||||
<view class="cu-form-group">
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="bg-img" v-for="(item,index) in liveImgs" :key="index">
|
||||
<image :src="baseImgPath + item.filePath" mode="aspectFill"></image>
|
||||
<!-- 删除图片按钮 -->
|
||||
<view class="cu-tag bg-red" @tap.stop="DelImg(index)" data-type="0">
|
||||
<text class='cuIcon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 上传图片按钮，仅当没有图片时显示 -->
|
||||
<view class="solids" @tap="ChooseImage"
|
||||
v-if="liveImgs.length < 4">
|
||||
<text class='cuIcon-cameraadd'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="solids" @tap="chooseImage()" v-if="checkimgList.length<4">
|
||||
<text class='cuIcon-cameraadd'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -77,6 +98,7 @@
|
|||
</view>
|
||||
<view class="cu-tabbar-height"></view>
|
||||
</scroll-view>
|
||||
<canvas style="width: 300px; height: 150px; position: absolute; top: -9999px;" canvas-id="watermarkCanvas"></canvas>
|
||||
<view class="bottom-fixed" @tap.stop="openAuth('ACCESS_FINE_LOCATION')">
|
||||
<button :loading="buttonloading" class="cu-btn bg-green" @click="$noMultipleClicks(goSubmit)">提交</button>
|
||||
</view>
|
||||
|
|
@ -104,6 +126,7 @@
|
|||
checkimgList:[],
|
||||
modalName:null,
|
||||
imgList:[],
|
||||
liveImgs: [],
|
||||
}
|
||||
},
|
||||
onLoad(e){
|
||||
|
|
@ -123,74 +146,174 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
delImg(e) {
|
||||
ChooseImage() {
|
||||
var _this = this;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
geocode: true,
|
||||
success: function (locationRes) {
|
||||
const locationAddress = `${locationRes.address.province}${locationRes.address.city}${locationRes.address.district}${locationRes.address.street}${locationRes.address.streetNum}${locationRes.address.poiName}`;
|
||||
// 创建画布
|
||||
const ctx = uni.createCanvasContext('watermarkCanvas', _this);
|
||||
ctx.drawImage(tempFilePath, 0, 0, 300, 150); // 图片大小
|
||||
ctx.setFontSize(20); // 水印字体大小
|
||||
ctx.setFillStyle('red'); // 水印字体颜色
|
||||
ctx.setFontSize(10); // 调整字体大小，适应位置信息
|
||||
// 绘制水印
|
||||
ctx.fillText(`当前时间: ${_this.todayDate}`, 10, 120); // 根据实际情况调整位置
|
||||
ctx.fillText(`当前位置: ${locationAddress}`, 10, 130); // 根据实际情况调整位置
|
||||
ctx.draw(false, () => {
|
||||
// 将画布内容保存为图片
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'watermarkCanvas',
|
||||
success: function(res) {
|
||||
let img = {
|
||||
IMGFILES_ID: '',
|
||||
FILEPATH: res.tempFilePath // 使用带有水印的图片路径
|
||||
};
|
||||
_this.uploadFilePromise(img.FILEPATH, 'file')
|
||||
// _this.liveImgs.push(img)
|
||||
|
||||
console.log(_this.liveImgs)
|
||||
// .then(() => {
|
||||
// uni.showToast({
|
||||
// title: '实时照片上传成功',
|
||||
// icon: 'success'
|
||||
// });
|
||||
// }).catch(error => {
|
||||
// uni.showToast({
|
||||
// title: '实时照片上传失败: ' + error,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// });
|
||||
}
|
||||
}, _this);
|
||||
});
|
||||
},
|
||||
fail: function () {
|
||||
uni.showToast({
|
||||
title: '获取位置信息失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
DelImg(index) {
|
||||
var _this = this;
|
||||
uni.showModal({
|
||||
title: '秦安双控',
|
||||
content: '确定要删除这张图片吗？',
|
||||
cancelColor: "#000000",
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.request({
|
||||
url: basePath+'/app/eightwork/deleteFile',
|
||||
method: 'POST',
|
||||
dataType: 'json',
|
||||
header: {
|
||||
'Content-type':'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: {
|
||||
FILE_PATH:_this.checkimgList[e.currentTarget.dataset.index].filePath
|
||||
},
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '删除成功',
|
||||
duration: 1500
|
||||
});
|
||||
this.checkimgList.splice(e.currentTarget.dataset.index, 1)
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: "删除失败",
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
_this.liveImgs.splice(index,1)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['camera', 'album'], //从相册选择
|
||||
success: (res) => {
|
||||
uni.uploadFile({
|
||||
url: basePath+'/app/eightwork/saveFile',
|
||||
filePath: res.tempFilePaths[0],
|
||||
name: 'file',
|
||||
formData: {
|
||||
CORPINFO_ID:loginUser.CORPINFO_ID,
|
||||
},
|
||||
success: ({data}) => {
|
||||
let img = {};
|
||||
img.filePath = JSON.parse(data).FILE_PATH;
|
||||
this.checkimgList.push(img)
|
||||
console.log(this.checkimgList)
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: "图片上传失败",
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
uploadFilePromise(filePath, name) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: basePath + '/app/drivingtype/saveFile',
|
||||
filePath: filePath,
|
||||
name: name,
|
||||
formData: {
|
||||
CORPINFO_ID:loginUser.CORPINFO_ID,
|
||||
},
|
||||
success: ({data}) => {
|
||||
let img = {};
|
||||
img.filePath = JSON.parse(data).FILE_PATH;
|
||||
this.liveImgs.push(img)
|
||||
console.log(this.liveImgs)
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: "图片上传失败",
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
// delImg(e) {
|
||||
// var _this = this;
|
||||
// uni.showModal({
|
||||
// title: '秦安双控',
|
||||
// content: '确定要删除这张图片吗？',
|
||||
// cancelColor: "#000000",
|
||||
// cancelText: '取消',
|
||||
// confirmText: '确定',
|
||||
// success: res => {
|
||||
// if (res.confirm) {
|
||||
// uni.request({
|
||||
// url: basePath+'/app/eightwork/deleteFile',
|
||||
// method: 'POST',
|
||||
// dataType: 'json',
|
||||
// header: {
|
||||
// 'Content-type':'application/x-www-form-urlencoded'
|
||||
// },
|
||||
// data: {
|
||||
// FILE_PATH:_this.checkimgList[e.currentTarget.dataset.index].filePath
|
||||
// },
|
||||
// success: (res) => {
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: '删除成功',
|
||||
// duration: 1500
|
||||
// });
|
||||
// this.checkimgList.splice(e.currentTarget.dataset.index, 1)
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// uni.showModal({
|
||||
// content: "删除失败",
|
||||
// showCancel: false
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// chooseImage() {
|
||||
// uni.chooseImage({
|
||||
// count: 1, //默认9
|
||||
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
// sourceType: ['camera', 'album'], //从相册选择
|
||||
// success: (res) => {
|
||||
// uni.uploadFile({
|
||||
// url: basePath+'/app/eightwork/saveFile',
|
||||
// filePath: res.tempFilePaths[0],
|
||||
// name: 'file',
|
||||
// formData: {
|
||||
// CORPINFO_ID:loginUser.CORPINFO_ID,
|
||||
// },
|
||||
// success: ({data}) => {
|
||||
// let img = {};
|
||||
// img.filePath = JSON.parse(data).FILE_PATH;
|
||||
// this.checkimgList.push(img)
|
||||
// console.log(this.checkimgList)
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// uni.showModal({
|
||||
// content: "图片上传失败",
|
||||
// showCancel: false
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
/*
|
||||
*手写板
|
||||
*/
|
||||
|
|
@ -385,7 +508,7 @@
|
|||
title: '请稍候'
|
||||
})
|
||||
|
||||
if (_this.checkimgList.length <= 0) {
|
||||
if (_this.liveImgs.length <= 0) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请上传车辆检查照片',
|
||||
|
|
@ -411,7 +534,7 @@
|
|||
formData.USER_ID = loginUser.USER_ID
|
||||
formData.USER_NAME = loginUser.USERNAME
|
||||
formData.CHECKTYPE_ID = this.CHECKTYPE_ID
|
||||
formData.IMG_PATH = this.checkimgList.map(item => {
|
||||
formData.IMG_PATH = this.liveImgs.map(item => {
|
||||
return item.filePath
|
||||
}).join(",")
|
||||
formData.checklist = JSON.stringify(this.list)
|
||||
|
|
|
|||
Loading…
Reference in New Issue