zhgdyunapp/pages/projectEnd/exerciseInfo/details.vue

<template>
  <view class="deetailPage">
    <view class="fixedheader">
      <headers :showBack="true">
        <view class="headerName"> 应急信息 </view>
      </headers>
    </view>

    <view class="content record" :style="{ paddingTop: mobileTopHeight + 50 + 'px' }">
      <view class="type flex2">
        <view class="textColor">预案名称</view>
        <view class="textRight">{{ scenariosName }}</view>
      </view>
      <view class="type flex2">
        <view class="textColor">应急联系机构</view>
        <view class="textRight">{{ basicInfo.groupName }}</view>
      </view>
      <view class="type flex2">
        <view class="textColor">联系人</view>

        <view class="textRight">{{ basicInfo.workerName }}</view>
      </view>
      <view class="type flex2">
        <view class="textColor">联系方式</view>
        <view class="textRight">{{ basicInfo.workerPhone }}</view>
      </view>
      <view class="type flex2">
        <view class="textColor">地址</view>
        <view class="textRight" style="margin-right: 28px">{{ basicInfo.address }}</view>
        <image @click="handleJumpMap(basicInfo.address)" class="location_ic" src="@/static/icon/location.svg"></image>
      </view>
      <view class="type flex2">
        <view class="textColor">是否签订合作协议</view>
        <view class="textRight">{{ basicInfo.isContract == 1 ? '是' : '否' }}</view>
      </view>
      <view style="margin-top: 10px">
        <!-- <view class="textColor" style="width: 110px;">视频/音频附件</view> -->
        <view
          v-if="fileUrl.length > 0"
          v-for="(item, index) in fileUrl"
          :key="index"
          style="width: 95%; display: flex; align-items: center; margin-bottom: 8px"
          @click="handlePreview(item)"
        >
          <image class="file_ic" src="/static/images.png"></image>
          <view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
            <view style="line-height: 28px">{{ item.name }}</view>
            <view>{{ $formatDates(item.uid) }}</view>
          </view>
        </view>
      </view>
    </view>
    <u-action-sheet :list="list" @click="selectClick" title="请选择" v-model="show"></u-action-sheet>
  </view>
</template>

<script>
import uActionSheet from '@/components/u-action-sheet/u-action-sheet.vue'
export default {
  components: {
    uActionSheet
  },
  data() {
    return {
      list: [
        {
          text: '预览'
        },
        {
          text: '下载'
        }
      ],
      show: false,
      mobileTopHeight: 0,
      checkedTab: 1,
      imgFileList: [],
      fileUrl: [],
      basicInfo: {},
      issueInfoList: [],
      userInfo: {},
      id: '',
      fileData: {},
      scenariosName: ''
    }
  },
  onLoad(option) {
    this.id = option.id
    this.scenariosName = option.scenariosName
    this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
  },
  onShow() {
    this.getBasicInfo()
  },
  mounted() {
    var that = this
    uni.getSystemInfo({
      success(res) {
        that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
        uni.setStorageSync('systemInfo', res)
      }
    })
    console.log('this.mobileTopHeight', this.mobileTopHeight)
  },
  methods: {
    //获取基本信息
    getBasicInfo() {
      let that = this
      this.sendRequest({
        url: 'xmgl/urgentEventInfo/queryById',
        method: 'post',
        data: {
          id: that.id
        },
        success: res => {
          that.basicInfo = res.result
          if (res.result.fileUrl) {
            that.fileUrl = JSON.parse(res.result.fileUrl)
          }
        }
      })
    },
    handlePreview(item) {
      this.show = true
      this.fileData = item
    },
    selectClick(data) {
      if (data === 1) {
        this.downloadFile()
      } else {
        this.previewFile()
      }
    },
    downloadFile() {
      let url = this.url_config + 'image/' + this.fileData.url
      uni.showLoading({
        title: '保存中...'
      })
      uni.downloadFile({
        url: url,
        success: function (res) {
          var filePath = res.tempFilePath
          uni.saveImageToPhotosAlbum({
            // 然后调用这个方法
            filePath: filePath,
            success: res => {
              uni.hideLoading() //关闭提示
              uni.showToast({
                title: '保存成功'
              })
            },
            fail: e => {
              console.log(e)
            }
          })
        }
      })
    },
    previewFile() {
      let url = this.url_config + 'image/' + this.fileData.url
      if (this.fileData.iconType == 'image') {
        uni.previewImage({
          urls: [url]
        })
      } else {
        // uni.showLoading({
        //   title: '打开文档中...'
        // })
        uni.downloadFile({
          url: url,
          success: function (res) {
            var filePath = res.tempFilePath
            uni.openDocument({
              filePath: filePath,
              success: function (res) {
                console.log('打开文档成功')
                // uni.hideLoading() //关闭提示
                // uni.showToast({
                //   title: '打开文档成功'
                // })
              }
            })
          }
        })
      }
      // //#ifdef H5
      // 	uni.showToast({
      // 	    title: '暂不支持预览！',
      // 		icon: "none",
      // 		duration: 2000
      // 	});
      // 	return;
      // //#endif
    },
    handleJumpMap(addr) {
      uni.navigateTo({
        url: `./map?latitude=&longitude=&addr=${addr}`
      })
    }
  }
}
</script>

<style>
.fixedheader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  .headerName {
    z-index: 1;
  }
}
.flex {
  display: flex;
  align-items: center;
}

.flex2 {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.flex3 {
  display: flex;
}

.deetailPage {
  width: 100%;
  height: 100%;
}

.content {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 16rpx;
}

.type {
  font-size: 30rpx;
  line-height: 40rpx;
  padding: 12px 0;
  border-bottom: 1px solid rgba(194, 194, 194, 0.2);
}
.record {
  /* background-color: rgba(234, 234, 234, 0.4); */
  padding-bottom: 60px;
}

.textRight {
  margin-left: 20px;
  width: 80%;
}

.textColor {
  color: gray;
  width: 68px;
  flex-shrink: 0;
}
.location_ic {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  right: 30rpx;
}
.file_ic {
  width: 78rpx;
  height: 78rpx;
  margin-right: 24rpx;
}
</style>