<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>