调整弹窗样式

peng

2025-09-01 0c83611409654cfc53c64345ba60b7e1e5fcc5b7

 pages/ActivityPopup/ActivityPopup.vue

@@ -14,15 +14,37 @@
      </view>
      
      <!-- 活动图片 -->
      <view class="activity-img">
        <image :src="activityImage" mode="widthFix" class="popup-img"></image>
      <view class="activity-img" :style="{ height: imageHeight + 'rpx' }">
        <image 
          :src="activityImage" 
          mode="widthFix" 
          class="popup-img"
          :style="{ width: imageWidth + 'rpx', height: imageHeight + 'rpx' }"
          @load="onImageLoad"
          @error="onImageError">
        </image>
      </view>
      
      <!-- 活动信息 -->
      <view class="activity-info">
      <!-- 活动标题（固定显示） -->
      <view class="activity-title-fixed">
        <h3 class="activity-title">{{ activityTitle }}</h3>
        <p class="activity-desc">{{ activityDesc }}</p>
      </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>
@@ -51,6 +73,10 @@
export default {
  name: 'ActivityPopup',
  props: {
   prizeActivityId:{
      type:String,
      default:''
   },
    // 控制弹窗显示/隐藏
    show: {
      type: Boolean,
@@ -96,7 +122,12 @@
      hours: '00',
      minutes: '00',
      seconds: '00',
      countdownTimer: null
      countdownTimer: null,
      // 图片相关数据
      imageWidth: 600, // 固定宽度（rpx）
      imageHeight: 300, // 计算得出的高度（rpx）
      originalImageWidth: 0, // 原图宽度
      originalImageHeight: 0 // 原图高度
    };
  },
  watch: {
@@ -116,6 +147,43 @@
    
   },
  methods: {
    // 图片加载完成事件
    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.imageHeight = 300;
    },
    
    // 计算图片等比例缩放尺寸
    calculateImageSize() {
      if (this.originalImageWidth > 0 && this.originalImageHeight > 0) {
        // 根据固定宽度计算等比例高度
        const ratio = this.originalImageHeight / this.originalImageWidth;
        this.imageHeight = Math.round(this.imageWidth * ratio);
        
        // 限制最大高度，防止图片过高
        const maxHeight = 500; // 最大高度限制（rpx）
        if (this.imageHeight > maxHeight) {
          this.imageHeight = maxHeight;
          this.imageWidth = Math.round(maxHeight / ratio);
        }
        
        console.log(`图片尺寸计算完成: 原始(${this.originalImageWidth}x${this.originalImageHeight}) -> 显示(${this.imageWidth}x${this.imageHeight})`);
      }
    },
    
     onpan(){
        
     },
@@ -170,9 +238,14 @@
    
    // 点击参与活动
    onJoinActivity() {
      this.$emit('join');
		
      // this.$emit('join');
     console.log(this.prizeActivityId)
      uni.navigateTo({
         url:'/pages/prize/PrizeDetail/PrizeDetail?id='+this.prizeActivityId
      })
      // 可以在这里添加参与活动后的逻辑，比如关闭弹窗
      // this.onClose();
       this.$emit('close');
    }
  },
  beforeDestroy() {
@@ -221,6 +294,7 @@
.popup-content {
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh; /* 限制最大高度为屏幕的80% */
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
@@ -228,6 +302,8 @@
  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 {
@@ -238,6 +314,32 @@
.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: 200rpx; /* 限制活动内容区域的最大高度 */
}

/* 活动内容 */
.activity-content {
  padding: 30rpx 30rpx 20rpx 30rpx;
}

/* 固定底部区域 */
.activity-bottom {
  padding: 20rpx 30rpx 30rpx 30rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #f5f5f5; /* 添加分割线 */
}

/* 关闭按钮 */
@@ -259,37 +361,39 @@
.activity-img {
    position: relative;
    width: 100%; /* 容器宽度铺满弹窗内容区 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 可选：添加背景色，避免图片加载前显示空白 */
    background-color: #f5f5f5;
    border-top-left-radius: 24rpx; /* 与图片圆角一致，避免容器露白 */
    border-top-right-radius: 24rpx;
    overflow: hidden; /* 确保图片不会超出容器边界 */
}

.popup-img {
   width: 100%;
   /* 核心：用 max-height 限制最大高度，不限制 min-height（保留比例） */
   max-height: 300rpx; /* 图片最大高度（超过则按比例缩小，保证完整显示） */
    display: block;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    /* 图片尺寸通过动态计算的style控制 */
}

/* 活动信息 */
.activity-info {
  padding: 30rpx;
  text-align: center;
}

.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;
  margin-bottom: 30rpx;
  line-height: 1.5;
  text-align: left; /* 左对齐 */
  text-indent: 2em; /* 首行缩进两个字符 */
}

/* 倒计时样式 */