admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 出差打卡

Browse Source
This commit is contained in:
wangzhuo
2025-09-19 13:42:31 +08:00
parent 74f4712e9d
commit f76757198c
3 changed files with 270 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/crm/activity/map.js
View File

@@ -10,6 +10,14 @@ export function addStartMap(data) {
});
}
//出差打卡接口
export function businessTripClockIn(data) {
return request.post({
url: '/crm/app/appVisistMap/businessTripClockIn',
data
},{isTransformResponse:false});
}
//新增地图开始打卡接口
export function addStartMapForClockIn(data) {
return request.post({

22
src/constants/mapApiConstants.js Normal file
View File

@@ -0,0 +1,22 @@
/**
* @description 定位API的配置
* @type {{URL: string, token: string}}
*/
export const MapApiConfig = {
/**
* @description API接口地址
*/
URL: 'https://tiles.geovisearth.com/geo/v1/geocode/regeo',
/**
* @description 接口鉴权Token
*/
token: '66c87c897f0251295afdc794e4fbf73046a070338a726fe04f06cece6cb1ffdf',
/**
* @description 打卡类型：西安办事处
*/
XI_AN_BAN: {latitude: 34.1360, longitude: 108.9126, typeName: '西安办事处位置打卡'},
/**
* @description 打卡类型：第三方维护
*/
OTHER: {typeName: '第三方维护打卡'}
}

227
src/pages/business/CRM/map/vistorCheckin.vue
View File

@@ -10,13 +10,28 @@
<!-- 正文内容 -->
<view class="white-bg">
<image src="../../../../static/images/business/btn-qd.png" class="btn-image" @click="handleCheckIn"/>
<image src="../../../../static/images/business/btn-dk.png" class="btn-image" @click="handleClockIn" />
<!-- <image src="../../../../static/images/business/btn-dk.png" class="btn-image" @click="handleClockIn"/>-->
<image src="../../../../static/images/business/btn-dk.png" class="btn-image" @click="handleClick"/>
<view class="check-desc">
业务人员可通过<text class="font-orange">签到</text>或<text
class="font-blue">打卡</text>进行行为记录，该时间会和走访报告中的时间进行关联，便于查看。
业务人员可通过
<text class="font-orange">签到</text>
或
<text
class="font-blue">打卡
</text>
进行行为记录，该时间会和走访报告中的时间进行关联，便于查看。
</view>
</view>
</view>
<closeable-modal v-model="modalVisible"
title="确认在此处打卡？"
:content="form.addressForStart"
closeTip="轻触空白处关闭"
cancelText="出差"
confirmText="打卡"
contentAlign="center"
@confirm="handleConfirm"
@cancel="handleCancel"/>
<!-- 打卡遮罩层 -->
<!-- <view class="check-con" v-if="checkFlag">
@@ -40,7 +55,9 @@
<script setup>
import {ref, onMounted, reactive} from 'vue'
import customHeader from '@/components/customHeader.vue'
import { addStartMapForClockIn } from '../../../../api/crm/activity/map';
import {addStartMapForClockIn, businessTripClockIn} from '../../../../api/crm/activity/map';
import CloseableModal from "@/components/closeableModal.vue";
import {MapApiConfig} from "../../../../constants/mapApiConstants";
let form = reactive({
addressForStart: null,
@@ -49,6 +66,7 @@ let form = reactive({
staffName: null,
visistCode: null,
visistId: null,
remark: null,
mapId: null
})
// 签到
@@ -58,25 +76,87 @@ let handleCheckIn = () => {
})
}
// 打卡
let handleClockIn = () => {
// let handleClockIn = () => {
// uni.getLocation({
// type: 'wgs84',
// success: (res) => {
// const latiude = res.latitude;
// const longitude = res.longitude;
// //进行解析
// inverseGeocoding(latiude, longitude);
// },
// fail: function (err) {
// console.log("获取地址失败" + err)
// }
// })
// }
let modalVisible = ref(false);
let handleClick = () => {
uni.getLocation({
type: 'wgs84',
success: (res) => {
const latiude = res.latitude;
const latitude = res.latitude;
const longitude = res.longitude;
//进行解析
inverseGeocoding(latiude, longitude);
console.log('纬度:',latitude,'，经度:', longitude);
inverseGeocoding(latitude, longitude);
},
fail: function (err) {
console.log("获取地址失败" + err)
}
})
}
// 反馈提示
const feedback = (res, callback)=>{
if(res.code===200){
if(callback) callback();
uni.showToast({
title: MapApiConfig.OTHER.typeName === form.addressForStart ? MapApiConfig.OTHER.typeName : res.msg,
icon: 'success'
})
setTimeout(()=>{
uni.navigateBack(1);
}, 500)
}
else{
uni.showToast({
icon: 'none',
title: res.msg
})
}
}
// 出差
const handleCancel = () => {
businessTripClockIn(form).then(res=>{
feedback(res,()=>console.log('出差打卡成功'));
}).catch(e=>{
uni.showToast({
icon: 'none',
title: e
})
})
}
// 打卡
let handleConfirm = () => {
addStartMapForClockIn(form).then(res=>{
feedback(res, ()=>console.log('打卡成功'));
}).catch(e=>{
uni.showToast({
icon: 'none',
title: e
})
})
}
// 判定是否在范围内
function isWithinRange(lat, lon, centerLat, centerLon, rangeKm) {
const distance = haversineDistance(centerLat, centerLon, lat, lon);
return distance <= rangeKm;
}
function haversineDistance(lat1, lon1, lat2, lon2, radius = 6371) {
const dLat = degToRad(lat2 - lat1);
const dLon = degToRad(lon2 - lon1);
@@ -87,23 +167,25 @@ function haversineDistance(lat1, lon1, lat2, lon2, radius = 6371) {
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return radius * c; // 距离，单位：公里
}
// 角度转弧度
function degToRad(deg) {
return deg * (Math.PI / 180);
}
//解析地址
function inverseGeocoding(latiude, longitude) {
let points = longitude + ',' + latiude
const apiURL = 'https://tiles.geovisearth.com/geo/v1/geocode/regeo';
function inverseGeocoding(latitude, longitude) {
uni.showLoading();
const apiURL = MapApiConfig.URL;
const params = {
lat: latiude,
lat: latitude,
lng: longitude,
radius: 1000,
pageSize: 1,
currentPage: 1,
//classify: 220100
};
const token = '66c87c897f0251295afdc794e4fbf73046a070338a726fe04f06cece6cb1ffdf';
const token = MapApiConfig.token;
uni.request({
url: apiURL,
method: 'GET',
@@ -112,124 +194,31 @@ function inverseGeocoding(latiude, longitude) {
'Authorization': 'Bearer ' + token
},
success: (res) => {
console.log(res, "----")
if (res.statusCode == 200 && res.data.status == 200) {
modalVisible.value=true;
console.log(res, "经纬度解析成功")
if (res.statusCode === 200 && res.data.status === 200) {
let resdata = res.data.data.rows[0].address
if (resdata == null) {
console.log(resdata.srcLat)
const latiude1 = 34.1360;
const longitude1 = 108.9126;
if (isWithinRange(latiude1, longitude1, latiude, longitude, 1)) {
form.addressForStart = "西安办事处位置打卡"
uni.showModal({
title: '确定要在此处打卡吗',
content: form.addressForStart,
success: function (res) {
if (res.confirm) {
var data = {
mapId: form.mapId,
addressForStart: form.addressForStart,
cusName: form.cusName,
cusId: form.cusId,
remark: form.remark,
path: longitude1 + "," + latiude1
}
addStartMapForClockIn(data).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'success',
title: res.msg,
duration: 1500,
});
setTimeout(() => {
uni.navigateBack(1)
}, 500)
} else {
uni.showToast({
icon: 'none',
title: res.msg,
});
}
})
} else if (res.cancel) {
console.log('用户点击取消');
if (isWithinRange(latitude1, longitude1, latiude, longitude, 1)) {
form.addressForStart = MapApiConfig.XI_AN_BAN.typeName;
form.path = MapApiConfig.XI_AN_BAN.longitude + ',' + MapApiConfig.XI_AN_BAN.latitude ;
}
}
});
}
} else {
else {
form.addressForStart = resdata;
uni.showModal({
title: '确定要在此处打卡吗',
content: form.addressForStart,
success: function (res) {
if (res.confirm) {
var data = {
mapId: form.mapId,
addressForStart: form.addressForStart,
cusName: form.cusName,
cusId: form.cusId,
path: points
}
addStartMapForClockIn(data).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'success',
title: res.msg,
duration: 1500,
});
} else {
uni.showToast({
icon: 'none',
title: res.msg,
});
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
form.path = longitude + ',' + latitude; // 经度，纬度
}
} else {
form.addressForStart = "第三方维护打卡"
uni.showModal({
title: '确定要在此处打卡吗',
content: form.addressForStart,
success: function (res) {
if (res.confirm) {
var data = {
mapId: form.mapId,
addressForStart: form.addressForStart,
cusName: form.cusName,
cusId: form.cusId,
path: points
form.addressForStart = MapApiConfig.OTHER.typeName;
form.path = longitude + ',' + latitude; // 经度，纬度
}
addStartMapForClockIn(data).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'success',
title: '第三方维护打卡',
duration: 1500,
});
} else {
uni.showToast({
icon: 'none',
title: res.msg,
});
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
uni.hideLoading();
},
fail(e) {
console.log("获取位置失败", e)
}
uni.hideLoading();
},
})