Skip to content

飞
飞鹤小程序
Commit 585d528e authored by spc's avatar spc
Browse files
Options

fixed

parent 4e6251ad
Hide whitespace changes
Inline Side-by-side
Showing with 364 additions and 0 deletions
components/ActivitySelectedPopup.vue 0 → 100644
View file @ 585d528e
<template>
<view v-show="visible" class="activity-selected-popup">
<!-- 背景遮罩 -->
<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>
<!-- 活动列表 -->
<view v-if="activityList.length >= 3" class="activity-scroll-wrapper">
<scroll-view class="activity-scroll" scroll-y :scroll-top="scrollTop">
<view v-for="(activity, index) in activityList" :key="index" class="activity-item">
<text class="activity-text" :class="{ 'faded': index >= 2 }">已入选{{ activity.name || ''
}}</text>
</view>
</scroll-view>
</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>
</view>
<!-- 底部渐变蒙层 -->
<view v-if="activityList.length >= 3" class="scroll-fade-mask">
<image class="mask-image"
:src="`https://course.feihe.com/momclub-picture/homepage/Q3Res/actSelectMask.png`"
mode="aspectFit">
</image>
</view>
<!-- 底部统一按钮 -->
<view class="bottom-btn-wrapper">
<view class="activity-btn" @tap="handleBottomButtonClick">
<image class="activity-btn-image"
:src="`https://course.feihe.com/momclub-picture/homepage/Q3Res/actSelectLookBtn.png`"
mode="aspectFit"></image>
</view>
</view>
</view>
</view>
<!-- 关闭按钮 -->
<view class="close-btn" @tap="handleClose">
<image class="close-icon"
:src="`https://course.feihe.com/momclub-picture/homepage/Q3Res/commonCloseBtn.png`" mode="aspectFit">
</image>
</view>
</view>
</template>
<script setup>
import { computed, ref } from 'vue'
import { fetchUserClickActivity } from '../api/home'
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 = async (activity, index) => {
emit('viewActivity', activity, index)
}
// 底部按钮点击
const handleBottomButtonClick = async () => {
// 调用接口，传所有 activityIds
const activityIds = props.activityList
.filter(activity => activity.id)
.map(activity => activity.id)
if (activityIds.length > 0) {
try {
await fetchUserClickActivity({
activityIds: activityIds
})
} catch (error) {
console.error('关闭弹窗接口调用失败:', error)
}
}
handleViewActivity(props.activityList[0], 0)
}
// 关闭弹窗
const handleClose = async () => {
// 调用接口，传所有 activityIds
const activityIds = props.activityList
.filter(activity => activity.id)
.map(activity => activity.id)
if (activityIds.length > 0) {
try {
await fetchUserClickActivity({
activityIds: activityIds
})
} catch (error) {
console.error('关闭弹窗接口调用失败:', error)
}
}
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;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999 !important;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
/* #ifdef MP-WEIXIN */
z-index: 99999;
/* #endif */
}
.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;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}
/* 背景底 */
.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%;
box-sizing: border-box;
z-index: 1;
}
.popup-title {
position: absolute;
top: 48rpx;
left: 0;
right: 0;
font-size: 36rpx;
font-weight: bold;
color: #D3A458;
text-align: center;
letter-spacing: 1rpx;
line-height: 1.2;
z-index: 2;
}
.activity-scroll-wrapper {
position: absolute;
top: 120rpx;
left: 40rpx;
right: 40rpx;
bottom: 120rpx;
max-height: 360rpx;
height: auto;
}
.activity-scroll {
width: 100%;
max-height: 250rpx;
height: 250rpx;
}
.activity-scroll .activity-item {
position: relative;
width: 100%;
min-height: 56rpx;
margin-bottom: 20rpx;
}
.activity-scroll .activity-text {
position: absolute;
left: 0;
right: 0;
top: 0;
font-size: 28rpx;
color: #333333;
text-align: center;
font-weight: 400;
line-height: 1.6;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 底部渐变蒙层 */
.scroll-fade-mask {
position: absolute;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
width: 546rpx;
height: 85rpx;
pointer-events: none;
z-index: 2;
}
.mask-image {
position: absolute;
bottom: 0;
left: 0;
width: 546rpx;
height: 170rpx;
object-fit: cover;
}
.activity-list {
position: absolute;
top: 120rpx;
left: 40rpx;
right: 40rpx;
bottom: 120rpx;
width: calc(100% - 80rpx);
}
.activity-item {
position: relative;
width: 100%;
min-height: 56rpx;
margin-bottom: 20rpx;
}
.activity-text {
position: absolute;
left: 0;
right: 0;
top: 0;
font-size: 28rpx;
color: #333333;
text-align: center;
font-weight: 400;
line-height: 1.6;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-text.faded {
color: #333333;
}
.bottom-btn-wrapper {
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translateX(-50%);
width: 396rpx;
height: 78rpx;
z-index: 3;
}
.activity-btn {
position: absolute;
top: 0;
left: 0;
width: 396rpx;
height: 78rpx;
transition: all 0.3s ease;
background: transparent;
border: none;
}
.activity-btn-image {
position: absolute;
top: 0;
left: 0;
width: 396rpx;
height: 78rpx;
}
.close-btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1100rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
z-index: 2;
}
.close-icon {
position: absolute;
top: 0;
left: 0;
width: 56rpx;
height: 56rpx;
}
</style>
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