导航栏退出登录

zhouwenxuan

2023-09-06 0b2357a173a2bc52f3532bfcf93ff31daf226231

 pages/tabBar/notice/detail.vue

@@ -1,5 +1,5 @@
<template>
   <view>
   <view style="display: flex;flex-direction: column;height: 100%;">
      <!-- 自定义导航栏 -->
      <view class="navBarBox">
         <!-- 状态栏占位 -->
@@ -7,51 +7,86 @@
         <!-- 真正的导航栏内容 -->
         <view style="display: flex; flex-direction: column;">
            <view class="navBar">
               <u-icon name="arrow-left" color="black" size="17" @click="goBack" />
               <u-icon name="arrow-left" color="black" size="17" style="margin-left: 8px;" @click="goBack" />
               <view class="barText">信息详情</view>
<!--                <view >
                  <u-button type="text" @click="loginOut" style="color: blue;margin-right: 5px;">退出</u-button>
               </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">
            <text><b>级别：</b></text>
            <u-tag 
               :color="detailData.warningLevel === 3 ? 'rgb(255, 244, 88)' :detailData.warningLevel === 2 ? 'orange':detailData.warningLevel === 1 ?'red':'blue'"
               :text="detailData.warningLevel === 3 ? '黄色' : detailData.warningLevel === 2 ? '橙色': detailData.warningLevel === 1 ?'红色':'蓝色'" 
               :bg-color="detailData.warningLevel === 3 ? 'rgb(254, 255, 230)' :detailData.warningLevel === 2 ? 'rgb(255, 210, 179)':detailData.warningLevel === 1 ?'rgb(255, 128, 128)':'rgb(121, 150, 255)'"
               border-color="white">
            </u-tag>
         </view>
         <text class="textTop"><b>发布单位：</b>{{detailData.publishingUnit}}</text>
         <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 v-for="(item, index) in detailData.attachments" :key="index" >
						
                     <view style="display: flex;margin-top: 10px;" @click="openFile(item)">
                        <u-icon name="attach" color="#2979ff" size="20"></u-icon> {{item.attachementName}}
                     </view>
							
               </view>
         <view class="levelDisaster">
            <text class="textTop"><b>类别：</b>{{detailData.disaster}}</text>
            <view style="display: flex;align-items: center;margin-left: 10%" class="textTop">
               <text><b>级别：</b></text>
               <u-tag 
                  :color="detailData.warningLevel === 3 ? 'rgb(211, 211, 0)' :detailData.warningLevel === 2 ? 'orange':detailData.warningLevel === 1 ?'red':'blue'"
                  :text="detailData.warningLevel === 3 ? '黄色' : detailData.warningLevel === 2 ? '橙色': detailData.warningLevel === 1 ?'红色':'蓝色'" 
                  :bg-color="detailData.warningLevel === 3 ? 'rgb(254, 255, 230)' :detailData.warningLevel === 2 ? 'rgb(255, 210, 179)':detailData.warningLevel === 1 ?'rgb(255, 128, 128)':'rgb(121, 150, 255)'"
                  border-color="white">
               </u-tag>
            </view>
         </view>
         <text class="textTop" v-if="detailData.role == 'leader'"><b>信息提交人：</b>{{detailData.infoSubmitter}}</text>
         <text class="textTop" v-if="detailData.forwardPath" style="display: flex;"><b>发布单位：</b>
            <text v-for="(item,index) in detailData.forwardPath">
               <text v-if="index !=detailData.forwardPath.length-1">
                  {{item}}>
               </text>
               <text v-else>{{item}}</text>
            </text>
         </text>
         <text class="textTop" v-else><b>发布单位：</b>{{detailData.publishingUnit}}</text>
         <text class="textTop"><b>短信内容：</b><i style="background-color: rgb(240, 248, 255);">{{detailData.content}}发布单位：{{detailData.publishingUnit}}</i></text>
         <view :style="{ height: directViewUrl ? '560px' : '' }" style="margin-top: 20px;">
            <text class="textTop" style="width: 76px;" ><b>附件内容：</b></text>
            <view style="width: 100%; height: 550px;" v-if="directViewUrl">
               <iframe :src="directViewUrl" class="frameStyle"></iframe>
            </view>
<!--             <view class="attache" v-if="isAllImg == 'no'">
               <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 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>
         <text class="textTop" style="margin-top: 30px;" 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>
         <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>
