waterElectricityMinApp/pagesClockIn/location/location.vue

<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map">
			<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :scale="16"
				:markers="covers">
			</map>
		</view>
		<!-- 盒子区域 -->
		<view class="box">
			<!-- 定位区域 -->
			<view class="top">
				<view class="left">
					<view class="left_title">
						我的位置
					</view>
					<view class="left_place">
						{{address}}
					</view>
				</view>
				<view class="right" @click="handleRefresh">
					<img src="./imgs/refresh.png">
				</view>
			</view>
			<!-- 拍照区域 -->
			<view class="center">
				<view class="center_left">
					场景照片（必填）
				</view>
				<view class="center_right" @click="handlePhoto">
					<img src="./imgs/photo.png">
				</view>
			</view>
			<!-- 提示倒计时区域 -->
			<view class="bottom">
				<view class="button">
					请在{{timeRange}}时间段之内提交打卡
				</view>
			</view>
		</view>
		
		<!-- 认证结果弹窗 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class="popup-content">
				<view class="title">
					<view class="icon">
						<img src="./imgs/success2.png">
					</view>
					<view class="title_info">
						打卡成功
					</view>
				</view>
				<view class="time">
					{{nowTime_pop}}
				</view>
				<view class="popup_button" @click="handleGoHome">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var QQMapWX = require('../util/qqmap-wx-jssdk1.1/qqmap-wx-jssdk');
	var qqmapsdk;
	export default {
		data() {
			return {
				// 定位经纬度
				latitude: null,
				longitude: null,
				// 地图标记点属性
				covers: [{
					id: 1,
					latitude: null,
					longitude: null,
					iconPath: '../static/imgs/location.png',
					width: 20,
					height: 20
				}],
				// 照片信息
				imgUrl: "",
				// 定位位置信息
				address: "",
				// 时间段信息
				timeRange: "",
				// 规则id
				id: "",
				// 是否需要人脸识别,值为1时是不需要
				flag: "",
				// 弹窗当前时间
				nowTime_pop:""
			};
		},
		onLoad(options) {
			if (options.flag) {
				this.flag = options.flag
			}
			let obj = JSON.parse(options.obj)
			this.timeRange = obj.timeRange
			this.id = obj.id
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				// 申请的key
				key: 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
			});
			this.getLocationData()
		},
		methods: {
			// 获取定位具体信息
			getLocationData() {
				qqmapsdk.reverseGeocoder({
					success: (res) => {
						// console.log(res);
						if (res.status == 0) {
							// 获取详细地址信息
							this.address = res.result.address
							// 获取地址经纬度
							this.latitude = res.result.location.lat
							this.longitude = res.result.location.lng
							// 获取标记点地址经纬度
							this.covers[0].latitude = res.result.location.lat
							this.covers[0].longitude = res.result.location.lng
						} else {
							uni.showToast({
								title: "请求定位失败",
								icon: 'none'
							})
						}
					}
				})
			},
			// 点击刷新按钮回调
			handleRefresh() {
				uni.showLoading({
					title: '刷新中',
					mask: true
				});
				this.getLocationData()
				setTimeout(() => {
					uni.hideLoading();
				}, 1500)
			},
			// 点击拍照图标回调
			handlePhoto() {
				// 获取用户摄像头权限
				uni.authorize({
					scope: 'scope.camera',
					success: () => {
						uni.chooseImage({
							count: 1,
							sourceType: ['camera'],
							success: (res) => {
								// console.log(res);
								uni.uploadFile({
									url: `https://chtech.ncjti.edu.cn/campusclock/attendance/api/file/upload`,
									filePath: res.tempFilePaths[0],
									name: 'file',
									header: {
										'platform': 2,
										'Accept-Language': 'zh-CN,zh;q=0.9'
									},
									success: (uploadFileRes) => {
										let imgUrl = JSON.parse(uploadFileRes.data)
											.data
										if (this.flag == 1) {
											this.handleUploading(imgUrl)
										} else {
											uni.redirectTo({
												url: `/pagesClockIn/authentication/authentication?imgUrl=${imgUrl}&id=${this.id}&address=${this.address}&latitude=${this.latitude}&longitude=${this.longitude}`
											})
										}
									},
									fail: () => {
										uni.showToast({
											title: "上传失败",
											icon: 'error'
										})
									}
								});
							}
						});
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: '请先开启摄像头权限，否则将无法使用打卡功能',
							cancelText: '不授权',
							confirmText: '授权',
							success: function(res) {
								if (res.confirm) {
									uni.openSetting({
										success(res) {}
									})
								}
							}
						});
					}
				})
			},
			
			// 打卡请求
			async handleUploading(imgUrl) {
				let res = await this.$myRequest_clockIn({
					url: "/attendance/api/sign/check/in/update",
					method: "put",
					header: {
						'Authorization': uni.getStorageSync("token"),
						'platform': 2,
						'Accept-Language': 'zh-CN,zh;q=0.9'
					},
					data: {
						id: this.id,
						lat: this.latitude,
						lng: this.longitude,
						location: this.address,
						sceneImage: imgUrl,
					}
				})
				// console.log(res);
				if (res.code == 200) {
					this.getNowTimePop()
					this.$refs.popup.open()
				}
			},
			getNowTimePop() {
				let date = new Date()
				let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				this.nowTime_pop = hours + ':' + minutes + ':' + seconds
			},
			
			// 点击 我知道了按钮 跳回首页
			handleGoHome() {
				this.$refs.popup.close()
				uni.reLaunch({
					url: "/pagesClockIn/home/home"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.map {
			position: relative;
			width: 100vw;
			height: 100vh;
		}

		.box {
			position: absolute;
			left: 30rpx;
			bottom: 30rpx;
			width: 690rpx;
			height: 387rpx;

			.top {
				display: flex;
				box-sizing: border-box;
				padding: 0 30rpx;
				width: 690rpx;
				height: 123rpx;
				border-radius: 14rpx 14rpx 0 0;
				background-color: #fff;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					flex: 6;

					.left_title {
						font-size: 32rpx;
					}

					.left_place {
						font-size: 24rpx;
						font-weight: 200;
						color: #808080;
					}
				}

				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;

					img {
						width: 42rpx;
						height: 42rpx;
					}
				}
			}

			.center {
				display: flex;
				box-sizing: border-box;
				padding: 0 30rpx;
				width: 690rpx;
				height: 122rpx;
				line-height: 122rpx;
				background-color: #fff;

				.center_left {
					flex: 6;
					font-size: 32rpx;
				}

				.center_right {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						width: 49rpx;
						height: 39rpx;
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
				width: 690rpx;
				height: 140rpx;
				border-radius: 0 0 14rpx 14rpx;
				background-color: #fff;

				.button {
					width: 630rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 16rpx;
					text-align: center;
					font-size: 32rpx;
					color: #fff;
					background: linear-gradient(180deg, #00ACFC 0%, #0082FC 100%);
				}
			}
		}
		
		.popup-content {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: 630rpx;
			height: 376rpx;
			border-radius: 33rpx;
			background-color: #fff;
		
			.title {
				display: flex;
				justify-content: center;
				align-items: center;
		
				.icon {
					width: 40rpx;
					height: 40rpx;
		
					img {
						width: 100%;
						height: 100%;
					}
				}
		
				.title_info {
					margin-left: 8rpx;
					font-size: 36rpx;
					font-weight: 800;
					color: #0082FC;
				}
			}
		
			.time {
				font-size: 32rpx;
			}
		
			.popup_button {
				width: 50%;
				text-align: center;
				font-size: 32rpx;
				color: #0082FC;
			}
		}
	}
</style>