<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" @click="goBack" />
|
<view class="barText">响应措施反馈</view>
|
</view>
|
</view>
|
<view class="measureCard">
|
<view class="head">
|
<u-form :model="form" ref="uForm" label-width="100px">
|
<u-form-item label="信息标题 :" >{{form.title}}</u-form-item>
|
<u-form-item label="发布单位 :">{{form.publishingUnit}}</u-form-item>
|
<u-form-item label="发布时间 :">{{form.publishingTime}}</u-form-item>
|
<u-form-item label="反馈时间 :">{{form.measureSubmitTime}}</u-form-item>
|
</u-form>
|
</view>
|
<view class="first" v-if="measureList">
|
<text style="font-size: 16px;margin-bottom: 20px;font-weight: 600;">基础措施</text>
|
<view v-for="(item, index) in measureList" :key="index" style="margin-left: 18px;margin-bottom:10px; font-size:16px;">
|
<text style="margin-top: 15px;">{{item}}</text>
|
</view>
|
</view>
|
<view class="second" v-if="measures!=null">
|
<text style="font-size: 16px;margin-bottom: 20px;font-weight: 600;">补充措施</text>
|
<u--textarea style="margin-top: -5px;" v-model="measures" disabled placeholder="请输入内容" ></u--textarea>
|
</view>
|
<view class="third">
|
<view v-for="(item, index) in images" :key="index">
|
<u-image @click="previewSqs(item,index)" style="margin: 5px; 5px" width="230rpx" height="230rpx" :src="item.url"></u-image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
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,
|
form: {
|
},
|
measureList: [],
|
images: []
|
}
|
},
|
onLoad(options) {
|
let test = options.data && JSON.parse(decodeURIComponent(options.data));
|
console.log("tes111t",test)
|
this.form = test;
|
this.measures = this.form.responseMeasure;
|
this.measureList = this.form.baseMeasures;
|
if(this.form.attachments && this.form.attachments.length>0){
|
this.images = this.form.attachments.map((item) => {
|
return {url: VUE_APP_BASE_URL + item.attachment};
|
});
|
}else {
|
this.images = [];
|
}
|
console.log("img",this.images)
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
uni.hideTabBar();
|
},
|
methods: {
|
goBack() {
|
uni.navigateBack({
|
url:'/pages/tabBar/responsivity/villageResponsivity'
|
});
|
},
|
//预览图片
|
previewSqs(item,index) {
|
let imgs = [];
|
for (let i = 0; i < this.images.length; i++) {
|
imgs.push(this.images[i].url)
|
}
|
console.log("预览",imgs)
|
uni.previewImage({
|
urls: imgs,
|
current: index,
|
indicator: 'number',
|
loop: true
|
})
|
},
|
}
|
}
|
|
</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: 50px;
|
}
|
.third{
|
display: flex;
|
flex-wrap: wrap;
|
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);
|
margin-top: 5px;
|
font-size: 14px;
|
}
|
|
.measures{
|
margin-top: 50px 12px 0;
|
padding: 0 12px;
|
|
.measureBtn{
|
border-radius: 5px;
|
box-shadow: 0 3px 12px rgba(33,239,102,0.4);
|
}
|
}
|
.head{
|
margin-top: -20px;
|
margin-bottom: 20px;
|
line-height: 15px;
|
}
|
</style>
|
