crmeb_mini.git - Gitblit

..	..	@@ -20,8 +20,9 @@
20	20	<view v-else>
21	21	<view class="expireTime" v-if="expireTime && expireTime.length">
22	22	<text>专区将在</text>
23		- <text v-for="(val, index) in expireTime" :key="index">
24		- <text class="num">{{ val }}</text>{{ expireTimeUnit[index] }}
	23	+ <text v-for="(item, index) in expireTime" :key="index">
	24	+ <text class="num"><text v-for="(char, ci) in item.digits" :key="ci"
	25	+ class="digit">{{ char }}</text></text>{{ item.unit }}
25	26	</text>
26	27	<text>{{ startOrEnd }}</text>
27	28	</view>
..	..	@@ -88,9 +89,9 @@
88	89	</view>
89	90	</view>
90	91	</view>
91		- <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
92		- <image class="lottery_bannerImg"
93		- src="https://ossacmall.bluedeer.com.cn/app/static/images/zone_lotteryBanner.gif" mode="widthFix">
	92	+ <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
	93	+ <image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
	94	+ :style="{ height: lotteryBannerHeight }">
94	95	</image>
95	96	</view>
96	97	<view class="tag-img-container" v-if="info.zoneType == 7">
..	..	@@ -607,7 +608,7 @@
607	608	showMenu: false,
608	609	selectedMenuArr: [],
609	610	expireTime: [],
610		- expireTimeUnit: [],
	611	+ countdownToken: 0,
611	612	isPageShow: false,
612	613	loginBackFn: null,
613	614	errText: '',
..	..	@@ -642,6 +643,7 @@
642	643	stockEmpty: true,
643	644	urlOption: {},
644	645	homeTop: '200',
	646	+ lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
645	647	hasNewPop: false,
646	648	leftCoupon: {},
647	649	rightCoupon: {},
..	..	@@ -1327,6 +1329,9 @@
1327	1329	})
1328	1330	},
1329	1331	validAlert(data) {
	1332	+ // 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
	1333	+ this.countdownToken++
	1334	+ const token = this.countdownToken
1330	1335	const {
1331	1336	startTime,
1332	1337	expireTime
..	..	@@ -1345,17 +1350,17 @@
1345	1350	let minutes = startTimetamp.getMinutes()
1346	1351	minutes = minutes < 10 ? '0' + minutes : minutes;
1347	1352
1348		- this.countdownTimer(startTime.split('-').join('/'), 'start')
	1353	+ this.countdownTimer(startTime.split('-').join('/'), 'start', token)
1349	1354	this.startOrEnd = "后开启"
1350	1355	return
1351		- }
1352		- }
1353		- if (expireTime) {
1354		- const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1355		- if (expireTimetamp < nowTimestamp) {
	1356	+ }
	1357	+ }
	1358	+ if (expireTime) {
	1359	+ const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
	1360	+ if (expireTimetamp < nowTimestamp) {
1356	1361	return
1357		- }
1358		- this.countdownTimer(expireTime.split('-').join('/'), 'end')
	1362	+ }
	1363	+ this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
1359	1364	this.startOrEnd = "后结束"
1360	1365	}
1361	1366	},
..	..	@@ -1477,6 +1482,21 @@
1477	1482	this.$refs.popNewuserRef.show()
1478	1483	}
1479	1484	},
	1485	+ // 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
	1486	+ setLotteryBannerSize(info) {
	1487	+ let that = this
	1488	+ that.lotteryBannerHeight = ''
	1489	+ if (!info \|\| !info.isLottery \|\| !info.lotteryBanner) return
	1490	+ uni.getImageInfo({
	1491	+ src: info.lotteryBanner,
	1492	+ success: (img) => {
	1493	+ if (img.width > 0 && img.height > 0) {
	1494	+ that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
	1495	+ }
	1496	+ },
	1497	+ fail: () => { }
	1498	+ })
	1499	+ },
