parking_inspection/pages/clockIn/clockIn.bak.vue

<template>
	<view class="clock">
		<view class="clock-button">
			<view class="clock-button-outer-animate"></view>
			<view class="clock-button-outer">
				<view class="clock-button-inner">
					<view class="tips">
						<view>上班打卡</view>
						<view>{{ currentTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clock-tips">
			<view class="clock-tips-content">
				<u-icon name="checkmark-circle-fill" color="#0E9CFF" size="15"></u-icon>
				<view><view class="address">{{ address }}</view><text @click="positionLocation()">重新定位？</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/static/js/qqmap-wx-jssdk.min.js'
	export default {
		data() {
			return {
				currentTime: '',
				qqMap: new QQMapWX({
					key: 'CWWBZ-F2T36-ZQ6SU-EDL5X-Y3EUT-3HBIF',
					vm: this
				}),
				address: ''
			}
		},
		onShow() {
			this.currentDate();
			this.positionLocation()
		},
		onUnload() {
			if (this.formatDate) {
				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
			}
		},
		methods: {
			positionLocation() {
				uni.showLoading({
					title: '定位中...'
				})
				wx.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.qqMap.reverseGeocoder({
							location: {
								longitude: res.longitude,
								latitude: res.latitude
							},
							success: (res) => {
								if (res?.result?.formatted_addresses) {
									this.address = res.result.formatted_addresses.recommend;
								} else {
									uni.showToast({
										title: '获取位置失败!',
										duration: 3000
									})
								}
								uni.hideLoading()
							},
							fail: () => {
								uni.showToast({
									title: '获取位置失败!',
									duration: 3000
								})
								uni.hideLoading()
							}
						})
					},
					fail: () => {
						uni.showToast({
							title: '获取位置失败!',
							duration: 3000
						})
						uni.hideLoading()
					}
				});
			},
			currentDate() {
				setInterval(this.formatDate, 500);
			},
			formatDate() {
				let date = new Date();
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); // 日
				let week = date.getDay(); // 星期
				let hour = date.getHours(); // 时
				hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
				this.currentTime = `${hour}:${minute}:${second}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clock {
		&-button {
			position: relative;
			animation-name: example;
			animation-duration: 2s;
			animation-fill-mode: forwards;

			&-outer {
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;

				&-animate {
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -135rpx;
					margin-top: -135rpx;
					width: 270rpx;
					height: 270rpx;
					background-color: #98D4FE;
					border-radius: 50%;
					z-index: -1;
					animation: scaleUp 3s infinite;
				}

				@keyframes scaleUp {
					0% {
						transform: scale3d(0.8, 0.8, 0.8);
					}

					50% {
						transform: scale3d(1.3, 1.3, 1.3);
					}

					100% {
						transform: scale3d(0.8, 0.8, 0.8);
					}
				}
			}

			@keyframes example {
				from {
					top: 0;
				}

				to {
					top: 286rpx;
				}
			}

			&-inner {
				width: 220rpx;
				height: 220rpx;
				background-color: #0E9CFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;

				.tips {
					view {
						color: #f2f2f2;
						font-size: 34rpx;
						text-align: center;

						&:last-child {
							color: #ddd;
							font-size: 30rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		&-tips {
			text-align: center;
			margin-top: 520rpx;

			&-content {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 24rpx;

				view {
					margin-left: 5rpx;

					text {
						color: #F4993A;
					}
				}
			}
		}
	}

	.address {
		display: inline-block;
		width: 400rpx;
		line-height: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>