炫耀一下

pagesMy/achievement.vue

@@ -43,7 +43,7 @@
 				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/0f48d5d2-2961-4d95-9bf9-148b7f615227.png"></image>
 			</view>
 			<view class="date">{{xzInfo.lightUpDate}}获得</view>
-			<view class="btn adfacjc">
+			<view class="btn adfacjc" @click="shareMedal">
 				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/4e76f71e-cd46-4380-8437-04b83eec40f3.png"></image>
 				<text>炫耀一下</text>
 			</view>
@@ -153,7 +153,52 @@
 				}
 			}
 		})
-	}
+	}
+	
+	const shareMedal = () => {
+		if (!xzInfo.value || !xzInfo.value.imageUrl) {
+			proxy.$showToast('勋章信息不完整，无法分享');
+			return;
+		}
+		
+		// 1. 使用 uni.previewImage 预览图片
+		// 用户在预览界面可以长按图片，选择“发送给朋友”或“保存图片”
+		uni.previewImage({
+			urls: [xzInfo.value.imageUrl], // 需要预览的图片链接列表
+			current: xzInfo.value.imageUrl, // 当前显示图片的链接
+			success: () => {
+				// 预览成功后，给用户一个提示
+				proxy.$showToast('长按图片可保存或分享给好友', 3000); 
+				// 提示后可以关闭弹窗，也可以不关，取决于产品需求
+				// xzShow.value = false; 
+			},
+			fail: (err) => {
+				console.error('预览图片失败', err);
+				proxy.$showToast('预览图片失败，请稍后再试');
+				
+				// 预览失败的备用方案：尝试直接保存图片到相册
+				uni.getImageInfo({
+					src: xzInfo.value.imageUrl,
+					success: (res) => {
+						uni.saveImageToPhotosAlbum({
+							filePath: res.path,
+							success: () => {
+								proxy.$showToast('勋章图片已保存到相册，请前往微信选择分享给好友');
+							},
+							fail: (saveErr) => {
+								proxy.$showToast('图片保存失败，请检查相册权限');
+								console.error('保存图片失败', saveErr);
+							}
+						});
+					},
+					fail: (infoErr) => {
+						proxy.$showToast('获取图片信息失败，无法保存');
+						console.error('获取图片信息失败', infoErr);
+					}
+				});
+			}
+		});
+	};
 
 	/**
 	 * @description 【核心】使用 Canvas 绘制分享图，并返回图片临时路径