1480	1500	getZoneDetail: function () {
1481	1501	let that = this;
1482	1502	let belong = this.$store.getters.belong;
..	..	@@ -1484,7 +1504,7 @@
1484	1504	console.log('专区详情入参：：', params)
1485	1505	getZoneDetail(that.id, params).then(res => {
1486	1506	that.info = res.data;
1487		- //that.info.zoneType=8;
	1507	+ that.setLotteryBannerSize(res.data);
1488	1508	that.updateZoneShareMenu();
1489	1509	if (res.data.zoneType == 6) {
1490	1510	that.setYueyangZone()
..	..	@@ -1494,7 +1514,7 @@
1494	1514	that.homeTop = that.getHomeTop(0.4)
1495	1515	}
1496	1516	that.expireTime = [];
1497		- that.expireTimeUnit = [];
	1517	+ that.countdownToken++;
1498	1518	that.where.page = 1;
1499	1519	that.getGoodList()
1500	1520	that.validAlert(res.data)
..	..	@@ -1520,8 +1540,9 @@
1520	1540	}
1521	1541	});
1522	1542	},
1523		- countdownTimer(expireTime, type) {
	1543	+ countdownTimer(expireTime, type, token) {
1524	1544	if (!expireTime) return
	1545	+ if (token !== undefined && token !== this.countdownToken) return
1525	1546	let that = this;
1526	1547	// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
1527	1548	const endTimestamp = new Date(expireTime).getTime();
..	..	@@ -1533,56 +1554,56 @@
1533	1554	if (type == 'end') {
1534	1555	if (diff <= 0) {
1535	1556	this.expireTime = []
1536		- this.expireTimeUnit = []
1537	1557	return
1538	1558	} else { }
1539	1559	} else if (type == 'start') {
1540	1560	if (diff <= 0) {
1541	1561	this.expireTime = []
1542		- this.expireTimeUnit = []
1543	1562	const expireTime2 = that.info.expireTime
1544	1563	if (expireTime2) {
1545	1564	const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
1546	1565	if (expireTimetamp < nowTimestamp) {
1547	1566	return
1548	1567	}
1549		- this.countdownTimer(expireTime2.split('-').join('/'), 'end')
	1568	+ this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
1550	1569	this.startOrEnd = "后结束"
1551	1570	}
1552	1571	return
1553	1572	}
1554	1573	}
	1574	+ const pad = num => (num < 10 ? '0' + num : String(num))
1555	1575	const res = []
1556		- const unit = []
1557	1576	const days = Math.floor(diff / (1000 * 60 * 60 * 24))
1558	1577	diff %= (1000 * 60 * 60 * 24)
1559		- if (days > 0) {
1560		- res.push(days);
1561		- unit.push('日')
1562		- }
1563	1578	// 转换为小时、分钟、秒
1564	1579	const hours = Math.floor(diff / (1000 * 60 * 60));
1565	1580	diff %= (1000 * 60 * 60); // 剩余毫秒数
1566		- if (hours > 0) {
1567		- res.push(hours < 10 ? '0' + hours : hours);
1568		- unit.push('时')
1569		- }
1570	1581	const minutes = Math.floor(diff / (1000 * 60));
1571		- if (minutes > 0) {
1572		- res.push(minutes < 10 ? '0' + minutes : minutes);
1573		- unit.push('分')
1574		- }
1575	1582	diff %= (1000 * 60); // 剩余毫秒数
1576	1583	const seconds = Math.floor(diff / 1000);
1577		- if (seconds > 0) {
1578		- res.push(seconds < 10 ? '0' + seconds : seconds);
1579		- unit.push('秒')
	1584	+ // 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
	1585	+ if (days > 0) {
	1586	+ res.push({
	1587	+ digits: pad(days).split(''),
	1588	+ unit: '日'
	1589	+ })
1580	1590	}
	1591	+ res.push({
	1592	+ digits: pad(hours).split(''),
	1593	+ unit: '时'
	1594	+ })
	1595	+ res.push({
	1596	+ digits: pad(minutes).split(''),
	1597	+ unit: '分'
	1598	+ })
	1599	+ res.push({
	1600	+ digits: pad(seconds).split(''),
	1601	+ unit: '秒'
	1602	+ })
1581	1603	this.expireTime = res
1582		- this.expireTimeUnit = unit
1583	1604	if (this.isPageShow) {
1584	1605	setTimeout(() => {
1585		- that.countdownTimer(expireTime, type)
	1606	+ that.countdownTimer(expireTime, type, token)
1586	1607	}, 1000)
1587	1608	}
1588	1609	},
..	..	@@ -1669,13 +1690,11 @@
1669	1690	.lottery_banner {
1670	1691	margin: 15rpx auto;
1671	1692	width: 690rpx;
1672		- height: 120rpx;
1673	1693	text-align: center;
1674	1694	}
1675	1695
1676	1696	.lottery_bannerImg {
1677	1697	width: 690rpx;
1678		- height: 120rpx;
1679	1698	}
1680	1699
1681	1700	.tag-wrap-container {
..	..	@@ -2159,11 +2178,22 @@
2159	2178	padding: 15rpx;
2160	2179	padding-left: 30rpx;
2161	2180	color: #979797;
	2181	+ font-size: 26rpx;
2162	2182
2163	2183	.num {
	2184	+ display: inline-block;
2164	2185	color: #000000;
2165	2186	background: #FFE20E;
2166		- padding: 0 10rpx;
	2187	+ padding: 0 6rpx;
	2188	+ margin: 0 4rpx;
	2189	+ vertical-align: middle;
	2190	+ }
	2191	+
	2192	+ /* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
	2193	+ .digit {
	2194	+ display: inline-block;
	2195	+ width: 19rpx;
	2196	+ text-align: center;
2167	2197	}
2168	2198	}
2169	2199	</style>