|
|
@@ -1,218 +0,0 @@
|
|
|
-<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>
|
