390 lines
9.4 KiB
Vue
390 lines
9.4 KiB
Vue
<template>
|
||
<view class="cancel-leave">
|
||
<!-- 显示定位信息 -->
|
||
<view class="content">
|
||
<!-- 地图展示 -->
|
||
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"
|
||
show-location></map>
|
||
<!-- 重新定位按钮 -->
|
||
<button class="refresh-location" @tap="getLocation">重新获取定位</button>
|
||
</view>
|
||
<!-- 确定销假按钮 -->
|
||
<button class="confirm-cancel" @tap="confirm">确定销假</button>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getLeaveApplicationByProcInsId,
|
||
complete,
|
||
reject
|
||
} from "@/api/task.js";
|
||
import {
|
||
editApply
|
||
} from "@/api/applyleave/applyleave.js";
|
||
import {
|
||
getWxConfig
|
||
} from "@/api/common/wechat";
|
||
import wx from "weixin-js-sdk"; // 引入微信 JS-SDK
|
||
import * as ww from '@wecom/jssdk'
|
||
export default {
|
||
data() {
|
||
return {
|
||
address: "", // 地址信息
|
||
latitude: 108.31019592285156, // 纬度
|
||
longitude: 22.90125274658203, // 经度
|
||
covers: [{
|
||
latitude: 108.31019592285156,
|
||
longitude: 22.90125274658203,
|
||
iconPath: '../../static/images/applyrelieve/location.png'
|
||
}],
|
||
distanceThreshold: 1000, // 距离阈值
|
||
isLeave: true, // 销假按钮状态
|
||
taskForm: {},
|
||
};
|
||
},
|
||
async onLoad(option) {
|
||
console.log(this.role)
|
||
let query = JSON.parse(option.query);
|
||
this.taskForm.deployId = query.deployId;
|
||
this.taskForm.instanceId = query.procInsId
|
||
this.taskForm.procInsId = query.procInsId
|
||
this.taskForm.executionId = query.executionId
|
||
this.taskForm.taskId = query.taskId
|
||
this.getTaskDetail();
|
||
await this.initWxConfig(); // 初始化微信配置
|
||
this.getLocation();
|
||
},
|
||
methods: {
|
||
async initWxConfig() {
|
||
let that = this;
|
||
let res = await that.getConfigSignature();
|
||
ww.register({
|
||
corpId: 'wx129e6bf0f36b8b3d', // 必填，当前用户企业所属企业ID
|
||
agentId: 1000093, // 必填，当前应用的AgentID
|
||
jsApiList: ["getLocation", "openLocation"], // 必填，需要使用的JSAPI列表
|
||
// getAgentConfigSignature: that.getAgentConfigSignature, // 必填，根据url生成应用签名的回调函数
|
||
getConfigSignature() {
|
||
return res
|
||
}
|
||
})
|
||
},
|
||
// 初始化微信 JS-SDK
|
||
async getConfigSignature() {
|
||
return new Promise((resolve, reject) => {
|
||
// 调用后端接口获取签名信息（需要后端支持）
|
||
getWxConfig("corpId").then(res => {
|
||
const {
|
||
timestamp,
|
||
nonceStr,
|
||
signature
|
||
} = res;
|
||
resolve({
|
||
timestamp,
|
||
nonceStr,
|
||
signature
|
||
});
|
||
}).catch(err => {
|
||
reject(err);
|
||
});
|
||
});
|
||
},
|
||
// 初始化微信 JS-SDK，应用
|
||
async getAgentConfigSignature() {
|
||
return new Promise((resolve, reject) => {
|
||
// 调用后端接口获取签名信息（需要后端支持）
|
||
getWxConfig("agentId").then(res => {
|
||
const {
|
||
timestamp,
|
||
nonceStr,
|
||
signature
|
||
} = res;
|
||
resolve({
|
||
timestamp,
|
||
nonceStr,
|
||
signature
|
||
});
|
||
}).catch(err => {
|
||
reject(err);
|
||
});
|
||
});
|
||
},
|
||
// 获取当前位置
|
||
getLocation() {
|
||
let that = this;
|
||
ww.getLocation({
|
||
type: 'gcj02',
|
||
success(res) {
|
||
that.latitude = res.latitude
|
||
that.longitude = res.longitude
|
||
that.covers[0].latitude = res.latitude
|
||
that.covers[0].longitude = res.longitude
|
||
},
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: "获取定位失败",
|
||
icon: 'fail'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
openLocation() {
|
||
let that = this;
|
||
ww.openLocation({
|
||
latitude: that.latitude,
|
||
longitude: that.longitude,
|
||
name: 'name',
|
||
address: 'address',
|
||
scale: 1,
|
||
success(res) {},
|
||
fail(err) {
|
||
console.log('定位失败:', err)
|
||
},
|
||
complete(err) {
|
||
console.log('定位失败:', err)
|
||
}
|
||
})
|
||
},
|
||
// 通过经纬度反向解析地址（需要后端支持或使用第三方 API，如高德地图 API）
|
||
reverseGeocode(lat, lng) {
|
||
const amapKey = "your-amap-key"; // 替换为高德地图的 API Key
|
||
this.$http
|
||
.get(
|
||
`https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${lng},${lat}`
|
||
)
|
||
.then(res => {
|
||
if (res.data.regeocode && res.data.regeocode.formatted_address) {
|
||
this.address = res.data.regeocode.formatted_address;
|
||
} else {
|
||
this.address = "未知地址";
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error("反向地理编码失败", err);
|
||
this.address = "地址解析失败";
|
||
});
|
||
},
|
||
|
||
async checkIfNearCampus1() {
|
||
const campuses = [{
|
||
name: "长堽校区",
|
||
latitude: 22.835938,
|
||
longitude: 108.351728
|
||
},
|
||
{
|
||
name: "里建校区",
|
||
latitude: 23.206284,
|
||
longitude: 108.18664
|
||
}
|
||
];
|
||
let isNearby = false;
|
||
let res = false;
|
||
|
||
let campus = campuses[0];
|
||
let p1 = {
|
||
latitude: this.latitude,
|
||
longitude: this.longitude
|
||
}
|
||
let distance = this.getDistance(
|
||
p1.latitude, p1.longitude,
|
||
campus.latitude, campus.longitude
|
||
);
|
||
isNearby = distance < this.distanceThreshold;
|
||
if (isNearby) {
|
||
res = true;
|
||
}
|
||
|
||
campus = campuses[1];
|
||
distance = this.getDistance(
|
||
p1.latitude, p1.longitude,
|
||
campus.latitude, campus.longitude
|
||
);
|
||
isNearby = distance < this.distanceThreshold;
|
||
|
||
if (isNearby) {
|
||
res = true;
|
||
}
|
||
|
||
if (res) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
toRadians(degree) {
|
||
return degree * (Math.PI / 180);
|
||
},
|
||
|
||
// 计算两个经纬度之间的距离（近似计算，适用于小范围）
|
||
getDistance(lat1, lng1, lat2, lng2) {
|
||
const EARTH_RADIUS = 6378137; // 地球半径，单位：米
|
||
const dLat = this.toRadians(lat2 - lat1);
|
||
const dLng = this.toRadians(lng2 - lng1);
|
||
const a =
|
||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||
Math.cos(this.toRadians(lat1)) *
|
||
Math.cos(this.toRadians(lat2)) *
|
||
Math.sin(dLng / 2) *
|
||
Math.sin(dLng / 2);
|
||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||
return EARTH_RADIUS * c;
|
||
},
|
||
|
||
// 检查是否在校区范围
|
||
checkIfNearCampus() {
|
||
const campuses = [{
|
||
name: "长堽校区",
|
||
latitude: 22.835938,
|
||
longitude: 108.351728
|
||
},
|
||
{
|
||
name: "里建校区",
|
||
latitude: 23.206284,
|
||
longitude: 108.18664
|
||
}
|
||
];
|
||
|
||
const isNearby = campuses.some(campus => {
|
||
const distance = this.calculateDistance(
|
||
this.latitude,
|
||
this.longitude,
|
||
campus.latitude,
|
||
campus.longitude
|
||
);
|
||
return distance < this.distanceThreshold;
|
||
});
|
||
|
||
if (isNearby) {
|
||
this.$toast("您在校区范围内，可以进行销假");
|
||
this.isLeave = false;
|
||
} else {
|
||
this.$toast("您不在校区范围内，无法销假");
|
||
this.isLeave = true;
|
||
}
|
||
},
|
||
|
||
// 计算两点之间的球面距离
|
||
calculateDistance(lat1, lng1, lat2, lng2) {
|
||
const R = 6371000; // 地球半径（单位：米）
|
||
const toRadians = degrees => (degrees * Math.PI) / 180;
|
||
const dLat = toRadians(lat2 - lat1);
|
||
const dLng = toRadians(lng2 - lng1);
|
||
const a =
|
||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||
Math.cos(toRadians(lat1)) *
|
||
Math.cos(toRadians(lat2)) *
|
||
Math.sin(dLng / 2) *
|
||
Math.sin(dLng / 2);
|
||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||
return R * c;
|
||
},
|
||
|
||
// 获取销假详情
|
||
getTaskDetail() {
|
||
getLeaveApplicationByProcInsId(this.taskForm.procInsId).then(res => {
|
||
this.leaveApplicationId = res.data.leaveApplicationId;
|
||
this.address = res.data.destinationDetails;
|
||
});
|
||
},
|
||
|
||
// 销假操作
|
||
async confirm() {
|
||
if (await this.checkIfNearCampus1()) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定销假吗？",
|
||
confirmText: "确定",
|
||
cancelText: "取消",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.taskForm.comment = '销假'
|
||
complete(this.taskForm).then(res => {
|
||
if (res.code == 200) {
|
||
const data = {
|
||
leaveApplicationId: this.leaveApplicationId,
|
||
};
|
||
editApply(data).then(() => {
|
||
uni.showToast({
|
||
title: "销假成功",
|
||
icon: "success",
|
||
duration: 1500
|
||
});
|
||
|
||
// 延时跳转确保用户看到提示
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: "/pages/Approval/index?tab=2"
|
||
});
|
||
}, 1600);
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: "销假失败: " + err.message,
|
||
icon: "none"
|
||
});
|
||
});
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "您不在学校附近",
|
||
icon: "error"
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.cancel-leave {
|
||
.content {
|
||
.location-info {
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.address {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.refresh-location {
|
||
margin: 10px auto;
|
||
display: block;
|
||
width: 80%;
|
||
background-color: #007aff;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
|
||
.confirm-cancel {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border-radius: 0;
|
||
padding: 10px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
|
||
&[disabled] {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
</style> |