ysh/uni-app/components/count-down/count-down.vue

<template>
    <view class="aaa-count-down" :class="theme">
        <view :class="'wrap-'+theme" v-if="isShow">
            <view class="before" v-if="isBefore">{{before}}</view>
            <view class="day" v-if="time.day > 0">
                <text>{{time.day}}</text>
                <text>{{dayText}}</text>
            </view>
            <view class="hour">
                <text>{{time.hour}}</text>
                <text>{{hourText}}</text>
            </view>
            <view class="minute">
                <text>{{time.minute}}</text>
                <text>{{minuteText}}</text>
            </view>
            <view class="second">
                <text>{{time.second}}</text>
                <text>{{secondText}}</text>
            </view>
            <view class="after" v-if="after">{{after}}</view>
        </view>
        <view v-if="!isShow" :class="'tips-'+theme">{{tips}}</view>
    </view>
</template>

<script>
    export default {
        name: "CountDown",
        props: {
            nowTime: {
                type: [String,Number],
                default: "0"
            },
            startTime: {
                type: [String,Number],
                default: "0"
            },
            endTime: {
                type: [String,Number],
                default: "0"
            },
            startTexts: {
                type: String,
                default: "距开始仅剩："
            },
            endTexts: {
                type: String,
                default: "距结束仅剩："
            },
            finishTexts: {
                type: String,
                default: "活动已结束"
            },
            dayText: {
                type: String,
                default: "天"
            },
            hourText: {
                type: String,
                default: "小时"
            },
            minuteText: {
                type: String,
                default: "分"
            },
            secondText: {
                type: String,
                default: "秒"
            },
            theme: {
                type: String,
                default: "simple"
            },
			isBefore: {
				type: Boolean,
				default: false
			},
            fillZero: {
                type: Object,
                default: function () {
                    return {
                        day    : {  count : 86400, num : 2,  def : '00' },
                        hour   : {  count : 3600,  num : 2,  def : '00' },
                        minute : {  count : 60,    num : 2,  def : '00' },
                        second : {  count : 1 ,    num : 2,  def : '00' }
                    }
                }
            }
        },
        data(){
            return {
                time: {
                    day: "",
                    hour: "",
                    minute: "",
                    second: ""
                },
                before: "",
                after: "",
                current: 0,
                start: 0,
                end: 0,
                total: 0,
                tips: "",
                isShow: false,
                timer: null
            };
        },
        watch: {
            endTime: {
                handler(newValue) {
                    this.run();
                },
                immediate: true
            }
        },
        methods: {
            run(){
                if(this.nowTime == undefined || this.startTime == undefined || this.endTime == undefined){
                    return ;
                }

                this.now = this.nowTime;
                this.start = this.startTime;
                this.end = this.endTime;
                this.total = this.end - this.now;
				
                this.updateStatus(false);
                this.message(false,"");
                if(this.total <= 0){
                    this.message(false,this.finishTexts);
                    return ;
                }else if(this.nowTime < this.startTime){
                    this.before = this.startTexts;
                }else if(this.nowTime > this.startTime && this.endTime > this.nowTime){
                    this.before = this.endTexts;
                    this.updateStatus(true);
                }

                this.timer = setInterval(()=>{
                    this.runTime();
                },1000);
            },
            runTime(){
                if(this.total <= 0){
                    this.timer && clearInterval(this.timer);
                    this.message(false,this.finishText);
                    this.updateStatus(false);
                    return ;
                }

                let dateTime = this.total;
                for(let i in this.fillZero){
                    let data = this.fillZero[i];
                    let flag = dateTime >= data.count ? true : false;
                    if(!flag){
                        this.time[i] = data.def;
                    }

                    if(flag){
                        let value = Math.floor(dateTime / data.count);
                        this.time[i] = this.fill(value.toString(),data.num);
                        dateTime -= value * data.count;
                    }
                }
				
                this.total--;
                this.message(true);
            },
            fill(i,n){
                let str = '' + i;
                while(str.length < n){
                    str = '0' + str;
                }

                return str;
            },
            message(status,msg){
                this.tips = msg || "";
                this.isShow = status;
            },
            updateStatus(status){
                this.$emit("update:status",status);
            }
        }
    }
</script>

<style>
    .aaa-count-down .day,
	.aaa-count-down .hour,
	.aaa-count-down .minute,
	.aaa-count-down .second,
	.aaa-count-down .day,
	.aaa-count-down .day { float: left; }
</style>