uni-app/src/pages/work/projectImage/projectImage.vue

<template>
	<view>
		<scroll-view
				:scroll-with-animation="true"
				class="scroll-view"
				scroll-y
				@scrolltolower="loadMore"
		>
			<uni-grid :column="2" :highlight="true" :show-border="false" :square="true">
				<uni-grid-item v-for="(item, index) in imageList" :key="index"
				               class="custom-grid-item"
				>
					<image
							:src="item.url"
							class="project-image"
							mode="aspectFill"
							@click="previewImage(index)"
					/>
				</uni-grid-item>
			</uni-grid>
			<!--		<image-->
			<!--				v-for="(item, index) in imageList"-->
			<!--				:key="index"-->
			<!--				:src="item.url"-->
			<!--				class="project-image"-->
			<!--				mode="aspectFill"-->
			<!--				@click="previewImage(index)"-->
			<!--		/>-->
		</scroll-view>
	</view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import {ref, reactive} from 'vue'
import {getOaProjectIndexImg} from "@/api/oa/project";
import config from "@/config";

const imageList = ref([])
const loading = ref(false)
const noMore = ref(false)
const projectData = reactive({
	projectId: '',
	name: '',
	pageNum: 1,
	pageSize: 10,
})

onLoad((options) => {
	console.log('接收到的参数:', options)
	// projectId: "1893214899153747969", projectName: "南通奥特莱斯", timestamp: "1752287330777"
	projectData.projectId = options.projectId || ''
	projectData.name = decodeURIComponent(options.projectName || '')

	// 设置导航栏标题
	uni.setNavigationBarTitle({
		title: projectData.name
	})

	// 获取项目图片
	getProjectImage()
})

async function getProjectImage() {
	if (loading.value || noMore.value) return

	loading.value = true

	try {
		const res = await getOaProjectIndexImg(projectData)

		if (res?.accessories) {
			const newImages = res.accessories.split(',').filter(url => url.trim())
					.map(url => {
						let imageUrl = url.trim();
						if (!imageUrl.startsWith('http')) {
							imageUrl = `${config.baseUrl}${config.apiPrefix}${imageUrl}`;
						}
						// #ifdef MP-WEIXIN
						imageUrl = imageUrl.replace(/^http:/, 'https:');
						// #endif
						return {url: imageUrl};
					})

			if (newImages.length === 0) {
				noMore.value = true
			} else {
				imageList.value = [...imageList.value, ...newImages]
				projectData.pageNum++
			}
		}
	} catch (error) {
		console.error('获取图片失败:', error)
		uni.showToast({
			title: '加载图片失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 加载更多
function loadMore() {
	if (!loading.value && !noMore.value) {
		getProjectImage()
	}
}

// 图片预览
function previewImage(current) {
	uni.previewImage({
		current,
		urls: imageList.value.map(item => item.url),
		// #ifdef MP-WEIXIN
		// 微信小程序专属配置
		indicator: 'number'
		// #endif
	})
}

</script>

<style scoped>
.scroll-view {
	height: 100vh;
	padding-bottom: 100rpx;
}

/* 修改网格项的内边距 */
:deep(.custom-grid-item .uni-grid-item__box) {
	padding: 20rpx !important;
}

/* 调整图片大小 */
.project-image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.loading-more {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
}
</style>