|
|
|
@@ -0,0 +1,374 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
|
|
|
|
<img src="../../assets/images/sunVillage_info/complaint_add_icon_01.jpg" width="100%" alt=""> |
|
|
|
|
|
|
|
<van-form @submit="onSubmit"> |
|
|
|
|
|
|
|
<div class="list_main"> |
|
|
|
|
|
|
|
|
|
|
|
<van-field readonly required label="上报内容" :border="false" /> |
|
|
|
<div class="input_field"> |
|
|
|
<van-field |
|
|
|
v-model="form.adviceContent" |
|
|
|
:rules="[{ required: true , message:'具体说明上报内容' }]" |
|
|
|
rows="4" |
|
|
|
autosize |
|
|
|
type="textarea" |
|
|
|
maxlength="1000" |
|
|
|
placeholder="具体说明上报内容" |
|
|
|
show-word-limit |
|
|
|
:border="false" |
|
|
|
style="padding: 5PX 0;" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<van-field readonly required label="图片线索" :border="false" /> |
|
|
|
<van-uploader |
|
|
|
v-model="fileList" |
|
|
|
style="margin-top: 10PX;" |
|
|
|
:upload-icon="uploadIcon1" |
|
|
|
:after-read="afterRead" |
|
|
|
@delete="deleteFile1" |
|
|
|
/> |
|
|
|
|
|
|
|
<van-field readonly label="视频线索" :border="false" /> |
|
|
|
<van-uploader |
|
|
|
v-model="videoList" |
|
|
|
style="margin-top: 10PX;" |
|
|
|
:upload-icon="uploadIcon2" |
|
|
|
accept="video/*" |
|
|
|
:after-read="afterReadVideo" |
|
|
|
@delete="deleteFileVideo" |
|
|
|
@click-preview="handleclicksc" |
|
|
|
/> |
|
|
|
<van-popup v-model="showvideoplay" style="background: transparent;width: 70%;"> |
|
|
|
<video |
|
|
|
controls |
|
|
|
preload="auto" |
|
|
|
style="width:100%;object-fit: contain;" |
|
|
|
:src="videourl" |
|
|
|
v-if="videourl" |
|
|
|
></video> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<van-field readonly required label="所在区域" :border="false" /> |
|
|
|
<div class="input_field"> |
|
|
|
<van-field |
|
|
|
readonly |
|
|
|
clickable |
|
|
|
placeholder="请选择所在区域" |
|
|
|
v-model="form.deptName" |
|
|
|
label-width="auto" |
|
|
|
:border="false" |
|
|
|
:rules="[{ required: true , message:'请选择所在区域' }]" |
|
|
|
right-icon="arrow-down" |
|
|
|
@click="showDept = true" |
|
|
|
/> |
|
|
|
<van-popup v-model="showDept" position="bottom"> |
|
|
|
<van-cascader |
|
|
|
v-model="villageValue" |
|
|
|
title="请选择" |
|
|
|
:options="deptOptions" |
|
|
|
@close="showDept = false" |
|
|
|
@change="onConfirmDept" |
|
|
|
active-color="#1989fa" |
|
|
|
:field-names="hcAreaInfoFieldName" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-field readonly required label="线索地址（具体）" :border="false" /> |
|
|
|
<div class="input_field"> |
|
|
|
<van-field placeholder="请输入地址" v-model="form.adviceAddress" :border="false" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-field readonly label="上报人（非必填）" :border="false" /> |
|
|
|
<div class="input_field"> |
|
|
|
<van-field placeholder="请输入姓名" v-model="form.adviceName" :border="false" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-field readonly label="联系电话（非必填，我们将对号码保密）" :border="false" /> |
|
|
|
<div class="input_field"> |
|
|
|
<van-field placeholder="请输入电话" v-model="form.advicePhone" :border="false" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<van-button size="small" round block type="primary" native-type="submit"> |
|
|
|
保存 |
|
|
|
</van-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</van-form> |
|
|
|
<div style="height: 50px;"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {publicUpload, addAdvice, treeselect} from "@/api/sunVillage_info/fixedAssets"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
import uploadIcon1 from '@/assets/images/sunVillage_info/complaint_add_icon_03.png' |
|
|
|
import uploadIcon2 from '@/assets/images/sunVillage_info/complaint_add_icon_04.png' |
|
|
|
import request from '@/utils/request' |
|
|
|
export default { |
|
|
|
name: "certificateList", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showvideoplay:false, |
|
|
|
videourl:'', |
|
|
|
form:{}, |
|
|
|
//选中的值 |
|
|
|
villageValue: "", |
|
|
|
hcAreaInfoFieldName: { |
|
|
|
text: "label", |
|
|
|
value: "value", |
|
|
|
children: "children", |
|
|
|
}, |
|
|
|
uploadIcon1:uploadIcon1, |
|
|
|
uploadIcon2:uploadIcon2, |
|
|
|
openPic:[], |
|
|
|
queryParams:{ |
|
|
|
bookId:'', |
|
|
|
deptId:'', |
|
|
|
}, |
|
|
|
openPic2:[], |
|
|
|
deptOptions:[], |
|
|
|
fileList:[], |
|
|
|
videoList:[], |
|
|
|
videoUrl:[], |
|
|
|
adviceTypeOptions:[], |
|
|
|
showDept:false, |
|
|
|
showAdviceType:false, |
|
|
|
adviceType:'' |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.queryParams.bookId = Cookies.get('bookId'); |
|
|
|
this.queryParams.deptId = Cookies.get('deptId'); |
|
|
|
|
|
|
|
this.houseGetDicts("communicate_type").then((response) => { |
|
|
|
this.adviceTypeOptions = response.data; |
|
|
|
// this.form.otherTypeText = this.selectDictLabel(response.data, this.$route.query.type); |
|
|
|
// this.form.otherName = Cookies.get('deptName')+this.selectDictLabel(response.data, this.$route.query.type); |
|
|
|
}); |
|
|
|
|
|
|
|
treeselect().then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.deptOptions = res.data; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleclicksc(file) { |
|
|
|
console.log(file) |
|
|
|
this.videourl = file.content |
|
|
|
this.showvideoplay = true; |
|
|
|
}, |
|
|
|
onConfirmDept({ selectedOptions }){ |
|
|
|
this.form.deptId = selectedOptions[selectedOptions.length-1].id; |
|
|
|
this.form.deptName = selectedOptions.map((option) => option.label).join('/'); |
|
|
|
}, |
|
|
|
onConfirmAdviceType(e){ |
|
|
|
this.form.adviceType = e.dictValue; |
|
|
|
this.adviceType = e.dictLabel; |
|
|
|
this.showAdviceType = false; |
|
|
|
|
|
|
|
console.log(e) |
|
|
|
}, |
|
|
|
onSubmit(){ |
|
|
|
var that = this; |
|
|
|
console.log(that.openPic2) |
|
|
|
if (that.openPic2.length<1){ |
|
|
|
that.$notify({ type: 'warning', message: '图片线索不能为空' }); |
|
|
|
return; |
|
|
|
} |
|
|
|
that.form.fileUrl = that.openPic2.join(',') |
|
|
|
that.form.videoUrl = that.videoUrl.join(',') |
|
|
|
that.form.adviceTime = that.format(new Date(),'yyyy-MM-dd HH:mm:ss') |
|
|
|
this.form.title="投诉建议" |
|
|
|
this.form.adviceType="1" |
|
|
|
addAdvice(that.form).then((r1) => { |
|
|
|
if (r1.code == 200){ |
|
|
|
that.$notify({ type: 'success', message: '提交成功' }); |
|
|
|
if(this.$route.query.type != 'code'){ |
|
|
|
location.reload(); |
|
|
|
}else{ |
|
|
|
setTimeout(function(){ |
|
|
|
history.back(-1); |
|
|
|
},2000) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
afterRead(file) { |
|
|
|
console.log(file instanceof Array) |
|
|
|
if (file instanceof Array){//判断是否为数组，单张图片为array，多张为数组，数组返回true否则为false |
|
|
|
file.map(res=>{ |
|
|
|
this.openPic.push(res.file); |
|
|
|
let params1 = new FormData(); |
|
|
|
params1.append("file", res.file); |
|
|
|
publicUpload(params1).then((r1) => { |
|
|
|
this.openPic2.push(r1.fileName); |
|
|
|
}) |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
this.openPic.push(file); |
|
|
|
let params1 = new FormData(); |
|
|
|
params1.append("file", file.file); |
|
|
|
publicUpload(params1).then((r1) => { |
|
|
|
this.openPic2.push(r1.fileName); |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
deleteFile1(detail){ |
|
|
|
this.openPic2.splice(detail.index,1) |
|
|
|
// this.form.openPic.splice(index,1); |
|
|
|
}, |
|
|
|
deleteFileVideo(detail){ |
|
|
|
this.videoUrl.splice(detail.index,1) |
|
|
|
// this.form.openPic.splice(index,1); |
|
|
|
}, |
|
|
|
afterReadVideo(file){ |
|
|
|
const that = this; |
|
|
|
let formData = new FormData(); // 为上传文件定义一个formData对象 |
|
|
|
formData.append("file", file.file); |
|
|
|
publicUpload(formData).then((r1) => { |
|
|
|
this.videoUrl.push(r1.fileName); |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
/deep/ .van-button--primary{ |
|
|
|
background: #2ec6a9; |
|
|
|
border: none; |
|
|
|
width: 40%; |
|
|
|
margin:5vh auto 2vh; |
|
|
|
} |
|
|
|
.van-radio:last-child{ |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
.input_field{ |
|
|
|
border: 1px solid #d8d8d8; |
|
|
|
padding: 8PX 15PX; |
|
|
|
border-radius: 8PX; |
|
|
|
margin: 10PX 0; |
|
|
|
} |
|
|
|
.home_wrapper{ |
|
|
|
background: #f1f2f2; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
.header_main { |
|
|
|
height: 116px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_head_green.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
font-size: 36px; |
|
|
|
line-height: 116px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.return_btn { |
|
|
|
width: 24px; |
|
|
|
height: 43.2px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; |
|
|
|
background-size: 20px 36px; |
|
|
|
position: absolute; |
|
|
|
left: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
.release_head{ |
|
|
|
height: 90px; |
|
|
|
padding:0 23px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 26px; |
|
|
|
color: #929292; |
|
|
|
.people{ |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.icon{ |
|
|
|
width: 24px; |
|
|
|
height: 21px; |
|
|
|
background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.time{ |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content:flex-end; |
|
|
|
.icon{ |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.release_conetnt{ |
|
|
|
padding:0 22px; |
|
|
|
font-size: 32px; |
|
|
|
color: #252525; |
|
|
|
line-height: 44px; |
|
|
|
img{ |
|
|
|
max-width: 100%; |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
p{ |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
.list_main{ |
|
|
|
padding: 75px 25px 25px; |
|
|
|
background: #ffffff url("../../assets/images/sunVillage_info/complaint_add_icon_02.jpg") no-repeat center top; |
|
|
|
background-size: auto 60px; |
|
|
|
width: 94%; |
|
|
|
margin: 25px auto 0; |
|
|
|
border-radius: 15PX; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
} |
|
|
|
.tit{ |
|
|
|
font-size: 16PX; |
|
|
|
padding: 15PX 10PX; |
|
|
|
} |
|
|
|
/deep/ .van-cell{ |
|
|
|
padding-left: 0!important; |
|
|
|
padding-right: 0!important; |
|
|
|
padding-bottom: 0!important; |
|
|
|
line-height: 1; |
|
|
|
&:nth-child(1){ |
|
|
|
padding-top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
/deep/ .van-field__label{ |
|
|
|
padding-left: 10PX; |
|
|
|
width: auto; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
border-left: 4PX solid #2ec6a9; |
|
|
|
} |
|
|
|
/deep/ .van-cell--required::before{ |
|
|
|
left: 22%; |
|
|
|
} |
|
|
|
/deep/ .van-field__error-message{ |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
