From b1fc04036f964163c128586810fec8b5e9da7e2c Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 24 七月 2023 09:58:10 +0800 Subject: [PATCH] 样式修改 --- pages/tabBar/notice/detail.vue | 235 ++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 171 insertions(+), 64 deletions(-) diff --git a/pages/tabBar/notice/detail.vue b/pages/tabBar/notice/detail.vue index 922e911..b08bcb3 100644 --- a/pages/tabBar/notice/detail.vue +++ b/pages/tabBar/notice/detail.vue @@ -10,12 +10,10 @@ <u-icon name="arrow-left" color="black" size="17" @click="goBack" /> <view class="barText">信息详情</view> </view> - - <view class="divider"></view> </view> </view> <!-- 页面内容 --> - <view style="padding: 10px 15px;display: flex;flex-direction: column;"> + <view class="detailCard"> <text style="font-size: 18px;"><b>标题:</b>{{detailData.title}}</text> <text class="textTop"><b>类别:</b>{{detailData.disaster}}</text> <view style="display: flex;align-items: center;" class="textTop"> @@ -31,23 +29,49 @@ <text class="textTop"><b>短信内容:</b><i style="background-color: rgb(240, 248, 255);">{{detailData.content}}发布单位:{{detailData.publishingUnit}}</i></text> <view style="display: flex;"> <text class="textTop" style="width: 76px;" ><b>附件内容:</b></text> - <view class="attache"> + <view class="attache" v-if="isAllImg == 'no'"> <view v-for="(item, index) in detailData.attachments" :key="index" > - - <view style="display: flex;margin-top: 10px;" @click="openFile(item)"> + <view style="display: flex;margin-top: 10px;" v-if="item.suffix == 'jpg'|| item.suffix =='jpeg' || item.suffix =='png'"> + <image @click="previewSqs(item)" :src="item.attachment" style="width: 100rpx; height: 100rpx;margin-left: 5rpx;border: 3px solid #ccc;margin-right: 3px;"></image> + </view> + <view style="display: flex;margin-top: 10px;" @click="openFile(item)" v-else> <u-icon name="attach" color="#2979ff" size="20"></u-icon> {{item.attachementName}} </view> - </view> </view> + + <view class="attache_img" v-else> + <view v-for="(item, index) in detailData.attachments" :key="index" > + <view style="display: flex;margin-top: 10px;" v-if="item.suffix == 'jpg'|| item.suffix =='jpeg' || item.suffix =='png'"> + <image @click="previewSqs(item,index)" :src="item.attachment" style="width: 100rpx; height: 100rpx;margin-left: 5rpx;border: 3px solid #ccc;margin-right: 3px;"></image> + </view> + <view style="display: flex;margin-top: 10px;" @click="openFile(item)" v-else> + <u-icon name="attach" color="#2979ff" size="20"></u-icon> {{item.attachementName}} + </view> + </view> + </view> + +<!-- <view style="width: 100%; height: 100px;"> + <web-view src="http://192.168.0.38:8086/uploadtest/2023/naturalDisaster/Warninginfo/0619/79e33942cb9548788f1f3196a2058c37.doc"></web-view> + </view> --> + </view> - <text class="textTop" v-if="detailData.role == 'leader'"><b>信息提交人:</b>{{detailData.infoSubmitter}}</text> + <text class="textTop" v-if="detailData.role == 'leader'"><b>信息提交人:</b>{{detailData.infoSubmitterRealName}}</text> <view class="textTop" v-if="detailData.role == 'leader'"> <text ><b>审核状态:</b></text> <text v-if="detailData.reviewStatus == 1" class="responseStatus" style='color: red;'>待审核</text> <text v-else-if="detailData.reviewStatus == 2" class="responseStatus" - style='color: rgb(17, 204, 33);'>已审核通过</text> + style='color: rgb(17, 204, 33);'>审核通过</text> + <text v-else class="responseStatus" + style='color: rgb(153, 148, 143);'>已驳回</text> + </view> + <view class="textTop" v-else-if="detailData.role == 'infoPeople'"> + <text ><b>审核状态:</b></text> + <text v-if="detailData.reviewStatus == 1" class="responseStatus" + style='color: red;'>待审核</text> + <text v-else-if="detailData.reviewStatus == 2" class="responseStatus" + style='color: rgb(17, 204, 33);'>审核通过</text> <text v-else class="responseStatus" style='color: rgb(153, 148, 143);'>已驳回</text> </view> @@ -70,6 +94,16 @@ @click="reject" >审核驳回</u-button> </view> + <view v-if="detailData.role == 'infoPeople' && detailData.reviewStatus == 2" class="btn"> + <u-button + style="background-color:rgb(6, 202, 23);color: white;width: 180px;" + @click="infoSend" + >确认发布</u-button> + </view> + <!-- //村级显示 --> + </view> + <view class="measures"> + <u-button class="resBtn" type="primary" @click="goMeasures">响应措施反馈</u-button> </view> </view> </template> @@ -77,12 +111,14 @@ <script> import VUE_APP_BASE_URL from '../../../common/constant.js' import { submit } from '../../../api/examine.js' + import { publishInfo } from '../../../api/information.js' export default { data() { return { // 状态栏高度 statusBarHeight: 0, key: 1, + isAllImg: '', detailData: { id: null, warnInfoId: null, @@ -105,8 +141,8 @@ this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; let test = options.data && JSON.parse(decodeURIComponent(options.data)); this.detailData = test; - console.log("wwwwwwww",this.detailData) - if(this.detailData.role == 'leader') { + + if(this.detailData.role == 'leader' || this.detailData.role == 'infoPeople' ) { this.detailData.attachments = this.detailData.attachment; if (this.detailData.attachments){ this.detailData.attachments.forEach((item,index) => { @@ -114,14 +150,35 @@ }) } } + if (this.detailData.attachments){ + this.detailData.attachments.forEach((item,index) => { + item.suffix = item.attachementName.substring(item.attachementName.lastIndexOf(".") + 1); + if(item.suffix == 'jpg'|| item.suffix =='jpeg' || item.suffix =='png' ){ + if(this.detailData.role == 'leader' || this.detailData.role == 'infoPeople' ){ + item.attachment = VUE_APP_BASE_URL + item.attachment; + }else { + item.attachment = VUE_APP_BASE_URL + item.attachement; + } + + }else { + this.isAllImg = 'no'; + } + }) + } + console.log("this.isAllImg",this.isAllImg) + console.log("detailData",this.detailData) this.detailData.disaster = test.disasterType == 1 ? '地震': test.disasterType == 2 ? '洪涝' : test.disasterType == 3 ? '气象' : test.disasterType == 4 ? '泥石流': test.disasterType == 5 ? '水旱': '森林草原火灾'; }, methods: { goBack() { - console.log("1111") uni.navigateBack({ url:'./notice/notice' }); + }, + goMeasures() { + uni.navigateTo({ + url: `/pages/tabBar/notice/measures?data=` + encodeURIComponent("2") + }) }, //审核通过 approved() { @@ -143,68 +200,94 @@ } }) }, - openFile(item) { - let fileUrl = ''; - console.log("iiii",item) - if(this.detailData.role == 'leader'){ - fileUrl = VUE_APP_BASE_URL + item.attachment; - }else { - fileUrl = VUE_APP_BASE_URL + item.attachement; - } - console.log("urlllllllll",fileUrl) - uni.downloadFile({ - url: fileUrl, - header: {}, - success:function(res){ - console.log("下载res",res); - var filePath = res.tempFilePath; - const sidx = filePath.lastIndexOf('('); - const eidx = filePath.lastIndexOf(')'); - // 用于处理文档打开问题(ps:第一次打开 第二次无法打开问题) - if (sidx > -1 && eidx > -1) { - const restr = filePath.substr(sidx, eidx - sidx + 1); - filePath = filePath.replace(restr, ''); - } - // plus.runtime.openFile(filePath) - uni.openDocument({ - filePath: filePath, - success:function(){ - console.log('成功') - }, - fail:function(){ - uni.showToast({ - icon: 'none', - title: '暂不支持此类型', - duration: 2000 - }) - } - }) - } - }) - } + //信息发布 + infoSend() { + publishInfo({id: this.detailData.id}).then(res => { + if(res.code==100) { + this.goBack(); + } + }) + console.log("信息发布") + }, + //预览图片 + previewSqs(item,index) { + + let imgs = []; + for (let i = 0; i < this.detailData.attachments.length; i++) { + imgs.push(this.detailData.attachments[i].attachment) + } + console.log("预览",imgs) + uni.previewImage({ + urls: imgs, + current: index, + indicator: 'number', + loop: true + }) + }, + //预览文件 + openFile(item) { + let fileUrl = ''; + console.log("iiii",item) + if(this.detailData.role == 'leader' || this.detailData.role == 'infoPeople' ){ + fileUrl = VUE_APP_BASE_URL + item.attachment; + }else { + fileUrl = VUE_APP_BASE_URL + item.attachement; + } + console.log("urlllllllll",fileUrl) + uni.downloadFile({ + url: fileUrl, + header: {}, + success:function(res){ + console.log("下载res",res); + var filePath = res.tempFilePath; + const sidx = filePath.lastIndexOf('('); + const eidx = filePath.lastIndexOf(')'); + // 用于处理文档打开问题(ps:第一次打开 第二次无法打开问题) + if (sidx > -1 && eidx > -1) { + const restr = filePath.substr(sidx, eidx - sidx + 1); + filePath = filePath.replace(restr, ''); + } + // plus.runtime.openFile(filePath) + uni.openDocument({ + filePath: filePath, + success:function(){ + console.log('成功') + }, + fail:function(){ + uni.showToast({ + icon: 'none', + title: '暂不支持此类型', + duration: 2000 + }) + } + }) + } + }) + } } } </script> -<style> +<style lang="scss" scoped> a{ text-decoration: none; } .navBarBox .navBar { - /* background-color:lightgrey; */ - height: 30px; - display: flex; - flex-direction: row; - /* justify-content: center; */ - align-items: center; -/* padding-top:5px ; */ - padding: 5px 8px; + 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: 36%; - font-weight: 600; - font-size: 18px; - + /* margin-left: 20px; */ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; } .navBarBox .navBar .logo { width: 82rpx; @@ -222,6 +305,11 @@ display: flex; flex-direction: column; } +.attache_img { + flex: 1; + display: flex; + flex-wrap: wrap; +} .responseStatus{ padding:5px; color:#2a2a2a; @@ -233,6 +321,15 @@ background-color: lightgray; margin-left: 15px; } +.detailCard{ + 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; +} .btn{ margin-top: 80px; display: flex; @@ -240,4 +337,14 @@ justify-content: space-around; width: 100%; } +.measures{ + margin-top: 50px 12px 0; + padding: 0 12px; + + .resBtn{ + border-radius: 5px; + box-shadow: 0 3px 12px rgba(33,148,239,0.4); + } +} + </style> -- Gitblit v1.9.2