vue实现打卡天数

Vue实现打卡天数功能

数据存储设计

使用localStorage或Vuex持久化存储打卡记录，确保刷新页面后数据不丢失。推荐数据结构：

{
  lastCheckDate: '2023-11-20', // 最后打卡日期
  streakDays: 5,              // 连续打卡天数
  history: ['2023-11-16', ...] // 历史打卡记录
}

打卡逻辑实现

创建打卡处理方法，需包含日期连续性校验：

methods: {
  handleCheckIn() {
    const today = new Date().toISOString().split('T')[0];
    if (this.lastCheckDate === today) return;

    const isConsecutive = this.checkConsecutive(today);
    this.streakDays = isConsecutive ? this.streakDays + 1 : 1;
    this.lastCheckDate = today;
    this.history.push(today);
  },

  checkConsecutive(newDate) {
    const lastDate = new Date(this.lastCheckDate);
    const currDate = new Date(newDate);
    return (currDate - lastDate) === 86400000; // 1天的毫秒数
  }
}

界面组件示例

创建打卡按钮和天数显示组件：

<template>
  <div class="check-in-container">
    <button @click="handleCheckIn" :disabled="isCheckedToday">
      {{ isCheckedToday ? '今日已打卡' : '立即打卡' }}
    </button>
    <div class="streak-count">
      已连续打卡 <strong>{{ streakDays }}</strong> 天
    </div>
    <calendar-view :events="history" />
  </div>
</template>

日历可视化

集成第三方日历组件（如v-calendar）展示打卡历史：

import { Calendar } from 'v-calendar';
components: { Calendar },
data() {
  return {
    attributes: [
      {
        dates: this.history,
        highlight: true
      }
    ]
  }
}

断签处理

实现断签提醒和重置逻辑：

watch: {
  lastCheckDate: {
    handler(newVal) {
      const today = new Date();
      const lastDay = new Date(newVal);
      if ((today - lastDay) > 86400000 * 2) {
        this.showBreakWarning();
        this.streakDays = 0;
      }
    },
    immediate: true
  }
}

持久化存储

使用vuex-persistedstate插件实现状态持久化：

import createPersistedState from 'vuex-persistedstate';
export default new Vuex.Store({
  plugins: [createPersistedState({
    key: 'checkInData'
  })]
});

动画效果

添加打卡成功动效增强用户体验：

.check-in-success {
  animation: bounce 0.5s;
}
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}