You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
11 KiB
390 lines
11 KiB
<template>
|
|
<view class="content">
|
|
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" class="topImg"></image>
|
|
|
|
<view class="title" style="margin-top: 40rpx;">·快捷入口</view>
|
|
|
|
<view class="flex-between">
|
|
<view class="nav-item flex-around" @click="goHX()">
|
|
立即核销
|
|
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/hexiao.png" mode=""></image>
|
|
</view>
|
|
<view class="nav-item flex-around" @click="gotoPath('/subPackages/order/orderList')">
|
|
查看订单
|
|
<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/dingdan.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="title">·我的打卡</view>
|
|
<view class="rule">打卡规则</view> -->
|
|
|
|
<view class="title">·我的排班</view>
|
|
|
|
<view class="type-box">
|
|
<view v-for="(item,index) in typeList" :key="index"
|
|
:class="['type-item', {'type-active': index == typeIndex}]" @click="typeIndex = index;getList()">
|
|
{{item.title}}
|
|
<view class="type-line" v-if="index == typeIndex"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日历 -->
|
|
<calendarVue :isShowLunar="true" @changeDate="getDate"></calendarVue>
|
|
|
|
<!-- 选择场次 -->
|
|
<view v-for="(item,index) in typeIndex ? sessionLists : sessionList" :key="index"
|
|
class="session-item flex-between">
|
|
{{item.title}}
|
|
<switch :checked="item.isChecked" color="#96684F" @change="switchChange(item,index)" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import calendarVue from '../../components/calendar.vue';
|
|
export default {
|
|
components: {
|
|
calendarVue
|
|
},
|
|
data() {
|
|
return {
|
|
typeList: [{
|
|
title: '导游服务',
|
|
id: ''
|
|
},
|
|
// {
|
|
// title: '线上咨询',
|
|
// id: ''
|
|
// },
|
|
// {
|
|
// title: '拼团产品',
|
|
// id: ''
|
|
// },
|
|
{
|
|
title: '线路产品',
|
|
id: ''
|
|
}
|
|
],
|
|
typeIndex: 0,
|
|
selectDay: '',
|
|
sessionList: [{
|
|
title: '上午场',
|
|
isChecked: false
|
|
},
|
|
{
|
|
title: '下午场',
|
|
isChecked: false
|
|
},
|
|
{
|
|
title: '全天场',
|
|
isChecked: false
|
|
}
|
|
],
|
|
sessionLists: [{
|
|
title: '当天状态',
|
|
isChecked: false
|
|
}],
|
|
isAllChecked: false,
|
|
// 打卡中心点经纬度
|
|
fenceCenter: [
|
|
{latitude: 31.267166, longitude: 120.632449}, // 丽丰广场麦当劳
|
|
{latitude: 31.266902, longitude: 120.630162}, //
|
|
{latitude: 31.266841, longitude: 120.628526},
|
|
{latitude: 31.26576, longitude: 120.629256}
|
|
],
|
|
// 最近的打卡点索引
|
|
nearestFenceIndex: null,
|
|
// 打卡点半径（单位：米）
|
|
fenceRadius: 500,
|
|
// 用户与打卡坐标的距离
|
|
distance: null,
|
|
// 用于存储 watchPosition 的返回值，方便后续清除监听
|
|
watchId: null
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.selectDay = this.getNowTime(new Date())
|
|
this.getList()
|
|
},
|
|
onShow() {
|
|
// 开始监听用户位置
|
|
this.watchLocation()
|
|
},
|
|
onHide() {
|
|
// 页面隐藏时清除位置监听
|
|
if (this.watchId) {
|
|
navigator.geolocation.clearWatch(this.watchId)
|
|
}
|
|
},
|
|
methods: {
|
|
// 监听用户位置变化
|
|
watchLocation() {
|
|
if (navigator.geolocation) {
|
|
this.watchId = navigator.geolocation.watchPosition(
|
|
(position) => {
|
|
const coords = position.coords;
|
|
const [gcj02Lng, gcj02Lat] = this.wgs84ToGcj02(coords.longitude, coords.latitude);
|
|
// 计算用户与每个打卡点的距离，找出最近的打卡点
|
|
let minDistance = Infinity;
|
|
let nearestIndex = null;
|
|
this.fenceCenter.forEach(item => {
|
|
const distance = this.calculateDistance(item.latitude,item.longitude, gcj02Lat, gcj02Lng)
|
|
console.log(distance)
|
|
if (distance < minDistance) {
|
|
minDistance = distance;
|
|
nearestIndex = index;
|
|
}
|
|
})
|
|
this.distance = minDistance;
|
|
this.nearestFenceIndex = nearestIndex;
|
|
console.log('用户与最近打卡点之间的距离',this.distance)
|
|
console.log('最近的打卡点索引', this.nearestFenceIndex);
|
|
},
|
|
(error) => {
|
|
let locationStatus = ''
|
|
switch (error.code) {
|
|
case 1:
|
|
locationStatus = '定位未开启，用户拒绝了定位请求';
|
|
break;
|
|
case 2:
|
|
locationStatus = '定位信息不可用';
|
|
break;
|
|
case 3:
|
|
locationStatus = '定位请求超时';
|
|
break;
|
|
case 4:
|
|
locationStatus = '定位出现未知错误';
|
|
break;
|
|
}
|
|
uni.showToast({
|
|
title: locationStatus,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
);
|
|
} else {
|
|
// 浏览器不支持地理定位
|
|
uni.showToast({
|
|
title: '浏览器不支持地理定位功能',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
// WGS84坐标转换为GCJ-02坐标
|
|
// 判断是否在中国范围内
|
|
outOfChina(lng, lat) {
|
|
return (lng < 72.004 || lng > 137.8347) || (lat < 0.8293 || lat > 55.8271);
|
|
},
|
|
// 转换纬度
|
|
transformLat(x, y) {
|
|
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
|
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
|
|
ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
|
|
ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
|
|
return ret;
|
|
},
|
|
// 转换经度
|
|
transformLng(x, y) {
|
|
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
|
ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
|
|
ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
|
|
ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
|
|
return ret;
|
|
},
|
|
// WGS84 转换为 GCJ02
|
|
wgs84ToGcj02(lng, lat) {
|
|
const a = 6378245.0; // 地球长半轴
|
|
const ee = 0.00669342162296594323; // 扁率
|
|
if (this.outOfChina(lng, lat)) {
|
|
return [lng, lat];
|
|
}
|
|
let dLat = this.transformLat(lng - 105.0, lat - 35.0);
|
|
let dLng = this.transformLng(lng - 105.0, lat - 35.0);
|
|
const radLat = lat / 180.0 * Math.PI;
|
|
let magic = Math.sin(radLat);
|
|
magic = 1 - ee * magic * magic;
|
|
const sqrtMagic = Math.sqrt(magic);
|
|
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
|
|
dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
|
|
const mgLat = lat + dLat;
|
|
const mgLng = lng + dLng;
|
|
return [mgLng, mgLat];
|
|
},
|
|
goHX() {
|
|
uni.switchTab({
|
|
url: '/pages/verification/index'
|
|
})
|
|
},
|
|
// 选择场次
|
|
switchChange(item, index) {
|
|
item.isChecked = !item.isChecked
|
|
|
|
// if(index == 2) {
|
|
// for (let i = 0; i < 2; i++) {
|
|
// this.sessionList[i].isChecked = this.sessionList[2].isChecked
|
|
// }
|
|
// }else {
|
|
// if(this.sessionList[0].isChecked && this.sessionList[1].isChecked) {
|
|
// this.sessionList[2].isChecked = true
|
|
// }else {
|
|
// this.sessionList[2].isChecked = false
|
|
// }
|
|
// }
|
|
|
|
let url = this.typeIndex ? '/api/Merchants/updateGuideSched' : '/api/Merchants/updateGuideSchedService'
|
|
|
|
this.Post({
|
|
date: this.selectDay,
|
|
online_type: item.isChecked ? 1 : 0, // 开关
|
|
date_half: this.typeIndex ? '' : index + 1, // 导游服务 1上午 2下午 3全天
|
|
classify: this.typeIndex ? 2 : '' // 1拼团，2线路
|
|
}, url).then(res => {
|
|
|
|
})
|
|
},
|
|
getDate(date) {
|
|
console.log('传递过来的日期', date)
|
|
this.selectDay = date
|
|
|
|
this.sessionList.forEach(item => item.isChecked = false)
|
|
this.sessionLists[0].isChecked = false
|
|
|
|
this.getList()
|
|
},
|
|
changeWork(date) {
|
|
// // 导游服务值班状态 date_half：分类（1上午，2下午，3全天）
|
|
// this.Post({
|
|
// date: date,
|
|
// date_half
|
|
// },'/api/Merchants/updateGuideSchedService').then(res => {
|
|
|
|
// })
|
|
},
|
|
getList() {
|
|
// 获取排班列表 classify：分类（1拼团，2线路，3导游服务）
|
|
this.Post({
|
|
start_date: this.selectDay,
|
|
end_date: this.selectDay,
|
|
classify: this.typeIndex ? 2 : 3
|
|
}, '/api/Merchants/getGuideSchedList').then(res => {
|
|
if (res.data && res.data.length > 0) {
|
|
let data = res.data[0]
|
|
if (this.typeIndex) {
|
|
// 线路
|
|
this.sessionLists[0].isChecked = data.online_type ? true : false
|
|
} else {
|
|
// 导游
|
|
this.sessionList[0].isChecked = data.morning_type ? true : false
|
|
this.sessionList[1].isChecked = data.afternoon_type ? true : false
|
|
this.sessionList[2].isChecked = data.day_type ? true : false
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取当前日期
|
|
getNowTime(time, type) {
|
|
var date = time,
|
|
year = date.getFullYear(),
|
|
month = date.getMonth() + 1,
|
|
day = date.getDate(),
|
|
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
|
|
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
|
|
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
|
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
|
if (type == 1) {
|
|
if (uni.getSystemInfoSync().platform == 'ios') {
|
|
var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
|
|
} else {
|
|
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
|
|
}
|
|
} else {
|
|
var timer = year + '/' + month + '/' + day;
|
|
}
|
|
|
|
return timer;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background: #FFFFFF;
|
|
min-height: 100vh;
|
|
padding: 40rpx 26rpx 200rpx;
|
|
}
|
|
|
|
.topImg {
|
|
width: 299.33rpx;
|
|
height: 70rpx;
|
|
display: flex;
|
|
margin: auto;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 35rpx;
|
|
color: #000000;
|
|
margin: 68rpx 0 34rpx;
|
|
}
|
|
|
|
.rule {
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #96684F;
|
|
text-align: right;
|
|
}
|
|
|
|
.nav-item {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
width: 338rpx;
|
|
height: 118rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 20rpx;
|
|
padding: 0 15rpx;
|
|
|
|
image {
|
|
width: 80.67rpx;
|
|
height: 80.67rpx;
|
|
}
|
|
}
|
|
|
|
.type-box {
|
|
display: flex;
|
|
|
|
.type-item {
|
|
margin-right: 44rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.type-active {
|
|
color: #96684F;
|
|
}
|
|
|
|
.type-line {
|
|
width: 117rpx;
|
|
height: 6rpx;
|
|
background: #96684F;
|
|
border-radius: 3rpx;
|
|
margin: 4rpx auto 0;
|
|
}
|
|
}
|
|
|
|
.session-item {
|
|
width: 697rpx;
|
|
height: 93rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 47rpx;
|
|
margin: 28rpx auto 0;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
padding: 0 28rpx;
|
|
}
|
|
</style>
|