计时器组件

2025-04-03 14:12:52 +08:00
parent 72adb34db8
commit 65334dd245
1 changed files with 114 additions and 0 deletions
@@ -0,0 +1,114 @@
+<template>
+	<view class="countdown">
+		<view class="time green">
+			<image src="/static/image/gtime.png" mode=""></image>
+			<text>{{ timeObj.days }}{{$t('day')}} </text>
+			<text> {{ timeObj.hours | padZero }} : </text>
+			<text> {{ timeObj.minutes | padZero }} : </text>
+			<text> {{ timeObj.seconds | padZero }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			// 起始时间
+			totalSeconds: {
+				type: '',
+				required: true
+			},
+			// 是否显示天数
+			showDays: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				startTime: this.totalSeconds, // 开始时间(Date对象)
+				elapsedTime: 0, // 已过时间(毫秒)
+				timer: null, // 计时器对象
+				isRunning: false, // 是否运行中
+				startTimeStr: '' ,// 显示用的开始时间字符串
+				timeObj: {
+				  days: 0,
+				  hours: 0,
+				  minutes: 0,
+				  seconds: 0
+				},
+			}
+		},
+		mounted() {
+			this.runCountdown();
+		},
+		filters: {
+		  padZero(value) {
+		    return value.toString().padStart(2, '0');
+		  }
+		},
+		methods: {
+			// 计算已过时间
+			calculateElapsed() {
+				if (this.startTime) {
+					// 计算差值（毫秒）
+					let diff = this.startTime
+					const dateStr = diff;
+					const timestamp = new Date(dateStr).getTime();
+					
+					// 处理iOS兼容性问题（推荐写法）
+					const iosFriendlyTimestamp = new Date(dateStr.replace(/-/g, '/')).getTime();
+					// 当前时间戳（毫秒）
+					const now = Date.now()
+					 // 计算差值（毫秒）
+					let diff1 = Math.abs(now - iosFriendlyTimestamp)
+					  
+					// 计算各个单位
+					const seconds = Math.floor(diff1 / 1000)
+					this.timeObj.days = Math.floor(seconds / (24 * 3600));
+					const remaining = seconds % (24 * 3600);
+					this.timeObj.hours = Math.floor(remaining / 3600);
+					this.timeObj.minutes = Math.floor((remaining % 3600) / 60);
+					this.timeObj.seconds = remaining % 60;
+				}
+			},
+			runCountdown() {
+				if (!this.isRunning && this.startTime) {
+					this.isRunning = true
+					this.timer = setInterval(() => {
+						this.calculateElapsed()
+					}, 1000)
+				}
+			},
+		},
+		beforeDestroy() {
+			clearInterval(this.timer);
+		}
+	}
+</script>
+<style lang="scss">
+	.countdown {
+		.time {
+			display: flex;
+			align-items: center;
+
+			text {
+				margin: 0px 2px;
+			}
+		}
+
+		image {
+			width: 18px;
+			height: 18px;
+			margin-right: 5px;
+		}
+	}
+
+	.green {
+		color: #27C89C;
+	}
+
+	.timered {
+		color: #FF4040;
+	}
+</style>