调整弹窗样式

peng

2025-09-01 f438257c5ab266170ead5de47e966a72d67411e0

调整弹窗样式

 pages/ActivityPopup/ActivityPopup.vue

@@ -14,16 +14,22 @@
      </view>
      
      <!-- 活动图片 -->
      <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>
      <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">
@@ -124,17 +130,26 @@
      seconds: '00',
      countdownTimer: null,
      // 图片相关数据
      imageWidth: 600, // 固定宽度（rpx）
      imageHeight: 300, // 计算得出的高度（rpx）
      originalImageWidth: 0, // 原图宽度
      originalImageHeight: 0 // 原图高度
      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.showCountdown) {
        this.startCountdown();
      if (newVal) {
        // 弹窗显示时重新获取容器宽度并计算图片尺寸
        this.$nextTick(() => {
          this.getContainerWidth();
        });
        
        if (this.showCountdown) {
          this.startCountdown();
        }
      } else if (!newVal && this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
@@ -144,9 +159,38 @@
  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);
@@ -155,7 +199,7 @@
      this.originalImageWidth = e.detail.width;
      this.originalImageHeight = e.detail.height;
      
      // 计算等比例缩放后的高度
      // 计算等比例缩放后的尺寸
      this.calculateImageSize();
    },
    
@@ -163,24 +207,26 @@
    onImageError(e) {
      console.error('图片加载失败', e.detail);
      // 设置默认尺寸
      this.imageWidth = this.containerWidth;
      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 imageRatio = this.originalImageHeight / this.originalImageWidth;
        
        // 限制最大高度，防止图片过高
        const maxHeight = 500; // 最大高度限制（rpx）
        if (this.imageHeight > maxHeight) {
          this.imageHeight = maxHeight;
          this.imageWidth = Math.round(maxHeight / ratio);
        }
        // 图片使用100%宽度填充容器，widthFix模式会自动计算高度
        this.imageWidth = this.containerWidth;
        this.imageHeight = Math.round(this.imageWidth * imageRatio);
        
        console.log(`图片尺寸计算完成: 原始(${this.originalImageWidth}x${this.originalImageHeight}) -> 显示(${this.imageWidth}x${this.imageHeight})`);
        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%，高度自适应，无高度限制`);
      }
    },
    
@@ -294,7 +340,7 @@
.popup-content {
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh; /* 限制最大高度为屏幕的80% */
  max-height: 85vh; /* 提高最大高度限制，给图片更多空间 */
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
@@ -327,7 +373,7 @@
.activity-content-scroll {
  flex: 1; /* 占据剩余空间 */
  min-height: 0; /* 重要：确保 flex 子元素可以收缩 */
  max-height: 200rpx; /* 限制活动内容区域的最大高度 */
  max-height: 150rpx; /* 适当减少活动内容区域的最大高度，给图片更多空间 */
}

/* 活动内容 */
@@ -357,24 +403,30 @@
  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: flex;
    justify-content: center;
    align-items: center;
    display: block; /* 改为block确保完全填充宽度 */
    /* 可选：添加背景色，避免图片加载前显示空白 */
    background-color: #f5f5f5;
    border-top-left-radius: 24rpx; /* 与图片圆角一致，避免容器露白 */
    border-top-right-radius: 24rpx;
    overflow: hidden; /* 确保图片不会超出容器边界 */
}

.popup-img {
    display: block;
    width: 100%; /* 确保图片宽度完全填充容器 */
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    /* 使用 widthFix 模式，让图片根据设定的宽度自动计算高度 */
    /* 图片尺寸通过动态计算的style控制 */
}