SxsnWechat/pagesHome/recruitsNumber.vue

<template>
	<view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="招募人数" bgColor="#FFFFFF"></cus-header>
		<view class="box num">
			<view class="num-pre">招募人数<text>{{recruitmentMax?(recruitmentMax+'人'):'无限制'}}</text></view>
			<view class="num-pre line">已报名<text>{{ybmNum}}人</text></view>
			<view class="num-pre">最少报名人数<text>{{recruitmentMax?(recruitmentMin+'人'):'无限制'}}</text></view>
		</view>
		<view class="box list" v-if="list.length">
			
			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
				<up-list-item v-for="(item, index) in list" :key="item.id">
					<view class="list-pre adfacjb">
						<view class="list-pre-left adfac">
							<image src="https://oss.familydaf.cn/sxsnfile/20251218/3821654e080945998d464f3c3aa64122.png"></image>
							<text>{{item.name||''}}</text>
							<image class="sex" v-if="item?.gender==1" src="https://oss.familydaf.cn/sxsnfile/20251218/473d5677fbdb4106acdb9a163377d27f.png"></image>
							<image class="sex" v-else-if="item?.gender==0" src="https://oss.familydaf.cn/sxsnfile/20251218/02bc40a1c47b40f1a36b55cd0553211c.png"></image>
						</view>
						<view class="list-pre-right">{{item.createDate||''}}</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
		<view class="empty adffcacjc" v-else>
			暂无善行少年报名<br>期待您的参与
		</view>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, onMounted, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const queryParams = ref({
		page:1,
		limit:10,
		activityId:'',
		signupState:1
	})
	const isOver = ref(false)
	const list = ref([])
	const recruitmentMax = ref('')
	const recruitmentMin = ref('')
	const ybmNum = ref(0)
	
	const scrolltolower = () => {
		if(isOver.value) return
		getList()
	}
	
	const getList = () => {
		proxy.$api.get('/core/activity/signup/getSignupList',queryParams.value).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			list.value = [...list.value,...res.data.list];
			list.value.forEach(l=>{
				l.createDate = new Date(l.createDate).Format('yyyy.MM.dd hh:mm:ss')
			})
			ybmNum.value = res.data.total;
			queryParams.value.page++;
			if(res.data.list.length===0) isOver.value = true
		})
	}
	
	onLoad((options)=>{
		recruitmentMax.value = +options.recruitmentMax??0;
		recruitmentMin.value = +options.recruitmentMin??0;
		queryParams.value.activityId = options?.activityId||'';
		getList()
	})
</script>

<style scoped lang="scss">
	.common_page{
		.box{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
		}
		
		.num{
			padding: 6rpx 24rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			&-pre{
				width: 50%;
				margin-top: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #676775;
				line-height: 42rpx;
				&.line{
					border-left: 1rpx solid #E5E0E0;
					padding-left: 40rpx;
					box-sizing: border-box;
				}
				text{
					font-weight: bold;
					color: #176892;
					margin-left: 24rpx;
				}
			}
		}
	
		.list{
			padding: 0 24rpx;
			flex: 1;
			overflow: auto;
			&-pre{
				padding: 32rpx 0;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #F2F2F2;
				&-left{
					image{
						width: 64rpx;
						height: 64rpx;
					}
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #252525;
						line-height: 42rpx;
						margin-left: 30rpx;
					}
					.sex{
						width: 44rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}
				&-right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #676775;
					line-height: 40rpx;
					text-align: right;
				}
			}
		}
	
		.empty{
			flex: 1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #252525;
			line-height: 42rpx;
			text-align: center;
		}
	}
</style>