Merge branch 'xinmalabSharePoster' into dev

api/xingmaLab.js

 import requestModule from './request.js'
-const {api} = requestModule
+const { api } = requestModule
 
 /**
  * 星妈会藏馆
@@ -38,3 +38,5 @@ export const fetchRecordDetail = (data) => api.get('/c/lab/record/detail', data)
 export const fetchFavoriteAdd = (data) => api.get('/c/lab/favorite/add', data)
 
 export const fetchFavoriteRemove = (data) => api.get('/c/lab/favorite/remove', data)
+
+export const generateQRCode = (data) => api.post('/c/wechat/generateQRCode', data)
\ No newline at end of file

components/xingmaLab/XingmaLabSharePopup.vue

+<template>
+	<view v-if="visible" class="share-popup-overlay" @tap="handleOverlayClick">
+		<view class="share-popup-container" @tap.stop>
+			<!-- 背景 -->
+			<image class="share-popup-bg" :src="`${$baseUrl}homepage/Q3Res/xingmaLabPosterBtnConBg.png`"
+				mode="aspectFit"></image>
+
+			<!-- 标题 -->
+			<view class="share-popup-title">
+				<view class="close-btn" @tap="handleClose">
+					<image class="close-icon" :src="`${$baseUrl}homepage/Q3Res/xingmaLabPosterBtnConCloseBtn.png`"
+						mode="aspectFit"></image>
+				</view>
+			</view>
+
+			<!-- 按钮区域 -->
+			<view class="share-popup-buttons">
+				<!-- 分享给好友 -->
+				<view class="share-button-item">
+					<button open-type="share" class="share-button-trigger" @tap="handleShareToFriend">
+						<view class="button-icon button-icon-share">
+							<image class="icon-image"
+								:src="`${$baseUrl}homepage/Q3Res/xingmaLabPosterBtnConShareBtn.png`" mode="aspectFit">
+							</image>
+						</view>
+					</button>
+				</view>
+
+				<!-- 生成分享海报 -->
+				<view class="share-button-item" @tap="handleGeneratePoster">
+					<view class="button-icon button-icon-poster">
+						<image class="icon-image"
+							:src="`${$baseUrl}homepage/Q3Res/xingmaLabPosterBtnConShowPosterBtn.png`" mode="aspectFit">
+						</image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance()
+const $baseUrl = proxy.$baseUrl
+
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false
+	}
+})
+
+const emit = defineEmits(['close', 'shareToFriend', 'generatePoster'])
+
+// 关闭弹窗
+const handleClose = () => {
+	emit('close')
+}
+
+// 点击遮罩关闭
+const handleOverlayClick = () => {
+	handleClose()
+}
+
+// 分享给好友
+const handleShareToFriend = () => {
+	emit('shareToFriend')
+	handleClose()
+}
+
+// 生成分享海报
+const handleGeneratePoster = () => {
+	emit('generatePoster')
+	handleClose()
+}
+</script>
+
+<style lang="less" scoped>
+.share-popup-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	z-index: 9999;
+}
+
+.share-popup-container {
+	position: relative;
+	width: 750rpx;
+	height: 432rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.share-popup-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+}
+
+.share-popup-title {
+	position: relative;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: 60rpx;
+	z-index: 1;
+}
+
+.title-text {
+	font-size: 36rpx;
+	font-weight: 500;
+	color: #333333;
+}
+
+.close-btn {
+	position: absolute;
+	right: 40rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 48rpx;
+	height: 48rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.close-icon {
+	width: 48rpx;
+	height: 48rpx;
+}
+
+.share-popup-buttons {
+	position: relative;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	padding: 80rpx 60rpx 0;
+	z-index: 1;
+}
+
+.share-button-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+
+.share-button-trigger {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	padding: 0;
+	margin: 0;
+	line-height: normal;
+}
+
+.share-button-trigger::after {
+	border: none;
+}
+
+.button-icon {
+	margin-bottom: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.button-icon-share {
+	width: 148rpx;
+	height: 202rpx;
+}
+
+.button-icon-poster {
+	width: 170rpx;
+	height: 202rpx;
+}
+
+.icon-image {
+	width: 100%;
+	height: 100%;
+}
+
+.button-text {
+	font-size: 28rpx;
+	color: #333333;
+}
+</style>

pages/XingmaLabDetailPage/XingmaLabDetailPage.vue

@@ -42,9 +42,9 @@
 				@click="handleLikeClick"></span>
 
 			<!-- 分享按钮 -->
-			<button open-type="share" class="xingmalabdetailpagebottomconsharebtn"
+			<view class="xingmalabdetailpagebottomconsharebtn"
 				:style="{ backgroundImage: `url(${$baseUrl}${getImageUrl(config.images.bottomConShareBtn)})` }"
-				@click="handleShareClick"></button>
+				@click="handleShareClick"></view>
 
 			<!-- 未登录时覆盖的授权按钮层 -->
 			<div v-if="homeStore && !homeStore.isLogin" class="auth-overlay">
@@ -57,6 +57,25 @@
 					class="auth-share-btn phone-auth-btn-cover"></button>
 			</div>
 		</div>
+		
+		<!-- 分享弹窗 -->
+		<XingmaLabSharePopup 
+			:visible="showSharePopup"
+			@close="handleCloseSharePopup"
+			@shareToFriend="handleShareToFriend"
+			@generatePoster="handleGeneratePoster" />
+		
+		<!-- 海报页面 -->
+		<XingmaLabPosterPage 
+			:visible="showPosterPage"
+			:imageUrl="detailData.imgUrl"
+			:content="detailData.content || '可爱'"
+			:collectionNumber="detailData.bizNo || collectionNumber"
+			:defaultNickname="detailData.nickname || '星妈用户'"
+			:avatar="detailData.avatar || ''"
+			:recordId="recordId || detailData.id || ''"
+			@close="handleClosePosterPage"
+			@download="handleDownloadPoster" />
 	</view>
 </template>
 
@@ -83,6 +102,8 @@
 		useUserStore
 	} from '@/stores/user.js'
 	import md from '../../md';
+	import XingmaLabSharePopup from '@/components/xingmaLab/XingmaLabSharePopup.vue'
+	import XingmaLabPosterPage from '@/components/xingmaLab/XingmaLabPosterPage.vue'
 
 	// 组件名称
 	defineOptions({
@@ -104,6 +125,10 @@
 		state: null
 	})
 	
+	// 分享弹窗和海报页面状态
+	const showSharePopup = ref(false)
+	const showPosterPage = ref(false)
+
 	// 配置对象
 	const config = xingmaLabDetailConfig
 	
@@ -259,22 +284,58 @@
 	}
 
 	const handleShareClick = () => {
-		// 使用 open-type="share" 时，点击事件可以为空
-		// 分享内容通过页面配置自动设置
-		console.log('分享按钮被点击')
-		//TODO:埋点
+		// 显示分享弹窗
+		showSharePopup.value = true
+		
+		// 埋点
 		md.sensorComponentLogTake({
 			xcxComponentClick: "true",
 			pageName: "星妈lab-藏品详情页",
 			componentName: "藏品详情",
 			componentContent: "分享"
 		});
+	}
 	
-		// 手动触发分享（如果需要的话）
-		// uni.showShareMenu({
-		// 	withShareTicket: true,
-		// 	menus: ['shareAppMessage'] // 仅分享给好友，禁用朋友圈
-		// })
+	// 关闭分享弹窗
+	const handleCloseSharePopup = () => {
+		showSharePopup.value = false
+	}
+	
+	// 分享给好友
+	const handleShareToFriend = () => {
+		// 埋点
+		md.sensorComponentLogTake({
+			xcxComponentClick: "true",
+			pageName: "星妈lab-藏品详情页",
+			componentName: "分享弹窗",
+			componentContent: "分享给好友"
+		});
+		// 分享功能由 button 的 open-type="share" 自动触发
+	}
+	
+	// 生成分享海报
+	const handleGeneratePoster = () => {
+		showPosterPage.value = true
+		
+		// 埋点
+		md.sensorComponentLogTake({
+			xcxComponentClick: "true",
+			pageName: "星妈lab-藏品详情页",
+			componentName: "分享弹窗",
+			componentContent: "生成分享海报"
+		});
+	}
+	
+	// 关闭海报页面
+	const handleClosePosterPage = () => {
+		showPosterPage.value = false
+	}
+	
+	// 下载海报
+	const handleDownloadPoster = (data) => {
+		// TODO: 实现海报下载逻辑
+		// 可以使用 canvas 将海报内容绘制成图片，然后保存到相册
+		console.log('下载海报', data)
 	}