海报静态页画写

pagesHome/activityDetail.vue

@@ -163,7 +163,7 @@
 				<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">
+					<view class="sbox-items-pre adffcac">
 						<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>
@@ -181,28 +181,42 @@
 			</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 class="posterbox adffcacjc" v-if="posterShow">
+			<div class="posterbox-card adffcac">
+				<div class="posterbox-card-img">
+					<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/e8218de1-d059-4197-b677-f9d2e446971e.png"></image>
+				</div>
+				<div class="posterbox-card-info adfacjb">
+					<div class="posterbox-card-info-left">
+						<div class="posterbox-card-info-left-title">{{'《环保知识知多少》让孩子成为健康公益大使'}}</div>
+						<div class="posterbox-card-info-left-p adf" style="margin-top: 12rpx;">
+							<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/7ae66915-7988-4827-86fa-991c1a850e24.png"></image>
+							<text>{{'06.01-12:00 ~ 06.02-12:00'}}</text>
+						</div>
+						<div class="posterbox-card-info-left-p adf">
+							<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/11/e9025f86-a59e-4f82-92f0-9d22e846193c.png"></image>
+							<text>{{'深圳市南山区南山街道丰潭路'}}</text>
+						</div>
+						<div class="posterbox-card-info-left-name adfac">
+							<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/5a43c6f6-32c7-42a1-be09-3fe13575be10.png"></image>
+							<text>锦鲤俱乐部</text>
+						</div>
+					</div>
+					<div class="posterbox-card-info-right adffcac">
+						<image src="https://sxsn.ringzle.com/happytree-admin/profile/2025/12/12/7e272eb5-272f-4ec2-909c-cb4582ee9124.jpg"></image>
+						<text>微信扫一扫</text>
+					</div>
+				</div>
+			</div>
+			<div class="posterbox-menu adfacjb">
+				<div class="posterbox-menu-pre adffcac" v-for="(item,index) in menuList" :key="index">
+					<image :src="item.img"></image>
+					<text>{{item.title}}</text>
+				</div>
+			</div>
+			<div class="posterbox-close adfacjc">
+				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/c1050d39-c090-49e5-974c-40da9d08648c.png" @click="posterShow=false"></image>
+			</div>
 		</view>
 	</view>
 </template>
@@ -244,6 +258,13 @@
 		organizer: '锦鲤俱乐部'
 	})
 	const imageUrl = ref('https://transcend.ringzle.com/xiaozhi-app/profile/2025/11/21/50ac5bc4-8f92-46a5-81d5-60908b84e9f0.png')
+	const posterShow = ref(false)
+	const menuList = ref([
+		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/37642ab3-3085-4730-875a-435a4ffef73f.png',title:'发送给朋友' },
+		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/f09f3499-a578-4638-bd75-b997161689b8.png',title:'分享到朋友圈' },
+		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/6f18c1c5-323b-4476-98fd-e0c428790c3b.png',title:'收藏' },
+		{ img:'https://transcend.ringzle.com/xiaozhi-app/profile/2025/12/10/a34f93bc-d787-4d82-973d-c498ea306808.png',title:'保存图片' },
+	])
 	
 	const handleReviewMembers = () => {
 		uni.navigateTo({
@@ -345,235 +366,8 @@
 	
 	// 生成海报
 	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);
-			  }
-			}
-			*/
-		})	
+		share.value = false;
+		posterShow.value = true;
 	}
 	
 	const toWebView = () => {
@@ -1113,82 +907,118 @@
 			}
 		}
 	
-		.poster-preview {
+		.posterbox{
 			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;
+			background: rgba(0,0,0,0.7);
 			
-			.poster-box {
-				width: 80%;
-				max-width: 600rpx;
+			&-card{
+				width: calc(100% - 220rpx);
 				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 {
+				padding: 24rpx 20rpx;
+				box-sizing: border-box;
+				&-img{
+					width: 100%;
+					height: 368rpx;
+					image{
 						width: 100%;
-						border-radius: 12rpx;
+						height: 100%;
 					}
 				}
-				
-				.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;
+				&-info{
+					width: 100%;
+					margin-top: 14rpx;
+					&-left{
+						width: calc(100% - 163rpx);
+						&-title{
+							font-family: PingFang-SC, PingFang-SC;
+							font-weight: bold;
+							font-size: 24rpx;
+							color: #252525;
+							line-height: 36rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+						&-p{
+							margin-top: 3rpx;
+							image{
+								width: 24rpx;
+								height: 24rpx;
+							}
+							text{
+								font-family: PingFang-SC, PingFang-SC;
+								font-weight: bold;
+								font-size: 20rpx;
+								color: #8B8B8B;
+								line-height: 36rpx;
+								margin-left: 10rpx;
+							}
+						}
+						&-name{
+							margin-top: 6rpx;
+							image{
+								width: 30rpx;
+								height: 30rpx;
+							}
+							text{
+								font-family: PingFang-SC, PingFang-SC;
+								font-weight: bold;
+								font-size: 20rpx;
+								color: #8B8B8B;
+								line-height: 36rpx;
+								margin-left: 10rpx;
+							}
+						}
 					}
-					
-					.save-btn {
-						background: #F5F5F5;
-						color: #151B29;
+					&-right{
+						width: 163rpx;
+						image{
+							width: 123rpx;
+							height: 123rpx;
+						}
+						text{
+							font-family: PingFang-SC, PingFang-SC;
+							font-weight: bold;
+							font-size: 20rpx;
+							color: #8B8B8B;
+							line-height: 36rpx;
+							margin-top: 20rpx;
+						}
 					}
-					
-					.share-btn {
-						background: #B7F358;
-						color: #151B29;
+				}
+			}
+			
+			&-menu{
+				width: 100%;
+				margin-top: 239rpx;
+				&-pre{
+					width: 25%;
+					image{
+						width: 103rpx;
+						height: 104rpx;
+					}
+					text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: rgba(255,255,255,0.6);
+						line-height: 33rpx;
+						margin-top: 32rpx;
 					}
 				}
 			}
+			
+			&-close{
+				margin-top: 58rpx;
+				image{
+					width: 64rpx;
+					height: 64rpx;
+				}
+			}
 		}
 	}
 </style>