nxdt-uniapp/pages/component/Preview.vue

<template>
  <div class="preview">
    <div class="item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
      <u-icon v-if="item.showWord" name="/static/images/imgs/word.png" size="30" />
      <u-icon v-if="item.showExcel" name="/static/images/imgs/excel.png" size="30" />
      <u-icon v-if="item.showPpt" name="/static/images/imgs/ppt.png" size="30" />
      <u-icon v-if="item.showPdf" name="/static/images/imgs/pdf.png" size="30" />
      <u--image v-if="item.showImg" :src="item.url" width="30px" height="30px" @click="handleImage(item.url)">
        <view slot="error" style="font-size: 14px">加载失败</view>
      </u--image>
    </div>

    <u-modal :show="showModal" :closeOnClickOverlay="true" :showConfirmButton="false" @close="showModal = false">
      <view class="slot-content"><bns-kkFile-preview :items="filePreview"></bns-kkFile-preview></view>
    </u-modal>
  </div>
</template>

<script>
import config from '@/config'
import bnsKkFilePreview from './bns-kkFile-preview'

export default {
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  components: { bnsKkFilePreview },
  data() {
    return {
      showModal: false,
      list: [],
      showImg: false,
      modalUrl: '',
      filePreview: {
        filePreviewUrl: '',
        fileName: ''
      }
    }
  },
  mounted() {
    setTimeout(() => {
      // console.log('🚀 ~ mounted ~ 文件列表:', this.dataList)
      this.list = this.dataList
      this.list.forEach(item => {
        // item.url = config.fileUrl + item.url
        // 判断文件类型
        if (
          item.url.includes('.word') ||
          item.url.includes('.doc') ||
          item.url.includes('.docx') ||
          item.url.includes('.WORD') ||
          item.url.includes('.DOC') ||
          item.url.includes('.DOCX')
        ) {
          item.showWord = true
        } else if (
          item.url.includes('.ppt') ||
          item.url.includes('.pptx') ||
          item.url.includes('.pptm') ||
          item.url.includes('.PPT') ||
          item.url.includes('.PPTX') ||
          item.url.includes('.PPTM')
        ) {
          item.showPpt = true
        } else if (
          item.url.includes('.pdf') ||
          item.url.includes('.pdfx') ||
          item.url.includes('.pdfm') ||
          item.url.includes('.PDF') ||
          item.url.includes('.PDFX') ||
          item.url.includes('.PDFM')
        ) {
          item.showPdf = true
        } else if (
          item.url.includes('.xls') ||
          item.url.includes('.xlsx') ||
          item.url.includes('.xlsm') ||
          item.url.includes('.XLS') ||
          item.url.includes('.XLSX') ||
          item.url.includes('.XLSM')
        ) {
          item.showExcel = true
        } else {
          item.url = config.fileUrl + item.url
          item.showImg = true
        }
      })
    }, 400)
  },
  methods: {
    handleImage(url) {
      uni.previewImage({
        urls: [url]
      })
    },
    // 点击文件
    handleItem(item) {
      console.log('点击文件', item)
      // 清空
      this.filePreview.filePreviewUrl = ''
      this.filePreview.fileName = ''
      // 判断是否是图片, 是则预览图片 不下载
      if (item.showImg) {
        this.handleImage(item.url)
        return
      }

      this.filePreview.filePreviewUrl = item.filePath
      this.filePreview.fileName = item.fileName
      this.showModal = true

      // 提示 是否下载文件
      // uni.showModal({
      //   title: '提示',
      //   content: '是否预览文件',
      //   success: res => {
      //     if (res.confirm) {
      //       console.log('用户点击确定')
      //       // 第一步：下载文件
      //       uni.downloadFile({
      //         url: item.url,
      //         success: res => {
      //           console.log('下载成功', res)
      //           // 第二步：保存文件
      //           uni.saveFile({
      //             tempFilePath: res.tempFilePath,
      //             success: saveRes => {
      //               console.log('保存成功', saveRes)
      //               uni.showToast({
      //                 title: '下载成功',
      //                 icon: 'success',
      //                 duration: 1500
      //               })
      //               const savedFilePath = saveRes.savedFilePath

      //               // 第三步：预览文件
      //               uni.openDocument({
      //                 filePath: savedFilePath,
      //                 fileType: savedFilePath.split('.').pop(),
      //                 success: () => {
      //                   console.log('文件预览成功')
      //                 },
      //                 fail: err => {
      //                   console.error('预览失败', err)
      //                 }
      //               })
      //             },
      //             fail: err => {
      //               console.log('保存失败', err)
      //               uni.showToast({
      //                 title: '下载失败, 请联系管理员',
      //                 icon: 'none',
      //                 duration: 1500
      //               })
      //             }
      //           })
      //         },
      //         fail: err => {
      //           console.log('下载失败', err)
      //           uni.showToast({
      //             title: '下载失败, 请联系管理员',
      //             icon: 'none',
      //             duration: 1500
      //           })
      //         }
      //       })
      //     } else if (res.cancel) {
      //       console.log('用户点击取消')
      //     }
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .u-modal__content {
  padding: 0 !important;
}
.preview {
  background: #f8f9fc;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  flex-wrap: wrap;

  .item {
    margin: 10px 15px;
    width: 30px;
    height: 30px;
  }

  .modal-btn {
    margin: 10px auto 0;
  }
  /deep/ .u-modal__button-group--confirm-button {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>