审查视图

node_modules/uview-ui/components/u-count-down/u-count-down.vue 4.4 KB
韩昌 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
<template>
	<view class="u-count-down">
		<slot>
			<text class="u-count-down__text">{{ formattedTime }}</text>
		</slot>
	</view>
</template>

<script>
	import props from './props.js';
	import {
		isSameSecond,
		parseFormat,
		parseTimeData
	} from './utils';
	/**
	 * u-count-down 倒计时
	 * @description 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。
	 * @tutorial https://uviewui.com/components/countDown.html
	 * @property {String | Number}	time		倒计时时长,单位ms (默认 0 )
	 * @property {String}			format		时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒  (默认 'HH:mm:ss' )
	 * @property {Boolean}			autoStart	是否自动开始倒计时 (默认 true )
	 * @property {Boolean}			millisecond	是否展示毫秒倒计时 (默认 false )
	 * @event {Function} finish 倒计时结束时触发 
	 * @event {Function} change 倒计时变化时触发 
	 * @event {Function} start	开始倒计时
	 * @event {Function} pause	暂停倒计时 
	 * @event {Function} reset	重设倒计时,若 auto-start 为 true,重设后会自动开始倒计时 
	 * @example <u-count-down :time="time"></u-count-down>
	 */
	export default {
		name: 'u-count-down',
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		data() {
			return {
				timer: null,
				// 各单位(天,时,分等)剩余时间
				timeData: parseTimeData(0),
				// 格式化后的时间,如"03:23:21"
				formattedTime: '0',
				// 倒计时是否正在进行中
				runing: false,
				endTime: 0, // 结束的毫秒时间戳
				remainTime: 0, // 剩余的毫秒时间
			}
		},
		watch: {
			time(n) {
				this.reset()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.reset()
			},
			// 开始倒计时
			start() {
				if (this.runing) return
				// 标识为进行中
				this.runing = true
				// 结束时间戳 = 此刻时间戳 + 剩余的时间
				this.endTime = Date.now() + this.remainTime
				this.toTick()
			},
			// 根据是否展示毫秒,执行不同操作函数
			toTick() {
				if (this.millisecond) {
					this.microTick()
				} else {
					this.macroTick()
				}
			},
			macroTick() {
				this.clearTimeout()
				// 每隔一定时间,更新一遍定时器的值
				// 同时此定时器的作用也能带来毫秒级的更新
				this.timer = setTimeout(() => {
					// 获取剩余时间
					const remain = this.getRemainTime()
					// 重设剩余时间
					if (!isSameSecond(remain, this.remainTime) || remain === 0) {
						this.setRemainTime(remain)
					}
					// 如果剩余时间不为0,则继续检查更新倒计时
					if (this.remainTime !== 0) {
						this.macroTick()
					}
				}, 30)
			},
			microTick() {
				this.clearTimeout()
				this.timer = setTimeout(() => {
					this.setRemainTime(this.getRemainTime())
					if (this.remainTime !== 0) {
						this.microTick()
					}
				}, 50)
			},
			// 获取剩余的时间
			getRemainTime() {
				// 取最大值,防止出现小于0的剩余时间值
				return Math.max(this.endTime - Date.now(), 0)
			},
			// 设置剩余的时间
			setRemainTime(remain) {
				this.remainTime = remain
				// 根据剩余的毫秒时间,得出该有天,小时,分钟等的值,返回一个对象
				const timeData = parseTimeData(remain)
				this.$emit('change', timeData)
				// 得出格式化后的时间
				this.formattedTime = parseFormat(this.format, timeData)
				// 如果时间已到,停止倒计时
				if (remain <= 0) {
					this.pause()
					this.$emit('finish')
				}
			},
			// 重置倒计时
			reset() {
				this.pause()
				this.remainTime = this.time
				this.setRemainTime(this.remainTime)
				if (this.autoStart) {
					this.start()
				}
			},
			// 暂停倒计时
			pause() {
				this.runing = false;
				this.clearTimeout()
			},
			// 清空定时器
			clearTimeout() {
				clearTimeout(this.timer)
				this.timer = null
			}
		},
		beforeDestroy() {
			this.clearTimeout()
		}
	}
</script>

<style
	lang="scss"
	scoped
>
	@import "../../libs/css/components.scss";
	$u-count-down-text-color:$u-content-color !default;
	$u-count-down-text-font-size:15px !default;
	$u-count-down-text-line-height:22px !default;

	.u-count-down {
		&__text {
			color: $u-count-down-text-color;
			font-size: $u-count-down-text-font-size;
			line-height: $u-count-down-text-line-height;
		}
	}
</style>