Browse Source

feat: 在打卡功能中新增逆地理编码功能,根据用户经纬度获取地址信息,并在打卡成功提示中显示。修改了成功提示组件的地址显示逻辑,确保用户能看到准确的位置信息。

master
lizhuang 1 week ago
parent
commit
4f1d38d951
2 changed files with 46 additions and 3 deletions
  1. 15
    1
      src/api/checkin/punch-card.js
  2. 31
    2
      src/views/m/checkin/index.vue

+ 15
- 1
src/api/checkin/punch-card.js View File

method: 'get', method: 'get',
params: query params: query
}) })
}
}


/**
* 逆地理编码根据经纬度获取地址
* @param {*} longitude 经度
* @param {*} latitude 纬度
* @returns Promise
*/
export function getGeocode(longitude, latitude) {
return request({
url: `https://api.opencagedata.com/geocode/v1/json?key=155dbe4a28a84522a1eb8d4d4616be61&q=${latitude}+${longitude}&language=native`,
method: 'get',
})
}

+ 31
- 2
src/views/m/checkin/index.vue View File

/> />


<!-- 打卡成功提示 --> <!-- 打卡成功提示 -->
<success-dialog
<!-- <success-dialog
:visible="showSuccessDialog" :visible="showSuccessDialog"
:punch-time="currentCompleteDate" :punch-time="currentCompleteDate"
:location="attendanceGroup.areaName" :location="attendanceGroup.areaName"
@close="closeSuccessDialog" @close="closeSuccessDialog"
/>
/> -->

<!-- 打卡成功提示 -->
<success-dialog
:visible="showSuccessDialog"
:punch-time="currentCompleteDate"
:location="formattedAddress"
@close="closeSuccessDialog"
/>


<!-- 位置信息显示 --> <!-- 位置信息显示 -->
<location-info <location-info
import SuccessDialog from './components/SuccessDialog.vue' import SuccessDialog from './components/SuccessDialog.vue'
import LocationInfo from './components/LocationInfo.vue' import LocationInfo from './components/LocationInfo.vue'


import { getGeocode } from '@/api/checkin/punch-card'

export default { export default {
name: 'MCheckin', name: 'MCheckin',
components: { components: {
currentCompleteDate: '', currentCompleteDate: '',
timeIntervalId: null, timeIntervalId: null,


// 打卡成功地址
formattedAddress: '',

// 位置相关 // 位置相关
userLocation: { userLocation: {
latitude: null, latitude: null,


this.currentCompleteDate = AttendanceService.formatDateTime(new Date()) this.currentCompleteDate = AttendanceService.formatDateTime(new Date())
this.showSuccessDialog = true this.showSuccessDialog = true
this.formattedAddress = 'Loading...'

try {
const res = await getGeocode(this.userLocation.longitude, this.userLocation.latitude)
console.log(res)
const {status, results} = res
if (status.code === 200 && results.length > 0) {
const {formatted} = results[0]
this.formattedAddress = formatted
}
} catch (error) {
this.formattedAddress = this.attendanceGroup.areaName
console.error(error)
}

await this.loadTodayAttendance(this.userinfo.userId) await this.loadTodayAttendance(this.userinfo.userId)

}, },


/** /**

Loading…
Cancel
Save