fix: 抽奖banner预取尺寸就绪后再渲染避免首帧撑高页面

Jacob

1 天以前 76005787a10f1cf2e26f1b0c1672836b7d633ed2

 pages/zone/index.vue
..
..
@@ -71,8 +71,10 @@
71
71
 					</view>
72
72
 				</view>
73
73
 			</view>
74
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
75
-				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
74
+			<view @click="goLottery" class="lottery_banner"
75
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
76
+				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
77
+					:style="{ height: lotteryBannerHeight }">
76
78
 				</image>
77
79
 			</view>
78
80
 			<view class="tag-img-container" v-if="info.zoneType == 7">
..
..
@@ -622,6 +624,8 @@
622
624
 			stockEmpty: true,
623
625
 			urlOption: {},
624
626
 			homeTop: '200',
627
+			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
628
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
625
629
 			hasNewPop: false,
626
630
 			leftCoupon: {},
627
631
 			rightCoupon: {},
..
..
@@ -1449,6 +1453,29 @@
1449
1453
 				this.$refs.popNewuserRef.show()
1450
1454
 			}
1451
1455
 		},
1456
+		// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
1457
+		setLotteryBannerSize(info) {
1458
+			let that = this
1459
+			that.lotteryBannerHeight = ''
1460
+			that.lotteryBannerReady = false
1461
+			if (!info || !info.isLottery || !info.lotteryBanner) {
1462
+				that.lotteryBannerReady = true
1463
+				return
1464
+			}
1465
+			uni.getImageInfo({
1466
+				src: info.lotteryBanner,
1467
+				success: (img) => {
1468
+					if (img.width > 0 && img.height > 0) {
1469
+						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1470
+					}
1471
+					that.lotteryBannerReady = true
1472
+				},
1473
+				fail: (err) => {
1474
+					console.warn('抽奖banner尺寸预取失败，回退为自适应', err)
1475
+					that.lotteryBannerReady = true
1476
+				}
1477
+			})
1478
+		},
1452
1479
 		getZoneDetail: function () {
1453
1480
 			let that = this;
1454
1481
 			let belong = this.$store.getters.belong;
..
..
@@ -1456,6 +1483,11 @@
1456
1483
 			console.log('专区详情入参：：', params)
1457
1484
 			getZoneDetail(that.id, params).then(res => {
1458
1485
 				that.info = res.data;
1486
+<<<<<<< Updated upstream
1487
+=======
1488
+				//that.info.zoneType=8;
1489
+				that.setLotteryBannerSize(res.data);
1490
+>>>>>>> Stashed changes
1459
1491
 				that.updateZoneShareMenu();
1460
1492
 				if (res.data.zoneType == 6) {
1461
1493
 					that.setYueyangZone()