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" :circles="circles">
			</map>
		</view>
		<!-- 盒子区域 -->
		<view class="box">
			<!-- 定位区域 -->
			<view class="top">
				<view class="left">
					<view class="left_title">
						我的位置
					</view>
					<view class="left_place">
						南昌交通学院食堂
					</view>
				</view>
				<view class="right">
					<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">
					15:05:05 打卡（15分钟内提交打卡）
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: null,
				longitude: null,
				covers: [{
					id: 1,
					latitude: null,
					longitude: null,
					iconPath: '../../static/location.png',
					width: 20,
					height: 20
				}],
				circles: [{
					longitude: null,
					latitude: null,
					fillColor: "#FF2B431A",
					color: "#FF0000",
					radius: 100,
					strokeWidth: 1
				}],
				imgUrl: ""
			};
		},
		onLoad() {
			this.getLocationData()
			this.test()
		},
		methods: {
			getLocationData() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res);
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.covers[0].latitude = res.latitude
						this.covers[0].longitude = res.longitude
						this.circles[0].latitude = res.latitude
						this.circles[0].longitude = res.longitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			test() {
				console.log(789);
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			// 点击拍照图标回调
			handlePhoto() {
				// 获取用户摄像头权限
				uni.authorize({
					scope: 'scope.camera',
					success() {
						// uni.navigateTo({
						// 	url: "/pages/location/location"
						// })
						uni.chooseImage({
							count: 1,
							sourceType: ['camera'],
							success: (res) => {
								console.log(res);
								console.log(res.tempFilePaths[0]);
								console.log(JSON.stringify(res.tempFilePaths));
								// this.imgUrl = JSON.stringify(res.tempFilePaths)
								// console.log(this.imgUrl);
								uni.navigateTo({
									url: "/pages/authentication/authentication"
								})
							}
						});
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: '请先开启摄像头权限，否则将无法使用打卡功能',
							cancelText: '不授权',
							confirmText: '授权',
							success: function(res) {
								if (res.confirm) {
									uni.openSetting({
										success(res) {}
									})
								} else if (res.cancel) {}
							}
						});
					}
				})
			}
		}
	}
</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>