feat(checkin): 添加打卡功能并优化定位处理

在详情页添加打卡按钮，实现打卡功能并验证用户定位范围将用户经纬度信息传递到详情页，优化路由跳转参数

feat(checkin): 添加打卡功能并优化定位处理
在详情页添加打卡按钮，实现打卡功能并验证用户定位范围将用户经纬度信息传递到详情页，优化路由跳转参数
hookehuyr
Commit dc1a6547cdc0dd9d08ebe151115100b5bfbed8ac dc1a6547 1 parent f6d53f94
Showing 2 changed files with 102 additions and 20 deletions
src/views/checkin/info.vue
src/views/checkin/map.vue
--- a/src/views/checkin/info.vue
View file @dc1a654
+++ b/src/views/checkin/info.vue
View file @dc1a654
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-22 21:33:41
+ * @LastEditTime: 2025-08-26 17:21:24
- * @FilePath: /map-demo/src/views/by/info.vue
+ * @FilePath: /map-demo/src/views/checkin/info.vue
  * @Description: 文件描述
 -->
 <template>
@@ -30,6 +30,7 @@
               <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
               <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
             </div>
+            <div @click="checkIn()" class="info-btn" style="margin-right: 0.75rem;">打卡</div>
             <div v-if="page_details.path?.length > 1" @click="goTo()" class="info-btn">前往</div>
             <div @click="goToWalk()" class="info-btn">前往</div>
           </div>
