当前位置：首页 > VUE

vue实现点击签到功能

2026-02-24 03:18:00VUE

实现点击签到功能

在Vue中实现点击签到功能，通常需要结合前端交互和后端数据存储。以下是一个完整的实现方案：

前端实现

创建签到按钮组件：

<template>
  <button 
    @click="handleSignIn" 
    :disabled="isSigned"
    :class="{ 'signed': isSigned }"
  >
    {{ isSigned ? '已签到' : '点击签到' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isSigned: false
    }
  },
  methods: {
    async handleSignIn() {
      try {
        // 调用API接口
        const response = await this.$axios.post('/api/signin')
        if (response.data.success) {
          this.isSigned = true
          this.$message.success('签到成功')
        }
      } catch (error) {
        console.error('签到失败:', error)
        this.$message.error('签到失败')
      }
    }
  },
  created() {
    // 检查是否已签到
    this.checkSignStatus()
  },
  methods: {
    async checkSignStatus() {
      const response = await this.$axios.get('/api/checkSign')
      this.isSigned = response.data.signed
    }
  }
}
</script>

<style scoped>
button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.signed {
  background-color: #9E9E9E;
  cursor: not-allowed;
}
</style>

后端API接口示例

Node.js Express实现：

vue实现点击签到功能

// 签到接口
router.post('/signin', async (req, res) => {
  try {
    const userId = req.user.id // 假设已认证
    const today = new Date().toISOString().split('T')[0]

    // 检查是否已签到
    const existingSign = await SignModel.findOne({
      userId,
      date: today
    })

    if (existingSign) {
      return res.json({ success: false, message: '今日已签到' })
    }

    // 创建签到记录
    await SignModel.create({
      userId,
      date: today,
      points: 10 // 签到积分
    })

    res.json({ success: true })
  } catch (error) {
    console.error(error)
    res.status(500).json({ success: false })
  }
})

// 检查签到状态接口
router.get('/checkSign', async (req, res) => {
  const userId = req.user.id
  const today = new Date().toISOString().split('T')[0]

  const existingSign = await SignModel.findOne({
    userId,
    date: today
  })

  res.json({ signed: !!existingSign })
})

数据库模型

MongoDB示例：

const mongoose = require('mongoose')

const signSchema = new mongoose.Schema({
  userId: {
    type: mongoose.Schema.Types.ObjectId,
    required: true,
    ref: 'User'
  },
  date: {
    type: String,
    required: true
  },
  points: {
    type: Number,
    default: 10
  },
  createdAt: {
    type: Date,
    default: Date.now
  }
})

module.exports = mongoose.model('Sign', signSchema)

功能扩展

连续签到奖励

vue实现点击签到功能

实现连续签到逻辑：

// 在签到接口中添加连续签到计算
const lastSign = await SignModel.findOne({
  userId,
  date: { $lt: today }
}).sort({ date: -1 })

let consecutiveDays = 1
if (lastSign) {
  const lastDate = new Date(lastSign.date)
  const yesterday = new Date()
  yesterday.setDate(yesterday.getDate() - 1)

  if (lastDate.toISOString().split('T')[0] === yesterday.toISOString().split('T')[0]) {
    consecutiveDays = lastSign.consecutiveDays + 1
  }
}

// 根据连续天数给予不同奖励
let points = 10
if (consecutiveDays >= 7) points = 30
else if (consecutiveDays >= 3) points = 20

await SignModel.create({
  userId,
  date: today,
  points,
  consecutiveDays
})

前端显示连续签到天数

在组件中添加：

<div v-if="isSigned">
  您已连续签到 {{ consecutiveDays }} 天
</div>

data() {
  return {
    consecutiveDays: 0
  }
},

methods: {
  async checkSignStatus() {
    const response = await this.$axios.get('/api/checkSign')
    this.isSigned = response.data.signed
    this.consecutiveDays = response.data.consecutiveDays
  }
}