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>
	</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: ""
			};
		},
		onLoad(options) {
			let obj = JSON.parse(options.obj)
			this.timeRange = obj.timeRange
			this.id = obj.id
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				// 申请的key
				key: 'R43BZ-2XROX-L7T45-T5OQI-IBDFT-GNBOI'
			});
			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://www.web-server.top/attendance/api/file/upload`,
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: (uploadFileRes) => {
										let imgUrl = JSON.parse(uploadFileRes.data)
											.data
										uni.navigateTo({
											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) {}
									})
								}
							}
						});
					}
				})
			},
		}
	}
</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%);
				}
			}
		}
	}
</style>