forked from ccsens_fe/tall-mui-3
11 changed files with 224 additions and 9 deletions
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<div class="flex green-way-box"> |
|||
<div class="w-full flex justify-center" v-if="greenMsg && greenMsg.content"> |
|||
<div class="ml-1">{{ greenMsg.content }}</div> |
|||
</div> |
|||
<div class="w-full flex justify-center" v-if="greenMsg && greenMsg.realCountdown && countDown">{{ countDown }}</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
name: 'Greenway', |
|||
data() { |
|||
return { |
|||
countDown: '', |
|||
duration: 0, |
|||
showIndex: 0, |
|||
timer: null, |
|||
changeTimer: null, |
|||
greenMsg: null, |
|||
allMsg: [], |
|||
}; |
|||
}, |
|||
computed: mapState('messages', ['greenMsgs']), |
|||
watch: { |
|||
greenMsgs(val) { |
|||
this.allMsg = val; |
|||
this.getMsg(); |
|||
this.changeMsg(); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.allMsg = this.greenMsgs; |
|||
this.getMsg(); |
|||
this.changeMsg(); |
|||
}, |
|||
destroyed() { |
|||
if (this.timer) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.countDown = ''; |
|||
} |
|||
if (this.changeTimer) { |
|||
clearInterval(this.changeTimer); |
|||
this.changeTimer = null; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 改变当前显示的msg |
|||
changeMsg() { |
|||
if (this.changeTimer) { |
|||
clearInterval(this.changeTimer); |
|||
this.changeTimer = null; |
|||
} |
|||
const that = this; |
|||
this.changeTimer = setInterval(() => { |
|||
if (that.showIndex < that.greenMsgs.length - 1) { |
|||
that.showIndex += 1; |
|||
} else { |
|||
that.showIndex = 0; |
|||
} |
|||
that.getMsg(); |
|||
}, 5000); |
|||
}, |
|||
// 获取当前显示的msg |
|||
getMsg() { |
|||
if (this.timer) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.countDown = ''; |
|||
} |
|||
this.greenMsg = this.allMsg[this.showIndex]; |
|||
const that = this; |
|||
this.duration = that.greenMsg.totalCountdown - (Date.parse(new Date()) - that.greenMsg.time); |
|||
that.getCount(this.duration); |
|||
this.timer = setInterval(() => { |
|||
this.duration = that.greenMsg.totalCountdown - (Date.parse(new Date()) - that.greenMsg.time); |
|||
that.getCount(this.duration); |
|||
}, 1000); |
|||
}, |
|||
// 获取当前展示的msg的倒计时 |
|||
getCount(duration) { |
|||
if (this.duration > 0) { |
|||
var timeMoment = uni.$moment.duration((duration - 0) / 1000, 'second'); |
|||
var hour = ''; |
|||
var min = ''; |
|||
var second = ''; |
|||
if (timeMoment.hours() - 0 < 10 && timeMoment.hours() - 0 >= 0) { |
|||
hour = '0' + timeMoment.hours(); |
|||
} else { |
|||
hour = timeMoment.hours(); |
|||
} |
|||
if (timeMoment.minutes() - 0 < 10 && timeMoment.minutes() - 0 >= 0) { |
|||
min = '0' + timeMoment.minutes(); |
|||
} else { |
|||
min = timeMoment.minutes(); |
|||
} |
|||
if (timeMoment.seconds() - 0 < 10 && timeMoment.seconds() - 0 >= 0) { |
|||
second = '0' + timeMoment.seconds(); |
|||
} else { |
|||
second = timeMoment.seconds(); |
|||
} |
|||
if ((duration - 0) / 1000 < 60) { |
|||
this.countDown = ['00', second].join(':'); |
|||
} else if ((duration - 0) / 1000 >= 60 && (duration - 0) / 1000 < 3600) { |
|||
this.countDown = [min, second].join(':'); |
|||
} else { |
|||
this.countDown = [hour, min, second].join(':'); |
|||
} |
|||
} |
|||
if (this.duration < 1) { |
|||
clearInterval(this.timer); |
|||
this.timer = null; |
|||
this.countDown = ''; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.green-way-box { |
|||
position: relative; |
|||
height: 62px; |
|||
background-color: #000; |
|||
color: red; |
|||
font-size: 20px; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 2px 8px; |
|||
flex-wrap: wrap; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue