瀏覽代碼

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

master
lizhuang 1 周之前
父節點
當前提交
4f1d38d951
共有 2 個檔案被更改,包括 46 行新增3 行删除
  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 查看文件

@@ -50,4 +50,18 @@ export function getCurrentDayRecord(query) {
method: 'get',
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 查看文件

@@ -69,12 +69,20 @@
/>

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

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

<!-- 位置信息显示 -->
<location-info
@@ -102,6 +110,8 @@ import RemarkDialog from './components/RemarkDialog.vue'
import SuccessDialog from './components/SuccessDialog.vue'
import LocationInfo from './components/LocationInfo.vue'

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

export default {
name: 'MCheckin',
components: {
@@ -116,6 +126,9 @@ export default {
currentCompleteDate: '',
timeIntervalId: null,

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

// 位置相关
userLocation: {
latitude: null,
@@ -425,7 +438,23 @@ export default {

this.currentCompleteDate = AttendanceService.formatDateTime(new Date())
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)

},

/**

Loading…
取消
儲存