文件预览

zhouwenxuan

2023-07-19 6f89c68df4326cb8b4e28859c426b764a666426d

 pages/tabBar/notice/detail.vue

@@ -31,17 +31,28 @@
         <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>
         <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"
@@ -99,6 +110,7 @@
            // 状态栏高度
            statusBarHeight: 0,
            key: 1,
            isAllImg: '',
            detailData: {
               id: null,
                warnInfoId: null,
@@ -121,7 +133,7 @@
         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.detailData.role == 'infoPeople' ) {
            this.detailData.attachments = this.detailData.attachment;
            if (this.detailData.attachments){
@@ -130,6 +142,23 @@
               })
            }
         }
         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: {
@@ -168,6 +197,22 @@
            })
            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)
@@ -247,6 +292,11 @@
   display: flex;
   flex-direction: column;
}
.attache_img {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
}
.responseStatus{
   padding:5px;
   color:#2a2a2a;