SxsnWechat/pagesNonprofit/nonprofitDetail.vue

<template>
	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="公益活动详情" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
		<div class="top">
			<div class="top-status adfacjb">
				<div class="left">{{signupStateDict[info?.signupState]||'未知'}}</div>
				<div class="right" v-if="info?.activityLimit==1"><span>{{info?.valueLimit||0}}</span>爱心值</div>
				<div class="right" v-else-if="info?.activityLimit==2"><span>{{info?.valueLimit||0}}</span>张专享券</div>
				<div class="right" v-else-if="info?.activityLimit==3"><span>免费</span></div>
			</div>
			<div class="top-no">善行少年编号：{{info?.uniqueNo||''}}</div>
		</div>
		<div class="box box1 adf" style="margin-top: 30rpx;">
			<div class="box1-left">
				<image :src="info?.coverFile||''"></image>
			</div>
			<div class="box1-right">
				<div class="title">{{info?.activityName||''}}</div>
				<div class="memo">{{info?.loveValueContent||''}}</div>
			</div>
		</div>
		<div class="box box2">
			<div class="box-title">活动信息</div>
			<div class="box2-item adf">
				<div class="left">报名时间</div>
				<div class="right">{{info?.signupStartTime||''}} ～ {{info?.signupEndTime||''}}</div>
			</div>
			<div class="box2-item adf">
				<div class="left">活动时间</div>
				<div class="right">{{info?.activityStartTime||''}} ～ {{info?.activityEndTime||''}}</div>
			</div>
			<div class="box2-item adf">
				<div class="left">活动地点</div>
				<div class="right">{{info?.provinceName||''}}{{info?.cityName||''}}</div>
			</div>
			<div class="box2-item adf">
				<div class="left">招募人数</div>
				<div class="right">{{info?.recruitmentNow||0}}/{{info?.recruitmentMax||'无限制'}}</div>
			</div>
			<div class="box2-item adf">
				<div class="left">联系人</div>
				<div class="right">{{info?.activityContact||''}}/{{info?.activityContactPhone||''}}</div>
			</div>
			<div class="box2-item adf">
				<div class="left">公益支持</div>
				<div class="right">{{info?.channelName||''}}</div>
			</div>
		</div>
		<div class="box box3">
			<div class="box-title">报名信息</div>
			<div class="box3-list">
				<div class="box3-list-item adfacjb">
					<div class="left">
						<div class="top adfac">
							<div class="name">{{info?.memberName||''}}</div>
							<image class="sex" v-if="info?.gender==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b6d1fcb3-55ba-4104-b8cd-756b963a4da8.png"></image>
							<image class="sex" v-else-if="info?.gender==0" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a1899fd0-c468-48d9-b554-2f17b75a4157.png"></image>
							<div class="age" :class="{'women':info?.gender==1,'man':info?.gender==0}">{{info?.age}}岁</div>
						</div>
						<div class="left-bottom">身份证 {{info?.idCardCopy}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="user">
			<div class="user-pre adfacjb">
				<div class="user-pre-left">联系人姓名</div>
				<div class="user-pre-right">{{info?.contact||''}}</div>
			</div>
			<div class="user-pre adfacjb">
				<div class="user-pre-left">联系人电话</div>
				<div class="user-pre-right">{{info?.contactPhone||''}}</div>
			</div>
		</div>
		<div class="bottom adfacjb">
			<div class="right" @click="handleCancel" v-if="info?.activeState==1&&info?.signupState==1">取消报名</div>
			<div class="right" @click="handleSignup" v-if="info?.activeState==1&&info?.signupState==-1">立即报名</div>
			<div class="right" v-if="info?.activeState==2&&info?.signupState==1">去签到</div>
			<div class="right" v-if="info?.activeState==3&&info?.signupState==2">写档案</div>
			<div class="right" v-if="info?.activeState==3&&info?.signupState==3">查看档案</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance()
	
	const info = ref(null)
	const memberSignupId = ref('')
	const signupStateDict = ref({
		'-1':'已取消',
		1:'已报名',
		2:'已签到',
		3:'已填档案'
	})

	const getUserActivityDetail = () => {
		proxy.$api.get(`/core/activity/signup/myActivityInfo/${memberSignupId.value}`).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			info.value = res.data;
			info.value.age = getAge(info.value.idCard);
			info.value.idCardCopy = info.value.idCard.replace(/^(\d{6})(\d{8})(\d{3}[\dX])$/i,'$1********$3');
		})
	}
	
	const isValid = (idCard) => {
		// 正则表达式校验18位身份证号码（最后一位可以是数字或X/x）
		const regex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
		return typeof idCard === 'string' && regex.test(idCard);
	  }
	
	const getAge = (idCard) => {
		if (!isValid(idCard)) return 0
	
		// 从身份证的第7位开始，截取8位作为出生日期字符串 (YYYYMMDD)
		const birthDateStr = idCard.substring(6, 14);
		const birthYear = parseInt(birthDateStr.substring(0, 4), 10);
		const birthMonth = parseInt(birthDateStr.substring(4, 6), 10);
		const birthDay = parseInt(birthDateStr.substring(6, 8), 10);
	
		const today = new Date();
		const currentYear = today.getFullYear();
		const currentMonth = today.getMonth() + 1; // getMonth() 返回 0-11
		const currentDay = today.getDate();
	
		// 计算周岁
		let age = currentYear - birthYear;
	
		// 如果当前月份小于出生月份，或者月份相同但日期小于出生日期，说明今年的生日还没过
		if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
		  age--;
		}
	
		return age < 0 ? 0 : age; 
	}
	
	const handleCancel = () => {
		uni.showModal({
			title:'温馨提示',
			content:'确认取消本次报名吗？取消后可再次报名本活动。',
			success: (res) => {
				if(res.confirm){
					proxy.$api.get(`/core/activity/signup/cancelSignupBySingle/${memberSignupId.value}`).then(({data:res})=>{
						if(res.code!==0) return proxy.$showToast(res.msg)
						getUserActivityDetail()
						proxy.$showToast('取消报名成功')
					})
				}
			}
		})
	}
	
	const handleSignup = () => {
		proxy.$api.post(`/core/activity/signup/signupBySingle`,{
			couponId:'',
			memberSignupId:memberSignupId.value,
			userId:JSON.parse(uni.getStorageSync('userInfo')).id
		}).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			getUserActivityDetail()
			proxy.$showToast('报名成功')
		})
	}

	onLoad((options)=>{
		memberSignupId.value = options?.memberSignupId;
		getUserActivityDetail()
	})
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 211rpx;
		box-sizing: border-box;
		
		.top{
			position: relative;
			margin-top: 39rpx;
			&-status{
				.left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #252525;
					line-height: 48rpx;
				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #676775;
					line-height: 24rpx;	
					label{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #252525;
						line-height: 48rpx;
						margin-right: 6rpx;
					}
				}
			}
			&-no{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #676775;
				line-height: 28rpx;
				margin-top: 30rpx;
			}
		}
	
		.box{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 36rpx 24rpx;
			margin-top: 20rpx;
			position: relative;
			&-title{
				width: 170rpx;
				height: 44rpx;
				padding-left: 2rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #151B29;
				line-height: 36rpx;
				background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/6ec1f999-fcbb-4a0b-a1a5-d0b5e1374bb1.png');
				background-size: 170rpx 31rpx;
				background-position: 0 20rpx;
				background-repeat: no-repeat;
			}
		}
		
		.box1{
			&-left{
				width: 158rpx;
				height: 214rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-right{
				width: calc(100% - 158rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				.title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #151B29;
					line-height: 40rpx;
				}
				.memo{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #C9A771;
					line-height: 37rpx;
					margin-top: 27rpx;
				}
			}
		}
	
		.box2{
			&-item{
				margin-top: 40rpx;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #676775;
					line-height: 28rpx;
					width: 120rpx;
				}
				.right{
					width: calc(100% - 120rpx);
					padding-left: 20rpx;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #252525;
					line-height: 28rpx;
					text-align: right;
				}
			}
		}
	
		.box3{
			&-list{
				margin-top: 15rpx;
				&-item{
					margin-top: 25rpx;
					.left{
						.top{
							.name{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #151B29;
								line-height: 32rpx;
							}
							.sex{
								width: 44rpx;
								height: 32rpx;
								margin-left: 10rpx;
							}
							.age{
								border-radius: 13rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								line-height: 24rpx;
								padding: 4rpx 10rpx;
								margin-left: 13rpx;
								&.women{
									background: rgba(244,101,122,0.14);
									color: #F4657A;
								}
								&.man{
									background: rgba(5,169,254,0.12);
									color: #05A9FE;
								}
							}
						}
						&-bottom{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #989998;
							line-height: 24rpx;
							margin-top: 24rpx;
						}
					}
					.right{
						image{
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
		}
	
		.box4{
			&-detail{
				margin-top: 40rpx;
			}
		}
		
		.user{
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			&-pre{
				padding: 40rpx 24rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECEEF5;
				&-left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #676775;
					line-height: 30rpx;
				}
				&-right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #252525;
					line-height: 30rpx;
					text-align: right;
				}
			}
		}
	
		.bottom{
			width: 100%;
			height: 191rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(178,178,178,0.1);
			padding: 0 30rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			.left{
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #151B29;
					line-height: 26rpx;
					margin-top: 17rpx;
				}
			}
			.right{
				width: 100%;
				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;
			}
		}
	
		.dialog{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.4);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.dbox{
				position: relative;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 40rpx 0 64rpx;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #151B29;
					line-height: 36rpx;
					text-align: center;
				}
				.close{
					width: 27rpx;
					height: 27rpx;
					position: absolute;
					top: 40rpx;
					right: 30rpx;
				}
				&-select{
					margin-top: 57rpx;
					padding: 27rpx 30rpx;
					background: #F7F7F7;
					&-left{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #151B29;
						line-height: 36rpx;
					}
					&-right{
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #151B29;
							line-height: 36rpx;
						}
						image{
							width: 36rpx;
							height: 36rpx;
							margin-left: 10rpx;
						}
					}
				}
				&-list{
					padding: 0 30rpx;
					height: 820rpx;
					overflow-y: auto;
					&-item{
						padding: 36rpx 0;
						box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E5E7EB;
						&-left{
							&-top{
								.name{
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									font-size: 32rpx;
									color: #151B29;
									line-height: 32rpx;
								}
								.sex{
									width: 44rpx;
									height: 32rpx;
									margin-left: 20rpx;
								}
								.age{
									border-radius: 13rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 20rpx;
									line-height: 24rpx;
									padding: 4rpx 10rpx;
									margin-left: 13rpx;
									&.women{
										background: rgba(244,101,122,0.14);
										color: #F4657A;
									}
									&.man{
										background: rgba(5,169,254,0.12);
										color: #05A9FE;
									}
								}
							}
							&-bottom{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #989998;
								line-height: 24rpx;
								margin-top: 18rpx;
							}
						}
						&-right{
							image{
								width: 36rpx;
								height: 36rpx;
							}
						}
					}
				}
				&-btn{
					margin: 43rpx 40rpx 0;
					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;
				}
			}
		}
	}
</style>