tourGuide/pages/index/index.vue

<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(i => {
								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>