reservation-uniapp-250509/service-uniapp-technician/pages/mine/countdown.vue

<template>
	<view class="countdown">
		<van-circle v-model:current-rate="currentRate" :rate="rate" :speed="100" :color="gradientColor" size="600rpx">
			<template #default>
				<view class="countdown-main">
					<van-count-down :time="countTime" @change="calculateCountdownPercentage(countTime,startTime)">
						<template #default="timeData">
							<view class="countdown-title">剩余服务时间</view>
							<view class="a1">
								<span class="block">{{ addZero(timeData.hours) }}</span>
								<span class="colon">:</span>
								<span class="block">{{ addZero(timeData.minutes) }}</span>
								<span class="colon">:</span>
								<span class="block">{{ addZero(timeData.seconds) }}</span>
							</view>
						</template>
					</van-count-down>
				</view>
			</template>
		</van-circle>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentRate: 0,
				rate : 0,
				gradientColor: {
					'0%': '#4899a6',
					'100%': '#6fc6ad',
				},
				startTime : 0,
				endTime: 0,
				countTime : 0,
				audio: new Audio(),
				worker: null
			}
		},
		onShow() {
			//初始化开始、结束时间
			this.startTime = new Date(this.$route.query.startTime).valueOf();
			this.endTime = this.startTime + (this.$route.query.time ? this.$route.query.time * 1000 * 60 : 0)
			this.countTime = this.endTime - Date.now() //倒计时时间戳(用于倒计时组件)
			
			let self = this;
			this.audio.src = '/static/music/server-time.mp3'
			this.worker = new Worker('/static/work.js')

			this.worker.postMessage({
				startTime : this.startTime,
				endTime : this.endTime
			});
			this.worker.onmessage = function(event) {
				self.play()
			}
		},
		onUnload(){
			this.worker.terminate()
			this.audio.pause()
			this.audio = null
		},
		methods: {

			//播放音频
			play() {
				this.audio.play()
				this.worker.terminate()
			},
			
			// 计算时间百分比
			calculateCountdownPercentage() {  
				let totalTime = this.endTime - this.startTime;
				let elapsedTime = Date.now() - this.startTime;
			     // 计算进度百分比  
			     let percentage = (elapsedTime / totalTime) * 100;  
			     // 如果百分比超过100%，则将其设置为100%  
			     this.rate = Math.min(percentage, 100);
			},
			
			//添加0
			addZero(time){
				if(time < 10){
					return '0' + time
				}
				return time
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countdown {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		width: 750rpx;
		margin: 0rpx auto;

		.countdown-main {
			display: flex;
			width: 600rpx;
			height: 600rpx;
			justify-content: center;
			align-items: center;

			.countdown-title {
				text-align: center;
				margin-bottom: 30rpx;
				font-size: 35rpx;
				color: #8f8f8f;
			}

			.a1 {
				display: flex;
				align-items: center;
				height: 80rpx;

				.colon {
					margin: 0 8rpx;
					color: black;
				}

				.block {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					background-color: #4899a6;
					border-radius: 10rpx;
					margin: 0rpx 15rpx;
				}
			}

		}
	}
</style>