<template>
|
<view class="activity-popup" v-if="show" @click="onMaskClick">
|
<!-- 遮罩层 -->
|
<view class="popup-mask" :class="{ 'mask-enter': show, 'mask-leave': !show }"></view>
|
|
<!-- 弹窗内容 -->
|
<view class="popup-content"
|
:class="{ 'content-enter': show, 'content-leave': !show }"
|
@click.stop>
|
|
<!-- 关闭按钮 -->
|
<view class="close-btn" @click="onClose">
|
<uni-icons type="close" size="24" color="#666"></uni-icons>
|
</view>
|
|
<!-- 活动图片 -->
|
<view class="activity-img">
|
<image :src="activityImage" mode="widthFix" class="popup-img"></image>
|
</view>
|
|
<!-- 活动信息 -->
|
<view class="activity-info">
|
<h3 class="activity-title">{{ activityTitle }}</h3>
|
<p class="activity-desc">{{ activityDesc }}</p>
|
|
<!-- 倒计时（如果需要） -->
|
<view class="countdown" v-if="showCountdown">
|
<text class="countdown-text">活动剩余时间：</text>
|
<view class="countdown-time">
|
<text class="time-box">{{ days }}</text>
|
<text class="time-sep">:</text>
|
<text class="time-box">{{ hours }}</text>
|
<text class="time-sep">:</text>
|
<text class="time-box">{{ minutes }}</text>
|
<text class="time-sep">:</text>
|
<text class="time-box">{{ seconds }}</text>
|
</view>
|
</view>
|
|
<!-- 参与按钮 -->
|
<button class="join-btn" @click="onJoinActivity">
|
{{ joinButtonText }}
|
</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {getPopupAcitivty} from '@/api/popup.js'
|
export default {
|
name: 'ActivityPopup',
|
props: {
|
prizeActivityId:{
|
type:String,
|
default:''
|
},
|
// 控制弹窗显示/隐藏
|
show: {
|
type: Boolean,
|
default: false
|
},
|
// 活动图片URL
|
activityImage: {
|
type: String,
|
default: ''
|
},
|
// 活动标题
|
activityTitle: {
|
type: String,
|
default: '限时优惠活动'
|
},
|
// 活动描述
|
activityDesc: {
|
type: String,
|
default: '参与本次活动，即可获得超值大奖，机会难得，不要错过！'
|
},
|
// 参与按钮文本
|
joinButtonText: {
|
type: String,
|
default: '立即参与'
|
},
|
// 是否显示倒计时
|
showCountdown: {
|
type: Boolean,
|
default: true
|
},
|
// 倒计时结束时间（时间戳）
|
endTime: {
|
type: Number,
|
default: () => {
|
// 默认7天后结束
|
return Date.now() + 7 * 24 * 60 * 60 * 1000;
|
}
|
}
|
},
|
data() {
|
return {
|
days: '00',
|
hours: '00',
|
minutes: '00',
|
seconds: '00',
|
countdownTimer: null
|
};
|
},
|
watch: {
|
show(newVal) {
|
console.log("弹窗监听变化",newVal)
|
if (newVal && this.showCountdown) {
|
this.startCountdown();
|
} else if (!newVal && this.countdownTimer) {
|
clearInterval(this.countdownTimer);
|
this.countdownTimer = null;
|
}
|
}
|
},
|
mounted() {
|
console.log('组件已挂载，此时可以访问 props 和 DOM');
|
console.log('当前 show 状态：', this.show); // 可以打印 props 中的 show
|
|
},
|
methods: {
|
onpan(){
|
|
},
|
// 开始倒计时
|
startCountdown() {
|
this.updateCountdown();
|
if (this.countdownTimer) {
|
clearInterval(this.countdownTimer);
|
}
|
this.countdownTimer = setInterval(() => {
|
this.updateCountdown();
|
}, 1000);
|
},
|
|
// 更新倒计时
|
updateCountdown() {
|
const now = Date.now();
|
const diff = this.endTime - now;
|
|
if (diff <= 0) {
|
this.days = '00';
|
this.hours = '00';
|
this.minutes = '00';
|
this.seconds = '00';
|
clearInterval(this.countdownTimer);
|
this.countdownTimer = null;
|
return;
|
}
|
|
// 计算天、时、分、秒
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
// 格式化数字为两位数
|
this.days = days.toString().padStart(2, '0');
|
this.hours = hours.toString().padStart(2, '0');
|
this.minutes = minutes.toString().padStart(2, '0');
|
this.seconds = seconds.toString().padStart(2, '0');
|
},
|
|
// 关闭弹窗
|
onClose() {
|
this.$emit('close');
|
},
|
|
// 点击遮罩层关闭
|
onMaskClick() {
|
this.$emit('close');
|
},
|
|
// 点击参与活动
|
onJoinActivity() {
|
|
// this.$emit('join');
|
console.log(this.prizeActivityId)
|
uni.navigateTo({
|
url:'/pages/prize/PrizeDetail/PrizeDetail?id='+this.prizeActivityId
|
})
|
// 可以在这里添加参与活动后的逻辑，比如关闭弹窗
|
this.$emit('close');
|
}
|
},
|
beforeDestroy() {
|
if (this.countdownTimer) {
|
clearInterval(this.countdownTimer);
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.activity-popup {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9999;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 20rpx;
|
}
|
|
|
/* 遮罩层样式 */
|
.popup-mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.mask-enter {
|
opacity: 1;
|
}
|
|
.mask-leave {
|
opacity: 0;
|
}
|
|
/* 弹窗内容样式 */
|
.popup-content {
|
width: 100%;
|
max-width: 600rpx;
|
background-color: #ffffff;
|
border-radius: 24rpx;
|
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
|
overflow: hidden;
|
transform: translateY(50rpx) scale(0.9);
|
opacity: 0;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
}
|
|
.content-enter {
|
transform: translateY(0) scale(1);
|
opacity: 1;
|
}
|
|
.content-leave {
|
transform: translateY(50rpx) scale(0.9);
|
opacity: 0;
|
}
|
|
/* 关闭按钮 */
|
.close-btn {
|
position: absolute;
|
top: 20rpx;
|
right: 20rpx;
|
width: 50rpx;
|
height: 50rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: rgba(255, 255, 255, 0.8);
|
border-radius: 50%;
|
z-index: 10;
|
}
|
|
/* 活动图片 */
|
.activity-img {
|
position: relative;
|
width: 100%; /* 容器宽度铺满弹窗内容区 */
|
/* 可选：添加背景色，避免图片加载前显示空白 */
|
background-color: #f5f5f5;
|
border-top-left-radius: 24rpx; /* 与图片圆角一致，避免容器露白 */
|
border-top-right-radius: 24rpx;
|
}
|
|
.popup-img {
|
width: 100%;
|
/* 核心：用 max-height 限制最大高度，不限制 min-height（保留比例） */
|
max-height: 300rpx; /* 图片最大高度（超过则按比例缩小，保证完整显示） */
|
}
|
|
/* 活动信息 */
|
.activity-info {
|
padding: 30rpx;
|
text-align: center;
|
}
|
|
.activity-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333333;
|
margin-bottom: 20rpx;
|
line-height: 1.3;
|
}
|
|
.activity-desc {
|
font-size: 26rpx;
|
color: #666666;
|
margin-bottom: 30rpx;
|
line-height: 1.5;
|
}
|
|
/* 倒计时样式 */
|
.countdown {
|
margin-bottom: 30rpx;
|
text-align: center;
|
}
|
|
.countdown-text {
|
font-size: 24rpx;
|
color: #ff6b3b;
|
margin-right: 10rpx;
|
}
|
|
.countdown-time {
|
display: inline-flex;
|
align-items: center;
|
}
|
|
.time-box {
|
display: inline-block;
|
width: 50rpx;
|
height: 50rpx;
|
line-height: 50rpx;
|
background-color: #ff6b3b;
|
color: #ffffff;
|
font-size: 26rpx;
|
font-weight: bold;
|
border-radius: 8rpx;
|
text-align: center;
|
}
|
|
.time-sep {
|
margin: 0 10rpx;
|
color: #ff6b3b;
|
font-size: 28rpx;
|
font-weight: bold;
|
}
|
|
/* 参与按钮 */
|
.join-btn {
|
width: 100%;
|
height: 80rpx;
|
line-height: 80rpx;
|
background-color: #ff6b3b;
|
color: #ffffff;
|
font-size: 30rpx;
|
border-radius: 40rpx;
|
border: none;
|
box-shadow: 0 5rpx 15rpx rgba(255, 107, 59, 0.4);
|
transition: all 0.2s ease;
|
}
|
|
.join-btn::after {
|
border: none;
|
}
|
|
.join-btn:active {
|
background-color: #e55a2a;
|
transform: scale(0.98);
|
}
|
</style>
|
