SxsnWechat/pagesHome/applyMemberVindicate.vue

<template>
	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header :title="title" bgColor="#FFFFFF"></cus-header>
		<div class="form">
			<div class="title">报名人员信息</div>
			<div class="pre adfac" style="margin-top: 40rpx;">
				<div class="pre-title"><span>*</span>人员类型</div>
				<div class="pre-content adfac">
					<div class="pre-content-box adfac" @tap="changeMember(1,'type')">
						<image v-if="memberInfo.type==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/9efae012-a9fd-4a0d-9e14-7ec90001e712.png"></image>
						<image v-else src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/5ae64305-d1e0-4ffe-8dc0-f9d3704ac370.png"></image>
						<text>成人</text>
					</div>
					<div class="pre-content-box adfac" @tap="changeMember(2,'type')">
						<image v-if="memberInfo.type==2" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/9efae012-a9fd-4a0d-9e14-7ec90001e712.png"></image>
						<image v-else src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/5ae64305-d1e0-4ffe-8dc0-f9d3704ac370.png"></image>
						<text>学生</text>
					</div>
				</div>
			</div>
			<div class="pre adfac">
				<div class="pre-title"><span>*</span>姓名</div>
				<div class="pre-content">
					<up-input v-model="memberInfo.name" border="none" style="font-size: 30rpx;color: #252525;" placeholder="请输入姓名"></up-input>
				</div>
			</div>
			<div class="pre adfac">
				<div class="pre-title"><span>*</span>身份证</div>
				<div class="pre-content">
					<up-input v-model="memberInfo.idcard" border="none" style="font-size: 30rpx;color: #252525;" placeholder="请输入身份证"></up-input>
				</div>
			</div>
			<div class="pre adfac">
				<div class="pre-title"><span style="color: #FFFFFF;">*</span>义工号</div>
				<div class="pre-content">
					<up-input v-model="memberInfo.workNo" border="none" style="font-size: 30rpx;color: #252525;" placeholder="请输入义工号"></up-input>
				</div>
			</div>
			<div class="pre adfac">
				<div class="pre-title"><span>*</span>性别</div>
				<div class="pre-content adfac">
					<div class="pre-content-box adfac" @tap="changeMember(1,'sex')">
						<image v-if="memberInfo.sex==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/9efae012-a9fd-4a0d-9e14-7ec90001e712.png"></image>
						<image v-else src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/5ae64305-d1e0-4ffe-8dc0-f9d3704ac370.png"></image>
						<text>男</text>
					</div>
					<div class="pre-content-box adfac" @tap="changeMember(2,'sex')">
						<image v-if="memberInfo.sex==2" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/9efae012-a9fd-4a0d-9e14-7ec90001e712.png"></image>
						<image v-else src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/09/5ae64305-d1e0-4ffe-8dc0-f9d3704ac370.png"></image>
						<text>女</text>
					</div>
				</div>
			</div>
			<div class="pre adfac" v-if="memberInfo.type==2">
				<div class="pre-title"><span>*</span>就读学校</div>
				<div class="pre-content">
					<up-input v-model="memberInfo.school" border="none" style="font-size: 30rpx;color: #252525;" placeholder="请输入就读学校"></up-input>
				</div>
			</div>
		</div>
		<div class="btn" @tap="handleSave">保存</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const title = ref('添加报名人员')
	const memberInfo = ref({
		type:1,
		name:'',
		idcard:'',
		workNo:'',
		sex:1,
		school:''
	})
	
	const changeMember = (value,key) => {
		memberInfo.value[key] = value;
	}
	
	const handleSave = () => {
		if(!memberInfo.value.type) return proxy.$showToast('请选择人员类型')
		if(!memberInfo.value.name) return proxy.$showToast('请输入姓名')
		if(!proxy.$reg.idCard(memberInfo.value.idcard)) return proxy.$showToast('请输入正确的身份证号')
		if(!memberInfo.value.sex) return proxy.$showToast('请选择性别')
		if(!memberInfo.value.school&&memberInfo.value.type==2) return proxy.$showToast('请输入就读学校')
		console.log(memberInfo.value);
	}
	
	onLoad((options)=>{
		if (options.member) {
			try {
				const memberObject = JSON.parse(decodeURIComponent(options.member));
				console.log('成功解析的 member 对象:', memberObject);
				if(memberObject) title.value = '编辑报名人员';
			} catch (e) {
				console.error('解析 member 参数失败:', e);
			}
		} else {
			console.warn('未在URL中找到 member 参数');
		}
	})
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 184rpx;
		
		.form{
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 36rpx 24rpx 0;
			
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #151B29;
				line-height: 48rpx;
			}
		
			.pre{
				padding: 25rpx 0;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #F2F2F2;
				&-title{
					width: 209rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #676775;
					line-height: 40rpx;
					label{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #F4657A;
						line-height: 42rpx;
						margin-right: 4rpx;
					}
				}
				&-content{
					width: calc(100% - 209rpx);
					&-box{
						width: 184rpx;
						image{
							width: 28rpx;
							height: 28rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #252525;
							line-height: 42rpx;
							margin-left: 16rpx;
						}
					}
				}
			}
		}
		
		.btn{
			width: calc(100% - 80rpx);
			height: 90rpx;
			background: #B7F358;
			border-radius: 45rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #151B29;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: 2rpx;
			position: fixed;
			left: 40rpx;
			bottom: 64rpx;
		}
	}
</style>