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>
		<view class="lunbo">
			<up-swiper
				:list="imgList"
				@change="e => current = e.current"
				:autoplay="true"
				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>
		</view>
		<view class="box box1">
			<view class="box1-top">
				<text class="box1-top-status" :class="{'end':activityInfo?.activeState==3}">{{statusCfg[activityInfo?.activeState]||'未知'}}</text>
				<text class="box1-top-title">{{activityInfo?.activityName||''}}</text>
			</view>
			<view class="box1-line" style="margin-top: 36rpx;"></view>
			<view class="box1-place adfacjb">
				<view class="box1-place-left adffcjb">
					<text>活动地点</text>
					<view class="addr">{{activityInfo?.provinceName||''}}{{activityInfo?.cityName||''}}{{activityInfo?.address||''}}</view>
				</view>
				<view class="box1-place-right">
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/239a8c29-499b-407b-a9b5-90447248d9ab.png"></image>
				</view>
			</view>
			<view class="box1-line" style="margin-top: 24rpx;"></view>
			<view class="box1-member adfacjb">
				<view class="box1-member-left adffc">
					<text>招募人数</text>
					<view class="num"><text>{{activityInfo?.recruitmentNow}}</text> /{{activityInfo?.recruitmentMax||'不限'}}</view>
				</view>
				<view class="box1-member-right adffc" @tap="handleReviewMembers">
					<view class="review adfac">
						<text>查看报名人员</text>
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/b7b7531b-33fa-4ec3-841b-796be9035191.png"></image>
					</view>
					<view class="avatars">
						<up-avatar-group :urls="avatars" size="30" gap="0.4" :maxCount="3"></up-avatar-group>
					</view>
				</view>
			</view>
			<view class="box1-line" style="margin-top: 33rpx;"></view>
			<view class="box1-time adffc">
				<text>活动时间</text>
				<view class="text">{{activityInfo?.activityStartTime}} - {{activityInfo?.activityEndTime}}</view>
			</view>
			<view class="box1-line" style="margin-top: 30rpx;"></view>
			<view class="box1-need adffc">
				<text>报名要求</text>
				<template v-if="activityInfo?.activityLimit==1">
					<view class="text"><text>{{activityInfo?.valueLimit||0}}</text>爱心值</view>
					<view class="tip">{{activityInfo?.loveValueContent||''}}</view>
				</template>
				<template v-else-if="activityInfo?.activityLimit==2">
					<view class="text"><text>{{activityInfo?.valueLimit||0}}</text>张专享券</view>
					<view class="tip">{{activityInfo?.loveValueContent||''}}</view>
				</template>
				<template v-else-if="activityInfo?.activityLimit==3">
					<view class="text"><text>免费</text></view>
					<view class="tip"></view>
				</template>
			</view>
			<view class="box1-line" style="margin-top: 30rpx;"></view>
			<view class="box1-info adfacjb">
				<view class="box1-info-pre">
					<text>年龄限制</text>
					<view class="text" v-if="activityInfo?.userAgeMax">{{activityInfo?.userAgeMin}}岁 到 {{activityInfo?.userAgeMax}}岁</view>
					<view class="text" v-else>不限制</view>
				</view>
				<view class="box1-info-pre line">
					<text>可获得义工时长</text>
					<!-- typeId=='1977564860095348737'为义工活动，义工时长只有义工活动才有 -->
					<view class="hour" v-if="activityInfo?.typeId=='1977564860095348737'"><text>{{activityInfo?.serviceHours||0}}</text> 小时</view>
					<view class="hour" v-else>无</view>
				</view>
			</view>
			<view class="box1-line" style="margin-top: 30rpx;"></view>
			<view class="box1-info adfacjb">
				<view class="box1-info-pre">
					<text>联系人</text>
					<view class="text">{{activityInfo?.contact||''}}/{{activityInfo?.contactPhone||''}}</view>
				</view>
				<view class="box1-info-pre line">
					<text>公益合作</text>
					<view class="text">{{activityInfo?.channelName||''}}</view>
				</view>
			</view>
		</view>
		<view class="box box2">
			<view class="box-title">活动详情</view>
			<view class="box2-detail" v-if="activityInfo&&activityInfo.activityDetails">
				<up-read-more :toggle="true" showHeight="374rpx" color="#989998" fontSize="24rpx" openText="收起更多信息" closeText="展开更多信息">
				    <rich-text :nodes="activityInfo.activityDetails"></rich-text>
				</up-read-more>
			</view>
		</view>
		<view class="bottom">
			<view class="time">
				报名时间：{{activityInfo?.signupStartTime}} - {{activityInfo?.signupEndTime}} 
			</view>
			<view class="btns adfacjb">
				<view class="left adffcacjc" @tap="showShareOptions">
					<up-icon name="share-square" color="#252525" size="48rpx"></up-icon>
					<text>分享</text>
				</view>
				<view class="right" @click="handleApply" v-if="activityInfo?.activeState==1&&activityInfo?.signupState==0">立即报名</view>
				
				<view class="right" @click="handleCancel" v-else-if="activityInfo?.activeState==1&&activityInfo?.signupState==1">取消报名</view>
				<view class="right" @click="handleSignup" v-else-if="activityInfo?.activeState==2&&activityInfo?.signupState==1">我要签到</view>
				<view class="right" @click="handleFill" v-else-if="activityInfo?.activeState==3&&activityInfo?.signupState==1">填写公益档案</view>
				
				<view class="right end" v-else-if="activityInfo?.activeState==0">活动未开始</view>
				<view class="right end" v-else-if="activityInfo?.activeState==2&&activityInfo?.signupState==0">活动进行中不可报名</view>
				<view class="right end" v-else-if="activityInfo?.activeState==3">活动已结束</view>
				<view class="right end" v-else-if="activityInfo?.activeState==4">已报满暂无活动名额</view>
			</view>
		</view>
		<view class="fail" v-if="fail">
			<view 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>
				<view class="texts adffcacjc">
					<view class="text">您当前{{activityLimitCfg[activityInfo?.activityLimit]}}不足，无法报名活动</view>
					<view class="tip">欢迎联系专属客服，了解更多公益活动，积攒{{activityLimitCfg[activityInfo?.activityLimit]}}</view>
				</view>
				<image class="down" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/c7d4983d-ca93-4833-8922-e010dd1d450a.png"></image>
				<view class="user adfacjc">
				<!-- <view class="user adfac"> -->
					<!-- <view class="user-left">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/20ff1438-01a9-454c-b62c-501ed47c39a6.png"></image>
					</view>
					<view class="user-right">
						<view class="name">陈婧航</view>
						<view class="memo">@深圳善行少年基金会</view>
					</view> -->
					"善行少年"咨询微信
				</view>
				<view class="finfo adffcac">
					<view class="finfo-code adffcacjc">
						<!-- <image :src="imageUrl" @longpress="handleLongPress(imageUrl)"></image> -->
						<image :src="imageUrl" :show-menu-by-longpress="true"></image>
					</view>
					<view class="finfo-title">长按识别二维码</view>
					<view class="finfo-tip">添加您的专属公益向导</view>
					<view class="finfo-btn" @click="toWebView">了解善行少年</view>
					<view class="finfo-zblj" @click="fail=false">暂不了解</view>
				</view>
			</view>
		</view>
		<view class="share" v-if="share">
			<view class="sbox">
				<view class="sbox-title">分享给好友</view>
				<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="share=false"></image>
				<view class="sbox-items adfac">
					<view class="sbox-items-pre adffcac" @click="shareToFriend">
						<button class="share-btn" open-type="share">
							<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/a993c721-a4c7-4f5e-95cc-6451a50bfdce.png"></image>
							<text>分享页面</text>
						</button>
					</view>
					<view class="sbox-items-pre adffcac" @click="generatePoster">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/0c87d8a1-d7c5-466c-84aa-87ec5f163955.png"></image>
						<text>生成海报</text>
					</view>
					<view class="sbox-items-pre adffcac" @click="shareToTimeline">
						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/732ac5fd-af58-44d8-9625-aaf96c24fed0.png"></image>
						<text>分享到朋友圈</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 添加海报生成的canvas -->
		<canvas 
			canvas-id="posterCanvas" 
			:style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
			style="position: fixed; top: -9999px; left: -9999px;"
		></canvas>
		
		<!-- 海报预览弹窗 -->
		<view class="poster-preview" v-if="showPoster">
			<view class="poster-box">
				<view class="poster-header">
					<text>生成海报</text>
					<image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="showPoster=false"></image>
				</view>
				<view class="poster-content">
					<image :src="posterUrl" mode="widthFix" class="poster-img"></image>
				</view>
				<view class="poster-actions">
					<button class="save-btn" @click="savePoster">保存到相册</button>
					<button class="share-btn" @click="sharePoster">分享给好友</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app' 
	const { proxy } = getCurrentInstance()
	
	const id = ref('')
	const activityInfo = ref(null)
	const statusCfg = ref({
		0:'未开始',
		1:'报名中',
		4:'报名中',
		2:'进行中',
		3:'已结束'
	})
	const activityLimitCfg = ref({
		1:'爱心值',
		2:'专享券',
		3:'免费'
	})
	const imgList = ref([])
	const detail = ref('')
	const avatars = ref([])
	const fail = ref(false)
	const share = ref(false)
	const showPoster = ref(false)
	const posterUrl = ref('')
	const canvasWidth = ref(375)
	const canvasHeight = ref(667)
	const activityData = reactive({
		title: '《环保知识知多少》让孩子成为大自然的守护者！',
		time: '06.01-12:00 ~ 06.02-12:00',
		address: '深圳市南山区南山街道丰潭路',
		organizer: '锦鲤俱乐部'
	})
	const imageUrl = ref('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/fbb4ac12-163e-48bd-9066-27b068078107.png')
	
	const handleReviewMembers = () => {
		uni.navigateTo({
			url:'/pagesHome/recruitsNumber?activityId='+activityInfo.value?.id+'&recruitmentMax='+activityInfo.value?.recruitmentMax+'&recruitmentMin='+activityInfo.value?.recruitmentMin
		})
	}
	
	//立即报名
	const handleApply = async () => {
		let { loveValue, couponIds } = await getUserLoveTicket();
		let url = `/pagesHome/activityApply?activity=${encodeURIComponent(JSON.stringify(activityInfo.value))}`;
		
		if((activityInfo.value?.activityLimit==1&&loveValue<activityInfo?.value.valueLimit)
		||(activityInfo.value?.activityLimit==2&&couponIds?.length<activityInfo?.value.valueLimit)){
			fail.value = true;
			return 
		}
		uni.navigateTo({ url })
	}
	//取消报名
	const handleCancel = () => {
		uni.reLaunch({
			url:'/pages/nonprofit?type=1'
		})
		// uni.showModal({
		// 	title:'温馨提示',
		// 	content:'确认取消本次报名吗？取消后可再次报名本活动。',
		// 	success: (res) => {
		// 		if(res.confirm){
		// 			proxy.$api.get(`/core/activity/signup/cancelSignup/${activityInfo.value?.signupId||''}`).then(({data:res})=>{
		// 				if(res.code!==0) return proxy.$showToast(res.msg)
		// 				getActivityDetail(id.value)
		// 				proxy.$showToast('取消报名成功')
		// 			})
		// 		}
		// 	}
		// })
	}
	//我要签到
	const handleSignup = () => {
		uni.reLaunch({
			url:'/pages/nonprofit?type=2'
		})
	}
	//填写公益档案
	const handleFill = () => {
		uni.reLaunch({
			url:'/pages/nonprofit?type=3'
		})
	}
	
	const getUserLoveTicket = () => {
		return new Promise(resolve=>{
			let userId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
			proxy.$api.get(`/core/activity/signup/userAsset/${userId}/${activityInfo.value?.id}`).then(({data:res})=>{
				if(res.code!==0) return proxy.$showToast(res.msg)
				resolve({loveValue:res.data?.loveValue||0,couponIds:res.data?.couponIds||0})
			})
		}) 
	}
	
	onShareAppMessage((res) => {
		const sharerId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
		return {
		  title: activityInfo.value?.activityName || '发现一个好物，分享给你！',
		  path: `/pagesHome/activityDetail?shareADId=${activityInfo.value?.id}&shareUserId=${sharerId}`,
		  imageUrl: activityInfo.value?.coverFile
		};
	})
	
	onShareTimeline((res) => {
		const sharerId = JSON.parse(uni.getStorageSync('userInfo'))?.id;
		return {
		  title: activityInfo.value?.activityName || '发现一个好物，分享给你！',
		  query: `shareADId=${activityInfo.value?.id}&shareUserId=${sharerId}`,
		  imageUrl: activityInfo.value?.coverFile
		};
	})
	
	const showShareOptions = () => {
		share.value = true;
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline'] // 显示分享给朋友和分享到朋友圈
		}).then(res => {
			console.log('显示分享菜单成功', res);
		}).catch(err => {
			console.error('显示分享菜单失败', err);
		});
	}
	
	// 分享到朋友圈
	const shareToTimeline = () => {
		uni.showModal({
			title:'温馨提示',
			content:'分享到朋友圈请点击页面右上方的“···”标志后选择“分享到朋友圈”进行分享'
		})
	}
	
	// 生成海报
	const generatePoster = async () => {
		share.value = false
		uni.showLoading({
			title: '正在生成海报...'
		})
		
		try {
			await createPoster()
			uni.hideLoading()
			showPoster.value = true
		} catch (error) {
			uni.hideLoading()
			uni.showToast({
				title: '海报生成失败',
				icon: 'none'
			})
		}
	}
	
	// 创建海报
	const createPoster = () => {
		return new Promise((resolve, reject) => {
			const ctx = uni.createCanvasContext('posterCanvas')
			
			// 设置画布尺寸
			const width = canvasWidth.value
			const height = canvasHeight.value
			
			// 绘制背景
			const gradient = ctx.createLinearGradient(0, 0, 0, height)
			gradient.addColorStop(0, '#87CEEB')
			gradient.addColorStop(1, '#98FB98')
			ctx.fillStyle = gradient
			ctx.fillRect(0, 0, width, height)
			
			// 加载并绘制背景图片（山峰）
			const bgImg = 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/5378bfeb-32f5-4325-aaef-5270e4a55a3a.png'
			
			uni.getImageInfo({
				src: bgImg,
				success: (res) => {
					// 绘制背景图
					ctx.drawImage(res.path, 0, 0, width, height * 0.6)
					
					// 绘制绿色标签
					ctx.fillStyle = '#B7F358'
					ctx.fillRect(20, 30, 120, 30)
					
					// 绘制标签文字
					ctx.fillStyle = '#000000'
					ctx.font = 'bold 14px PingFang-SC'
					ctx.fillText('节能低碳小妙招', 30, 50)
					
					// 绘制主标题
					ctx.fillStyle = '#FFFFFF'
					ctx.font = 'bold 24px PingFang-SC'
					ctx.fillText('环保知识', 50, 120)
					ctx.fillText('知多少', 50, 150)
					
					// 绘制白色信息区域背景
					ctx.fillStyle = '#FFFFFF'
					ctx.fillRect(20, height * 0.6 + 20, width - 40, height * 0.35)
					
					// 绘制活动信息
					ctx.fillStyle = '#000000'
					ctx.font = '16px PingFang-SC'
					const startY = height * 0.6 + 50
					
					// 活动标题
					ctx.font = 'bold 16px PingFang-SC'
					ctx.fillText(activityData.title.substring(0, 20), 30, startY)
					if (activityData.title.length > 20) {
						ctx.fillText(activityData.title.substring(20), 30, startY + 25)
					}
					
					// 时间图标和文字
					ctx.font = '14px PingFang-SC'
					ctx.fillStyle = '#666666'
					ctx.fillText('🕐', 30, startY + 60)
					ctx.fillText(activityData.time, 50, startY + 60)
					
					// 地址图标和文字
					ctx.fillText('📍', 30, startY + 85)
					ctx.fillText(activityData.address, 50, startY + 85)
					
					// 组织方
					ctx.fillText('👥', 30, startY + 110)
					ctx.fillText(activityData.organizer, 50, startY + 110)
					
					// 绘制小程序码区域
					ctx.fillStyle = '#F5F5F5'
					ctx.fillRect(width - 120, height - 140, 100, 100)
					
					ctx.fillStyle = '#000000'
					ctx.font = '12px PingFang-SC'
					ctx.fillText('微信扫一扫', width - 110, height - 25)
					
					// 执行绘制
					ctx.draw(false, () => {
						// 导出图片
						uni.canvasToTempFilePath({
							canvasId: 'posterCanvas',
							width: width,
							height: height,
							destWidth: width * 2,
							destHeight: height * 2,
							success: (res) => {
								posterUrl.value = res.tempFilePath
								resolve(res.tempFilePath)
							},
							fail: reject
						})
					})
				},
				fail: () => {
					// 如果图片加载失败，绘制纯色背景
					drawSimplePoster(ctx, width, height, resolve, reject)
				}
			})
		})
	}
	
	// 绘制简单海报（备用方案）
	const drawSimplePoster = (ctx, width, height, resolve, reject) => {
		// 绘制渐变背景
		const gradient = ctx.createLinearGradient(0, 0, 0, height)
		gradient.addColorStop(0, '#87CEEB')
		gradient.addColorStop(1, '#98FB98')
		ctx.fillStyle = gradient
		ctx.fillRect(0, 0, width, height)
		
		// 绘制白色内容区域
		ctx.fillStyle = '#FFFFFF'
		ctx.fillRect(20, 100, width - 40, height - 200)
		
		// 绘制标题
		ctx.fillStyle = '#000000'
		ctx.font = 'bold 20px PingFang-SC'
		ctx.fillText('公益活动邀请', width / 2 - 70, 150)
		
		// 绘制活动信息
		ctx.font = '16px PingFang-SC'
		ctx.fillText(activityData.title.substring(0, 15), 30, 200)
		if (activityData.title.length > 15) {
			ctx.fillText(activityData.title.substring(15), 30, 225)
		}
		
		ctx.font = '14px PingFang-SC'
		ctx.fillStyle = '#666666'
		ctx.fillText('活动时间：' + activityData.time, 30, 270)
		ctx.fillText('活动地点：' + activityData.address.substring(0, 12), 30, 295)
		
		ctx.draw(false, () => {
			uni.canvasToTempFilePath({
				canvasId: 'posterCanvas',
				width: width,
				height: height,
				destWidth: width * 2,
				destHeight: height * 2,
				success: (res) => {
					posterUrl.value = res.tempFilePath
					resolve(res.tempFilePath)
				},
				fail: reject
			})
		})
	}
	
	// 保存海报到相册
	const savePoster = () => {
		uni.saveImageToPhotosAlbum({
			filePath: posterUrl.value,
			success: () => {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				showPoster.value = false
			},
			fail: (err) => {
				if (err.errMsg.includes('auth deny')) {
					uni.showModal({
						title: '提示',
						content: '需要您授权保存图片到相册',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting()
							}
						}
					})
				} else {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			}
		})
	}
	
	// 分享海报给好友
	const sharePoster = () => {
		// 这里可以实现分享海报的逻辑
		uni.showToast({
			title: '请保存后手动分享',
			icon: 'none'
		})
	}
	
	const handleLongPress = (url) => {
		uni.previewImage({
			urls: [url],
			current: url,
		
			// 在小程序中，可以设置 longPressActions 来自定义长按菜单
			// 但注意：这个自定义菜单会覆盖掉“识别二维码”等原生功能
			// 所以我们不设置这个参数，以保留微信原生的预览页长按菜单
			/*
			longPressActions: {
			  itemList: ['发送给朋友', '保存图片', '收藏'],
			  success: function(data) {
				console.log('选中了第' + (data.tapIndex + 1) + '个按钮, 内容是' + data.item);
			  },
			  fail: function(err) {
				console.log(err.errMsg);
			  }
			}
			*/
		})	
	}
	
	const toWebView = () => {
		uni.navigateTo({
			url:'/pages/webView?src=https://mp.weixin.qq.com/s/-oQlSBucYU_ifgd1j6eL3A?scene=1&click_id=2'
		})
	}
	  
	const getActivityDetail = (id) => {
		proxy.$api.get(`/core/activity/${id}`).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			activityInfo.value = res.data;
			if(activityInfo.value.signupState==0
			&&activityInfo.value.activeState===1
			&&activityInfo.value.recruitmentNow==(activityInfo.value.recruitmentMax||99999)){
				activityInfo.value.activeState = 4;//已报满暂无活动名额
			}
			imgList.value = activityInfo.value?.imageFiles&&(activityInfo.value?.imageFiles.split(',')||[])
			for(let i=0;i<activityInfo.value.recruitmentNow;i++){
				avatars.value.push('https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/565ca09a-88e2-4c2c-a89e-98bd51fbea7f.png')
			}
		})
	}
	
	onLoad(options=>{
		id.value = options?.id||options?.shareADId||'';
		if(id.value) {
			getActivityDetail(id.value)
		}
	})
