smartSchoolClockApp/pages/location/location.vue

<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map">
			<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :scale="18"
				:markers="covers">
			</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: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/location.png',
					width: 20,
					height: 20
				}],
				imgUrl: ""
			};
		},
		methods: {
			// 点击拍照图标回调
			handlePhoto() {
				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"
						})
					}
				});
			}
		}
	}
</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>