school_ecology_h5/pages/school_represent/school_represent.vue

<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="top">
			<view class="top_search">
				<uni-icons type="search" size="30" color="#999999"></uni-icons>
				<input class="input" type="text" placeholder="请输入关键字" v-model="inputValue" @blur="handleBlur" />
			</view>
			<view class="top_btn" @click="handlebtn">
				<uni-icons type="person" size="20" color="#fff"></uni-icons>
				<view class="btn_text">母校代言</view>
			</view>
		</view>

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一个校友区域 -->
			<view class="list_box" v-for="item in dataList" :key="item.id" @click="clickItem(item.id)">
				<image class="img" mode="aspectFill" :src="item.image" />

				<view class="name">{{ item.name }}</view>

				<view class="desc">{{ item.periodName }}届毕业生</view>
			</view>
		</view>

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

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

// 输入框绑定数据
const inputValue = ref('')
// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(8)
// 总条数
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,
		keyword: inputValue.value
	}
	const res = await getEndorsePage(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 点击母校代言按钮的回调
const handlebtn = () => {
	uni.navigateTo({
		url: '/pages/school_form/school_form'
	})
}

// 输入框失去焦点回调
const handleBlur = () => {
	currentPage.value = 1
	dataList.value = []
	getData()
}

// 点击每一项的回调
const clickItem = (id) => {
	uni.navigateTo({
		url: `/pages/school_represent_detail/school_represent_detail?id=${id}`
	})
}
</script>

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

	.top {
		display: flex;
		justify-content: space-between;

		.top_search {
			display: flex;
			align-items: center;
			padding: 0 25rpx;
			width: 491rpx;
			height: 80rpx;
			border-radius: 145rpx;
			border: 2rpx solid #e5e5e5;
			background-color: #f5f5f5;

			.input {
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}

		.top_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 18rpx;
			width: 196rpx;
			height: 70rpx;
			color: #fff;
			font-size: 20rpx;
			border-radius: 68rpx;
			background-color: #007aff;

			.btn_text {
				margin-left: 10rpx;
			}
		}
	}

	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx 10rpx;
		margin-top: 30rpx;

		.list_box {
			width: 347rpx;
			height: 515rpx;
			border-radius: 12rpx;
			box-shadow: 0 4rpx 8rpx rgba(212, 212, 212, 0.32);
			overflow: hidden;

			.img {
				width: 347rpx;
				height: 385rpx;
				border-radius: 12rpx;
			}

			.name {
				margin-left: 20rpx;
				margin-top: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.desc {
				margin-left: 20rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}
}
</style>