123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <template>
- <view class="Body" :style="{padding:styles.outPad+'px'}">
- <view>{{attrs.front}}</view>
- <view class="u-count-down__view" v-html="formattedTime"></view>
- </view>
- </template>
- <script>
- import {
- isSameSecond,
- parseFormat,
- parseTimeData
- } from './utils';
- import Mixin from "../Mixin";
- import { forEach } from 'mathjs';
- export default {
- data() {
- return {
- timer: null,
- // 各单位(天,时,分等)剩余时间
- timeData: parseTimeData(0),
- // 格式化后的时间,如"03:23:21"
- formattedTime: '0',
- // 倒计时是否正在进行中
- runing: false,
- endTime: 0, // 结束的毫秒时间戳
- remainTime: 0, // 剩余的毫秒时间
- }
- },
- mixins: [Mixin],
- props: {
- // 倒计时时长,单位ms
- time: {
- type: [String, Number],
- default: 1800000
- },
- // 时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒
- // format: {
- // type: String,
- // default: 'HH:mm:ss'
- // },
- // 是否自动开始倒计时
- // autoStart: {
- // type: Boolean,
- // default: false
- // },
- // 是否展示毫秒倒计时
- millisecond: {
- type: Boolean,
- default: false
- },
- // 是否显示样式
- styleBool:{
- type:Boolean,
- default:true
- },
- },
- watch: {
- dataVal(n) {
- this.reset()
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.reset()
- },
- // 开始倒计时
- start() {
- if (this.runing) return
- // 标识为进行中
- this.runing = true
- // 结束时间戳 = 此刻时间戳 + 剩余的时间
- this.endTime = Date.now() + this.remainTime
- this.toTick()
- },
- // 根据是否展示毫秒,执行不同操作函数
- toTick() {
- if (this.millisecond) {
- this.microTick()
- } else {
- this.macroTick()
- }
- },
- macroTick() {
- this.clearTimeout()
- // 每隔一定时间,更新一遍定时器的值
- // 同时此定时器的作用也能带来毫秒级的更新
- this.timer = setTimeout(() => {
- // 获取剩余时间
- const remain = this.getRemainTime()
- // 重设剩余时间
- if (!isSameSecond(remain, this.remainTime) || remain === 0) {
- this.setRemainTime(remain)
- }
- // 如果剩余时间不为0,则继续检查更新倒计时
- if (this.remainTime !== 0) {
- this.macroTick()
- }
- }, 30)
- },
- microTick() {
- this.clearTimeout()
- this.timer = setTimeout(() => {
- this.setRemainTime(this.getRemainTime())
- if (this.remainTime !== 0) {
- this.microTick()
- }
- }, 50)
- },
- // 获取剩余的时间
- getRemainTime() {
- // 取最大值,防止出现小于0的剩余时间值
- return Math.max(this.endTime - Date.now(), 0)
- },
- // 设置剩余的时间
- setRemainTime(remain) {
- this.remainTime = remain
- // 根据剩余的毫秒时间,得出该有天,小时,分钟等的值,返回一个对象
- const timeData = parseTimeData(remain)
- this.$emit('change', timeData)
- // 得出格式化后的时间
- if(this.styleBool){
- this.formattedTime=this.dealStyle(parseFormat(this.attrs.format, timeData))
- }else{
- this.formattedTime= parseFormat(this.attrs.format, timeData)
- }
-
- // 如果时间已到,停止倒计时
- if (remain <= 0) {
- this.pause()
- this.$emit('finish')
- }
- },
- dealStyle(time){
- let arr=time.split(':');
- let html=""
- let style={
- // width: '30px !important',
- // height: this.height+'px !important',
- // background: '#3c9cff',
- background:this.styles.backgroundColor,
- 'font-size':'12px !important',
- margin:'0 5px,',
- color:'#fff',
- display:"inline-block",
- padding:'5px',
- }
- Object.assign(style)
- let styleCopy=JSON.stringify(style).replace(/"/g,'').replace(/,/g,';');
- let styleStr=styleCopy.slice(1,styleCopy.length-1);
- console.log(styleStr)
- arr.forEach((v,i)=>{
- if(i<arr.length-1){
- html+=`<view style="${styleStr}">${v}</view>:`
- }else{
- html+=`<view style="${styleStr}">${v}</view>`
- }
- })
- return html
- console.log('--------------',html)
- },
- // 重置倒计时
- reset() {
- this.pause()
- this.remainTime = this.dataVal.timer
- this.setRemainTime(this.remainTime)
- if (this.attrs.autoStart) {
- this.start()
- }
- },
- // 暂停倒计时
- pause() {
- this.runing = false;
- this.clearTimeout()
- },
- // 清空定时器
- clearTimeout() {
- clearTimeout(this.timer)
- this.timer = null
- }
- },
- beforeDestroy() {
- this.clearTimeout()
- }
- }
- </script>
- <style lang="scss" scoped>
- // .u-count-down__view{
- // text{
- // width: 44rpx !important;
- // height: 44rpx;
- // background: #3c9cff;
- // }
- // }
- .Body{
- display: flex;
- align-items: center;
- }
- </style>
|