smartSchoolClockApp/pages/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>
export default {
	data() {
		return {
			// 定位经纬度
			latitude: null,
			longitude: null,
			// 地图标记点属性
			covers: [
				{
					id: 1,
					latitude: null,
					longitude: null,
					iconPath: '../../static/imgs/location.png',
					width: 30,
					height: 30
				}
			],
			// 照片信息
			imgUrl: '',
			// 定位位置信息
			address: '',
			// 时间段信息
			timeRange: '',
			// 规则id
			id: '',
			// 是否需要人脸识别,值为1时是不需要
			flag: '',
			// 弹窗当前时间
			nowTime_pop: ''
		}
	},
	onLoad(options) {
		if (options.flag) {
			this.flag = options.flag
		}
		if (options.obj) {
			let obj = JSON.parse(options.obj)
			this.timeRange = obj.timeRange
			this.id = obj.id
		}
		this.getLocationData()
	},
	methods: {
		// 获取定位具体信息
		getLocationData() {
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					const KEY = 'X57BZ-ZISE3-KTN3O-3P45H-C3J7Q-D5B67'
					let url = 'https://apis.map.qq.com/ws/geocoder/v1'
					let locationdata = res.latitude + ',' + res.longitude
					this.$jsonp(url, {
						key: KEY,
						output: 'jsonp',
						location: locationdata
					})
						.then(json => {
							// console.log(json)
							if (json.status == 0) {
								// 获取详细地址信息
								this.address = json.result.address
								// 获取地址经纬度
								this.latitude = json.result.location.lat
								this.longitude = json.result.location.lng
								// 获取标记点地址经纬度
								this.covers[0].latitude = json.result.location.lat
								this.covers[0].longitude = json.result.location.lng
							} else {
								uni.showToast({
									title: `${json.message},请求定位失败`,
									icon: 'none'
								})
							}
						})
						.catch(err => {
							console.log(err)
						})
				},
				fail: error => {
					uni.showModal({
						title: '提示',
						content: '请先开启定位权限，否则将无法使用定位功能',
						cancelText: '不授权',
						confirmText: '授权',
						success: function(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {}
								})
							} else if (res.cancel) {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				}
			})
		},
		// 点击刷新按钮回调
		handleRefresh() {
			uni.showLoading({
				title: '刷新中',
				mask: true
			})
			this.getLocationData()
			setTimeout(() => {
				uni.hideLoading()
			}, 1500)
		},
		// 点击拍照图标回调
		handlePhoto() {
			// 选择图片
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['camera'],
				success: res => {
					// console.log(res);
					uni.showLoading({
						title: '上传中',
						mask: true
					})
					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: `/pages/authentication/authentication?imgUrl=${imgUrl}&id=${this.id}&address=${this.address}&latitude=${this.latitude}&longitude=${
										this.longitude
									}`
								})
							}
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					})
				}
			})
		},

		// 打卡请求
		async handleUploading(imgUrl) {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/sign/check/in/update',
				method: 'put',
				header: {
					'content-type': 'application/json'
				},
				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: '/pages/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>