@@ -88,12 +89,13 @@
 <script setup>
 import { ref, watch, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { showImagePreview } from 'vant';
+import { showImagePreview, showDialog } from 'vant';
 import { storeToRefs } from 'pinia'
 import audioPlayList from '@/components/audioList.vue'
 import { mainStore, useTitle } from '@/utils/generatePackage'
 import wx from 'weixin-js-sdk';
 import $ from 'jquery';
+import AMapLoader from '@amap/amap-jsapi-loader'
 import { mapAPI, mapAudioAPI } from '@/api/map.js'
@@ -120,7 +122,7 @@ watch(
   () => props.info,
   (v) => {
     if (v.details.length) {
-      page_details.value = { ...v.details[0], position: v.position, path: v.path };
+      page_details.value = { ...v.details[0], position: v.position, path: v.path, current_lng: v.current_lng, current_lat: v.current_lat };
       // 获取浏览器可视范围的高度
       $('.info-page').height(props.height + 'px');
     }
@@ -197,12 +199,20 @@ onMounted(async () => {
     const raw_list = data.list[0].list; // 获取标记点列表
     const marker_id = $route.query.marker_id;
     const current_marker = raw_list.filter(item => item.id == marker_id)[0];
+    // 定位
+    const current_lng = $route.query.current_lng;
+    const current_lat = $route.query.current_lat;
     //
     page_details.value = { ...current_marker.details[0], position: current_marker.position, path: current_marker.path };
     // 富文本转义, 分割线样式转换
     page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
     page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
     page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
+    // 定位
+    if (current_lng && current_lat) {
+      page_details.value.current_lng = current_lng;
+      page_details.value.current_lat = current_lat;
+    }
     // 查询是否有音频列表，打标记点是否有音频
     const getAudioList = await mapAudioAPI({ mid: $route.query.id, bid: marker_id });
     if (getAudioList.data && getAudioList.data.length) {
@@ -270,6 +280,11 @@ onMounted(async () => {
   wx.updateTimelineShareData(shareData);
   // 分享到腾讯微博
   wx.onMenuShareWeibo(shareData);
+  const AMap = await AMapLoader.load({
+    key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
+    version: '2.0', // 指定API版本
+    plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']    // 必须加载步行导航插件
+  })
 });
 // watchEffect(
@@ -302,9 +317,9 @@ const goTo = () => { // 打开标记地图显示
     return;
   }
   //
-  if ($router.currentRoute.value.path === '/by/info') { // 详情页
+  if ($router.currentRoute.value.path === '/checkin/info') { // 详情页
     $router.push({
-      path: '/by',
+      path: '/checkin',
       query: {
         id: $route.query.id,
         marker_id: $route.query.marker_id
@@ -320,9 +335,9 @@ const goTo = () => { // 打开标记地图显示
 const goToWalk = async () => { // 打开步行导航地图显示
   //
-  if ($router.currentRoute.value.path === '/by/info') { // 详情页
+  if ($router.currentRoute.value.path === '/checkin/info') { // 详情页
     $router.push({
-      path: '/by',
+      path: '/checkin',
       query: {
         id: $route.query.id,
         marker_id: $route.query.marker_id
@@ -343,14 +358,14 @@ const goToWalk = async () => { // 打开步行导航地图显示
 const goBack = () => { // 返回首页
   $router.push({
-    path: '/by',
+    path: '/checkin',
     query: {
       id: $route.query.id,
     }
   })
 }
-const showBack = computed(() => $router.currentRoute.value.path === '/by/info');
+const showBack = computed(() => $router.currentRoute.value.path === '/checkin/info');
 const voicePause = () => {
   audio.value.pause();
@@ -450,7 +465,7 @@ const onClickAudioList = () => {
   if ($('.info-page').height() < $(window).height()) { // 在浮动模式下点击音频列表
     // 打开页面
     $router.push({
-      path: '/by/info',
+      path: '/checkin/info',
       query: {
         id: $route.query.id,
         marker_id: props.info.id,
@@ -478,6 +493,59 @@ const onStatusAudioList = (status) => { // 音频列表组件，状态改变
   //   show_audio.value = false;
   // }
 }
+
+// const checkInRange = (current_lng, current_lat, point_range) => {
+//   let isPointInRing = AMap.GeometryUtil.isPointInRing([current_lng, current_lat], point_range);
+//   return isPointInRing
+// }
+
+// 现在只有一个地点的经纬度page_details.value?.position, 我现在需要判断我当前经纬度离这个点的距离是否在1km以内
+const checkInRange = (current_lng, current_lat, point_range) => {
+  if (!point_range) return false;
+  let distance = AMap.GeometryUtil.distance([current_lng, current_lat], point_range);
+  return distance < 1000;
+}
+
+
+const check_in_status = ref(false);
+const checkIn = async () => { // 打卡
+  if (check_in_status.value) {
+    show_toast.value = true;
+    toast_text.value = '您已打卡';
+    return;
+  }
+
+  // 判断用户是否定位
+  if (!page_details.value.current_lng || !page_details.value.current_lat) {
+    show_toast.value = true;
+    toast_text.value = '请先获取定位';
+    return;
+  }
+
+  // 判断用户时候在范围内
+  if (!checkInRange(page_details.value.current_lng, page_details.value.current_lat, page_details.value?.position)) {
+    show_toast.value = true;
+    toast_text.value = '您不在打卡范围';
+    return;
+  }
+
+  if (page_details.value?.position.length) {
+    // emit("checkIn", {name: '打卡', point: [+page_details.value?.position[0], +page_details.value?.position[1]]});
+    // 确认打卡
+    check_in_status.value = true;
+    // 提示打卡成功
+    showDialog({
+      title: '温馨提示',
+      message: `恭喜您打卡成功`,
+      confirmButtonText: '去上传图片',
+    }).then(() => {
+      // TODO: 后续上传图片页面
+    });
+  } else {
+    show_toast.value = true;
+    toast_text.value = '该标记点没有关联导航';
+  }
+}
 </script>
 <style lang="less">
--- a/src/views/checkin/map.vue
View file @dc1a654
+++ b/src/views/checkin/map.vue
View file @dc1a654
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-08 14:51:23
+ * @LastEditTime: 2025-08-26 17:01:40
- * @FilePath: /map-demo/src/views/by/map.vue
+ * @FilePath: /map-demo/src/views/checkin/map.vue
  * @Description: 公众地图主体页面
 -->
 <template>
@@ -27,14 +27,14 @@
         :src="data_logo"
       />
     </div>
-    <div @click="scanQrcode" style="position: absolute; bottom: 1rem; left: calc(50% - 2.5rem);">
+    <!-- <div @click="scanQrcode" style="position: absolute; bottom: 1rem; left: calc(50% - 2.5rem);">
       <van-image
         width="5rem"
         height="5rem"
         fit="contain"
         src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan@3x.png"
       />
-    </div>
+    </div> -->
     <van-config-provider :theme-vars="themeVars">
       <van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
@@ -99,7 +99,7 @@ import $ from 'jquery';
 import { useRect } from '@vant/use';
 import { mapAPI } from '@/api/map.js'
 import wx from 'weixin-js-sdk'
-import pageInfo from '@/views/by/info.vue'
+import pageInfo from '@/views/checkin/info.vue'
 import audioBackground1 from '@/components/audioBackground1.vue'
 import { mapState, mapActions } from 'pinia'
 import { mainStore } from '@/store'
@@ -485,6 +485,18 @@ export default {
           await this.$nextTick();
           this.itemInfo = updatedInfo;
+          // 写入用户经纬度
+          if (this.current_lng && this.current_lat) {
+            this.itemInfo.current_lng = this.current_lng;
+            this.itemInfo.current_lat = this.current_lat;
+          } else {
+            this.itemInfo.current_lng = '';
+            this.itemInfo.current_lat = '';
+            // 提示用户获取定位
+            this.show_toast = true;
+            this.toast_text = '请先点击左侧按钮获取定位'
+          }
+
           // 详情为空提示
           if (!this.itemInfo.details.length) {
             this.show_toast = true;
@@ -845,7 +857,7 @@ export default {
           let marker_id = parseQueryString(result).marker_id;
           // 跳转详情页
           this.$router.push({
-            path: '/by/info',
+            path: '/checkin/info',
             query: {
               id,
               marker_id
@@ -855,7 +867,7 @@ export default {
       });
       // 识别率太低
       // this.$router.push({
-      //   path: '/by/scan'
+      //   path: '/checkin/scan'
       // })
     },
     onHeightChange ({ height }) { // 监听浮动面板高度变化
@@ -868,10 +880,12 @@ export default {
         // this.changeAudioStatus('pause');
         //
         this.$router.push({
-          path: '/by/info',
+          path: '/checkin/info',
           query: {
             id: this.$route.query.id,
-            marker_id: this.itemInfo.id
+            marker_id: this.itemInfo.id,
+            current_lng: this.itemInfo.current_lng,
+            current_lat: this.itemInfo.current_lat,
           }
         })
       } else {