uni-app实现秒杀循环商品倒计时效果

╰半橙微兮° 2022-11-21 03:38 517阅读 0赞

先看看效果吧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

先在components里面建一个countdown组件

### countdown.vue ###

<template>
    	<view class="uni-countdown">
    		
    		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
       { h }}</text>
    		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{
       { showColon ? ':' : '时' }}</text>
    		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
       { i }}</text>
    		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{
       { showColon ? ':' : '分' }}</text>
    		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
       { s }}</text>
    		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
    	</view>
    </template>
    <script>
    	/**
    	 * Countdown 倒计时
    	 * @description 倒计时组件
    	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
    	 * @property {String} backgroundColor 背景色
    	 * @property {String} color 文字颜色
    	 * @property {Number} day 天数
    	 * @property {Number} hour 小时
    	 * @property {Number} minute 分钟
    	 * @property {Number} second 秒
    	 * @property {Boolean} showDay = [true|false] 是否显示天数
    	 * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
    	 * @property {String} splitorColor 分割符号颜色
    	 * @event {Function} timeup 倒计时时间到触发事件
    	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
    	 */
    	export default {
    		name: 'UniCountdown',
    		props: {
    			showDay: {
    				type: Boolean,
    				default: true
    			},
    			showColon: {
    				type: Boolean,
    				default: true
    			},
    			backgroundColor: {
    				type: String,
    				default: '#FFFFFF'
    			},
    			borderColor: {
    				type: String,
    				default: '#000000'
    			},
    			color: {
    				type: String,
    				default: '#000000'
    			},
    			splitorColor: {
    				type: String,
    				default: '#000000'
    			},
    			day: {
    				type: Number,
    				default: 0
    			},
    			hour: {
    				type: Number,
    				default: 0
    			},
    			minute: {
    				type: Number,
    				default: 0
    			},
    			second: {
    				type: Number,
    				default: 0
    			}
    		},
    		data() {
    			return {
    				timer: null,
    				syncFlag: false,
    				d: '00',
    				h: '00',
    				i: '00',
    				s: '00',
    				leftTime: 0,
    				seconds: 0
    			}
    		},
    		watch: {
    			day(val) {
    				this.changeFlag()
    			},
    			hour(val) {
    				this.changeFlag()
    			},
    			minute(val) {
    				this.changeFlag()
    			},
    			second(val) {
    				this.changeFlag()
    			}
    		},
    		created: function(e) {
    			this.startData();
    		},
    		beforeDestroy() {
    			clearInterval(this.timer)
    		},
    		methods: {
    			toSeconds(day, hours, minutes, seconds) {
    				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
    			},
    			timeUp() {
    				clearInterval(this.timer)
    				this.$emit('timeup')
    			},
    			countDown() {
    				let seconds = this.seconds
    				let [day, hour, minute, second] = [0, 0, 0, 0]
    				if (seconds > 0) {
    					day = Math.floor(seconds / (60 * 60 * 24))
    					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
    					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
    					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
    				} else {
    					this.timeUp()
    				}
    				if (day < 10) {
    					day = '0' + day
    				}
    				if (hour < 10) {
    					hour = '0' + hour
    				}
    				if (minute < 10) {
    					minute = '0' + minute
    				}
    				if (second < 10) {
    					second = '0' + second
    				}
    				this.d = day
    				this.h = hour
    				this.i = minute
    				this.s = second
    			},
    			startData() {
    				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
    				if (this.seconds <= 0) {
    					return
    				}
    				this.countDown()
    				this.timer = setInterval(() => {
    					this.seconds--
    					if (this.seconds < 0) {
    						this.timeUp()
    						return
    					}
    					this.countDown()
    				}, 1000)
    			},
    			changeFlag() {
    				if (!this.syncFlag) {
    					this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
    					this.startData();
    					this.syncFlag = true;
    				}
    			}
    		}
    	}
    </script>
    <style scoped>
    	.uni-countdown {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		justify-content: flex-start;
    		padding: 2rpx 0;
    	}
    
    	.uni-countdown__splitor {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		justify-content: center;
    		line-height: 48rpx;
    		padding: 5rpx;
    		font-size: 24rpx;
    	}
    
    	.uni-countdown__number {
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		justify-content: center;
    		align-items: center;
    		width: 52rpx;
    		height: 48rpx;
    		line-height: 48rpx;
    		margin: 5rpx;
    		text-align: center;
    		font-size: 24rpx;
    	}
    </style>

以上是组件全部代码,这里没有显示天

接下来在需要的页面引入, 这里我直接复制全部代码了

### index.vue ###

<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
    						<image :src="item.cover || errorImage" mode="widthFix"></image>
    						<view class="goods-title">
    							{
       {item.title}}
    						</view>
    						<view class="goods-price">
    							{
       {item.price}}
    						</view>
    						<uni-countdown :backgroundColor="res" :day="item.end_times.d" :hour="item.end_times.h" :minute="item.end_times.m" :second="item.end_times.s"></uni-countdown>
    					</view>
    
    <script>
        import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
        export default {
            components: {
    			uniCountdown
    		},
            data() {
    			return {
                    recommendList: [ // 惠多推荐
    					{
    						title: "惠多多",
    						cover: "",
    						price: "1.00",
    						end_time: "1604142069000"
    					},
    					{
    						title: "惠多多",
    						cover: "",
    						price: "1.00",
    						end_time: "1604055722000"
    					},
    					{
    						title: "惠多多",
    						cover: "",
    						price: "1.00",
    						end_time: "1604142069000"
    					},
    					{
    						title: "惠多多",
    						cover: "",
    						price: "1.00",
    						end_time: "1604142069000"
    					}
    				]
                    
                }
                
            },
            onLoad() {
                this.init()  
            },
            methods: {
                init() {
    				var date = new Date().getTime();
    				let recommendList = this.recommendList;
    				recommendList.forEach((item, index) => {
    					var leftTime = item.end_time - date; //计算两日期之间相差的毫秒数
    					if (leftTime >= 0) {
    						let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
    						let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
    						let m = Math.floor(leftTime / 1000 / 60 % 60);
    						let s = Math.floor(leftTime / 1000 % 60);
    						item.end_times = {
    							d: d,
    							h: h,
    							m: m,
    							s: s
    						}
    					}
    				})
    				this.recommendList = recommendList
    			}        
            }
        }
    </script>

以上就是所有代码, 我自己的需求,做个记录,分享一下

### 注: 时间戳计算毫秒 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221120/8398ae4225de48fd87215637b7641397.png