feat(my_attendance): 添加考勤详情功能并优化定位权限处理- 新增考勤详情弹窗，展示考勤状态、日期、校区名称等信息

- 添加地图展示功能，显示考勤地点- 优化定位权限处理流程，用户拒绝授权时弹出提示- 重构获取位置信息的方法，提高代码可读性和性能

manifest.json

@@ -77,7 +77,8 @@
                 "desc" : "用于获取当前所在城市信息"
             }
         },
-        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
+        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],
+        "libVersion":"latest"
     },
     "mp-alipay" : {
         "usingComponents" : true

pages/common/my_attendance.vue

@@ -25,6 +25,7 @@
             <view class="li"
                   v-for="(v,k) in tableList"
                   :key="k"
+                  @click="openInfo(v)"
             >
               <view class="left">
 <!--                <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
@@ -198,9 +199,49 @@
 
         </view>
       </fui-form>
+      <view class="fui-icon__close" @tap="closeSignInShow">
+        <fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
+      </view>
+    </fui-modal>
 
 
-      <view class="fui-icon__close" @tap="closeSignInShow">
+    <!--详情提示框-->
+    <fui-modal :buttons="[]" width="600" :show="info_show">
+      <text class="fui-title">详情</text>
+      <view class="info_ul">
+        <view class="li">
+          <view class="title">考勤状态：</view>
+          <view class="content">请假</view>
+        </view>
+        <view class="li">
+          <view class="title">考勤日期：</view>
+          <view class="content">请假</view>
+        </view>
+        <view class="li">
+          <view class="title">校区名称：</view>
+          <view class="content">请假</view>
+        </view>
+        <view class="li">
+          <view class="title">备注：</view>
+          <view class="content">请假</view>
+        </view>
+        <view class="map_section" v-if="info_data.id && info_data.latitude">
+          <view class="title">地图：</view>
+          <view class="map">
+            <map
+                v-if="info_data.latitude"
+                :id="`shopMap_${info_data.id}`"
+                :longitude="info_data.longitude"
+                :latitude="info_data.latitude"
+                :markers="getMarkers(info_data.id,info_data)"
+                :scale="16"
+                :show-location="false"
+                style="width: 100%; height: 400rpx;"
+            ></map>
+          </view>
+        </view>
+      </view>
+      <view class="fui-icon__close" @tap="closeInfoShow">
         <fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
       </view>
     </fui-modal>
@@ -303,7 +344,9 @@ export default {
         // },
       ],//选择器可选值列表
 
-
+      //详情模态窗
+      info_show:false,//是否展示|true=是,false=否
+      info_data:{},//详情数据
     }
   },
   onLoad(options) {},
@@ -313,6 +356,23 @@ export default {
   methods: {
     //初始化
     async init(){
+      // 条件编译-小程序
+      //  #ifdef MP-WEIXIN
+      uni.authorize({
+        scope: 'scope.userLocation',
+        success() {
+          // 用户已授权
+
+        },
+        fail() {
+          uni.showToast({
+            title: '请开启定位权限',
+            icon: 'none'
+          });
+          return
+        }
+      });
+      // #endif
       this.userType = uni.getStorageSync('userType')
       this.getCurrentDate()//获取并格式化当前日期
       await this.getUserInfo()//获取用户信息
@@ -459,7 +519,6 @@ export default {
         }
         //确认按钮
         this.formData.status='absent'//考勤类型|present-出勤, absent-缺勤
-        await this.getLocation()//获取经纬度
         await this.submitFormData()
       }
     },
@@ -492,6 +551,9 @@ export default {
       this.formData.remarks = ''
       this.formData.longitude = ''
       this.formData.latitude = ''
+
+      this.getlocation()//获取经纬度
+
     },
     //关闭打卡弹窗
     closeSignInShow(){
@@ -511,7 +573,6 @@ export default {
           })
           return
         }
-        await this.getLocation()//获取经纬度
         await this.submitFormData()
       }
     },
