把获取用户地理位置封装到 store 中的 map.js 中

api/attendance/index.js

@@ -3,9 +3,24 @@ import request from '@/utils/request.js'
 
 /**
  * 获取考勤规则详情
+ * @param {*} ruleId 考勤规则 ID
+ * @returns 
  */
-export const getAttendanceDetail = (ruleId) => {
+export const getAttendanceDetailAPI = (ruleId) => {
 	return request({
 		url: `/system/kq_rule/${ruleId}`
 	})
+}
+
+/**
+ * 考勤打卡
+ * @param {*} data 
+ * @returns 
+ */
+export const addAttendanceAPI = (data) => {
+	return request({
+		url: '/operation/kqmx/core',
+		method: 'post',
+		data
+	})
 }
\ No newline at end of file

api/login.js

@@ -18,16 +18,16 @@ export function login(username, password, code, uuid) {
   })
 }
 
-// 注册方法
-export function register(data) {
-  return request({
-    url: '/auth/register',
-    headers: {
-      isToken: false
-    },
-    method: 'post',
-    data: data
-  })
+// 注册方法
+export function register(data) {
+  return request({
+    url: '/auth/register',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
 }
 
 // 获取用户详细信息
@@ -42,7 +42,7 @@ export function getInfo() {
 export function logout() {
   return request({
     'url': '/auth/logout',
-    'method': 'post'
+    'method': 'DELETE'
   })
 }
 
@@ -56,4 +56,4 @@ export function getCodeImg() {
     method: 'get',
     timeout: 20000
   })
-}
+}

pages/attendance/index.vue

@@ -2,27 +2,60 @@
   <view class="wrap">
     <div class="button_wrap">
       <button v-for="obj in attTimeKeyList" :class="obj.disabled ? 'workbtn_disabled' : obj.class"
-        :disabled="obj.disabled">{{ obj.title }}</button>
+        :disabled="obj.disabled" @click="attendanceClickFn(obj.type)">{{ obj.title }}</button>
     </div>
-
+    <uni-list class="list_wrap">
+      <uni-list-item>
+        <template v-slot:header>
+          <span>2024-11-04 星期一</span>
+        </template>
+        <!-- 自定义 body -->
+        <template v-slot:body>
+          <div class="item_body">
+            <div class="item">
+              <text class="time">09:05:20</text>
+              <text class="title">上班打卡</text>
+            </div>
+            <div class="item">
+              <text class="time">09:05:20</text>
+              <text class="title">午班打卡</text>
+            </div>
+            <div class="item">
+              <text class="time">09:05:20</text>
+              <text class="title">下班打卡</text>
+            </div>
+          </div>
+        </template>
+      </uni-list-item>
+    </uni-list>
   </view>
 </template>
 
 <script>
 
-import { getAttendanceDetail } from '@/api/attendance'
+import { getAttendanceDetailAPI, addAttendanceAPI } from '@/api/attendance'
 import { checkStartLessEndTime } from '@/utils/common'
 export default {
   data() {
     return {
-      attTimeKeyList: [{ // 需要考勤列表
+      attTimeKeyList: []
+    }
+  },
+  created() {
+    this.getRuleInfo()
+  },
+  methods: {
+    // 获取考勤规则详情
+    async getRuleInfo() {
+      const list = [{ // 需要考勤列表
         beginKey: 'firBegintime',
         beginValue: '',
         endKey: 'firEndtime',
         endValue: '',
         class: 'go_work',
         title: '上班打卡',
-        disabled: false // 是否可以交互
+        disabled: false, // 是否可以交互
+        type: 'begin', // 考勤类型
       },
       {
         beginKey: 'secBegintime',
@@ -31,7 +64,8 @@ export default {
         endValue: '',
         class: 'after_work',
         title: '午班打卡',
-        disabled: false
+        disabled: false,
+        type: 'after',
       },
       {
         beginKey: 'thiBegintime',
@@ -40,22 +74,45 @@ export default {
         endValue: '',
         class: 'off_work',
         title: '下班打卡',
-        disabled: false
+        disabled: false,
+        type: 'off',
       }]
-    }
-  },
-  created() {
-    this.getRuleInfo()
-  },
-  methods: {
-    async getRuleInfo() {
       // 需要提取打卡的时间
-      const { data } = await getAttendanceDetail(this.$store.getters.user.ruleId)
-      this.attTimeKeyList.forEach(obj => {
+      const { data } = await getAttendanceDetailAPI(this.$store.getters.user.ruleId)
+      for (let i = 0; i < list.length; i++) {
+        const obj = list[i]
+        if (!data[obj.beginKey]) {
+          // 如果打卡开始时间是空的（例如：有的人没有午班打卡，则删除数据结构中的一项）
+          list.splice(i, 1)
+          i--
+          continue
+        }
         obj['beginValue'] = data[obj.beginKey]
         obj['endValue'] = data[obj.endKey]
         // 判断服务器时间
         obj['disabled'] = checkStartLessEndTime(data[obj.endKey], data.currently)
+      }
+      this.attTimeKeyList = list
+    },
+    // 考勤打卡
+    async attendanceClickFn(type) {
+      const attendanceType = {
+        'begin': 1,
+        'after': 2,
+        'off': 3
+        // 前端考勤类型，对应后端数字代表考勤类型
+      }
+      await addAttendanceAPI({
+        "kqLocal": [
+          100.111,
+          99.333
+        ],
+        "kqProvinc": "内蒙古自治区",
+        "kqCity": "呼和浩特市",
+        "kqCounty": "新城区",
+        "kqAddress": "第一街道66号",
+        "kqPicurl": "https://www.baidu.com",
+        "kqType": 3
       })
     }
   }
@@ -66,6 +123,8 @@ export default {
 .wrap {
   background-color: #f0f1f3;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
 
   .button_wrap {
     display: flex;
@@ -73,6 +132,7 @@ export default {
     justify-content: center;
     align-items: center;
     gap: 50rpx;
+    padding: 50rpx 0;
 
     .go_work,
     .after_work,
@@ -106,6 +166,29 @@ export default {
     }
   }
 
+  .list_wrap {
+    ::v-deep .uni-list-item__container {
+      display: block !important;
+    }
 
+    .item_body {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 24rpx;
+
+      .item {
+        display: flex;
+        flex-direction: column;
+
+        .time {
+          color: #d9572c;
+        }
+
+        .title {
+          font-size: 24rpx;
+        }
+      }
+    }
+  }
 }
 </style>

pages/index.vue

@@ -65,30 +65,20 @@
 </template>
 
 <script>
-import { reverseGeocoding } from '@/api/common'
+
 export default {
   onLoad: function () { },
   methods: {
-    addendanceClick() {
-      // getLocation 获取经纬度
-      // chooseLocation 让用户在地图手选位置
-      uni.getLocation({
-        success: async (res) => {
-          const result = await reverseGeocoding({
-            params: {
-              location: res.latitude + "," + res.longitude
-            }
-          })
-          // 判断用户位置和获取位置-城市是否一致
-          if (result.result.addressComponent.city.startsWith(this.$store.getters.user.workCityName)) {
-            // 跳转到打卡页面
-            this.$tab.navigateTo('/pages/attendance/index')
-          } else {
-            // 不一致，提示
-            this.$modal.msgError("工作地点与定位地点不同");
-          }
-        }
-      })
+    async addendanceClick() {
+      const result = await this.$store.getters.location
+      // 判断用户位置和获取位置-城市是否一致
+      if (result.result.addressComponent.city.startsWith(this.$store.getters.user.workCityName)) {
+        // 跳转到打卡页面
+        this.$tab.navigateTo('/pages/attendance/index')
+      } else {
+        // 不一致，提示
+        this.$modal.msgError("工作地点与定位地点不同");
+      }
 
     }
   }

store/getters.js

+import store from '@/store'
 const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
@@ -5,6 +6,18 @@ const getters = {
   name: state => state.user.name,
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,
-  delayTime: state => 3000 // 延迟弹窗关闭时间
+  delayTime: state => 3000, // 延迟弹窗关闭时间
+  location: (state) => {
+    // 发现有则返回，没有则获取并赋予
+    return new Promise(async (resolve, reject) => {
+      if (state.map.location) {
+        resolve(state.map.location)
+      } else {
+        const location = await store.dispatch('GetLocation')
+        state.map.location = location
+        resolve(location) 
+      }
+    })
+  }
 }
 export default getters

store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import user from '@/store/modules/user'
+import map from '@/store/modules/map'
 import getters from './getters'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
-    user
+    user,
+    map
   },
-  getters
+  getters
 })
 
-export default store
+export default store

store/modules/map.js

+import storage from '@/utils/storage'
+import constant from '@/utils/constant'
+import { reverseGeocoding } from '@/api/common'
+
+const location = {
+  state: {
+    // 包括手机系统经纬度+省市区名字等信息
+    location: storage.get(constant.location)
+  },
+
+  mutations: {
+    SET_LOCATION: (state, location) => {
+      state.location = location
+      storage.set(constant.location, location)
+    }
+  },
+
+  actions: {
+    // 获取本机位置信息
+    GetLocation({ commit }) {
+      // getLocation 获取经纬度
+      // chooseLocation 让用户在地图手选位置
+      return new Promise((resolve, reject) => {
+        uni.getLocation({
+          success: async (res) => {
+            // 经纬度调 百度 逆地理编码获取省市区名字
+            const result = await reverseGeocoding({
+              params: {
+                location: res.latitude + "," + res.longitude
+              }
+            })
+            commit('SET_LOCATION', result)
+            resolve(result)
+          }
+        })
+      })
+    },
+  }
+}
+
+export default location

store/modules/user.js

@@ -90,6 +90,7 @@ const user = {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
+          commit('SET_USER', {})
           removeToken()
           storage.clean()
           resolve()

utils/constant.js

@@ -3,7 +3,9 @@ const constant = {
    name: 'vuex_name',
    roles: 'vuex_roles',
    permissions: 'vuex_permissions',
-   user: 'vuex_user'
+   user: 'vuex_user',
+   // 地理相关
+   location: 'vuex_location'
  }
 
  export default constant