assess-app/page_task/task_details/module/word.vue

<template>
  <view class="m-20">

    <view class="row-c r-20 sys-background-fff m-b20" v-for="(item,index) in stageList" :key="index">
      <view class="file-box r-20" @click="openDocument(item.attachmentAddress)">
        <view class="file-data">
          <view class="file-icon" v-if="item.attachmentFormat==='docx'">
            <image class="wh-45 " src="/page_task/static/img/task-details/icon-word.png" mode="aspectFill"></image>
          </view>
          <view class="file-icon file-icon-excel" v-if="item.attachmentFormat==='xlsx'">
            <image class="wh-45 " src="/page_task/static/img/task-details/icon-excel.png" mode="aspectFill"></image>
          </view>
          <view class="file-icon file-icon-pdf" v-if="item.attachmentFormat==='pdf'">
            <image class="wh-45 " src="/page_task/static/img/task-details/icon-pdf.png" mode="aspectFill"></image>
          </view>
          <view>
            <view>{{item.attachmentName}}</view>
            <view class="size-26 text-color-333 m-t10"><text>{{item.attachmentFormat}}</text>•<text>{{(item.attachmentSize/1024/1024).toFixed(2)}}MB</text></view>
          </view>
        </view>
        <view>
          <uni-icons type="right" size="20"></uni-icons>
        </view>

      </view>
    </view>
  </view>
</template>

<script>

export default {
  name:'entities',
  props: {
    businessId:{
      default:0
    }
  },
  data() {
    return {
      stageList: []
    }
  },
  watch:{
    'businessId':function () {
      // this.getStageList()
    }
  },
  mounted() {
    this.getStageList()
  },
  methods: {
    openDocument(url){
      uni.downloadFile({
        url: url,
        success: function (res) {
          let filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功');
            }
          });
        }
      });
    },
    getStageList() {
      this.stageList=[
        {'attachmentName':'拍卖裁定书.docx','attachmentFormat':'docx','attachmentSize':465445,'attachmentAddress':'https://storage.jd.com/auction.gateway/5EB379EF1ADA205F9525D1BFA9DC1D4D20250616121557808.docx'},
        {'attachmentName':'通知书（定向询价）.pdf','attachmentFormat':'pdf','attachmentSize':284577,'attachmentAddress':'https://storage.jd.com/auction.gateway/2CC6F971D5CA2A11B829D01956446F3920250418151753793.pdf'},
        {'attachmentName':'评估报告1.pdf','attachmentFormat':'pdf','attachmentSize':3276836,'attachmentAddress':'https://storage.jd.com/auction.gateway/7F7226679C6E76620D9381906217543920250612120816112.pdf'},
      ]
    },
  },
}
</script>

<style lang="scss" scoped>
.file-box{
  box-shadow: 0 2rpx 6rpx 0  #0000001a, 0 2rpx 2px -2rpx  #0000001a;
  width: 100%;
  padding: 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .file-data{
    display: flex;
    justify-content: flex-start;
    .file-icon{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 96rpx;
      height: 96rpx;
      border-radius: 20rpx;
      background-color:#f8f9ff;
      margin-right: 32rpx;
    }
    .file-icon-pdf{
      background-color: #fff8f8;
    }
    .file-icon-excel{
      background-color:#f6fffb;
    }
  }
}
.steps-item:last-child {
  margin-bottom: 0;
}

.steps-line {
  width: 2rpx;
  background-color: #D9D9D9;
  height: 90rpx;
}

</style>