<template>
|
<view>
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox fix">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view class="navBar">
|
<u-icon name="arrow-left" color="black" size="17" style="margin-left: 10px;" @click="goBack" />
|
<view class="barText">响应措施反馈</view>
|
</view>
|
</view>
|
<view class="measureCard">
|
<view class="first">
|
<text style="font-size: 16px;margin-bottom: 20px;"><text style="color: red;">*</text>基础措施</text>
|
<u-checkbox-group
|
v-model="checkboxValue1"
|
placement="column"
|
@change="checkboxChange"
|
>
|
<u-checkbox
|
:customStyle="{marginBottom: '8px'}"
|
v-for="(item, index) in list"
|
:key="index"
|
:label="item.measure"
|
:name="item.id"
|
>
|
</u-checkbox>
|
</u-checkbox-group>
|
</view>
|
<view class="second">
|
<text style="font-size: 16px;margin-bottom: 20px;">响应反馈</text>
|
<u--textarea style="margin-top: -5px;" v-model="measures" placeholder="请输入内容" ></u--textarea>
|
</view>
|
<view class="third">
|
<text style="font-size: 16px;margin-bottom: 20px;">图片上传</text>
|
<u-upload
|
:fileList="fileList1"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
name="1"
|
multiple
|
:maxCount="10"
|
style="margin-top: -10px;"
|
></u-upload>
|
<view :class="{pic: nameList.length>0}">
|
<view class="picItem" v-for="(item,index) in nameList" :key="index">
|
<image src="../../../static/pic.png">
|
{{item.name}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="measures">
|
<u-button class="measureBtn" type="primary" @click="$noMoreClicks(submit)">提交</u-button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { measureList, submitMeasures, getMeasureDetail } from '@/api/notice.js'
|
import VUE_APP_BASE_URL from '../../../common/constant.js'
|
export default {
|
components:{
|
|
},
|
data() {
|
return {
|
statusBarHeight: [],
|
fileList1: [],
|
nameList: [],
|
checkboxValue1: [],
|
measures: "",
|
type: 'textarea',
|
border: true,
|
height: 100,
|
autoHeight: true,
|
detailData : {},
|
measureIds : [],
|
baseUrl: VUE_APP_BASE_URL,
|
list: [],
|
showBtn: false,
|
noClick:true,
|
}
|
},
|
onLoad(options) {
|
let test = options.data && JSON.parse(decodeURIComponent(options.data));
|
console.log("test",test)
|
this.detailData = test;
|
//获取手机状态栏高度
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
uni.hideTabBar();
|
this.getMeasureList();
|
},
|
methods: {
|
getMeasureList() {
|
const param = {
|
pageIndex: 1,
|
pageSize: 10000,
|
}
|
measureList(param).then(res => {
|
if(res.code == 100){
|
this.list = res.data;
|
}
|
}).catch(err=>{})
|
},
|
goBack() {
|
console.log("fdetailData",uni.getStorageSync("fdetailData"))
|
uni.navigateTo({
|
url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(uni.getStorageSync("fdetailData")))
|
})
|
},
|
|
checkboxChange(n) {
|
let finalArr = this.list.filter(item => !(n.indexOf(item.id) < 0));
|
this.measureIds = finalArr.map((item) => {
|
return {id: item.id, baseMeasureContent: item.measure};
|
});
|
console.log('change', this.measureIds);
|
},
|
submit() {
|
if(this.measureIds.length <= 0) {
|
uni.showToast({
|
icon: "none",
|
title: '请勾选基础措施'
|
});
|
return;
|
}
|
const param = {
|
id: this.detailData.id,
|
baseMeasures: this.measureIds,
|
responseMeasure: this.measures
|
}
|
submitMeasures(param).then(res => {
|
if(res.code == 100){
|
uni.showToast({
|
icon: "none",
|
title: '提交成功'
|
});
|
uni.navigateTo({
|
url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(this.detailData))
|
})
|
}else{
|
uni.$u.toast(res.msg)
|
}
|
})
|
},
|
// 删除图片
|
deletePic(event) {
|
this[`fileList${event.name}`].splice(event.index, 1)
|
this.nameList.splice(event.index,1)
|
console.log("name",this.nameList)
|
},
|
// 新增图片
|
async afterRead(event) {
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this[`fileList${event.name}`].length
|
console.log("list",lists)
|
lists.map((item) => {
|
this.nameList.push({name: item.name});
|
this[`fileList${event.name}`].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
console.log("nameList",this.nameList)
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
let item = this[`fileList${event.name}`][fileListLen]
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
status: 'success',
|
message: '',
|
url: result
|
}))
|
fileListLen++
|
}
|
},
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: VUE_APP_BASE_URL + '/attachment/uploadMeasureImage/key',
|
filePath: url,
|
name: 'file',
|
header: {
|
'tk':uni.getStorageSync('tk'),
|
'uid': uni.getStorageSync('uid')
|
},
|
formData: {
|
id: this.detailData.id,
|
module: 'naturalDisasterPath'
|
},
|
success: (res) => {
|
setTimeout(() => {
|
resolve(res.data.data)
|
}, 1000)
|
}
|
});
|
})
|
},
|
}
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
/* justify-content: center; */
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
}
|
.barText{
|
/* margin-left: 20px; */
|
text-align: center;
|
width: 85%;
|
font-size: 16px;
|
/* text-align: center; */
|
font-weight: 600;
|
}
|
|
.measureCard{
|
display: flex;
|
flex-direction: column;
|
background: #fff;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
margin: 12px 12px 20px;
|
border-radius: 5px;
|
padding: 30px 12px;
|
}
|
.fix{
|
position: sticky;
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
z-index: 1;
|
}
|
.statusBar{
|
background-color:lightgrey;
|
}
|
.first{
|
display: flex;
|
flex-direction: column;
|
}
|
.second{
|
display: flex;
|
flex-direction: column;
|
margin-top: 30px;
|
}
|
.third{
|
display: flex;
|
flex-direction: column;
|
margin-top: 30px;
|
margin-bottom: 50px;
|
}
|
/deep/ .u-upload__button{
|
background-color: white;
|
}
|
.pic{
|
display: flex;
|
flex-direction: column;
|
background-color: rgb(242,242,242);
|
padding: 5px 8px;
|
}
|
.picItem{
|
font-weight: 500;
|
margin-top: 5px;
|
font-size: 14px;
|
display: flex;
|
image{
|
width: 20px;
|
height: 20px;
|
margin-right:3px;
|
}
|
}
|
.measures{
|
margin-top: 50px 12px 0;
|
padding: 0 12px;
|
|
.measureBtn{
|
border-radius: 5px;
|
box-shadow: 0 3px 12px rgba(33,239,102,0.4);
|
}
|
}
|
|
/* .btn{
|
position: fixed;
|
bottom: var(--window-bottom, 1);
|
z-index: 99;
|
} */
|
</style>
|
