Jacob
1 天以前 433c5ab2fd2a6fd48fb931b5070b742503a99a6b
pages/zone/index.vue
....@@ -89,8 +89,10 @@
8989 </view>
9090 </view>
9191 </view>
92
- <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
93
- <image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
92
+ <view @click="goLottery" class="lottery_banner"
93
+ v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
94
+ <image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
95
+ :style="{ height: lotteryBannerHeight }">
9496 </image>
9597 </view>
9698 <view class="tag-img-container" v-if="info.zoneType == 7">
....@@ -642,6 +644,8 @@
642644 stockEmpty: true,
643645 urlOption: {},
644646 homeTop: '200',
647
+ lotteryBannerHeight: '', //抽奖banner预计算高度(rpx),空字符串表示未取到,按原逻辑自适应
648
+ lotteryBannerReady: false, //是否已拿到banner尺寸(或已确认拿不到),未就绪前不渲染,避免首帧撑高
645649 hasNewPop: false,
646650 leftCoupon: {},
647651 rightCoupon: {},
....@@ -1480,6 +1484,29 @@
14801484 this.$refs.popNewuserRef.show()
14811485 }
14821486 },
1487
+ // 预取抽奖banner真实宽高,计算出高度后再渲染,避免加载前被组件默认高度(225px)撑大
1488
+ setLotteryBannerSize(info) {
1489
+ let that = this
1490
+ that.lotteryBannerHeight = ''
1491
+ that.lotteryBannerReady = false
1492
+ if (!info || !info.isLottery || !info.lotteryBanner) {
1493
+ that.lotteryBannerReady = true
1494
+ return
1495
+ }
1496
+ uni.getImageInfo({
1497
+ src: info.lotteryBanner,
1498
+ success: (img) => {
1499
+ if (img.width > 0 && img.height > 0) {
1500
+ that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1501
+ }
1502
+ that.lotteryBannerReady = true
1503
+ },
1504
+ fail: (err) => {
1505
+ console.warn('抽奖banner尺寸预取失败,回退为自适应', err)
1506
+ that.lotteryBannerReady = true
1507
+ }
1508
+ })
1509
+ },
14831510 getZoneDetail: function () {
14841511 let that = this;
14851512 let belong = this.$store.getters.belong;
....@@ -1487,7 +1514,7 @@
14871514 console.log('专区详情入参::', params)
14881515 getZoneDetail(that.id, params).then(res => {
14891516 that.info = res.data;
1490
- //that.info.zoneType=8;
1517
+ that.setLotteryBannerSize(res.data);
14911518 that.updateZoneShareMenu();
14921519 if (res.data.zoneType == 6) {
14931520 that.setYueyangZone()