SxsnWechat/pagesHome/activityDetail.vue

<template>
	<view class="common_page adffc" :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="lunbo">
			<up-swiper
				:list="imgList"
				@change="e => current = e.current"
				:autoplay="false"
				height="440rpx"
			>
				<template #indicator>
					<view class="indicator adf">
						<view class="indicator__dot" v-for="(item, index) in imgList" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</up-swiper>
		</div>
		<div class="box box1">
			<div class="box1-top">
				<text class="box1-top-status">{{'进行中'}}</text>
				<text class="box1-top-title">{{'《环保知识知多少》让孩子成为大自然的守护者！'}}</text>
			</div>
			<div class="box1-line" style="margin-top: 36rpx;"></div>
			<div class="box1-place adfacjb">
				<div class="box1-place-left adffcjb">
					<text>活动地点</text>
					<div class="addr">{{'深圳市南山区南山街道丰潭路'}}</div>
				</div>
				<div class="box1-place-right">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/239a8c29-499b-407b-a9b5-90447248d9ab.png"></image>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 24rpx;"></div>
			<div class="box1-member adfacjb">
				<div class="box1-member-left adffc">
					<text>招募人数</text>
					<div class="num"><text>{{35}}</text> /{{50}}</div>
				</div>
				<div class="box1-member-right adffc" @tap="handleReviewMembers">
					<div class="review adfac">
						<text>查看报名人员</text>
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/b7b7531b-33fa-4ec3-841b-796be9035191.png"></image>
					</div>
					<div class="avatars">
						<up-avatar-group :urls="avatars" size="30" gap="0.4" :maxCount="3"></up-avatar-group>
					</div>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 33rpx;"></div>
			<div class="box1-time adffc">
				<text>活动时间</text>
				<div class="text">{{'2025年06月01日 12:00'}} - {{'2025年06月15日12:00'}}</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-need adffc">
				<text>报名要求</text>
				<div class="text"><text>{{200}}</text>爱心值</div>
				<div class="tip">每{{200}}爱心值守护一条河流，让河流恢复往日的清澈模样</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-info adfacjb">
				<div class="box1-info-pre">
					<text>年龄限制</text>
					<div class="text">{{10}}岁以上</div>
				</div>
				<div class="box1-info-pre line">
					<text>可获得义工时长</text>
					<div class="hour"><text>{{2}}</text> 小时</div>
				</div>
			</div>
			<div class="box1-line" style="margin-top: 30rpx;"></div>
			<div class="box1-info adfacjb">
				<div class="box1-info-pre">
					<text>联系人</text>
					<div class="text">{{'周小瑾'}}/{{'13111987668'}}</div>
				</div>
				<div class="box1-info-pre line">
					<text>公益合作</text>
					<div class="text">{{'深圳善行少年基金会'}}</div>
				</div>
			</div>
		</div>
		<div class="box box2">
			<div class="box-title">活动详情</div>
			<div class="box2-detail">
				<up-read-more :toggle="true" showHeight="374rpx" color="#989998" fontSize="24rpx" openText="收起更多信息" closeText="展开更多信息">
				    <rich-text :nodes="detail"></rich-text>
				</up-read-more>
			</div>
		</div>
		<div class="bottom">
			<div class="time">
				报名时间：{{'2025年06月01日 12:00'}} - {{'2025年06月15日12:00'}} 
			</div>
			<div class="btns adfacjb">
				<div class="left adffcacjc" @tap="share=true">
					<up-icon name="share-square" color="#252525" size="48rpx"></up-icon>
					<text>分享</text>
				</div>
				<div class="right" @click="handleApply">立即报名</div>
			</div>
		</div>
		<div class="fail" v-if="fail">
			<div class="fbox adffcac">
				<image class="clock" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5fe8627b-adc4-4e24-8e86-45771d3ba5a2.png"></image>
				<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/3d94527a-da92-4d8b-9e99-44683c4f5c84.png" @click="fail=false"></image>
				<image class="alert" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/fdf05bfa-5593-4448-940e-437152bbbaf9.png" mode="widthFix"></image>
				<div class="texts adffcacjc">
					<div class="text">您当前爱心值不足，无法报名活动</div>
					<div class="tip">欢迎联系专属客服，了解更多公益活动，积攒爱心值</div>
				</div>
				<image class="down" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/c7d4983d-ca93-4833-8922-e010dd1d450a.png"></image>
				<div class="user adfac">
					<div class="user-left">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/20ff1438-01a9-454c-b62c-501ed47c39a6.png"></image>
					</div>
					<div class="user-right">
						<div class="name">陈婧航</div>
						<div class="memo">@深圳善行少年基金会</div>
					</div>
				</div>
				<div class="finfo adffcac">
					<div class="finfo-code adffcacjc">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/fbb4ac12-163e-48bd-9066-27b068078107.png"></image>
					</div>
					<div class="finfo-title">长按识别二维码</div>
					<div class="finfo-tip">添加您的专属公益向导</div>
					<div class="finfo-btn">了解善行少年</div>
					<div class="finfo-zblj" @click="fail=false">暂不了解</div>
				</div>
			</div>
		</div>
		<div class="share" v-if="share">
			<div class="sbox">
				<div class="sbox-title">分享给好友</div>
				<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="share=false"></image>
				<div class="sbox-items adfac">
					<div class="sbox-items-pre adffcac">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/a993c721-a4c7-4f5e-95cc-6451a50bfdce.png"></image>
						<text>分享页面</text>
					</div>
					<div class="sbox-items-pre adffcac">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/0c87d8a1-d7c5-466c-84aa-87ec5f163955.png"></image>
						<text>生成海报</text>
					</div>
					<div class="sbox-items-pre adffcac">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/732ac5fd-af58-44d8-9625-aaf96c24fed0.png"></image>
						<text>分享到朋友圈</text>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onShareAppMessage, onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue'
	
	const id = ref('')
	const imgList = ref(['https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5378bfeb-32f5-4325-aaef-5270e4a55a3a.png'])
	const detail = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？<br>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
	const avatars = ref([
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png',
		'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png'
	])
	const fail = ref(false)
	const share = ref(false)
	
	const handleReviewMembers = () => {
		uni.navigateTo({
			url:'/pagesHome/recruitsNumber'
		})
	}
	
	const handleApply = () => {
		uni.navigateTo({
			url:'/pagesHome/activityApply'
			// url:'/pagesHome/signSuccess'
			// url:'/pagesHome/fillNonprofitArchives'
		})
	}
	
	onLoad(options=>{
		id.value = options?.id;
	})
	
	onShareAppMessage(() => {
	  return {
	    title: '公益活动详情',
	    path: '/pagesHome/activityDetail?id='+id.value
	  };
	});
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 276rpx;
		
		.lunbo{
			width: 100%;
			height: 440rpx;
			margin-top: 20rpx;
			position: relative;
		}
		
		.box{
			background: linear-gradient(45deg,#FFFFFF 70%,#F2FFE8 100%);
			border-radius: 24rpx;
			padding: 36rpx 24rpx 30rpx;
			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{
			&-top{
				&-status{
					padding: 10rpx 20rpx;
					background: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/46184afd-e7cd-4ffa-b32f-7390f7a1decc.png') no-repeat;
					background-size: 100% 100%;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #151B29;
					line-height: 33rpx;
				}
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #151B29;
					line-height: 54rpx;
					margin-left: 10rpx;
				}
			}
			&-line{
				width: 100%;
				height: 1rpx;
				background: #E7E7E7;
			}
			&-place{
				&-left{
					width: calc(100% - 228rpx);
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.addr{
						width: 100%;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
				}
				&-right{
					width: 188rpx;
					height: 115rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			&-member{
				margin-top: 37rpx;
				&-left{
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.num{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #676775;
						line-height: 48rpx;
						margin-top: 25rpx;
						text{
							font-size: 36rpx;
							color: #151B29;
						}
					}
				}
				&-right{
					.review{
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #989998;
							line-height: 26rpx;
						}
						image{
							width: 28rpx;
							height: 28rpx;
							margin-left: 8rpx;
						}
					}
					.avatars{
						margin-top: 27rpx;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
			&-time{
				margin-top: 30rpx;
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989998;
					line-height: 26rpx;
				}
				.text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #151B29;
					line-height: 26rpx;
					margin-top: 24rpx;
				}
			}
			&-need{
				margin-top: 30rpx;
				&>text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #989998;
					line-height: 26rpx;
				}
				.text{
					margin-top: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #676775;
					line-height: 26rpx;
					text{
						font-weight: bold;
						font-size: 36rpx;
						color: #151B29;
					}
				}
				.tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #C9A771;
					line-height: 26rpx;
					margin-top: 20rpx;
				}
			}
			&-info{
				margin-top: 30rpx;
				&-pre{
					width: 50%;
					&.line{
						border-left: 1rpx solid #E7E7E7;
						padding-left: 24rpx;
						box-sizing: border-box;
					}
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #989998;
						line-height: 26rpx;
					}
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
					.hour{
						margin-top: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 26rpx;
						text{
							font-weight: bold;
							font-size: 36rpx;
							color: #151B29;
						}
					}
				}
			}
		}
		
		.box2{
			&-detail{
				margin-top: 40rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 256rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(178,178,178,0.1);
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx 24rpx 0;
			box-sizing: border-box;
			.time{
				padding: 19rpx 24rpx 12rpx;
				background: #F8F8F9;
				border-radius: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4B545C;
				line-height: 33rpx;
			}
			.btns{
				margin-top: 24rpx;
				.left{
					margin-left: 30rpx;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #151B29;
						line-height: 26rpx;
						margin-top: 17rpx;
					}
				}
				.right{
					width: 540rpx;
					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;
				}
			}
		}
	
		.fail{
			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;
			.fbox{
				background: #FFFFFF;
				background-image: url('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/e5ca0b95-ae33-4a93-8955-fe1d5e05ed2d.png');
				background-repeat: no-repeat;
				background-position: top left;
				background-size: 100% 399rpx;
				border-radius: 24rpx 24rpx 0 0;
				position: relative;
				padding: 40rpx 30rpx 123rpx;
				
				.clock{
					width: 219rpx;
					height: 143rpx;
					position: absolute;
					left: 51rpx;
					top: -37rpx;
				}
				.close{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 40rpx;
					right: 36rpx;
				}
				.alert{
					width: 212rpx;
				}
				.texts{
					width: 100%;
					margin-top: 69rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 1rpx dotted #979797;
					padding: 36rpx 0;
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #252525;
						line-height: 36rpx;
					}
					.tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #676775;
						line-height: 26rpx;
						margin-top: 24rpx;
					}
				}
				.down{
					width: 514rpx;
					height: 34rpx;
					margin-top: 20rpx;
				}
				.user{
					margin-top: 30rpx;
					width: 100%;
					padding-left: 50rpx;
					box-sizing: border-box;
					&-left{
						image{
							width: 98rpx;
							height: 98rpx;
						}
					}
					&-right{
						margin-left: 20rpx;
						.name{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #252525;
							line-height: 32rpx;
						}
						.memo{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #05A9FE;
							line-height: 24rpx;
							margin-top: 24rpx;
						}
					}
				}
				.finfo{
					width: 100%;
					margin-top: 36rpx;
					&-code{
						width: 310rpx;
						height: 310rpx;
						background: #FFFFFF;
						border: 3rpx solid #C5E3FE;
						image{
							width: 244rpx;
							height: 244rpx;
						}
					}
					&-title{
						margin-top: 24rpx;
						font-size: 28rpx;
						color: #252525;
						line-height: 40rpx;
					}
					&-tip{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #656775;
						line-height: 40rpx;
					}
					&-btn{
						width: calc(100% - 20rpx);
						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;
						margin-top: 48rpx;
					}
					&-zblj{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #989998;
						line-height: 40rpx;
						margin-top: 48rpx;
						padding-bottom: 5rpx;
						border-bottom: 1rpx solid #989998;
					}
				}
			}
		}
		
		.share{
			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;
			.sbox{
				position: relative;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 50rpx 30rpx 148rpx;
				&-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: 50rpx;
					right: 40rpx;
				}
				&-items{
					margin-top: 88rpx;
					&-pre{
						width: calc(100% / 3);
						image{
							width: 94rpx;
							height: 94rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #252525;
							line-height: 26rpx;
							text-align: center;
							margin-top: 24rpx;
						}
					}
				}
			}
		}
	}
</style>