yanzong_qianduan/pages/shopList/certificate.vue

<template>
	<view class="container">
		<view class="cer-box">
			<view class="name">企业信息如下</view>
			<view class="cer-list">
				<image v-for="(item, index) in cerList" :key="index" :src="item" mode="aspectFill" @click="previewImage(index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/shop/index';
	export default {
		data() {
			return {
				cerList: []
			};
		},
		onLoad({ id }) {
			this.id = id;
			this.getShopDetail();
		},
		methods: {
			async getShopDetail() {
				Api.getShopDetail({
			      id: this.id
			    })
					.then(result => {
						console.log(result);
						const arr = [];
						for (const image of result.data.detail.licenseImg) {
							arr.push(image.external_url);
						}
						this.cerList = [...arr];
					})
					.finally(() => this.loading = false)
			},
			previewImage(idx) {
				uni.previewImage({
					current: idx,
					urls: this.cerList,
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 24rpx;
		.cer-box {
			background: #fff;
			padding: 30rpx;
			.name {
				color: #222222;
				font-size: 34rpx;
				text-align: center;
				margin-bottom: 30rpx;
				font-weight: bold;
			}
			.cer-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				image {
					width: 250rpx;
					height: 250rpx;
					margin-bottom: 30rpx;
					border: 1rpx solid #eee;
				}
			}
		}
	}
</style>