school_ecology_h5/components/my-set/my-set.vue

<template>
	<view class="content">
		<!-- 状态栏分段器区域 -->
		<view class="status">
			<view class="status_box" :class="{ active: currentIndex == index }" v-for="(item, index) in statusList" :key="index" @click="changeIndex(index)">
				{{ item }}
			</view>
		</view>

		<!-- 列表区域 -->
		<view class="list">
			<!-- 每一个活动区域 -->
			<view class="list_box" v-for="item in dataList" :key="item.id" @click="clickItem(item.id)">
				<view class="box_top">
					<img v-if="item.poster" class="img" :src="item.poster" mode="aspectFill" />
					<img v-else class="img" src="@/static/images/3.png" mode="aspectFill" />
					<view class="top_msg">
						<view class="msg_title">{{ item.theme }}</view>
						<view class="msg_name">{{ item.orgName }}</view>
						<view class="">{{ item.startTime }} 至 {{ item.endTime }}</view>
					</view>
				</view>
				<view class="box_bottom">
					<view class="bottom_left">
						审批意见：
						<text v-if="item.passName == '待审核'" class="ing">审核中...</text>
						<text v-if="item.passName == '已通过'" class="pass">审核通过</text>
						<text v-if="item.passName == '已拒绝'" class="reject">信息违规，请重新提交。</text>
					</view>
					<view v-if="item.passName == '待审核'" class="bottom_right ing_btn">审核中...</view>
					<view v-if="item.passName == '已通过'" class="bottom_right pass_btn">审批通过</view>
					<view v-if="item.passName == '已拒绝'" class="bottom_right reject_btn">驳回</view>
				</view>
			</view>

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

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

// 状态栏数组
const statusList = ['全部', '审核中', '审核通过', '驳回']
// 状态栏当前索引
const currentIndex = ref(0)
// 当前页
const currentPage = ref(1)
// 每页多少条
const pageCount = ref(6)
// 总条数
const total = ref(0)
// 列表数据
const dataList = ref([])

onMounted(() => {
	// 获取我发起的活动分页数据
	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,
		isPass: currentIndex.value
	}
	const res = await getMyActivityPages(data)
	// console.log(res)
	dataList.value = [...dataList.value, ...res.data.list]
	total.value = res.data.totalCount
}

// 状态栏切换时的回调
const changeIndex = (e) => {
	if (currentIndex.value != e) {
		currentIndex.value = e
		currentPage.value = 1
		dataList.value = []
		getData()
	}
}

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

<style lang="scss" scoped>
.content {
	.status {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		width: 712rpx;
		height: 90rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #f2f7ff;

		.status_box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 211rpx;
			height: 71rpx;
			border-radius: 8rpx;
		}

		.active {
			font-size: 30rpx;
			color: #0061ff;
			border: 2rpx solid #0061ff;
			background-color: rgba(0, 97, 255, 0.1);
		}
	}

	.list {
		margin-top: 20rpx;

		.list_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 30rpx 25rpx;
			margin-bottom: 20rpx;
			width: 714rpx;
			height: 344rpx;
			border-radius: 28rpx;
			box-shadow: 0 4rpx 35rpx #d3d3d3;
			background-color: #fff;

			.box_top {
				display: flex;
				justify-content: space-between;
				padding-bottom: 40rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.img {
					margin-right: 24rpx;
					width: 249rpx;
					height: 168rpx;
					border-radius: 8rpx;
				}

				.top_msg {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					font-size: 24rpx;
					color: #808080;
					overflow: hidden;

					.msg_title {
						font-size: 28rpx;
						font-weight: bold;
						color: #000;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.msg_name {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.box_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 18rpx;
				height: 104rpx;
				font-size: 28rpx;

				.bottom_left {
					display: flex;
					flex: 1;
					padding-right: 20rpx;
					white-space: nowrap;
					overflow: hidden;

					.pass {
						color: #007aff;
					}
					.ing {
						color: #ff5733;
					}
					.reject {
						color: #d43030;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.bottom_right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 157rpx;
					height: 55rpx;
					color: #fff;
					font-size: 28rpx;
					border-radius: 70rpx 40rpx 0 70rpx;
				}

				.pass_btn {
					background: linear-gradient(90deg, #366fff 0%, #5da0fc 100%);
				}
				.ing_btn {
					background: linear-gradient(90deg, #ff7045 0%, #f7a172 100%);
				}
				.reject_btn {
					background: linear-gradient(90deg, #d43030 0%, #f56c6c 100%);
				}
			}
		}
	}
}
</style>