当前位置：首页 > VUE

vue实现打卡提醒

2026-01-18 19:03:04VUE

实现思路

使用Vue开发打卡提醒功能，主要涉及前端界面交互、本地存储或后端数据同步、定时提醒逻辑。以下是具体实现方法：

界面设计

创建打卡按钮和状态显示组件，使用Vue的响应式数据绑定功能。示例代码：

<template>
  <div>
    <button @click="handleCheckIn" :disabled="isCheckedIn">打卡</button>
    <p v-if="isCheckedIn">今日已打卡</p>
    <p v-else>今日未打卡</p>
  </div>
</template>

数据存储

采用浏览器本地存储保存打卡记录，适合纯前端实现：

data() {
  return {
    isCheckedIn: localStorage.getItem('checkedIn') === 'true'
  }
},
methods: {
  handleCheckIn() {
    localStorage.setItem('checkedIn', 'true')
    this.isCheckedIn = true
  }
}

定时提醒

利用浏览器的Notification API实现系统通知，需要先请求用户授权：

methods: {
  requestNotificationPermission() {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        this.setReminder()
      }
    })
  },
  setReminder() {
    const now = new Date()
    const targetTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0) // 下午6点提醒

    if (now < targetTime && !this.isCheckedIn) {
      setTimeout(() => {
        new Notification('打卡提醒', { body: '记得完成今日打卡！' })
      }, targetTime - now)
    }
  }
},
mounted() {
  this.requestNotificationPermission()
}

每日重置

添加逻辑在次日自动重置打卡状态：

methods: {
  checkDateChange() {
    const lastCheckDate = localStorage.getItem('lastCheckDate')
    const today = new Date().toDateString()

    if (lastCheckDate !== today) {
      localStorage.setItem('checkedIn', 'false')
      localStorage.setItem('lastCheckDate', today)
      this.isCheckedIn = false
    }
  }
},
mounted() {
  this.checkDateChange()
}

完整示例

结合上述功能的完整组件示例：

vue实现打卡提醒

<template>
  <div>
    <button @click="handleCheckIn" :disabled="isCheckedIn">打卡</button>
    <p v-if="isCheckedIn">今日已打卡</p>
    <p v-else>今日未打卡</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCheckedIn: localStorage.getItem('checkedIn') === 'true'
    }
  },
  methods: {
    handleCheckIn() {
      localStorage.setItem('checkedIn', 'true')
      localStorage.setItem('lastCheckDate', new Date().toDateString())
      this.isCheckedIn = true
    },
    requestNotificationPermission() {
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          this.setReminder()
        }
      })
    },
    setReminder() {
      const now = new Date()
      const targetTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0)

      if (now < targetTime && !this.isCheckedIn) {
        setTimeout(() => {
          new Notification('打卡提醒', { body: '记得完成今日打卡！' })
        }, targetTime - now)
      }
    },
    checkDateChange() {
      const lastCheckDate = localStorage.getItem('lastCheckDate')
      const today = new Date().toDateString()

      if (lastCheckDate !== today) {
        localStorage.setItem('checkedIn', 'false')
        localStorage.setItem('lastCheckDate', today)
        this.isCheckedIn = false
      }
    }
  },
  mounted() {
    this.checkDateChange()
    this.requestNotificationPermission()
  }
}
</script>