muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-countdown/mu-countdown.vue

@@ -0,0 +1,338 @@
+<template>
+	<view class="mu-countdown" :class="[`mu-countdown--${variant}`]">
+		<!-- 自定义插槽支持 -->
+		<slot :time="timeData">
+			<!-- 天数 -->
+			<view v-if="showDay && timeData.days > 0" class="mu-countdown__item">
+				<view class="mu-countdown__block" :style="blockCustomStyle">
+					<text class="mu-countdown__num" :style="numCustomStyle">{{ pad(timeData.days) }}</text>
+				</view>
+				<text class="mu-countdown__unit" :style="unitCustomStyle">{{ isTextUnit ? '天' : ':' }}</text>
+			</view>
+
+			<!-- 小时 -->
+			<view v-if="showHour" class="mu-countdown__item">
+				<view class="mu-countdown__block" :style="blockCustomStyle">
+					<text class="mu-countdown__num" :style="numCustomStyle">{{ pad(timeData.hours) }}</text>
+				</view>
+				<text class="mu-countdown__unit" :style="unitCustomStyle">{{ isTextUnit ? '时' : ':' }}</text>
+			</view>
+
+			<!-- 分钟 -->
+			<view v-if="showMinute" class="mu-countdown__item">
+				<view class="mu-countdown__block" :style="blockCustomStyle">
+					<text class="mu-countdown__num" :style="numCustomStyle">{{ pad(timeData.minutes) }}</text>
+				</view>
+				<text class="mu-countdown__unit" :style="unitCustomStyle">{{ isTextUnit ? '分' : ':' }}</text>
+			</view>
+
+			<!-- 秒数 -->
+			<view v-if="showSecond" class="mu-countdown__item">
+				<view class="mu-countdown__block" :style="blockCustomStyle">
+					<text class="mu-countdown__num" :style="numCustomStyle">{{ pad(timeData.seconds) }}</text>
+				</view>
+				<text v-if="isTextUnit" class="mu-countdown__unit" :style="unitCustomStyle">秒</text>
+			</view>
+
+			<!-- 毫秒数 (百/十毫秒高频平滑跑动) -->
+			<view v-if="millisecond" class="mu-countdown__item">
+				<text class="mu-countdown__unit" :style="unitCustomStyle">.</text>
+				<view class="mu-countdown__block mu-countdown__block--ms" :style="blockCustomStyle">
+					<text class="mu-countdown__num" :style="numCustomStyle">{{ padMs(timeData.milliseconds) }}</text>
+				</view>
+			</view>
+		</slot>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+	time: { type: [Number, String], default: 0 },          // 剩余毫秒数或秒数
+	endTime: { type: [Number, String], default: '' },       // 目标结束时间搓戳或时间串
+	variant: { type: String, default: 'badge' },          // badge (大促高彩方块) | simple (纯文字冒号) | round (圆角胶囊) | card (Bento 冰晶卡片)
+	autoStart: { type: Boolean, default: true },
+	showDay: { type: Boolean, default: true },
+	showHour: { type: Boolean, default: true },
+	showMinute: { type: Boolean, default: true },
+	showSecond: { type: Boolean, default: true },
+	unitType: { type: String, default: 'colon' },        // colon (冒号 :) | text (时分秒)
+	millisecond: { type: Boolean, default: false },       // 是否显示毫秒
+	color: { type: String, default: '' },                 // 数字颜色
+	bgColor: { type: String, default: '' }                // 数字块背景色
+})
+
+const emit = defineEmits(['finish', 'change'])
+
+const remaining = ref(0)
+let endTimeStamp = 0
+let timer = null
+
+const isTextUnit = computed(() => props.unitType === 'text')
+
+const timeData = computed(() => {
+	const ms = remaining.value
+	const seconds = Math.floor(ms / 1000) % 60
+	const minutes = Math.floor(ms / 60000) % 60
+	const hours = Math.floor(ms / 3600000) % 24
+	const days = Math.floor(ms / 86400000)
+	const milliseconds = Math.floor((ms % 1000) / 10)
+	return { days, hours, minutes, seconds, milliseconds }
+})
+
+function pad(n) {
+	return String(n).padStart(2, '0')
+}
+
+function padMs(n) {
+	return String(n).padStart(2, '0')
+}
+
+function initRemaining() {
+	if (props.endTime) {
+		const end = new Date(props.endTime).getTime()
+		endTimeStamp = end
+		remaining.value = Math.max(0, end - Date.now())
+	} else {
+		const val = Number(props.time) || 0
+		const ms = val > 100000 ? val : val * 1000
+		endTimeStamp = Date.now() + ms
+		remaining.value = Math.max(0, ms)
+	}
+}
+
+function start() {
+	if (timer) return
+	const interval = props.millisecond ? 30 : 1000
+	timer = setInterval(() => {
+		// 动态校准真实剩余时间，防止页面离屏/后台休眠导致计时偏差
+		if (endTimeStamp > 0) {
+			remaining.value = Math.max(0, endTimeStamp - Date.now())
+		} else {
+			remaining.value = Math.max(0, remaining.value - interval)
+		}
+
+		emit('change', timeData.value)
+		if (remaining.value <= 0) {
+			pause()
+			emit('finish')
+		}
+	}, interval)
+}
+
+function pause() {
+	if (timer) {
+		clearInterval(timer)
+		timer = null
+	}
+}
+
+function reset() {
+	pause()
+	initRemaining()
+	if (props.autoStart) start()
+}
+
+const blockCustomStyle = computed(() => {
+	const s = {}
+	if (props.bgColor) {
+		s.background = props.bgColor
+		if (props.bgColor === 'transparent' || props.bgColor === 'none') {
+			s.boxShadow = 'none'
+			s.border = 'none'
+		}
+	}
+	return s
+})
+
+const numCustomStyle = computed(() => {
+	const s = {}
+	if (props.color) s.color = props.color
+	return s
+})
+
+const unitCustomStyle = computed(() => {
+	const s = {}
+	if (props.variant === 'simple' && props.color) s.color = props.color
+	return s
+})
+
+onMounted(() => {
+	initRemaining()
+	if (props.autoStart) start()
+})
+
+onUnmounted(() => pause())
+
+watch(() => [props.time, props.endTime], () => reset())
+
+defineExpose({ start, pause, reset })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-countdown {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+
+	&__item {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	&__num {
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+	}
+
+	/* 1. 数字高彩方块形态 (badge) */
+	&--badge {
+		.mu-countdown__block {
+			min-width: 48rpx;
+			height: 48rpx;
+			padding: 0 8rpx;
+			background: #F43F5E;
+			border-radius: 12rpx;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 4rpx 12rpx rgba(244, 63, 94, 0.25);
+			box-sizing: border-box;
+		}
+
+		.mu-countdown__num {
+			font-size: 26rpx;
+			font-weight: 800;
+			color: #ffffff;
+		}
+
+		.mu-countdown__unit {
+			font-size: 24rpx;
+			font-weight: 800;
+			color: #F43F5E;
+			margin: 0 8rpx;
+			line-height: 1;
+		}
+	}
+
+	/* 2. 纯文字冒号分隔形态 (simple) */
+	&--simple {
+		.mu-countdown__block {
+			background: transparent;
+			padding: 0;
+		}
+
+		.mu-countdown__num {
+			font-size: 32rpx;
+			font-weight: 800;
+			color: #0F172A;
+		}
+
+		.mu-countdown__unit {
+			font-size: 28rpx;
+			font-weight: 800;
+			color: #0F172A;
+			margin: 0 6rpx;
+			line-height: 1;
+		}
+	}
+
+	/* 3. 胶囊圆角形态 (round) */
+	&--round {
+		.mu-countdown__block {
+			min-width: 48rpx;
+			height: 48rpx;
+			padding: 0 10rpx;
+			background: #0F172A;
+			border-radius: 999rpx;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.mu-countdown__num {
+			font-size: 24rpx;
+			font-weight: 700;
+			color: #ffffff;
+		}
+
+		.mu-countdown__unit {
+			font-size: 24rpx;
+			font-weight: 700;
+			color: #0F172A;
+			margin: 0 8rpx;
+			line-height: 1;
+		}
+	}
+
+	/* 4. Bento 冰晶卡片形态 (card) */
+	&--card {
+		.mu-countdown__block {
+			min-width: 52rpx;
+			height: 52rpx;
+			padding: 0 10rpx;
+			background: #ffffff;
+			border-radius: 14rpx;
+			border: 1rpx solid rgba(226, 232, 240, 0.9);
+			box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.05);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.mu-countdown__num {
+			font-size: 28rpx;
+			font-weight: 800;
+			color: #171717;
+		}
+
+		.mu-countdown__unit {
+			font-size: 24rpx;
+			font-weight: 800;
+			color: #64748B;
+			margin: 0 8rpx;
+			line-height: 1;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-countdown {
+		&--simple {
+			.mu-countdown__num, .mu-countdown__unit { color: $mu-dark-text-primary; }
+		}
+		&--round {
+			.mu-countdown__block { background: rgba(255, 255, 255, 0.15); }
+			.mu-countdown__unit { color: $mu-dark-text-primary; }
+		}
+		&--card {
+			.mu-countdown__block { background: $mu-dark-bg-base; border-color: rgba(255, 255, 255, 0.08); }
+			.mu-countdown__num { color: #FFFFFF; }
+			.mu-countdown__unit { color: $mu-dark-text-secondary; }
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-countdown {
+		&--simple {
+			.mu-countdown__num, .mu-countdown__unit { color: $mu-dark-text-primary; }
+		}
+		&--round {
+			.mu-countdown__block { background: rgba(255, 255, 255, 0.15); }
+			.mu-countdown__unit { color: $mu-dark-text-primary; }
+		}
+		&--card {
+			.mu-countdown__block { background: $mu-dark-bg-base; border-color: rgba(255, 255, 255, 0.08); }
+			.mu-countdown__num { color: #FFFFFF; }
+			.mu-countdown__unit { color: $mu-dark-text-secondary; }
+		}
+	}
+}
+</style>