xiamen-sb-uniapp/pages/equipment-file/equipment-file.vue

<template>
    <view class="mt-3 px3">
        <view class="f-size-30 f-weight-bold py2 border-bottom my3">设备图片</view>
        <!-- <view class="main d-flex a-center mb-3">
			<view class="img">
				<image src="../../static/images/add.png" mode=""></image>
			</view>
			<view class="content ml-2">
				<view class="text-color-3 f-size-30 one-ellipsis">2020年北京互联网技术交流会年北京互联网技术交流会</view>
				<view class="text-color-9 f-size-24">PDF文件</view>
			</view>
			<view class="icon ml-auto">
				<u-icon name="download " size="45"></u-icon>
			</view>
		</view> -->
        <!--  -->
        <view v-for="(item, index) in infoData.sbFileList" :key="index">
            <image
                style="width: 120rpx; height: 120rpx"
                :src="item.url"
                mode=""
            ></image>
        </view>
        <view class="f-size-30 f-weight-bold py2 border-bottom my3">验收文件</view>
        <view v-for="(item, index) in infoData.recheckFileList" :key="index">
            <image
                style="width: 120rpx; height: 120rpx"
                :src="item.url"
                mode=""
            ></image>
        </view>
        <view class="f-size-30 f-weight-bold py2 border-bottom my3">维保手册</view>
        <view v-for="(item, index) in infoData.repairFileList" :key="index">
            <image
                style="width: 120rpx; height: 120rpx"
                :src="item.url"
                mode=""
            ></image>
        </view>
        <view class="f-size-30 f-weight-bold py2 border-bottom my3">使用手册</view>
        <view v-for="(item, index) in infoData.useFileList" :key="index">
            <image
                style="width: 120rpx; height: 120rpx"
                :src="item.url"
                mode=""
            ></image>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            infoData: {},
            detailId: ''
        };
    },
    onLoad(options) {
        this.detailId = options.detailId;
        this.initData();
    },
    methods: {
        initData() {
            this.$Http
                .fetchSbInfo({
                    id: this.detailId
                })
                .then((res) => {
                    this.infoData = res.data;
                    res.data.sbFileList.forEach((d) => {
                        d.url = this.$BaseTool.UserUtil.getFileUrl(d.url);
                        d.recheckFileList = this.$BaseTool.UserUtil.getFileUrl(
                            d.recheckFileList
                        );
                        d.useFileList = this.$BaseTool.UserUtil.getFileUrl(d.useFileList);
                        d.repairFileList = this.$BaseTool.UserUtil.getFileUrl(
                            d.repairFileList
                        );
                    });
                });
        }
    }
};
</script>

<style lang="less" scoped>
.main {
  .img {
    width: 76rpx;
    height: 76rpx;
    border-radius: 10rpx;

    image {
      width: 76rpx;
      height: 76rpx;
      border-radius: 10rpx;
    }
  }

  .content {
    .text-color-3 {
      width: 500rpx;
    }
  }
}
</style>