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">
        <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:'word-list',
		props: {
      businessId:{
        default:0
      }
		},
		data() {
			return {
        stageList: []
			}
		},
    watch:{
      'businessId':function () {
        // this.getStageList()
      }
    },
    mounted() {
      this.getStageList()
    },
    methods: {
      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{
    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:oklch(.97 .014 254.604);
        margin-right: 32rpx;
      }
      .file-icon-pdf{
        background-color: oklch(.971 .013 17.38);
      }
      .file-icon-excel{
        background-color: oklch(.982 .018 155.826);
      }
    }
  }
	.steps-item:last-child {
		margin-bottom: 0;
	}

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