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">
			<view class="list-pre adfacjb" v-for="(item,index) in list" :key="index">
				<view class="list-pre-left adfac">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/a56db26d-4149-4f6a-8272-2c3d4af0a6a8.png"></image>
					<text>{{item.name||''}}</text>
				</view>
				<view class="list-pre-right">{{item.createDate||''}}</view>
			</view>
		</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 list = ref([])
	const recruitmentMax = ref('')
	const recruitmentMin = ref('')
	const ybmNum = ref(0)
	
	const getList = (activityId) => {
		proxy.$api.get('/core/activity/signup/getSignupList',{page:1,limit:-1,activityId}).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			list.value = res.data.list;
			ybmNum.value = list.value.filter(l=>l.signupState==1).length||0;
		})
	}
	
	onLoad((options)=>{
		recruitmentMax.value = +options.recruitmentMax??0;
		recruitmentMin.value = +options.recruitmentMin??0;
		getList(options?.activityId)
	})
</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;
					}
				}
				&-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>