signup

components/ActivitySelectedPopup.vue

+<template>
+	<view v-if="visible" class="activity-selected-popup" @tap="handleMaskClick">
+		<!-- 背景遮罩 -->
+		<view class="popup-mask"></view>
+		
+		<!-- 弹窗容器 -->
+		<view class="popup-wrapper" :style="popupStyle">
+			<!-- 背景底 -->
+			<view class="popup-background"></view>
+			
+			<!-- 弹窗内容 -->
+			<view class="popup-content" @tap.stop>
+				<!-- 标题 -->
+				<view class="popup-title">恭喜你入选啦!</view>
+				
+				<!-- 活动列表 -->
+				<scroll-view 
+					v-if="activityList.length > 3"
+					class="activity-scroll"
+					scroll-y
+					:scroll-top="scrollTop"
+				>
+					<view 
+						v-for="(activity, index) in activityList" 
+						:key="index"
+						class="activity-item"
+					>
+						<text class="activity-text">已入选{{ activity.name || '鲜活溯源之旅' }}</text>
+						<view 
+							class="activity-btn"
+							:class="{ disabled: activity.disabled }"
+							@tap="handleViewActivity(activity, index)"
+						>
+							查看活动
+						</view>
+					</view>
+				</scroll-view>
+				
+				<view v-else class="activity-list">
+					<view 
+						v-for="(activity, index) in activityList" 
+						:key="index"
+						class="activity-item"
+					>
+						<text class="activity-text">已入选{{ activity.name || '鲜活溯源之旅' }}</text>
+						<view 
+							class="activity-btn"
+							:class="{ disabled: activity.disabled }"
+							@tap="handleViewActivity(activity, index)"
+						>
+							查看活动
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 关闭按钮 -->
+		<view class="close-btn" @tap="handleClose">
+			<text class="close-icon">×</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false
+	},
+	activityList: {
+		type: Array,
+		default: () => []
+	}
+})
+
+const emit = defineEmits(['close', 'viewActivity'])
+
+const scrollTop = ref(0)
+
+// 根据活动数量动态计算弹窗高度
+const popupStyle = computed(() => {
+	const count = props.activityList.length
+	let height = 320 // 默认高度（1个活动）160px * 2
+	
+	if (count === 2) {
+		height = 420 // 210px * 2
+	} else if (count >= 3) {
+		height = 520 // 260px * 2，超过3个时内容区域可滚动
+	}
+	
+	return {
+		height: height + 'rpx'
+	}
+})
+
+// 查看活动
+const handleViewActivity = (activity, index) => {
+	if (activity.disabled) {
+		return
+	}
+	emit('viewActivity', activity, index)
+}
+
+// 关闭弹窗
+const handleClose = () => {
+	emit('close')
+}
+
+// 点击遮罩层
+const handleMaskClick = (e) => {
+	if (e.target === e.currentTarget) {
+		handleClose()
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.activity-selected-popup {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.popup-mask {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup-wrapper {
+	position: relative;
+	width: 546rpx;
+	flex-shrink: 0;
+	border-radius: 38rpx;
+	z-index: 1;
+}
+
+/* 背景底 */
+.popup-background {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 38rpx;
+	background: linear-gradient(180deg, #FFE9C5 0%, #FFF 52.87%);
+	z-index: 0;
+}
+
+.popup-content {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 60rpx 40rpx 40rpx 40rpx;
+	box-sizing: border-box;
+	z-index: 1;
+}
+
+.popup-title {
+	font-size: 36rpx;
+	font-weight: bold;
+	color: #FFA500;
+	text-align: center;
+	margin-bottom: 40rpx;
+}
+
+.activity-scroll {
+	max-height: 360rpx;
+	height: 360rpx;
+}
+
+.activity-list {
+	display: flex;
+	flex-direction: column;
+	gap: 30rpx;
+}
+
+.activity-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 20rpx 0;
+}
+
+.activity-text {
+	font-size: 28rpx;
+	color: #333333;
+	flex: 1;
+}
+
+.activity-btn {
+	padding: 12rpx 32rpx;
+	background: linear-gradient(180deg, #FFA500 0%, #FF8C00 100%);
+	border-radius: 30rpx;
+	color: #FFFFFF;
+	font-size: 24rpx;
+	text-align: center;
+	min-width: 140rpx;
+}
+
+.activity-btn.disabled {
+	background: #E0E0E0;
+	color: #999999;
+}
+
+.close-btn {
+	position: absolute;
+	bottom: -80rpx;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 60rpx;
+	height: 60rpx;
+	background-color: #FFFFFF;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 2;
+}
+
+.close-icon {
+	font-size: 40rpx;
+	color: #666666;
+	line-height: 1;
+}
+</style>
+

pages/index/index.vue

@@ -14,6 +14,15 @@
   >
       <!-- <text class="back-text">返回app</text> -->
   </button>
+
+  <!-- 活动入选弹窗 -->
+  <ActivitySelectedPopup 
+    :visible="showActivitySelectedPopup" 
+    :activityList="selectedActivityList"
+    @close="showActivitySelectedPopup = false"
+    @viewActivity="handleViewActivity"
+  />
+  
   </view>
 </template>
 
@@ -26,6 +35,7 @@ import Brand from "@/views/Brand.vue";
 import Integral from "@/views/Integral.vue";
 import My from "@/views/My.vue";
 import WxFriendCircleSimplePage from "@/components/WxFriendCircleSimplePage.vue";
+import ActivitySelectedPopup from "@/components/ActivitySelectedPopup.vue";
 import { useGlobalStore } from "@/stores/global.js";
 
 const globalStore = useGlobalStore();
@@ -34,6 +44,9 @@ const $baseUrl = proxy.$baseUrl;
 const homeRef = ref(null);
 const scrollTop = ref(0);
 const isBackApp = ref(false);
+// 活动入选弹窗
+const showActivitySelectedPopup = ref(false);
+const selectedActivityList = ref([]);
 const shareOptions = {
   0: {
     title: "8000万中国妈妈信赖的育儿品牌",
@@ -73,6 +86,18 @@ function handleTabClick({ index }) {
   globalStore.setCurTabIndex(index);
 }
 
+// 查看活动
+const handleViewActivity = (activity, index) => {
+  console.log('查看活动:', activity, index)
+  // TODO: 根据活动跳转到对应页面
+}
+
+// 显示活动入选弹窗
+const showActivitySelectedPopupFunc = (activityList) => {
+  selectedActivityList.value = activityList || []
+  showActivitySelectedPopup.value = true
+}
+
 onLoad((options) => {
 	const optionsSync= wx.getEnterOptionsSync()
 	if(optionsSync.scene == '1154'){