</script>

<style scoped lang="scss">
	.share-btn {
		background-color: transparent;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&::after {
			border: none;
		}
	}

	.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;
					&.end{
						background: linear-gradient( 270deg, #FD8A8A 0%, #FE6161 100%);
						border-radius: 16px 4px 16px 4px;
						color: #FFFFFF;
					}
				}
				&-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;
					&.end{
						background: #F7F7F7;
					}
				}
			}
		}
	
		.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{
					width: 100%;
					// margin-top: 30rpx;
					// padding-left: 50rpx;
					margin-top: 50rpx;
					box-sizing: border-box;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 32rpx;
					&-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;
						}
					}
				}
			}
		}
	
		.poster-preview {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.8);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			z-index: 9999;
			
			.poster-box {
				width: 80%;
				max-width: 600rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				overflow: hidden;
				
				.poster-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					border-bottom: 1rpx solid #E7E7E7;
					
					text {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #151B29;
					}
					
					.close {
						width: 40rpx;
						height: 40rpx;
					}
				}
				
				.poster-content {
					padding: 30rpx;
					display: flex;
					justify-content: center;
					
					.poster-img {
						width: 100%;
						border-radius: 12rpx;
					}
				}
				
				.poster-actions {
					display: flex;
					padding: 0 30rpx 30rpx;
					gap: 20rpx;
					
					button {
						flex: 1;
						height: 80rpx;
						border-radius: 40rpx;
						border: none;
						font-size: 28rpx;
						font-weight: bold;
					}
					
					.save-btn {
						background: #F5F5F5;
						color: #151B29;
					}
					
					.share-btn {
						background: #B7F358;
						color: #151B29;
					}
				}
			}
		}
	}
</style>