<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>
|
|
<!-- 活动图片 -->
|
<scroll-view
|
scroll-y="true"
|
class="activity-img-scroll"
|
:show-scrollbar="false"
|
:enhanced="true">
|
<view class="activity-img">
|
<image
|
:src="activityImage"
|
mode="widthFix"
|
class="popup-img"
|
:style="{ width: '100%' }"
|
@load="onImageLoad"
|
@error="onImageError">
|
</image>
|
</view>
|
</scroll-view>
|
|
<!-- 活动标题（固定显示） -->
|
<view class="activity-title-fixed">
|
<h3 class="activity-title">{{ activityTitle }}</h3>
|
</view>
|
|
<!-- 可滚动的活动描述 -->
|
<scroll-view
|
scroll-y="true"
|
class="activity-content-scroll"
|
:show-scrollbar="false"
|
:enhanced="true">
|
|
<view class="activity-content">
|
<p class="activity-desc">{{ activityDesc }}</p>
|
</view>
|
|
</scroll-view>
|
|
<!-- 固定底部：倒计时和参与按钮 -->
|
<view class="activity-bottom">
|
<!-- 倒计时（如果需要） -->
|
<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,
|
// 图片相关数据
|
imageWidth: 600, // 动态计算的宽度（rpx）
|
imageHeight: 300, // 动态计算的高度（rpx）
|
originalImageWidth: 0, // 原图宽度（px）
|
originalImageHeight: 0, // 原图高度（px）
|
containerWidth: 600, // 弹窗容器宽度（rpx）
|
maxImageHeight: 500 // 图片最大高度限制（rpx）
|
};
|
},
|
watch: {
|
show(newVal) {
|
console.log("弹窗监听变化",newVal)
|
if (newVal) {
|
// 弹窗显示时重新获取容器宽度并计算图片尺寸
|
this.$nextTick(() => {
|
this.getContainerWidth();
|
});
|
|
if (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
|
|
// 获取容器宽度
|
this.getContainerWidth();
|
},
|
methods: {
|
// 获取容器宽度
|
getContainerWidth() {
|
this.$nextTick(() => {
|
// 创建查询对象
|
const query = uni.createSelectorQuery().in(this);
|
query.select('.popup-content').boundingClientRect((data) => {
|
if (data && data.width) {
|
// 将px转换为rpx（考虑设备像素比）
|
const systemInfo = uni.getSystemInfoSync();
|
const screenWidth = systemInfo.screenWidth;
|
const rpxRatio = 750 / screenWidth; // rpx与px的转换比例
|
this.containerWidth = Math.round(data.width * rpxRatio);
|
|
console.log(`容器宽度获取成功: ${data.width}px -> ${this.containerWidth}rpx`);
|
|
// 如果图片已经加载，重新计算尺寸
|
if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
|
this.calculateImageSize();
|
}
|
} else {
|
console.warn('无法获取容器宽度，使用默认值');
|
this.containerWidth = 600; // 默认宽度
|
}
|
}).exec();
|
});
|
},
|
|
// 图片加载完成事件
|
onImageLoad(e) {
|
console.log('图片加载完成', e.detail);
|
|
// 获取图片原始尺寸
|
this.originalImageWidth = e.detail.width;
|
this.originalImageHeight = e.detail.height;
|
|
// 计算等比例缩放后的尺寸
|
this.calculateImageSize();
|
},
|
|
// 图片加载失败事件
|
onImageError(e) {
|
console.error('图片加载失败', e.detail);
|
// 设置默认尺寸
|
this.imageWidth = this.containerWidth;
|
this.imageHeight = 300;
|
},
|
|
// 计算图片等比例缩放尺寸
|
calculateImageSize() {
|
if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
|
// 计算图片的宽高比
|
const imageRatio = this.originalImageHeight / this.originalImageWidth;
|
|
// 图片使用100%宽度填充容器，widthFix模式会自动计算高度
|
this.imageWidth = this.containerWidth;
|
this.imageHeight = Math.round(this.imageWidth * imageRatio);
|
|
console.log(`图片尺寸计算完成:`);
|
console.log(`- 原始尺寸: ${this.originalImageWidth}px × ${this.originalImageHeight}px`);
|
console.log(`- 计算尺寸: ${this.imageWidth}rpx × ${this.imageHeight}rpx`);
|
console.log(`- 容器宽度: ${this.containerWidth}rpx`);
|
console.log(`- 宽高比: ${imageRatio.toFixed(3)}`);
|
console.log(`- 实际显示: 宽度100%，高度自适应，无高度限制`);
|
}
|
},
|
|
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;
|
max-height: 85vh; /* 提高最大高度限制，给图片更多空间 */
|
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);
|
display: flex;
|
flex-direction: column; /* 竖向布局 */
|
}
|
|
.content-enter {
|
transform: translateY(0) scale(1);
|
opacity: 1;
|
}
|
|
.content-leave {
|
transform: translateY(50rpx) scale(0.9);
|
opacity: 0;
|
}
|
|
/* 活动标题固定区域 */
|
.activity-title-fixed {
|
padding: 30rpx 30rpx 20rpx 30rpx;
|
background-color: #ffffff;
|
border-bottom: 1rpx solid #f5f5f5;
|
}
|
|
/* 活动内容滚动区域 */
|
.activity-content-scroll {
|
flex: 1; /* 占据剩余空间 */
|
min-height: 0; /* 重要：确保 flex 子元素可以收缩 */
|
max-height: 150rpx; /* 适当减少活动内容区域的最大高度，给图片更多空间 */
|
}
|
|
/* 活动内容 */
|
.activity-content {
|
padding: 30rpx 30rpx 20rpx 30rpx;
|
}
|
|
/* 固定底部区域 */
|
.activity-bottom {
|
padding: 20rpx 30rpx 30rpx 30rpx;
|
background-color: #ffffff;
|
border-top: 1rpx solid #f5f5f5; /* 添加分割线 */
|
}
|
|
/* 关闭按钮 */
|
.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-scroll {
|
max-height: 50vh; /* 限制图片区域最大高度为屏幕的50% */
|
width: 100%;
|
border-top-left-radius: 24rpx;
|
border-top-right-radius: 24rpx;
|
overflow: hidden;
|
}
|
|
/* 活动图片 */
|
.activity-img {
|
position: relative;
|
width: 100%; /* 容器宽度铺满弹窗内容区 */
|
display: block; /* 改为block确保完全填充宽度 */
|
/* 可选：添加背景色，避免图片加载前显示空白 */
|
background-color: #f5f5f5;
|
}
|
|
.popup-img {
|
display: block;
|
width: 100%; /* 确保图片宽度完全填充容器 */
|
border-top-left-radius: 24rpx;
|
border-top-right-radius: 24rpx;
|
/* 使用 widthFix 模式，让图片根据设定的宽度自动计算高度 */
|
/* 图片尺寸通过动态计算的style控制 */
|
}
|
|
/* 活动信息 */
|
.activity-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333333;
|
margin-bottom: 20rpx;
|
line-height: 1.3;
|
text-align: center;
|
}
|
|
.activity-desc {
|
font-size: 26rpx;
|
color: #666666;
|
line-height: 1.5;
|
text-align: left; /* 左对齐 */
|
text-indent: 2em; /* 首行缩进两个字符 */
|
}
|
|
/* 倒计时样式 */
|
.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>
|
