school_ecology_h5/pages/plan/plan.vue

<template>
	<view class="plan">
		<!-- 每一个权益区域 -->
		<view class="box" v-for="item in dataList" :key="item.id" @click="goDetail(item)">
			<image class="box_img" :src="item.coverImage" mode="widthFix"></image>
		</view>

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

<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getQueryHeart } from '@/api/index.js'

// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)
// 数据数组
const dataList = ref([])

onLoad(() => {
	getData()
})

// 页面触底触发的回调
onReachBottom(() => {
	if (total.value > dataList.value.length) {
		currentPage.value++
		getData()
	} else {
		uni.showToast({
			title: '没有更多数据了~~',
			icon: 'none'
		})
	}
})

// 获取校友权益卡数组
const getData = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value
	}
	const res = await getQueryHeart(data)
	// console.log(res)
	if (res.code == 200) {
		dataList.value = [...dataList.value, ...res.data.list]
		total.value = res.data.totalCount
	}
}

// 点击每一项权益的回调
const goDetail = (item) => {
	let info = encodeURIComponent(JSON.stringify(item))
	uni.navigateTo({
		url: `/pages/planDetail/planDetail?info=${info}`
	})
}
</script>

<style lang="scss" scoped>
.plan {
	padding: 20rpx;

	.box {
		margin-bottom: 20rpx;
		// height: 260rpx;
		// box-shadow: 0 0 10rpx #d3d3d3;

		.box_img {
			width: 100%;
		}
	}
}
</style>