feat: 打卡签到

h5app/src/router/index.ts

@@ -150,6 +150,10 @@ const routes: Array<RouteRecordRaw> = [
                 path: 'tabWork/work/track/index',
                 component: () => import('@/views/pages/work/track/index.vue')
             },
+            {
+                path: 'tabWork/work/signin',
+                component: () => import('@/views/pages/work/signin/index.vue')
+            },
             {
                 path: 'tabUser',
                 component: () => import('@/views/sapp/tabUser.vue')

h5app/src/views/pages/work/signin/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <ion-page class="list-page">
+    <ion-header class="header-theme2 header-theme3">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-icon :icon="arrowBackOutline()" @click="onBack"></ion-icon>
+        </ion-buttons>
+        <ion-title>打卡签到</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-item class="search-item">
+        当前时间：{{ dayjs(new Date()).format("YYYY-MM-DD HH:mm") }}
+      </ion-item>
+      <div id='signInMap' style=' width: 100%; height: 80%; z-index: 100'></div>
+      <div class="btn-box">
+        <ion-button @click="onSave">确定打卡</ion-button>
+      </div>
+    </ion-content>
+
+  </ion-page>
+</template>
+<script>
+import {defineComponent, ref} from "vue";
+import {alertController, onIonViewDidEnter} from "@ionic/vue";
+import {useUserStore} from "../../../../store/modules/user";
+import dayjs from 'dayjs';
+import {getPosition} from "@/utils/position";
+import thIcon from "@/assets/icon/th.jpg"
+import {arrowBackOutline} from "ionicons/icons";
+import {useRouter} from "vue-router";
+import {saveLongitudeLatitude} from "@/api/position";
+
+const presentAlert = async (header, message) => {
+  const alert = await alertController.create({
+    header: header,
+    message: message,
+    buttons: [
+      '确定'
+    ],
+  });
+
+  await alert.present();
+}
+
+export default defineComponent({
+  name: 'signInMap',
+  methods: {
+    arrowBackOutline() {
+      return arrowBackOutline
+    }, dayjs
+  },
+  setup() {
+    const router = useRouter()
+    const userStore = useUserStore();
+    const userInfo = ref(userStore.getUserInfo);
+    const position = {
+      longitude: null,
+      latitude: null
+    };
+    const T = window.T;
+    const zoom = 14;
+    let map = null;
+    let label = null;
+    let marker = null;
+
+    const setMarker = () => {
+      // 删除点
+      if (marker != null) {
+        map.removeOverLay(marker);
+      }
+      //设置显示地图的中心点和级别
+      map.centerAndZoom(new T.LngLat(114.40, 23.08), zoom);
+
+      // 获取定位
+      getPosition().then((data) => {
+        if (data.longitude && data.latitude) {
+          position.longitude = data.longitude;
+          position.latitude = data.latitude;
+
+          // 设置中心点
+          map.centerAndZoom(new T.LngLat(position.longitude, position.latitude), zoom);
+          const icon = new T.Icon({
+            iconUrl: thIcon,
+            iconSize: new T.Point(30, 30),
+            iconAnchor: new T.Point(10, 56)
+          })
+          label = new T.Label({
+            text: userInfo.value.siteUserName, //文本标注的内容
+            position: new T.LngLat(position.longitude, position.latitude), //文本标注的地理位置
+            offset: new T.Point(-40, 20) //文本标注的位置偏移值
+          })
+          const point = new T.LngLat(position.longitude, position.latitude, {
+            icon: icon
+          })
+          // 创建标注
+          marker = new T.Marker(point);
+          //向地图上标记
+          map.addOverLay(label);
+          map.addOverLay(marker);
+        }
+      })
+    }
+
+    const initMap = () => {
+      //初始化地图对象
+      map = new T.Map("signInMap");
+
+      setMarker();
+    }
+
+    function onBack() {
+      router.go(-1)
+    }
+
+    // 保存
+    function onSave() {
+      if (position.latitude && position.longitude) {
+        const sendData = {
+          userId: userInfo.value.userID,
+          time: Date.now(),
+          longitude: position.longitude,
+          latitude: position.latitude,
+        }
+        // 发送请求
+        saveLongitudeLatitude(sendData).then(() => {
+          presentAlert('提示', '打卡点已记录');
+        });
+      }
+    }
+
+    onIonViewDidEnter(() => {
+      initMap();
+    });
+
+    return {
+      onBack,
+      onSave,
+    }
+  }
+});
+</script>
+
+<style lang="less">
+.btn-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 5px;
+}
+</style>

h5app/src/views/sapp/tabWork.vue

@@ -134,12 +134,12 @@
                </div>
                <div class="tool-title">工作轨迹</div>
              </a>
-<!--             <a class="tool-item box-line"  @click="router.push('/tabs/tabMain/demo/edit')">
+             <a class="tool-item box-line" @click="router.push('/tabs/tabWork/work/signin')">
                <div class="tool-img">
-                 <img src="@/assets/icon/map.png">
+                 <img src="@/assets/icon/dk1.png">
                </div>
-               <div class="tool-title">表单样式</div>
-             </a>-->
+               <div class="tool-title">打卡签到</div>
+             </a>
            </div>
          </div>
        </div>