clockIn-wechat-uniapp-241018/pages/index/index.vue

<template>
	<view class="home">
		<!-- 顶部背景 -->
		<view class="home-top">
			<image class="home-top-bg" src="@/static/image/home/top-bg.png" mode="widthFix"></image>
		</view>

		<!-- 卡片(地图) -->
		<view class="card">
			<view @click="openBroadside" class="team">
				<view class="change-icon">
					<image src="@/static/image/home/change.png" mode="widthFix"></image>
				</view>
				<view class="project">
					高新区项目一队项目1
				</view>
			</view>
			<view class="map">
				<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>

		<!-- 打卡按钮 -->
		<view class="punch-card">
			<view class="circle">
				<view class="title">拍照打卡</view>
				<view class="time">2021-10-10 10:00:00</view>
			</view>
		</view>

		<!-- 签到记录 -->
		<div @click="toRecord" class="sign">
			<div class="sign-title">
				<image class="sign-title-img" src="@/static/image/home/sign.png" mode="widthFix"></image>
				<div class="title">打卡记录</div>
			</div>
			<div class="project">
				<text class="project-name">高新区项目一队项目1</text>
				<uv-icon name="arrow-right" color="#000"></uv-icon>
			</div>
		</div>

		<!-- tab栏 -->
		<tabbar v-if="!broadsideShow" :select="0"></tabbar>

		<!-- 侧边栏 -->
		<broadside ref="broadside"></broadside>
	</view>
</template>

<script>
	import tabbar from '../../components/base/tabbar.vue'
	import broadside from '../../components/broadside/broadside.vue'

	export default {
		name: "Home",
		components: {
			tabbar,
			broadside
		},
		data() {
			return {
				broadsideShow: false, //是否显示遮罩层
				latitude: 39.909,
				longitude: 116.39742,
				covers: []
			}
		},
		onShow() {
			this.getLocation()
		},
		methods: {
			// 跳转签到记录
			toRecord() {
				uni.navigateTo({
					url: "/pages/record/record"
				})
			},

			//打开侧边栏
			openBroadside() {
				this.$refs.broadside.open()
				this.broadsideShow = true;
			},

			//获取用户位置
			getLocation() {
				let self = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						self.longitude = res.longitude;
						self.latitude = res.latitude;
						self.covers.push({
							id : 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/image/home/location.png',
							width : 30,
							height : 30
						})
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background: $bg-color;
		min-height: 100vh;

		// 顶部背景
		.home-top {

			height: 490rpx;
			overflow: hidden;

			.home-top-bg {
				width: 750rpx;
			}

		}

		// 卡片(地图)
		.card {
			width: 95%;
			margin: -340rpx auto 0rpx auto;
			position: relative;

			.team {
				display: flex;
				margin: 15rpx 0rpx;
				color: white;
				font-size: 34rpx;

				.change-icon {
					display: flex;
					align-items: center;
					width: 40rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
					}
				}
			}

			.map {
				height: 350rpx;
				background: $main-color;
				border-radius: 20rpx;
				overflow: hidden;
			}
		}

		//打卡按钮
		.punch-card {
			display: flex;
			justify-content: center;
			margin: 60rpx 0rpx;

			.circle {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 370rpx;
				height: 370rpx;
				border-radius: 50%;
				background: $main-color;
				color: white;

				.title {
					font-size: 36rpx;
				}

				.time {
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		// 签到记录
		.sign {
			display: flex;
			flex-wrap: wrap;
			width: 90%;
			margin: 0rpx auto;
			background: white;
			border-radius: 15rpx;
			box-sizing: border-box;
			padding: 30rpx 30rpx 30rpx 20rpx;
			box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1);

			.sign-title {
				display: flex;
				width: 30%;

				.sign-title-img {
					width: 40rpx;
					margin-right: 15rpx;
				}

				.title {}
			}

			.project {
				display: flex;
				width: 70%;
				justify-content: space-between;

				.project-name {
					color: $main-color;
				}
			}
		}
	}
</style>