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>
..	..	@@ -70,9 +71,8 @@
70	71	</view>
71	72	</view>
72	73	</view>
73		- <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery">
74		- <image class="lottery_bannerImg"
75		- src="https://ossacmall.bluedeer.com.cn/app/static/images/zone_lotteryBanner.gif" mode="widthFix">
	74	+ <view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
	75	+ <image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix">
76	76	</image>
77	77	</view>
78	78	<view class="tag-img-container" v-if="info.zoneType == 7">
..	..	@@ -589,7 +589,7 @@
589	589	showMenu: false,
590	590	selectedMenuArr: [],
591	591	expireTime: [],
592		- expireTimeUnit: [],
	592	+ countdownToken: 0,
593	593	isPageShow: false,
594	594	loginBackFn: null,
595	595	errText: '',
..	..	@@ -1296,6 +1296,9 @@
1296	1296	})
1297	1297	},
1298	1298	validAlert(data) {
	1299	+ // 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
	1300	+ this.countdownToken++
	1301	+ const token = this.countdownToken
1299	1302	const {
1300	1303	startTime,
1301	1304	expireTime
..	..	@@ -1314,17 +1317,17 @@
1314	1317	let minutes = startTimetamp.getMinutes()
1315	1318	minutes = minutes < 10 ? '0' + minutes : minutes;
1316	1319
1317		- this.countdownTimer(startTime.split('-').join('/'), 'start')
	1320	+ this.countdownTimer(startTime.split('-').join('/'), 'start', token)
1318	1321	this.startOrEnd = "后开启"
1319	1322	return
1320		- }
1321		- }
1322		- if (expireTime) {
1323		- const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
1324		- if (expireTimetamp < nowTimestamp) {
	1323	+ }
	1324	+ }
	1325	+ if (expireTime) {
	1326	+ const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
	1327	+ if (expireTimetamp < nowTimestamp) {
1325	1328	return
1326		- }
1327		- this.countdownTimer(expireTime.split('-').join('/'), 'end')
	1329	+ }
	1330	+ this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
1328	1331	this.startOrEnd = "后结束"
1329	1332	}
1330	1333	},
..	..	@@ -1462,7 +1465,7 @@
1462	1465	that.homeTop = that.getHomeTop(0.4)
1463	1466	}
1464	1467	that.expireTime = [];
1465		- that.expireTimeUnit = [];
	1468	+ that.countdownToken++;
1466	1469	that.where.page = 1;
1467	1470	that.getGoodList()
1468	1471	that.validAlert(res.data)
..	..	@@ -1488,8 +1491,9 @@
1488	1491	}
1489	1492	});
1490	1493	},
1491		- countdownTimer(expireTime, type) {
	1494	+ countdownTimer(expireTime, type, token) {
1492	1495	if (!expireTime) return
	1496	+ if (token !== undefined && token !== this.countdownToken) return
1493	1497	let that = this;
1494	1498	// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
1495	1499	const endTimestamp = new Date(expireTime).getTime();
..	..	@@ -1501,56 +1505,56 @@
1501	1505	if (type == 'end') {
1502	1506	if (diff <= 0) {
1503	1507	this.expireTime = []
1504		- this.expireTimeUnit = []
1505	1508	return
1506	1509	} else { }
1507	1510	} else if (type == 'start') {
1508	1511	if (diff <= 0) {
1509	1512	this.expireTime = []
1510		- this.expireTimeUnit = []
1511	1513	const expireTime2 = that.info.expireTime
1512	1514	if (expireTime2) {
1513	1515	const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
1514	1516	if (expireTimetamp < nowTimestamp) {
1515	1517	return
1516	1518	}
1517		- this.countdownTimer(expireTime2.split('-').join('/'), 'end')
	1519	+ this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
1518	1520	this.startOrEnd = "后结束"
1519	1521	}
1520	1522	return
1521	1523	}
1522	1524	}
	1525	+ const pad = num => (num < 10 ? '0' + num : String(num))
1523	1526	const res = []
1524		- const unit = []
1525	1527	const days = Math.floor(diff / (1000 * 60 * 60 * 24))
1526	1528	diff %= (1000 * 60 * 60 * 24)
1527		- if (days > 0) {
1528		- res.push(days);
1529		- unit.push('日')
1530		- }
1531	1529	// 转换为小时、分钟、秒
1532	1530	const hours = Math.floor(diff / (1000 * 60 * 60));
1533	1531	diff %= (1000 * 60 * 60); // 剩余毫秒数
1534		- if (hours > 0) {
1535		- res.push(hours < 10 ? '0' + hours : hours);
1536		- unit.push('时')
1537		- }
1538	1532	const minutes = Math.floor(diff / (1000 * 60));
1539		- if (minutes > 0) {
1540		- res.push(minutes < 10 ? '0' + minutes : minutes);
1541		- unit.push('分')
1542		- }
1543	1533	diff %= (1000 * 60); // 剩余毫秒数
1544	1534	const seconds = Math.floor(diff / 1000);
1545		- if (seconds > 0) {
1546		- res.push(seconds < 10 ? '0' + seconds : seconds);
1547		- unit.push('秒')
	1535	+ // 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
	1536	+ if (days > 0) {
	1537	+ res.push({
	1538	+ digits: pad(days).split(''),
	1539	+ unit: '日'
	1540	+ })
1548	1541	}
	1542	+ res.push({
	1543	+ digits: pad(hours).split(''),
	1544	+ unit: '时'
	1545	+ })
	1546	+ res.push({
	1547	+ digits: pad(minutes).split(''),
	1548	+ unit: '分'
	1549	+ })
	1550	+ res.push({
	1551	+ digits: pad(seconds).split(''),
	1552	+ unit: '秒'
	1553	+ })
1549	1554	this.expireTime = res
1550		- this.expireTimeUnit = unit
1551	1555	if (this.isPageShow) {
1552	1556	setTimeout(() => {
1553		- that.countdownTimer(expireTime, type)
	1557	+ that.countdownTimer(expireTime, type, token)
1554	1558	}, 1000)
1555	1559	}
1556	1560	},
..	..	@@ -1637,13 +1641,11 @@
1637	1641	.lottery_banner {
1638	1642	margin: 15rpx auto;
1639	1643	width: 690rpx;
1640		- height: 120rpx;
1641	1644	text-align: center;
1642	1645	}
1643	1646
1644	1647	.lottery_bannerImg {
1645	1648	width: 690rpx;
1646		- height: 120rpx;
1647	1649	}
1648	1650
1649	1651	.tag-wrap-container {
..	..	@@ -2085,11 +2087,22 @@
2085	2087	padding: 15rpx;
2086	2088	padding-left: 30rpx;
2087	2089	color: #979797;
	2090	+ font-size: 26rpx;
2088	2091
2089	2092	.num {
	2093	+ display: inline-block;
2090	2094	color: #000000;
2091	2095	background: #FFE20E;
2092		- padding: 0 10rpx;
	2096	+ padding: 0 6rpx;
	2097	+ margin: 0 4rpx;
	2098	+ vertical-align: middle;
	2099	+ }
	2100	+
	2101	+ /* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
	2102	+ .digit {
	2103	+ display: inline-block;
	2104	+ width: 19rpx;
	2105	+ text-align: center;
2093	2106	}
2094	2107	}
2095	2108	</style>