当前位置：首页 > VUE

vue实现考勤打卡打卡

2026-01-21 21:58:27VUE

Vue实现考勤打卡功能

考勤打卡功能通常包括定位、时间记录、数据提交等模块。以下是基于Vue的实现方案：

核心功能模块

定位模块 使用浏览器或移动端的定位API获取用户当前位置

navigator.geolocation.getCurrentPosition(
position => {
 this.latitude = position.coords.latitude
 this.longitude = position.coords.longitude
},
error => {
 console.error('定位失败:', error)
}
)

时间记录模块 自动记录当前系统时间作为打卡时间
```
this.clockTime = new Date().toLocaleString()
```

数据提交模块 通过axios将打卡数据发送到后端

axios.post('/api/attendance', {
userId: this.userId,
time: this.clockTime,
location: {
 lat: this.latitude,
 lng: this.longitude
}
}).then(response => {
// 处理响应
})

完整组件示例

<template>
  <div class="attendance-container">
    <h3>考勤打卡</h3>
    <button @click="handleClockIn" :disabled="isClockedIn">
      {{ isClockedIn ? '已打卡' : '打卡' }}
    </button>
    <p v-if="location">当前位置: {{ location }}</p>
    <p>打卡时间: {{ clockTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClockedIn: false,
      latitude: null,
      longitude: null,
      clockTime: null
    }
  },
  computed: {
    location() {
      return this.latitude && this.longitude 
        ? `纬度: ${this.latitude}, 经度: ${this.longitude}`
        : null
    }
  },
  methods: {
    handleClockIn() {
      this.getLocation()
      this.recordTime()
      this.submitData()
      this.isClockedIn = true
    },
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          position => {
            this.latitude = position.coords.latitude
            this.longitude = position.coords.longitude
          },
          error => {
            console.error('定位失败:', error)
          }
        )
      }
    },
    recordTime() {
      this.clockTime = new Date().toLocaleString()
    },
    submitData() {
      // 实际项目中替换为真实的API调用
      console.log('提交数据:', {
        time: this.clockTime,
        location: {
          lat: this.latitude,
          lng: this.longitude
        }
      })
    }
  }
}
</script>

进阶功能实现

地理围栏验证 验证用户是否在允许打卡的范围内


function isInRange(targetLat, targetLng, allowedRadius) {
// 计算与指定位置的直线距离
const R = 6371e3 // 地球半径(米)
const φ1 = this.latitude * Math.PI/180
const φ2 = targetLat * Math.PI/180
const Δφ = (targetLat-this.latitude) * Math.PI/180
const Δλ = (targetLng-this.longitude) * Math.PI/180

const a = Math.sin(Δφ/2) Math.sin(Δφ/2) + Math.cos(φ1) Math.cos(φ2) Math.sin(Δλ/2) Math.sin(Δλ/2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))

return (R * c) <= allowedRadius }


2. 拍照验证
在移动端可通过cordova或capacitor调用摄像头
```javascript
// 使用capacitor的Camera插件示例
import { Camera } from '@capacitor/camera'

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: 'dataUrl'
  })
  this.photoData = image.dataUrl
}

打卡记录查询 展示历史打卡记录

async fetchRecords() {
try {
 const response = await axios.get('/api/attendance/history')
 this.records = response.data
} catch (error) {
 console.error('获取记录失败:', error)
}
}