You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.2 KiB
145 lines
3.2 KiB
<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>
|