<template>
<view>
<comNavigation :typeNameImg='"上传家访照片"' :image='true' :icon='true'></comNavigation>
<view class="kuang">
<!-- <view class="ding">
<image src="../../static/add-icon.jpg" mode=""></image>
<text
style="font-size: 26rpx;color: #999999;">{{addressName.length<12?addressName:addressName.substr(0,12)+'...'}}</text>
<text style="color: #00904B;font-size: 26rpx;" @click="getRegeo">重新定位</text>
</view> -->
<sec-title title="小区门牌"></sec-title>
<view class="hourse-photo">
<view class="xiang" v-for="(item,i) in houseNumberList" :key="item.photoName">
<image class="upload-del" @click.stop="handDelImg('number',item.src,houseNumberList)"
src="../../static/upload-del.png" mode="">
</image>
<image class="upload-img" :src="item.src" mode="scaleToFill"
@click.stop="imgPreview(i,houseNumberList)"></image>
</view>
<view @click.stop="handUploads('number','小区门牌')" v-if="houseNumberList.length <66" class="xiang">
<image class="upload-img" :src="'../../static/camera.png'" mode=""></image>
</view>
<!-- overflow:visible; -->
<!-- <view style='width:0px;height:0px;position: absolute;top: -999999rpx;'>
<canvas :style="{'width':canvasWidth,'height': canvasHeight}" canvas-id="firstCanvas"></canvas>
</view> -->
<view style='width:0px;height:0px;overflow:hidden;position: fixed;top: -999999rpx;'>
<canvas :style="{'width':canvasWidth,'height': canvasHeight}" canvas-id="firstCanvas"></canvas>
</view>
</view>
<view class="denglu">
<button class="buttonk" type="primary" @click="$noMultipleClicks(next)">下一步</button>
</view>
<com-watermask></com-watermask>
</view>
</view> </template>
<script>
// import amap from '../../common/amap-wx.js';
export default {
data() {
return {
watesrc: '',
canvasWidth: '',
canvasHeight: '',
videoTemp: '',
amapPlugin: null,
key: "9341ac2facf4a25931636a07756d80c0",
addressName: '',
houseNumber: '',
houseNumberList: [],
unitDoorList: [],
hourseDoorList: [],
videoName: '',
lat: '',
long: '',
hourseEnvList: [],
videoPri: '',
noClick: true,
}
},
created() {
// this.amapPlugin = new amap.AMapWX({
// key: this.key
// });
// this.getRegeo();
if(this.lat === "" && this.long === "" ){
this.loadInfo();
}
},
methods: {
//获取当前位置的经纬度
loadInfo: function() {
let that = this;
uni.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
var latitude = res.latitude //维度
var longitude = res.longitude //经度
that.addressName = "";
that.lat = res.latitude;
that.long = res.longitude;
console.log(res);
// uni.openLocation({
// latitude,
// longitude,
// scale: 18,
// success: function(resaa) {
// console.log(resaa);
// }
// })
},
fail: (err) => {
// that.loadInfo();
}
})
},
getRegeo() {
this.$loading('定位中')
const that = this
this.amapPlugin.getRegeo({
success: (data) => {
console.log(data)
// let ran = parseInt(Math.random() * (29 + 1), 10);
// this.addressName = data[0].regeocodeData.pois[ran].address
that.addressName = data[0].name
that.lat = data[0].latitude
that.long = data[0].longitude
setTimeout(() => {
uni.hideLoading();
}, 1000)
},
fail(e) {
setTimeout(() => {
uni.hideLoading();
// that.$toast('请重新获取定位')
}, 3000)
console.log(e);
}
})
setTimeout(() => {
uni.hideLoading();
}, 5000)
},
videoPreview(src) {
this.videoPri = src;
this.videoTemp = src;
},
videoPreviewCloses() {
this.videoPri = ''
},
handDelImg(type, src, list) {
let hourseIndex = list.findIndex(v => {
return v.src === src
})
if (type === 'number') {
this.houseNumberList.splice(hourseIndex, 1)
} else if (type === 'unit') {
this.unitDoorList.splice(hourseIndex, 1)
} else if (type === 'hourse') {
this.hourseDoorList.splice(hourseIndex, 1)
}
},
// 视频上传
handUploadsVideo(name) {
// if (!this.addressName) {
// return this.$toast('请先授权定位')
// }
if (!this.long) {
return this.$toast('请先授权定位')
}
const that = this
// uni.chooseMedia({
uni.chooseVideo({
mediaType: ['video'], // 'image'是图片,video是视频
maxDuration: 30,
compressed: true,
camera: 'back',
count: 1,
sourceType: ['camera'], //'camera',手机拍照,相册选择是album
success(res) {
// that.$loading('正在上传')
uni.showLoading({
title: "正在上传...",
mask: true,
});
// console.log(res,'视频res');
const img = res.tempFilePath;
// const img = res.tempFiles[0].tempFilePath
let videoName = name + "_" + name + "_" + that.$functionPub.getSubLastYxWx(
img) + that.$functionPub.getSubLastYx(img)
// await that.$api.uploadeFilesFormal(img, '/uploadFile/uploadVideo', 'file', {
// videoName: videoName,
// imageNum: uni.getStorageSync('customer_listdata').imageNum,
// }) // src, urltype, name, params
that.$api.uploadeFilesFormal(img, '/uploadFile/uploadVideo', 'file', {
videoName: videoName,
imageNum: uni.getStorageSync('customer_listdata').imageNum,
}).then(res => {
if (res.code === "200") {
that.videoName = videoName
that.videoTemp = img
that.$hiding()
} else {
that.$hiding()
uni.showToast({
icon: 'none',
title: '上传失败，请重新检查重新上传!'
})
}
});
},
fail(err) {
console.log(err, '失败');
that.$hiding()
uni.showToast({
icon: 'none',
title: '视频上传失败，请重新拍摄上传!'
})
}
});
},
imgPreview(i, data) {
let imgUrl = [];
for (var j = 0; j < data.length; j++) {
imgUrl.push(data[j].src);
}
console.log(imgUrl, '预览地址');
uni.previewImage({
urls: imgUrl,
current: i,
success: () => {
console.log(i, "预览成功");
},
fail: () => {}
});
},
wake(res, callback) {
const that = this;
let iUp = 0;
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function(ress) {
// console.log("wake getImageInfo success", ress);
// that.canvasWidth = ress.width / 2 + 'px';
// that.canvasHeight = ress.height / 2 + 'px';
// let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
// //将图片src放到cancas内，宽高为图片大小
// ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width / 2, ress.height / 2)
// ctx.setFontSize(20) // 字体大小
// // ctx.setFillStyle('#0071bd') //字体颜色
// ctx.setFillStyle('#fff') //字体颜色
// ctx.rotate(24 * Math.PI / 180);
// let textToWidth = ress.width / 4.5 * 0.5;
// let textToHeight = ress.height / 3 * 0.3;
// let textToLongWidth = ress.height / 3 * 0.3;
// let textToLongHeight = ress.height / 2.5 * 0.3;
// const {
// addressName,
// lat,
// long
// } = that
// const wateAddress = `${addressName}`
// // const latAndLong = `${String(lat).substr(0,5)},${String(long).substr(0,5)}`
// const latAndLong = `${String(long).substr(0,10)},${String(lat).substr(0,9)}`
// ctx.fillText(that.addressName, textToWidth, textToHeight)
// ctx.fillText(latAndLong, textToLongWidth, textToLongHeight)
// console.log(" wakeCanvas ctx canvasDraw",ctx)
// ctx.draw(false, () => {
// setTimeout(() => {
// console.log("wakeCanvas ctx ctx.draw",ctx)
// that.canvasDraw(callback)
// }, 1000);
// });
console.log("wake getImageInfo success", ress);
setTimeout(() => {
that.wakeCanvas(ress,res,that,callback);
}, 1000);
},
fail: function(ress) {
console.log("wake getImageInfo fail", ress);
iUp++;
if(iUp <= 5 ){
that.wake(res, callback);
}else{
uni.hideLoading();
that.$toast('图片详细信息获取失败，请重新操作')
}
},
complete: function(ress) {
console.log("wake getImageInfo complete", ress);
if( ress.errMsg === "getImageInfo:ok"){
console.log("wake getImageInfo complete ress.errMsg === getImageInfo:ok ----- ", ress.errMsg);
}else{
// uni.hideLoading();
// that.$toast('图片详细信息获取失败，请重新操作')
if(iUp > 5 ){
that.wake(res, callback);
}
}
},
})
// let ress = await uni.getImageInfo({src: res.tempFilePaths[0]})
// // let ress = (await uni.getImageInfo({src}))[1];
// that.canvasWidth = ress.width / 2 + 'px';
// that.canvasHeight = ress.height / 2 + 'px';
// let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
// //将图片src放到cancas内，宽高为图片大小
// ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width / 2, ress.height / 2)
// ctx.setFontSize(20) // 字体大小
// // ctx.setFillStyle('#0071bd') //字体颜色
// ctx.setFillStyle('#fff') //字体颜色
// ctx.rotate(24 * Math.PI / 180);
// let textToWidth = ress.width / 4.5 * 0.5;
// let textToHeight = ress.height / 3 * 0.3;
// let textToLongWidth = ress.height / 3 * 0.3;
// let textToLongHeight = ress.height / 2.5 * 0.3;
// const {
// addressName,
// lat,
// long
// } = that
// const wateAddress = `${addressName}`
// // const latAndLong = `${String(lat).substr(0,5)},${String(long).substr(0,5)}`
// const latAndLong = `${String(long).substr(0,10)},${String(lat).substr(0,9)}`
// ctx.fillText(that.addressName, textToWidth, textToHeight)
// ctx.fillText(latAndLong, textToLongWidth, textToLongHeight)
// ctx.draw(false, () => {
// setTimeout(() => {
// that.canvasDraw(callback)
// }, 1000);
// });
},
// new dyj
wakeCanvas(ress,res,that,callback){
const timeWakeCanvasKs = that.getNowTime();
console.log("timeWakeCanvasKs ________",timeWakeCanvasKs);
that.canvasWidth = ress.width / 2 + 'px';
that.canvasHeight = ress.height / 2 + 'px';
let ctx = uni.createCanvasContext('firstCanvas', that);
// console.log("wakeCanvas ctx",ctx)
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width / 2, ress.height / 2)
ctx.setFontSize(20) // 字体大小
// ctx.setFillStyle('#0071bd') //字体颜色
ctx.setFillStyle('#fff') //字体颜色
ctx.rotate(24 * Math.PI / 180);
let textToWidth = ress.width / 4.5 * 0.5;
let textToHeight = ress.height / 3 * 0.3;
let textToLongWidth = ress.height / 3 * 0.3;
let textToLongHeight = ress.height / 2.5 * 0.3;
const {
addressName,
lat,
long
} = that
const wateAddress = `${addressName}`
// const latAndLong = `${String(lat).substr(0,5)},${String(long).substr(0,5)}`
const latAndLong = `${String(long).substr(0,10)},${String(lat).substr(0,9)}`
ctx.fillText(that.addressName, textToWidth, textToHeight)
ctx.fillText(latAndLong, textToLongWidth, textToLongHeight)
// console.log("wakeCanvas ctx canvasDraw",ctx)
ctx.draw(false, () => {
const timeWakeCanvasJs = that.getNowTime();
console.log("timeWakeCanvasJs ________",timeWakeCanvasJs);
setTimeout(() => {
console.log("wakeCanvas ctx canvasDraw ctx.draw",ctx)
const timeWakeCanvasDcq = that.getNowTime();
console.log("timeWakeCanvasDcq ________",timeWakeCanvasDcq);
that.canvasDraw(callback)
}, 1000);
});
// ctx.draw(false);
// setTimeout(() => {
// const timeWakeCanvasDcq = that.getNowTime();
// console.log("timeWakeCanvasDcq ________",timeWakeCanvasDcq);
// that.canvasDraw(callback)
// }, 1000);
},
canvasDraw(callback) {
const that = this
let iUp = 0;
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (res1) => {
console.log("canvasDraw canvasToTempFilePath success", res1);
// console.log(res1.tempFilePath,
// '带水印的图片');
callback(res1.tempFilePath)
},
fail: (ress) => {
console.log("canvasDraw canvasToTempFilePath fail", ress);
iUp++;
if(iUp <= 5 ){
that.canvasDraw(callback)
}else{
uni.hideLoading();
that.$toast('图片水印绘制失败，请重新操作')
}
},
complete: (ress) => {
console.log("canvasDraw canvasToTempFilePath complete", ress);
if( ress.errMsg === "canvasToTempFilePath:ok"){
// console.log("canvasDraw canvasToTempFilePath complete ress.errMsg === canvasToTempFilePath:ok ----- " , ress.errMsg);
// callback(ress.tempFilePath)
}else{
if(iUp > 5 ){
that.canvasDraw(callback)
}
// uni.hideLoading();
// this.$toast('图片水印绘制失败，请重新操作')
}
},
}, this);
},
// 拍照上传 去掉横岗后面
handUploads(type, name) {
// if (!this.addressName) {
// return this.$toast('请先授权定位')
// }
if (!this.long) {
return this.$toast('请先授权定位')
}
const that = this
const timeKs = that.getNowTime();
console.log("timeKs ________",timeKs);
uni.chooseImage({
count: 1, //默认9
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 'original'默认的,compressed压缩的
sourceType: ['camera'], //拍照camera,相册album
success: function(res) {
if (res.tempFiles[0].size > 1020000) {
return that.$toast('图片太大')
}
// that.$loading('上传中')
uni.showLoading({
title: "正在上传...",
mask: true,
});
console.log(res, '选择图片的rees111');
that.wake(res, (callback) => {
const timeJs = that.getNowTime();
console.log("timeJs ________",timeJs);
console.log(callback, 'callback');
let img = callback;
that.houseNumber = img; // that.houseNumber = res.tempFiles[0].path
// console.log(res, '选择图片的rees111 that.wake');
let _photoName = name + "_" + name + "_" + that.$functionPub
.getSubLastYxWx(img) + that.$functionPub.getSubLastYx(img);
if (type === 'number') {
that.houseNumberList.push({
src: img,
name,
type: that.$functionPub.getSubLastYx(img),
typeName: that.$functionPub.getSubLastYxWx(img),
photoName: _photoName
})
} else if (type === 'unit') {
that.unitDoorList.push({
src: img,
name,
type: that.$functionPub.getSubLastYx(img),
typeName: that.$functionPub.getSubLastYxWx(img),
photoName: _photoName
})
} else if (type === 'hourse') {
that.hourseDoorList.push({
src: img,
name,
type: that.$functionPub.getSubLastYx(img),
typeName: that.$functionPub.getSubLastYxWx(img),
photoName: _photoName
})
}
})
// let img = res.tempFilePaths[0];
// that.houseNumber = img // that.houseNumber = res.tempFiles[0].path
// let _photoName = name + "_" + name + "_" + that.$functionPub.getSubLastYxWx(
// img) + that.$functionPub.getSubLastYx(img)
// if (type === 'number') {
// that.houseNumberList.push({
// src: img,
// name,
// type: that.$functionPub.getSubLastYx(img),
// typeName: that.$functionPub.getSubLastYxWx(img),
// photoName: _photoName
// })
// } else if (type === 'unit') {
// that.unitDoorList.push({
// src: img,
// name,
// type: that.$functionPub.getSubLastYx(img),
// typeName: that.$functionPub.getSubLastYxWx(img),
// photoName: _photoName
// })
// } else if (type === 'hourse') {
// that.hourseDoorList.push({
// src: img,
// name,
// type: that.$functionPub.getSubLastYx(img),
// typeName: that.$functionPub.getSubLastYxWx(img),
// photoName: _photoName
// })
// }
// that.$api.uploadeFilesFormal(img, '/uploadFile/ftpUploadFile', 'file', {
// photoName: _photoName,
// imageNum: uni.getStorageSync('customer_listdata').imageNum,
// }) // src, urltype, name, params
}
});
},
getNowTime() {
const yy = new Date().getFullYear()
const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
},
// 测试代码 bd
async imagesHeight() {
let src = this.coursedetail.imageUrl;
src = (await uni.getImageInfo({
src
}))[1].height;
this.imgheight = src;
},
next() {
if (!uni.getStorageSync('customer_listdata').imageNum) {
return this.$toast('该进件影像批次号不存在,请重新选择进件')
}
const {
houseNumberList,
unitDoorList,
hourseDoorList,
videoTemp
} = this
if (houseNumberList.length === 0) {
return this.$toast('请拍摄小区门牌照片')
} else if (unitDoorList.length === 0) {
return this.$toast('请拍摄单元门照片')
} else if (hourseDoorList.length === 0) {
return this.$toast('请拍摄房产门照片')
} else if (videoTemp == '') {
return this.$toast('请拍摄房产环境视频')
}
let photo = [...houseNumberList, ...unitDoorList, ...hourseDoorList]
let savePhoto = []
photo.forEach(v => {
savePhoto.push(v.photoName)
})
savePhoto.push(this.videoName)
this.$store.commit('saveVisit1', savePhoto)
console.log(this.$store.state.visitS1, 'visite1的图片');
// const ste1 = this.$store.state.visitS1
// console.log(ste1,'ggjkljklj');
uni.navigateTo({
// url: '../visit_message/visit_message',
url: '/pages/visit_message/visit_message'
})
},
}
} </script>
<style lang="less">
.preview-fulls {
position: fixed;
top: 0;
// top: calc(100% - '142rpx');
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.preview-fulls video {
width: 100%;
height: 100%;
z-index: 1002;
}
.preview-full-closes {
position: fixed;
right: 30rpx;
// top: 15rpx;
top: 160rpx;
width: 80rpx;
height: 80rpx;
line-height: 60rpx;
text-align: center;
z-index: 1003;
/* background-color: #808080; */
color: #fff;
font-size: 65rpx;
font-weight: bold;
}
.preview-full {
position: relative;
video {
// width: 100%;
// height: 100%;
// z-index: 1002;
width: 200rpx;
height: 150rpx;
margin: 20rpx;
background: #aaa;
border-radius: 10rpx;
}
.preview-full-close {
position: absolute;
right: 20rpx;
top: 20rpx;
width: 30rpx;
height: 22rpx;
}
}
.kuang {
overflow: hidden;
position: relative;
}
.ding {
width: 100%;
height: 80rpx;
overflow: hidden;
image {
width: 30rpx;
height: 40rpx;
float: left;
margin: 20rpx;
}
text:nth-child(2) {
float: left;
margin-top: 20rpx;
}
text:nth-child(3) {
float: right;
margin-top: 20rpx;
margin-right: 20rpx;
}
}
.hourse-photo {
display: flex;
flex-wrap: wrap;
}
.upload-img {
border-radius: 10rpx;
width: 200rpx;
height: 150rpx !important;
margin: 20rpx;
}
.xiang {
position: relative;
.upload-del {
position: absolute;
right: 20rpx;
top: 20rpx;
width: 30rpx;
height: 22rpx;
}
}
.denglu {
margin-top: 80rpx;
margin-bottom: 80rpx;
.buttonk {
border: 1rpx solid #007aff;
height: 80rpx;
width: 80%;
background: linear-gradient(0deg, #00914c, #17ab65);
font-size: 30rpx;
border-radius: 40rpx;
font-family: PingFang SC;
font-weight: 500;
margin: 0 auto;
color: #ffffff;
}
} </style>
1 个回复
DCloud_UNI_WZF