vue 设计一个倒计时秒杀的组件

简介：

倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪，我自己根据其他资料设计了一个vue版的

核心思路：1、时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一  

                 2、开始时间，结束时间通过父组件传入，当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击，并且参加过活动以后不能再参加，

　　　　　3、在组件创建的时候 同步得到现在时间服务时间差，并且在这里边设置定时器，每秒都做判断看秒杀是否开始和结束，

　　　　　4、在更新时间的函数中是否开始和结束，

　　　　　5、在computed钩子中监听disable 确定按钮是否可点击

　　　　　6、参加过活动在updated中停止定时器的计时，页面销毁的时候也停止计时

　　　　下边是代码

　　　　子组件　　

<template>
    <div>
        <button @click="handleclick" :disabled="disabled">
            {{btntext}}
        </button>
        <span>{{tip}}</span>
    </div>
</template>

<script>

    import moment from 'moment'

    export default {
        name: "spike",
        props: {
            starttime: {
                required: true,
                validator: (val) => {
                    return moment.ismoment(val)
                }
            },
            endtime: {
                required: true,
                validator: (val) => {
                    return moment.ismoment(val)
                }
            }
        },
        data() {
            return {
                start: false,
                end: false,
                done: false,
                tip: '',
                timegap: 0,
                btntext:""
            }
        },
            computed: {
            disabled() {
                //当三个异号的时候disable返回真，不可点击，
                // 初始化通过this.updatestate确定disable的状态
                return !(this.start && !this.end && !this.done);
            }
        },
        async created() {
            const servertime=await this.getservertime();
            this.timegap=date.now()-servertime;//当前时间和服务器时间差
            this.updatestate();
            this.timeinterval=setinterval(()=>{
                this.updatestate()
            },1000)
        },
        updated(){
            if(this.end||this.done){
                clearinterval(this.timeinterval)
            }
        },
        methods: {
            handleclick() {
                alert("提交成功");
                this.done=true;
                this.btntext="已参加过活动"
            },
            getservertime() {
                //模拟服务器时间
                return new promise((resolve, reject) => {
                    settimeout(() => {
                        //当前时间慢10秒就是服务器时间
                        resolve(new date(date.now() -10 * 1000).gettime())//跟本地时间差
                    }, 0)
                })
            },
            updatestate() {
                const now = moment(new date(date.now() - this.timegap));//当前服务器时间
                const diffstart=this.starttime.diff(now);//开始时间和服务器时间之差
                const diffend=this.endtime.diff(now);//结束时间和服务器时间之差
                if(diffstart<0){
                    this.start=true;
                    this.tip="秒杀已开始";
                    this.btntext="参加"
                }else{
                    this.tip=`距离秒杀开始还剩${math.ceil(diffstart/1000)}秒`;
                    this.btntext="活动未开始";
                }
                if(diffend<=0){
                    this.end=true;
                    if( !this.btntext==="已参加过活动"||this.btntext==="参加"){
                        this.tip="秒杀已结束";
                        this.btntext="活动已结束";
                    }
                }
            }
        },
        beforedestroy() {
            clearinterval(this.timeinterval)
        }
    }
</script>

<style scoped>
    button[disabled]{
        cursor: not-allowed;
    }
</style>

父组件

<template>
    <div>
        <h1 style="color: red">设计一个秒杀倒计时的组件</h1>
        <spike :starttime="starttime" :endtime="endtime"></spike>
    </div>
</template>

<script>
    import spike from './spike'
    import moment from 'moment'
    export default {
        name: "index",
        components:{
            spike
        },
        data(){
            return{
                endtime:moment(new date(date.now()+10*1000)),
                starttime:moment(new date(date.now()))
            }
        }
    }
</script>

<style scoped>

</style>

用到moment的这个关于时间操作的库