school_ecology_h5/pages/school_photo/school_photo.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="plus" size="20" color="#fff"></uni-icons>
				<view class="btn_text">上传照片</view>
			</view>
		</view>

		<!-- 分段器区域 -->
		<view class="control">
			<common-controlTag :tagList="tagList" rangekey="name" @change="handleChange"></common-controlTag>
		</view>

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一个相册区域 -->
			<view class="list_box" v-for="item in dataList" :key="item.id">
				<view class="box_top">
					<image class="img" src="@/static/images/9.png" mode="aspectFill"></image>
					<view class="top_msg">
						<view class="msg_name">
							{{ item.name }}
							<text class="text">{{ item.orgName }}</text>
						</view>
						<view class="msg_class">{{ item.schoolInfo }}</view>
					</view>
				</view>
				<view class="box_center">
					<image v-for="(ele, index) in item.images" :key="index" class="img" :src="ele" mode="aspectFill" @click="clickImg(item.images, index)"></image>
				</view>
				<view class="box_bottom">{{ item.createTime }} {{ item.categoryName }}</view>
			</view>

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

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

// 搜索框绑定数据
const inputValue = ref('')
// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)

// 分段器当前索引
const currentIndex = ref(0)
// 分段器数组
const tagList = ref(['全部'])
// 列表数据
const dataList = ref([])

onLoad(() => {
	// 获取相册分类集合
	getTagList()
	// 根据分类ID获取校友相册分页数据
	getData()
})

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

// 获取相册分类集合
const getTagList = async () => {
	const res = await getCategoryImages()
	// console.log(res)
	tagList.value = [...tagList.value, ...res.data]
	// console.log(tagList.value)
}

// 根据分类ID获取校友相册分页数据
const getData = async () => {
	let data = {
		currentPage: currentPage.value,
		pageCount: pageCount.value,
		keyword: inputValue.value,
		categoryId: tagList.value[currentIndex.value].id || 0
	}
	const res = await getMobileImagePage(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 点击上传照片按钮回调
const handlebtn = () => {
	uni.navigateTo({
		url: `/pages/school_photo_upload/school_photo_upload?type=2`
	})
}

// 分段器切换时的回调
const handleChange = (e) => {
	if (currentIndex.value != e) {
		currentIndex.value = e
		currentPage.value = 1
		dataList.value = []
		getData()
	}
}

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

// 点击图片回调
const clickImg = (urls, current) => {
	uni.previewImage({
		urls,
		current
	})
}
</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: 22rpx;
			width: 196rpx;
			height: 70rpx;
			color: #fff;
			font-size: 20rpx;
			border-radius: 68rpx;
			background-color: #007aff;

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

	.control {
		margin-top: 15rpx;
	}

	.list {
		margin-top: 20rpx;
		font-size: 24rpx;

		.list_box {
			padding: 25rpx 30rpx;
			margin-bottom: 20rpx;
			width: 714rpx;
			border-radius: 28rpx;
			box-shadow: 0 4rpx 35rpx rgba(211, 211, 211, 0.32);

			.box_top {
				display: flex;
				height: 80rpx;

				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.top_msg {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 20rpx;

					.msg_name {
						font-size: 32rpx;

						.text {
							margin-left: 20rpx;
							font-size: 24rpx;
							color: #366fff;
						}
					}

					.msg_class {
						color: #808080;
					}
				}
			}

			.box_center {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 15rpx;
				margin-top: 35rpx;

				.img {
					width: 200rpx;
					height: 220rpx;
				}
			}

			.box_bottom {
				margin-top: 20rpx;
				color: #808080;
				line-height: 32rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>