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: '',
			// 弹窗当前时间
			nowTime_pop: ''
		}
	},
	onLoad(options) {
		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.getLocation({
							type: 'gcj02',
							success: (res) => {
								this.latitude = res.latitude
								this.longitude = res.longitude
								this.address = '未知地址'
								this.covers[0].latitude = res.latitude
								this.covers[0].longitude = res.longitude
							}
						})
					}
				}
			})
		},
		// 点击刷新按钮回调
		handleRefresh() {
			uni.showLoading({
				title: '刷新中',
				mask: true
			})
			this.getLocationData()
			setTimeout(() => {
				uni.hideLoading()
			}, 1500)
		},
		// 点击拍照图标回调
		handlePhoto() {
			// 获取用户摄像头权限
			uni.authorize({
				scope: 'scope.camera',
				success: () => {
					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
									this.handleUploading(imgUrl)
								},
								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>