Skip to content

飞
飞鹤小程序
Commit 9d3c12ee authored by spc's avatar spc
Browse files
Options

fixed

parent 90fb9427
Show whitespace changes
Inline Side-by-side
Showing with 119 additions and 117 deletions
components/ActivitySelectedPopup.vue
View file @ 9d3c12ee
<template> <template>
<view v-if="visible" class="activity-selected-popup" @tap="handleMaskClick"> <view v-show="visible" class="activity-selected-popup" @tap="handleMaskClick">
<!-- 背景遮罩 --> <!-- 背景遮罩 -->
<view class="popup-mask"></view> <view class="popup-mask"></view>
...@@ -14,40 +14,27 @@ ...@@ -14,40 +14,27 @@
<view class="popup-title">恭喜你入选啦!</view> <view class="popup-title">恭喜你入选啦!</view>
<!-- 活动列表 --> <!-- 活动列表 -->
<scroll-view <view v-if="activityList.length >= 3" class="activity-scroll-wrapper">
v-if="activityList.length > 3" <scroll-view class="activity-scroll" scroll-y :scroll-top="scrollTop">
class="activity-scroll" <view v-for="(activity, index) in activityList" :key="index" class="activity-item">
scroll-y
:scroll-top="scrollTop"
>
<view
v-for="(activity, index) in activityList"
:key="index"
class="activity-item"
>
<text class="activity-text">已入选{{ activity.name || '' }}</text> <text class="activity-text">已入选{{ activity.name || '' }}</text>
<view <view class="activity-btn" :class="{ disabled: activity.disabled }"
class="activity-btn" @tap="handleViewActivity(activity, index)">
:class="{ disabled: activity.disabled }"
@tap="handleViewActivity(activity, index)"
>
查看活动 查看活动
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 底部渐变蒙层 -->
<view class="scroll-fade-mask">
<image class="mask-image" :src="`${$baseUrl}homepage/Q3Res/actSelectMask.png`" mode="aspectFit"></image>
</view>
</view>
<view v-else class="activity-list"> <view v-else class="activity-list">
<view <view v-for="(activity, index) in activityList" :key="index" class="activity-item">
v-for="(activity, index) in activityList"
:key="index"
class="activity-item"
>
<text class="activity-text">已入选{{ activity.name || '' }}</text> <text class="activity-text">已入选{{ activity.name || '' }}</text>
<view <view class="activity-btn" :class="{ disabled: activity.disabled }"
class="activity-btn" @tap="handleViewActivity(activity, index)">
:class="{ disabled: activity.disabled }"
@tap="handleViewActivity(activity, index)"
>
查看活动 查看活动
</view> </view>
</view> </view>
...@@ -57,15 +44,18 @@ ...@@ -57,15 +44,18 @@
<!-- 关闭按钮 --> <!-- 关闭按钮 -->
<view class="close-btn" @tap="handleClose"> <view class="close-btn" @tap="handleClose">
<text class="close-icon">×</text> <image class="close-icon" :src="`${$baseUrl}homepage/Q3Res/commonCloseBtn.png`" mode="aspectFit"></image>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref, getCurrentInstance } from 'vue'
import { fetchUserClickActivity } from '../api/home' import { fetchUserClickActivity } from '../api/home'
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
const props = defineProps({ const props = defineProps({
visible: { visible: {
type: Boolean, type: Boolean,
...@@ -109,7 +99,6 @@ const handleViewActivity = async (activity, index) => { ...@@ -109,7 +99,6 @@ const handleViewActivity = async (activity, index) => {
await fetchUserClickActivity({ await fetchUserClickActivity({
activityIds: [activity.id] activityIds: [activity.id]
}) })
console.log('点击活动接口调用成功:', activity.id)
} catch (error) { } catch (error) {
console.error('点击活动接口调用失败:', error) console.error('点击活动接口调用失败:', error)
} }
...@@ -130,7 +119,6 @@ const handleClose = async () => { ...@@ -130,7 +119,6 @@ const handleClose = async () => {
await fetchUserClickActivity({ await fetchUserClickActivity({
activityIds: activityIds activityIds: activityIds
}) })
console.log('关闭弹窗接口调用成功:', activityIds)
} catch (error) { } catch (error) {
console.error('关闭弹窗接口调用失败:', error) console.error('关闭弹窗接口调用失败:', error)
} }
...@@ -152,12 +140,18 @@ const handleMaskClick = (e) => { ...@@ -152,12 +140,18 @@ const handleMaskClick = (e) => {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; right: 0;
height: 100vh; bottom: 0;
z-index: 9999; width: 100%;
height: 100%;
z-index: 99999 !important;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
pointer-events: auto;
/* #ifdef MP-WEIXIN */
z-index: 99999;
/* #endif */
} }
.popup-mask { .popup-mask {
...@@ -201,20 +195,48 @@ const handleMaskClick = (e) => { ...@@ -201,20 +195,48 @@ const handleMaskClick = (e) => {
.popup-title { .popup-title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
color: #FFA500; color: #D3A458;
text-align: center; text-align: center;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.activity-scroll { .activity-scroll-wrapper {
position: relative;
max-height: 360rpx; max-height: 360rpx;
height: 360rpx; height: 360rpx;
} }
.activity-scroll {
max-height: 250rpx;
height: 250rpx;
}
/* 底部渐变蒙层 */
.scroll-fade-mask {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 85rpx;
pointer-events: none;
z-index: 10;
display: flex;
align-items: flex-end;
justify-content: center;
}
.mask-image {
width: 546rpx;
height: 170rpx;
flex-shrink: 0;
object-fit: cover;
}
.activity-list { .activity-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 30rpx; gap: 35rpx;
} }
.activity-item { .activity-item {
...@@ -231,13 +253,19 @@ const handleMaskClick = (e) => { ...@@ -231,13 +253,19 @@ const handleMaskClick = (e) => {
} }
.activity-btn { .activity-btn {
padding: 12rpx 32rpx; display: flex;
background: linear-gradient(180deg, #FFA500 0%, #FF8C00 100%); width: 160rpx;
border-radius: 30rpx; height: 60rpx;
justify-content: center;
align-items: center;
gap: 20rpx;
flex-shrink: 0;
border-radius: 44rpx;
background: #D3A358;
color: #FFFFFF; color: #FFFFFF;
font-size: 24rpx; font-size: 24rpx;
text-align: center; text-align: center;
min-width: 140rpx; box-sizing: border-box;
} }
.activity-btn.disabled { .activity-btn.disabled {
...@@ -247,12 +275,12 @@ const handleMaskClick = (e) => { ...@@ -247,12 +275,12 @@ const handleMaskClick = (e) => {
.close-btn { .close-btn {
position: absolute; position: absolute;
bottom: -80rpx; top: 1130rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 60rpx; width: 56rpx;
height: 60rpx; height: 56rpx;
background-color: #FFFFFF; background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -261,9 +289,7 @@ const handleMaskClick = (e) => { ...@@ -261,9 +289,7 @@ const handleMaskClick = (e) => {
} }
.close-icon { .close-icon {
font-size: 40rpx; width: 56rpx;
color: #666666; height: 56rpx;
line-height: 1;
} }
</style> </style>
pages/index/index.vue
View file @ 9d3c12ee
...@@ -13,16 +13,19 @@ ...@@ -13,16 +13,19 @@
}"> }">
<!-- <text class="back-text">返回app</text> --> <!-- <text class="back-text">返回app</text> -->
</button> </button>
<!-- 活动入选弹窗 -->
<ActivitySelectedPopup :visible="showActivitySelectedPopup" :activityList="selectedActivityList"
@close="showActivitySelectedPopup = false" @viewActivity="handleViewActivity" />
</view> </view>
<!-- 活动入选弹窗 - 移到容器外部，确保 fixed 定位正确 -->
<ActivitySelectedPopup
v-if="showActivitySelectedPopup || selectedActivityList.length > 0"
:visible="showActivitySelectedPopup"
:activityList="selectedActivityList"
@close="showActivitySelectedPopup = false"
@viewActivity="handleViewActivity" />
</template> </template>
<script setup> <script setup>
import { ref, getCurrentInstance, watch, onMounted } from "vue"; import { ref, getCurrentInstance, watch, onMounted, nextTick } from "vue";
import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll, onShow } from "@dcloudio/uni-app"; import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll, onShow } from "@dcloudio/uni-app";
import TabBar from "@/components/TabBar.vue"; import TabBar from "@/components/TabBar.vue";
import Home from "@/views/Home.vue"; import Home from "@/views/Home.vue";
...@@ -46,7 +49,6 @@ const isBackApp = ref(false); ...@@ -46,7 +49,6 @@ const isBackApp = ref(false);
// 活动入选弹窗 // 活动入选弹窗
const showActivitySelectedPopup = ref(false); const showActivitySelectedPopup = ref(false);
const selectedActivityList = ref([]); const selectedActivityList = ref([]);
const hasShownActivityPopup = ref(false); // 标记是否已经显示过弹窗
const shareOptions = { const shareOptions = {
0: { 0: {
title: "8000万中国妈妈信赖的育儿品牌", title: "8000万中国妈妈信赖的育儿品牌",
...@@ -88,45 +90,28 @@ function handleTabClick({ index }) { ...@@ -88,45 +90,28 @@ function handleTabClick({ index }) {
// 查看活动 // 查看活动
const handleViewActivity = (activity, index) => { const handleViewActivity = (activity, index) => {
console.log('查看活动:', activity, index)
// 接口调用已在组件内部完成，这里只需要处理跳转逻辑 // 接口调用已在组件内部完成，这里只需要处理跳转逻辑
// 根据 activityUri 跳转到对应页面 // 根据 activityUri 跳转到对应页面
const uri = activity.uri || activity.activityUri const uri = activity.uri || activity.activityUri
if (!uri) { if (!uri) {
console.warn('活动没有跳转地址')
return return
} }
console.log('跳转到活动页面:', uri)
// 判断跳转类型 // 判断跳转类型
// H5 链接 // H5 链接
jump({ jump({
type: JumpType.H5, type: JumpType.H5,
url: uri url: uri
}) })
} }
// 显示活动入选弹窗
const showActivitySelectedPopupFunc = (activityList) => {
selectedActivityList.value = activityList || []
showActivitySelectedPopup.value = true
}
// 检查并显示活动入选弹窗 // 检查并显示活动入选弹窗
const checkAndShowActivityPopup = () => { const checkAndShowActivityPopup = () => {
// 如果已经显示过弹窗，不再重复显示
if (hasShownActivityPopup.value) {
console.log('活动入选弹窗已显示过，跳过')
return
}
const memberInfo = userStore.memberInfo const memberInfo = userStore.memberInfo
console.log('检查活动入选弹窗 - memberInfo:', memberInfo)
console.log('检查活动入选弹窗 - passedActivityList:', memberInfo?.passedActivityList)
if (memberInfo && memberInfo.passedActivityList && memberInfo.passedActivityList.length > 0) { // 只要后端返回有值就显示弹窗
if (memberInfo?.passedActivityList && Array.isArray(memberInfo.passedActivityList) && memberInfo.passedActivityList.length > 0) {
// 将 passedActivityList 转换为组件需要的格式 // 将 passedActivityList 转换为组件需要的格式
const activityList = memberInfo.passedActivityList.map(item => ({ const activityList = memberInfo.passedActivityList.map(item => ({
id: item.activityId, id: item.activityId,
...@@ -135,35 +120,21 @@ const checkAndShowActivityPopup = () => { ...@@ -135,35 +120,21 @@ const checkAndShowActivityPopup = () => {
disabled: false disabled: false
})) }))
console.log('转换后的活动列表:', activityList)
selectedActivityList.value = activityList selectedActivityList.value = activityList
showActivitySelectedPopup.value = true showActivitySelectedPopup.value = true
hasShownActivityPopup.value = true // 标记已显示
console.log('显示活动入选弹窗:', activityList)
} else {
console.log('没有活动入选数据，不显示弹窗')
} }
} }
// 监听 memberInfo 变化，检查是否有 passedActivityList // 监听 memberInfo 变化，检查是否有 passedActivityList
watch(() => userStore.memberInfo, (newVal, oldVal) => { watch(() => userStore.memberInfo, (newVal) => {
if (newVal && newVal.passedActivityList && newVal.passedActivityList.length > 0) { // 只要后端返回有值就显示弹窗
// 检查是否是新的活动列表（通过比较 activityId 来判断） if (newVal?.passedActivityList && Array.isArray(newVal.passedActivityList) && newVal.passedActivityList.length > 0) {
const oldActivityIds = oldVal?.passedActivityList?.map(item => item.activityId) || []
const newActivityIds = newVal.passedActivityList.map(item => item.activityId)
// 如果有新的活动，重置标记并显示弹窗
const hasNewActivity = newActivityIds.some(id => !oldActivityIds.includes(id))
if (hasNewActivity) {
hasShownActivityPopup.value = false
}
// 延迟一下，确保页面已经渲染完成 // 延迟一下，确保页面已经渲染完成
setTimeout(() => { setTimeout(() => {
checkAndShowActivityPopup() checkAndShowActivityPopup()
}, 300) }, 300)
} }
}, { deep: true }) }, { deep: true, immediate: false })
onLoad(async (options) => { onLoad(async (options) => {
const optionsSync = wx.getEnterOptionsSync() const optionsSync = wx.getEnterOptionsSync()
...@@ -198,14 +169,19 @@ onLoad(async (options) => { ...@@ -198,14 +169,19 @@ onLoad(async (options) => {
// 加载会员信息，检查是否有活动入选 // 加载会员信息，检查是否有活动入选
if (userStore.isLogin) { if (userStore.isLogin) {
await userStore.loadMemberInfo() await userStore.loadMemberInfo()
// 使用 nextTick 确保数据已更新
await nextTick()
checkAndShowActivityPopup() checkAndShowActivityPopup()
} }
}); });
onShow(async () => { onShow(async () => {
// 页面显示时，如果已登录，刷新会员信息（但不强制显示弹窗，由 watch 监听处理） // 页面显示时，如果已登录，刷新会员信息
if (userStore.isLogin) { if (userStore.isLogin) {
await userStore.loadMemberInfo() await userStore.loadMemberInfo()
// 使用 nextTick 确保数据已更新后再检查
await nextTick()
checkAndShowActivityPopup()
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment