347 lines
7.7 KiB
Vue
347 lines
7.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="step_num">
|
||
<view class="step step1">签到</view>
|
||
<view class="step step2">巡检设备</view>
|
||
<view class="step step3">巡检总结</view>
|
||
</view>
|
||
<view class="photo_container">
|
||
<view class="pzqd">拍照签到</view>
|
||
<view class="photo_out">
|
||
<view class="imgwrap" v-for="(items,index) in imgsrc_list_local" :key="index">
|
||
<view class="myimgBox" @click="reUpload(index)">
|
||
<view class="img">
|
||
<img class="uploadimg" :src="items" />
|
||
<view class="cxsc">重新上传</view>
|
||
</view>
|
||
</view>
|
||
<img src="../../static/img/delete.png" class="deleteimg" @click="deleteImg(index)" />
|
||
</view>
|
||
<view class="imgwrap" @click="chooseImg()" >
|
||
<view class="myimgBox">
|
||
<view class="img upload_btn">
|
||
<img src="../../static/img/uploadimg.png" />
|
||
<view class="sctp">上传图片</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goHome" @click='goMain()'>
|
||
<img src="../../static/img/gohome.png">
|
||
</view>
|
||
<view class="next" @click="toNext()">下一步</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex'
|
||
import {
|
||
config
|
||
} from '../../request/js/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgsrc_list: [],
|
||
imgsrc_list_local: []
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id;
|
||
if (this.id == undefined) {
|
||
uni.reLaunch({
|
||
url: 'eqPatrol'
|
||
});
|
||
return false;
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations(['setpatrolSignInImage']),
|
||
toNext() {
|
||
this.setpatrolSignInImage(this.imgsrc_list);
|
||
uni.navigateTo({
|
||
url: "patrolStep2?id=" + this.id
|
||
});
|
||
},
|
||
//上传
|
||
chooseImg() {
|
||
this.uploadImg();
|
||
},
|
||
//重新上传
|
||
reUpload(index) {
|
||
this.uploadImg(index);
|
||
},
|
||
uploadImg(indexnum) {
|
||
var _this = this;
|
||
//#ifdef APP-PLUS
|
||
var count_ = 9;
|
||
//#endif
|
||
//#ifndef APP-PLUS
|
||
var count_ = 1;
|
||
//#endif
|
||
if (indexnum != undefined) {
|
||
count_ = 1;
|
||
}
|
||
uni.chooseImage({
|
||
count: count_,
|
||
success: (chooseImageRes) => {
|
||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||
//#ifdef APP-PLUS
|
||
let imgs = chooseImageRes.tempFilePaths.map((value, index) => {
|
||
return {
|
||
name: "file" + (index + 1), //注意这一行，uni的hello的示例中，这里为key名+index，这样是无法和使用一个固定key名接多个文件的php接口对接上的改为数组下标形式的字符串就解决这个问题了。其效果等同于在html页面上多个同name文件域同时提交表单。
|
||
uri: value
|
||
}
|
||
});
|
||
uni.uploadFile({
|
||
url: config.baseURL + '/apis/file/uploadMulti', //接口地址
|
||
files: imgs,
|
||
fileType: "image",
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
var arr = [];
|
||
for (var i = 0; i < JSON.parse(uploadFileRes.data).result.length; i++) {
|
||
arr.push(JSON.parse(uploadFileRes.data).result[i].filePath);
|
||
}
|
||
if (indexnum != undefined) { //是重新上传
|
||
_this.imgsrc_list[indexnum] = arr[0]
|
||
_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0]
|
||
} else {
|
||
_this.imgsrc_list = _this.imgsrc_list.concat(arr);
|
||
_this.imgsrc_list_local = _this.imgsrc_list_local.concat(chooseImageRes.tempFilePaths);
|
||
|
||
}
|
||
_this.$forceUpdate();
|
||
},
|
||
fail:function(){
|
||
uni.showToast({
|
||
title: '上传图片失败',
|
||
duration: 2000,
|
||
icon:"none"
|
||
});
|
||
}
|
||
});
|
||
//#endif
|
||
//#ifndef APP-PLUS
|
||
uni.uploadFile({
|
||
url: config.baseURL + '/apis/file/upload', //接口地址
|
||
filePath: tempFilePaths[0],
|
||
fileType: "image",
|
||
name: 'file',
|
||
success: (uploadFileRes) => {
|
||
var arr = [];
|
||
if (indexnum != undefined) { //是重新上传
|
||
_this.imgsrc_list[indexnum] =JSON.parse(uploadFileRes.data).filePath;
|
||
_this.imgsrc_list_local[indexnum] = chooseImageRes.tempFilePaths[0];
|
||
} else {
|
||
_this.imgsrc_list.push(JSON.parse(uploadFileRes.data).filePath)
|
||
_this.imgsrc_list_local.push(chooseImageRes.tempFilePaths)
|
||
}
|
||
_this.$forceUpdate();
|
||
},
|
||
fail:function(){
|
||
uni.showToast({
|
||
title: '上传图片失败',
|
||
duration: 2000,
|
||
icon:"none"
|
||
});
|
||
}
|
||
});
|
||
//#endif
|
||
}
|
||
});
|
||
},
|
||
//删除图片
|
||
deleteImg(index) {
|
||
this.imgsrc_list.splice(index, 1);
|
||
this.imgsrc_list_local.splice(index, 1);
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
onBackPress(options) { //取消默认的返回事件.用来返回上一页时重新加载页面，删除本地缓存的巡检操作
|
||
if (options.from === 'backButton' || options.from === 'backbutton' || options.from === 'navigateBack') {
|
||
uni.redirectTo({
|
||
url: "patrolDetail?id=" + this.id
|
||
});
|
||
return true;
|
||
|
||
}
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #f5f7f5;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
.content {
|
||
position: relative;
|
||
min-height: 100%;
|
||
overflow: auto;
|
||
padding-bottom: 140upx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.step_num {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 80upx;
|
||
background-color: #fff;
|
||
padding-right: 48upx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.step {
|
||
position: relative;
|
||
font-size: 28upx;
|
||
line-height: 80upx;
|
||
padding-left: 30upx;
|
||
float: left;
|
||
}
|
||
|
||
.step:before {
|
||
position: absolute;
|
||
left: 0px;
|
||
content: '1';
|
||
border: 1px solid #000;
|
||
width: 28upx;
|
||
height: 28upx;
|
||
box-sizing: border-box;
|
||
line-height: 28upx;
|
||
border-radius: 200upx;
|
||
font-size: 20upx;
|
||
text-align: center;
|
||
top: 26upx;
|
||
}
|
||
|
||
.step:after {
|
||
position: absolute;
|
||
content: '';
|
||
width: 60upx;
|
||
height: 2upx;
|
||
background-color: #000;
|
||
top: 40upx;
|
||
left: 88upx;
|
||
}
|
||
|
||
.step2 {
|
||
margin-left: 64upx;
|
||
color: #828282;
|
||
}
|
||
|
||
.step2:before {
|
||
content: '2';
|
||
border: 2upx solid #828282;
|
||
}
|
||
|
||
.step2:after,
|
||
.step3:after {
|
||
left: 144upx;
|
||
background-color: #828282;
|
||
}
|
||
|
||
.step3 {
|
||
margin-left: 64upx;
|
||
color: #828282;
|
||
}
|
||
|
||
.step3:before {
|
||
content: '3';
|
||
border: 2upx solid #828282;
|
||
}
|
||
.step3:after {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.photo_container {
|
||
position: relative;
|
||
margin-top: 20upx;
|
||
background-color: #fff;
|
||
overflow: auto;
|
||
}
|
||
|
||
.pzqd {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
padding-left: 30upx;
|
||
padding-top: 20upx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.photo_out {
|
||
position: relative;
|
||
}
|
||
|
||
.upload_btn {
|
||
border: 2upx solid #dadada;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.upload_btn img {
|
||
display: block;
|
||
width: 32%;
|
||
height: 30%;
|
||
margin: 0 auto 10upx auto;
|
||
}
|
||
|
||
.sctp {
|
||
text-align: center;
|
||
font-size: 30upx;
|
||
color: #ababab;
|
||
}
|
||
|
||
.uploadimg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.cxsc {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 60upx;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
bottom: 0;
|
||
left: 0;
|
||
text-align: center;
|
||
line-height: 60upx;
|
||
font-size: 28upx;
|
||
color: #fff;
|
||
}
|
||
|
||
.deleteimg {
|
||
position: absolute;
|
||
width: 36upx;
|
||
height: 36upx;
|
||
right: -18upx;
|
||
top: -18upx;
|
||
background-color: #fff;
|
||
border-radius: 36upx;
|
||
}
|
||
|
||
.next {
|
||
position: absolute;
|
||
left: 5%;
|
||
bottom: 15px;
|
||
width: 90%;
|
||
height: 82upx;
|
||
border-radius: 5px;
|
||
border: 1px solid #3382FF;
|
||
text-align: center;
|
||
color: #3382FF;
|
||
line-height: 82upx;
|
||
background-color: #fff;
|
||
|
||
}
|
||
</style>
|