# 相关课程内容截图
对于本节课作业的提交
# 尝试过的解决思路和结果
1. 利用 vue 的computed 属性，动态计算当前时间到结束时间的区间（使用dayjs的 diff方法和duration插件）

2. 获取时间区间的 时、分、秒数值

3. 判断时、分、秒 是否都小于0，如果小于0说明计时结束，可以签到，否则返回时间字符串

4. 在 vue 的 mounted 生命周期中使用 setInterval 方法，每一秒钟请求一次当前时间，供计算属性调用

5. 页面销毁时，清除计时器

# 效果图

​

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

data() {
    isSign: false,
    now: moment(),
    end: moment(this.now)
        .add(1, "day")
        .format("YYYY-MM-DD 00:00:00"),
    // end: moment().add(10, "seconds"),
    tiemr: setInterval(() => {
            this.now = moment();
          }, 1000),​
​}
​
​computed: {
    ​countDown() {
    const diff = moment(this.end).diff(this.now);
    const du = moment.duration(diff);
    const hours = du.hours();
    const mins = du.minutes();
    const ss = du.seconds();
    if (hours <= 0 && mins <= 0 && ss <= 0) {
    this.allowSign();
    return;
    } else {
    return `${hours}:${mins}:${ss}`;
    }
    }
​}
​
​mounted() {
    this.allowSign();
    this.tiemr;
},
beforeDestroy() {
    clearInterval(this.timer);
},

methods: {
    allowSign() {
    // 判断用户的上一次签到时间与签到状态
    // 如果用户上一次签到时间与当天的签到日期相差1天，则允许用户签到
    const isSign = this.$store.state.userInfo.isSign;
    const lastSign = this.$store.state.userInfo.lastSign;
    const nowDate = moment().format("YYYY-MM-DD");
    const lastDate = moment(lastSign).format("YYYY-MM-DD");
    const diff = moment(nowDate).diff(moment(lastDate), "day");
    if (diff > 0 && isSign) {
    this.isSign = false;
    } else {
    this.isSign = isSign;
    }
    }
}