586 lines
13 KiB
Vue
586 lines
13 KiB
Vue
<template>
|
||
<div class="page-cont">
|
||
<div class="upload-wrap-header">
|
||
<div class="upload-info">
|
||
<img :src="user.WeChat_UserHeadimage" alt="">
|
||
<div>
|
||
<p>{{user.Membership_Name}}</p>
|
||
<p class="fs12">巡查人员</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="upload-h2">请在下方填写你的巡查内容</div>
|
||
<div class="form_box_bg">
|
||
<ul>
|
||
<li>
|
||
<span class="circle circle-first"></span>
|
||
<div class="li_right_top">
|
||
<div>
|
||
<i class="img-address"></i>
|
||
<span class="xuncha address">{{work_address}}</span>
|
||
</div>
|
||
<p class="li_right_bottom">
|
||
<span>巡查时间：</span><span>{{now_time}}</span>
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li :class="{'active':inputfocus}">
|
||
<span class="circle"></span>
|
||
<div class="li_right_top">
|
||
<div class="li_title">
|
||
<i class="img-zds"></i>
|
||
<div class="xuncha" style="display: flex;"><i style="color: red;margin-right: 5px;">*</i>巡查内容</div>
|
||
</div>
|
||
<div class="tag-list" v-for="(tags,i) in tagList" :key="i">
|
||
<div class="tag-name">{{tags.FIELDENUM_NAME}}</div>
|
||
<div class="tags-box">
|
||
|
||
<div class="tag-unit" v-for="(tag,s) in tags.fieldenumList" :key="s" @tap="selectTag(tag)" :class="{'active':tag.ischecked}">{{tag.FIELDENUM_NAME}}</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="list-content">
|
||
|
||
<textarea auto-height v-model="uploadResult" placeholder="请输入巡查内容" auto-focus="true" @focus="inputfocus=true" @blur="inputfocus = false"></textarea>
|
||
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li :class="{'active':imgfocus}">
|
||
<span class="circle"></span>
|
||
<div class="li_right_top">
|
||
<div class="li_title">
|
||
<i class="img-upload"></i>
|
||
<div style="display: flex;" class="xuncha"><i style="color: red;margin-right: 5px;">*</i>请上传现场图片</div>
|
||
</div>
|
||
<div class="upload-file-container">
|
||
<div class="upload-file-list" v-for="(item,index) in imgsList" :key="index">
|
||
<span class="upload-file-remove" @click.stop="deleteImgFunc(item,index)">×</span>
|
||
<image :src="item" @tap="showImg2(index)" mode='aspectFill' />
|
||
</div>
|
||
<div class="upload-file-add" @click="submitImg">
|
||
<div class="upload-file-add-container">
|
||
<span class="walk-manage-plus">+</span>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li :class="{'active':radiofocus}">
|
||
<span class="circle circle-last"></span>
|
||
<div class="li_right_top">
|
||
<radio-group @change="radioChange" style="display: flex;" @click="radioFocus" @blur="radiofocus=false">
|
||
<label class="uni-list-cell " v-for="(item, index) in options" :key="item.value">
|
||
<view>
|
||
<radio :value="item.value" color='#409eff' :checked="index === current" style="transform:scale(0.8);"/>
|
||
</view>
|
||
<view>{{item.name}}</view>
|
||
</label>
|
||
</radio-group>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<button class="btn" @click="submitUpload">提交</button>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from 'vuex'
|
||
export default {
|
||
data() {
|
||
let nowTime = this.$util.cutDate(new Date(), 'hh:mm:ss')
|
||
return {
|
||
inputfocus: true,
|
||
imgfocus: false,
|
||
loadingType: 1,
|
||
radiofocus: true,
|
||
work_address: '',
|
||
uploadResult: '',
|
||
now_time: nowTime,
|
||
imgData: [],
|
||
imgsList: [],
|
||
value: '0',
|
||
current: 0,
|
||
mbwaId: '', // 3748,2781,西区接待室
|
||
options: [{
|
||
name: '情况正常',
|
||
value: '0'
|
||
},
|
||
{
|
||
name: '急需处理',
|
||
value: '1'
|
||
}
|
||
],
|
||
tagList: [] ,// 巡查可选标签
|
||
selectTags:[] // 选中的标签集合
|
||
}
|
||
},
|
||
computed:{
|
||
...mapGetters({
|
||
'user':'getUser'
|
||
})
|
||
},
|
||
methods: {
|
||
radioFocus () {
|
||
this.radiofocus=true
|
||
this.imgfocus=false
|
||
},
|
||
showImg2(index) {
|
||
plus.nativeUI.previewImage(this.imgsList, {
|
||
current: index,
|
||
loop: true,
|
||
indicator: 'number'
|
||
});
|
||
},
|
||
|
||
submitUpload(){
|
||
let _this = this
|
||
this.radiofocus = false
|
||
this.imgfocus = false
|
||
if(this.uploadResult == ''){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请输入巡查内容！'
|
||
})
|
||
return false
|
||
}
|
||
if(_this.imgData.length === 0){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请上传现场图片。'
|
||
})
|
||
return false
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中，请稍后'
|
||
})
|
||
let address = _this.mbwaId.split(',')
|
||
let province = address[address.length-1]
|
||
_this.$request.$post( 'AddMbwa',{
|
||
|
||
MBWA_ADDRESS: _this.mbwaId,
|
||
MBWA_CONTENT: _this.uploadResult,
|
||
ImageArr: _this.imgData.toString(),
|
||
PROCESSMODE: _this.value,
|
||
_enumLabel: _this.selectTags.toString()
|
||
}).then(res =>{
|
||
uni.hideLoading()
|
||
if(res.ResultCode==100){
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '提交成功',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 500)
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.ResulteDesc
|
||
})
|
||
}
|
||
})
|
||
},
|
||
submitImg(e) {
|
||
this.imgfocus = true
|
||
let _this = this
|
||
uni.chooseImage({
|
||
count: 1, //默认9
|
||
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['camera'], //从相册选择
|
||
success: function(res) {
|
||
|
||
let imageSrc = res.tempFilePaths[0]
|
||
uni.showLoading()
|
||
uni.uploadFile({
|
||
url: 'https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA',
|
||
filePath: imageSrc,
|
||
fileType: 'image',
|
||
name: 'data',
|
||
success: (res) => {
|
||
let _data = JSON.parse(res.data)
|
||
|
||
uni.hideLoading()
|
||
_this.imgsList.push(imageSrc)
|
||
_this.imgData.push(_data.Data.IMAGE_PATH)
|
||
|
||
},
|
||
fail: (err) => {
|
||
// console.log('uploadImage fail', err);
|
||
uni.showModal({
|
||
content: err.errMsg,
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
deleteImgFunc(item, index) {
|
||
let _this = this
|
||
_this.$request.$post('DelFile',{
|
||
|
||
fileUrl: _this.imgData[index]
|
||
}).then(res => {
|
||
_this.imgData.splice(index, 1)
|
||
_this.imgsList.splice(index, 1)
|
||
uni.showToast({
|
||
title: res.data,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
})
|
||
},
|
||
radioChange(evt) {
|
||
this.value = evt.target.value
|
||
for (let i = 0; i < this.options.length; i++) {
|
||
if (this.options[i].value === evt.target.value) {
|
||
this.current = i;
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
getTag() {
|
||
let _this = this
|
||
_this.$request.$get( 'GetEnumLable',{
|
||
|
||
fieldexplainField: 'BUSINESS_TARGET',
|
||
fieldenumIndex:3000
|
||
}).then(res=>{
|
||
|
||
_this.tagList = res.Data.List
|
||
})
|
||
},
|
||
selectTag(tag) {
|
||
let index = this.selectTags.indexOf(tag.FIELDENUM_VALUE)
|
||
if (index !== -1) {
|
||
this.selectTags.splice(index, 1)
|
||
} else {
|
||
this.selectTags.push(tag.FIELDENUM_VALUE)
|
||
}
|
||
|
||
tag.ischecked = tag.ischecked!=undefined ?!tag.ischecked : true
|
||
this.$forceUpdate()
|
||
},
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
onLoad(option) {
|
||
// 1,-39,测试,500000
|
||
this.mbwaId = option.mbwaID
|
||
let key = option.mbwaID.trim().split(',')
|
||
|
||
if(key.length){
|
||
this.work_address= key[2]
|
||
|
||
this.getTag()
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-cont {
|
||
min-height: 100%;
|
||
background-color: #fff;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
.fs12 {
|
||
font-size: 24rpx;
|
||
}
|
||
.upload-wrap-header {
|
||
height: 120rpx;
|
||
width: 100%;
|
||
background-color: rgb(246, 246, 246);
|
||
box-shadow: rgb(214, 207, 207) 4rpx 0px 20rpx;
|
||
background: url('../../static/images/mbwa/bj_logo.png') no-repeat bottom right;
|
||
background-size: 34%;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.upload-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.upload-info img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
margin-top: 10rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.upload-h2 {
|
||
color: #727272;
|
||
font-size: 26rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.form_box_bg:before {
|
||
position: absolute;
|
||
left: 9rpx;
|
||
top: 24rpx;
|
||
content: ' ';
|
||
display: block;
|
||
height: 83%;
|
||
background-color: #eee;
|
||
width: 1rpx;
|
||
|
||
}
|
||
.form_box_bg {
|
||
position: relative;
|
||
margin-left: 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.form_box_bg li {
|
||
width: 100%;
|
||
position: relative;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.circle {
|
||
background-color: #b2b2b2;
|
||
height: 16rpx;
|
||
width: 16rpx;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 16rpx;
|
||
left: 1rpx;
|
||
}
|
||
.circle-first{
|
||
top: 14rpx;
|
||
}
|
||
.circle-last{
|
||
top: 46rpx;
|
||
}
|
||
|
||
.img-address {
|
||
display: inline-block;
|
||
width: 26rpx;
|
||
height: 28rpx;
|
||
background: url("../../static/images/mbwa/now_place_gray.png") no-repeat center;
|
||
background-size: contain;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.img-zds {
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("../../static/images/mbwa/content_img_gray.png") no-repeat center;
|
||
background-size: contain;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.img-upload {
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("../../static/images/mbwa/pic_img_gray.png") no-repeat center;
|
||
background-size: contain;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.li_right_top {
|
||
margin-left: 40rpx;
|
||
}
|
||
.li_title {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.li_right_bottom , .list-content{
|
||
color: #939393;
|
||
font-size: 24rpx;
|
||
|
||
padding-bottom: 40rpx;
|
||
}
|
||
.list-content textarea {
|
||
min-height: 50rpx;
|
||
line-height: 1.5;
|
||
}
|
||
.tag-list {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
color: #606266;
|
||
width: 100%;
|
||
}
|
||
.tag-list + .tag-list {
|
||
margin-top: 8rpx;
|
||
}
|
||
.tag-list .tag-name {
|
||
margin-right: 16rpx;
|
||
font-size: 22rpx;
|
||
line-height: 2.9;
|
||
}
|
||
.tag-list .tags-box {
|
||
width: 546rpx;
|
||
overflow: auto;
|
||
white-space: nowrap;
|
||
padding: 0 24rpx 0 12rpx;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.tag-list .tags-box .tag-unit {
|
||
padding: 4rpx 16rpx;
|
||
background-color: #F4F4F4;
|
||
color: #606266;
|
||
border-radius: 24rpx;
|
||
margin: 8rpx;
|
||
font-size: 22rpx;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.tag-list .tags-box .tag-unit.active {
|
||
color: #ED7043;
|
||
background-color: #FDF1EC;
|
||
}
|
||
.list-content textarea {
|
||
border-bottom: 1rpx solid #eee;
|
||
margin-top: 20rpx;
|
||
color: #727272;
|
||
font-size: 24rpx;
|
||
line-height: 1.8;
|
||
}
|
||
.upload-file-container {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
/* padding-left: 54rpx; */
|
||
min-height: 160rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.upload-file-add {
|
||
width: 26%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.upload-file-add-container {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1rpx dashed #c6c6c6;
|
||
height: 160rpx;
|
||
width: 160rpx;
|
||
margin-top: 15rpx;
|
||
border-radius: 6rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.walk-manage-plus {
|
||
line-height: 60rpx;
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background-color: #409eff;
|
||
color: #ffffff;
|
||
font-size: 48rpx;
|
||
box-shadow: 0 2rpx 6rpx 0 #eee;
|
||
}
|
||
|
||
.upload-file-add-img {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #919191;
|
||
}
|
||
|
||
.upload-file-list {
|
||
position: relative;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f1f1f1;
|
||
box-sizing: border-box;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 6rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
.upload-file-list:nth-child(3n-1) {
|
||
margin-left: 16rpx;
|
||
margin-right: 16rpx;
|
||
|
||
}
|
||
.upload-file-list image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
.upload-file-remove {
|
||
position: absolute;
|
||
top: -14rpx;
|
||
right: -12rpx;
|
||
display: inline-block;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
line-height: 26rpx;
|
||
background-color: #f56c6c;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
z-index: 1;
|
||
}
|
||
|
||
uni-radio-group {
|
||
display: flex;
|
||
}
|
||
.uni-list-cell {
|
||
justify-content: unset;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.uni-list-cell:after{
|
||
background-color: #F9F9F9;
|
||
}
|
||
|
||
.btn{
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-top: 50rpx;
|
||
background-color:#409eff;
|
||
border-radius: 10rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
line-height: 2.8;
|
||
margin-top: 96rpx;
|
||
}
|
||
.active .circle {
|
||
background-color: #409eff;
|
||
}
|
||
.active .img-zds {
|
||
background-image: url("../../static/images/mbwa/zdsgl_sm_nr.png");
|
||
}
|
||
.active .img-upload {
|
||
background-image: url("../../static/images/mbwa/zdsgl_sm_pic.png");
|
||
}
|
||
.xuncha {
|
||
|
||
font-size: 26rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
.address {
|
||
color: #1B1C20;
|
||
}
|
||
.active .xuncha {
|
||
color: #409eff;
|
||
}
|
||
</style>
|