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