@@ -537,12 +598,16 @@ export default {
 
 
     //获取用户经纬度
-    async getLocation() {
+    async getLocation_COPY() {
       try {
         const location = await new Promise((resolve, reject) => {
           uni.getLocation({
             type: 'wgs84', // 坐标类型，wgs84 返回 gps 坐标，gcj02 返回国测局坐标
             success: (res) => {
+              console.log('当前位置的经度：' + res.longitude);
+              console.log('当前位置的纬度：' + res.latitude);
+              this.longitude = res.longitude
+              this.latitude = res.latitude
               resolve(res);
             },
             fail: (err) => {
@@ -558,6 +623,11 @@ export default {
         this.formData.latitude = location.latitude;
         this.formData.longitude = location.longitude;
 
+        uni.showToast({
+          title: `定位-${this.formData.latitude}`,
+          icon: 'none'
+        });
+
         // uni.showToast({
         //   title: '位置获取成功',
         //   icon: 'success'
@@ -571,6 +641,60 @@ export default {
       }
     },
 
+    getlocation() {
+      uni.getLocation({
+        type: 'wgs84',
+        success: (res) => {
+          console.log('当前位置的经度：' + res.longitude);
+          console.log('当前位置的纬度：' + res.latitude);
+          this.formData.longitude = res.longitude
+          this.formData.latitude = res.latitude
+          // 调用后端接口根据得到的经纬度获取地址
+          console.log(res, "根据经纬度获取地址");
+        },
+        // 若用户点击拒绝获取位置则弹出提示
+        fail: (err) => {
+          uni.showModal({
+            content: '检测到您没打开获取位置功能权限，是否去设置打开？',
+            confirmText: "确认",
+            cancelText: '取消',
+            success: (res) => {
+              if (res.confirm) {
+                uni.openSetting({
+                  success: (res) => {
+                    uni.showToast({
+                      title: '授权后请重新打开此页面',
+                      icon: 'none'
+                    })
+                  },
+                  fail: (err) => {
+                    console.log(err)
+                  }
+                })
+              } else {
+                uni.showToast({
+                  title: '获取地理位置授权失败',
+                  icon: 'none',
+                  success: () => {
+                    // 返回上一页
+                    setTimeout(() => {
+                      uni.showToast({
+                        title: "返回上一页",
+                        icon: 'none'
+                      })
+                      // uni.navigateBack({
+                      //   delta: 1
+                      // })
+                    }, 500)
+                  }
+                })
+              }
+            }
+          })
+        },
+      })
+    },
+
     //发起请假/打卡请求
     async submitFormData() {
       this.closeSignInShow()
@@ -594,8 +718,51 @@ export default {
       setTimeout(() => {
         this.segmented({id:0})//初始化
       }, 1500)
+    },
+
+    //打开详情
+    openInfo(item){
+
+
+      let coordinate_arr= []
+      if (item.coordinate){
+        coordinate_arr = item.coordinate.split(',')
       }
+       item.latitude = Number(coordinate_arr[0] || 0)
+       item.longitude = Number(coordinate_arr[1] || 0)
+
+      // item.latitude = 18.252865
+      // item.longitude = 109.511709
 
+      this.info_data = {...item};
+      // 设置 info_data 并打开弹窗
+      this.info_show = true
+
+
+    },
+    //关闭详情
+    closeInfoShow(){
+        this.info_show = false
+    },
+
+    // 获取标记点
+    getMarkers(id,item) {
+      console.log('获取标记点',item)
+      let data = {
+        id: Number(id),
+        // 设置标记点的纬度坐标
+        latitude: Number(item.latitude),
+        // 设置标记点的经度坐标
+        longitude: Number(item.longitude),
+
+        // name: item.campus_address,
+        iconPath: '/static/icon-img/ding_wei.png',
+        width: 30,
+        height: 30
+      }
+      console.log(88888,data)
+      return [data];
+    },
 
   }
 }
@@ -736,4 +903,32 @@ export default {
   }
 }
 
+//详情
+.info_ul{
+  padding: 30rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  width: 100%;
+  .li{
+    border: 1px solid red;
+    display: flex;
+    .title{
+      width: 130rpx;
+    }
+  }
+  .map_section{
+    display: flex;
+    flex-direction: column;
+    .title{
+      width: 130rpx;
+    }
+    .map{
+      margin-top: 10rpx;
+      border: 1px solid red;
+      width: 100%;
+    }
+  }
+}
+
 </style>