<!--          <view class="textTop" v-else>
            <text ><b>响应状态：</b></text>
            <text v-if="detailData.responseStatus == 1" class="responseStatus"
               style='background-color:rgb(247, 108, 125);color: white;'>待叫应</text>
@@ -59,7 +94,7 @@
               style='background-color:limegreen'>已叫应</text>
            <text v-else class="responseStatus"
               style='background-color:rgb(247, 108, 125); color: white;'>超时未叫应</text>
         </view>
         </view> -->
         <view v-if="detailData.role == 'leader' && detailData.reviewStatus == 1" class="btn">
            <u-button 
               style="background-color:rgb(6, 202, 23);color: white;width: 180px;"
@@ -70,6 +105,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" v-if="unitType == 4">
         <u-button class="resBtn" type="primary" @click="goMeasures" v-if="role == '工作人员'">{{cityMessage}}</u-button>
      </view>
   </view>
</template>
@@ -77,12 +122,15 @@
<script>
   import VUE_APP_BASE_URL from '../../../common/constant.js'
   import { submit } from '../../../api/examine.js'
   import { publishInfo } from '../../../api/information.js'
   import { getMeasureDetail } from '../../../api/notice.js'
   export default {
      data() {
         return {
            // 状态栏高度
            statusBarHeight: 0,
            key: 1,
            isAllImg: '',
            detailData: {
               id: null,
                warnInfoId: null,
@@ -97,16 +145,24 @@
            submitData: {
               id: null,
               reviewStatus: null
            }
            },
            role: '',
            unitType: '',
            directViewUrl: '',
            cityMessage: '响应措施反馈',
            measureData: {}
         }
      },
       onLoad:function(options){
         this.role = uni.getStorageSync('roleName');
          //获取手机状态栏高度
         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') {
         this.directViewUrl = this.detailData.directViewUrl;
         // this.directViewUrl = 'https://huaban.com/'
         this.unitType = uni.getStorageSync('unittype');
         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 +170,66 @@
               })
            }
         }
         this.detailData.disaster = test.disasterType == 1 ? '地震': test.disasterType == 2 ? '洪涝' : test.disasterType == 3 ? '气象' : test.disasterType == 4 ? '泥石流': test.disasterType == 5 ? '水旱': '森林草原火灾';
         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 ? '水旱': '森林草原火灾';
         if(this.unitType == 4 && this.role == '工作人员'){
            this.getMeasures();
         }
			
      },
      methods: {
         goBack() {
            console.log("1111")
            uni.navigateBack({
                url:'./notice/notice'
            });
         },
         loginOut() {
            uni.clearStorageSync();
            uni.clearStorage();
            uni.navigateTo({
               url: '/pages/index/index'
            })
         },
         getMeasures(){
            getMeasureDetail({id: this.detailData.id}).then(res => {
               if(res.code == 100){
                  if(res.data.baseMeasures && res.data.baseMeasures.length>0 ){
                     this.cityMessage = '查看措施反馈';
                     this.measureData = res.data;
                  }else {
                     this.cityMessage = '响应措施反馈';
                  }
               }else{
            uni.$u.toast(res.msg)
          }
            })
         },
         goMeasures() {
            if(this.cityMessage == '查看措施反馈' ){
               uni.navigateTo({
                 url: `/pages/tabBar/responsivity/showMeasures?data=` + encodeURIComponent(JSON.stringify(this.measureData))
               })
            }else {
               uni.navigateTo({
                 url: `/pages/tabBar/notice/measures?data=` + encodeURIComponent(JSON.stringify(this.detailData))
               })
            }
         },
         //审核通过
         approved() {
@@ -143,68 +251,95 @@
               }
            })
         },
      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: space-around;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
   margin-left: 36%;
   font-weight: 600;
   font-size: 18px;

  flex: 1;
  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}
.navBarBox .navBar .logo {
   width: 82rpx;
@@ -222,6 +357,11 @@
   display: flex;
   flex-direction: column;
}
.attache_img {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
}
.responseStatus{
   padding:5px;
   color:#2a2a2a;
@@ -233,6 +373,16 @@
   background-color: lightgray;
   margin-left: 15px;
}
.detailCard{
   flex-grow: 1;
   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 +390,22 @@
   justify-content: space-around;
   width: 100%;
}
.measures{
   display: flex;
   justify-content: flex-end;
   padding: 0 12px;
   margin-bottom: 20px ;

}
.frameStyle{
   width: 100%;
   height: 550px;
   border: 1px solid #dddddc;
   margin-top: 5px;
}	
.levelDisaster{
   display: flex;
   align-items: center;
}

</style>