fix:解决专区图片拉伸问题

Jacob

1 天以前 6a0a2c52a4ea8049909b8d7a40d0c2d098b5e74c

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