school_ecology_h5/pages/act_album/act_album.vue

<template>
	<view class="container">
		<!-- 图片列表区域 -->
		<view class="list">
			<image v-for="(item, index) in imgList" :key="index" class="img" mode="aspectFill" :src="item" @click="cilckImg(index, imgList)" />
		</view>

		<!-- 没有数据时展示的页面 -->
		<noData v-if="!imgList.length"></noData>

		<!-- 上传照片按钮区域 -->
		<view class="btn" @click="clickUpload">
			<uni-icons type="upload" size="22" color="#fff"></uni-icons>
			&nbsp;&nbsp;上传照片
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 图片数组
const imgList = ref([])
// 活动ID
const currentId = ref()

onLoad((options) => {
	if (options.imgList) {
		imgList.value = JSON.parse(decodeURIComponent(options.imgList))
	}
	if (options.currentId) {
		currentId.value = options.currentId
	}
})

// 点击上传照片的回调
const clickUpload = () => {
	uni.navigateTo({
		url: `/pages/school_photo_upload/school_photo_upload?type=1&currentId=${currentId.value}`
	})
}

// 点击图片回调
const cilckImg = (current, urls) => {
	uni.previewImage({
		urls,
		current
	})
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 18rpx;
	min-height: 100vh;

	.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;

		.img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 10rpx;
		}
	}

	.btn {
		position: fixed;
		left: 50%;
		bottom: 30rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 243rpx;
		height: 100rpx;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #007aff;
	}
}
</style>