logpm/uni_modules/fant-mini-plus/components/hd-count-down/hd-count-down.vue

<template>
	<view class="hd-count-down">
		<view v-if="showDay" class="hd-count-down-number" :style="{
        borderColor: borderColor,
        color: color,
        background: backgroundColor
      }">
			{{ d }}
		</view>
		<view v-if="showDay" class="hd-count-down-splitor" :style="{ color: splitorColor }">天</view>
		<view class="hd-count-down-number" :style="{
        borderColor: borderColor,
        color: color,
        background: backgroundColor
      }">
			{{ h }}
		</view>
		<view class="hd-count-down-splitor" :style="{ color: splitorColor }">
			{{ showColon ? ':' : '时' }}
		</view>
		<view class="hd-count-down-number" :style="{
        borderColor: borderColor,
        color: color,
        background: backgroundColor
      }">
			{{ m }}
		</view>
		<view class="hd-count-down-splitor" :style="{ color: splitorColor }">
			{{ showColon ? ':' : '分' }}
		</view>
		<view class="hd-count-down-number" :style="{
        borderColor: borderColor,
        color: color,
        background: backgroundColor
      }">
			{{ s }}
		</view>
		<view v-if="!showColon" class="hd-count-down-splitor" :style="{ color: splitorColor }">秒</view>
	</view>
</template>
<script setup lang="ts">
	import { onBeforeMount, onBeforeUnmount, ref } from 'vue'

	/**
	 * CountDown 倒计时
	 */

	interface Props {
		// 控制展示天
		showDay ?: boolean
		// 是否展示分隔符
		showColon ?: boolean
		// 背景色
		backgroundColor ?: string
		// 边框颜色
		borderColor ?: string
		// 字体颜色
		color ?: string
		// 分隔符颜色
		splitorColor ?: string
		// 日
		day ?: number
		// 时
		hour : number
		// 分
		minute : number
		// 秒
		second : number
	}

	const props = withDefaults(defineProps<Props>(), {
		// 控制展示天
		showDay: true,
		// 是否展示分隔符
		showColon: true,
		// 背景色
		backgroundColor: '#FFFFFF',
		// 边框颜色
		borderColor: '#000000',
		// 字体颜色
		color: '#000000',
		// 分隔符颜色
		splitorColor: '#FFFFFF',
		// 日
		day: 0,
		// 时
		hour: 0,
		// 分
		minute: 0,
		// 秒
		second: 0
	})

	const timer = ref<any>(null)
	const d = ref<string>('00')
	const h = ref<string>('00')
	const m = ref<string>('00')
	const s = ref<string>('00')
	const leftTime = ref<number>(0)
	const seconds = ref<number>(0)

	onBeforeMount(() => {
		seconds.value = toSeconds(props.day, props.hour, props.minute, props.second)
		countDown()
		timer.value = setInterval(() => {
			seconds.value--
			if (seconds.value < 0) {
				timeUp()
				return
			}
			countDown()
		}, 1000)
	})

	onBeforeUnmount(() => {
		timer.value && clearInterval(timer.value)
	})

	const emit = defineEmits(['timeup'])

	/**
	 * 时间转秒
	 * @param day  日
	 * @param hours 时
	 * @param minutes 分
	 * @param seconds 秒
	 */
	function toSeconds(day : number, hours : number, minutes : number, seconds : number) {
		return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
	}
	/**
	 * 倒计时结束
	 */
	function timeUp() {
		timer.value && clearInterval(timer.value)
		// 倒计时结束时触发
		emit('timeup')
	}

	/**
	 * 倒计时
	 */
	function countDown() {
		let [day, hour, minute, second] = [0, 0, 0, 0]
		if (seconds.value > 0) {
			day = Math.floor(seconds.value / (60 * 60 * 24))
			hour = Math.floor(seconds.value / (60 * 60)) - day * 24
			minute = Math.floor(seconds.value / 60) - day * 24 * 60 - hour * 60
			second = Math.floor(seconds.value) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
		} else {
			timeUp()
		}
		d.value = day < 10 ? `0${day}` : `${day}`
		h.value = hour < 10 ? `0${hour}` : `${hour}`
		m.value = minute < 10 ? `0${minute}` : `${minute}`
		s.value = second < 10 ? `0${second}` : `${second}`
	}
</script>
<style lang="scss" scoped>
	.hd-count-down {
		padding: 1px 0;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;

		&-splitor {
			justify-content: center;
			line-height: 20px;
			padding: 0 0;
			font-size: 12px;
			box-sizing: border-box;
		}

		&-number {
			line-height: 20px;
			justify-content: center;
			height: 20px;
			border-radius: 50%;
			margin: 0 2.5px;
			font-size: 12px;
			width: 20px;
			text-align: center;
			box-sizing: border-box;
		}
	}
</style>