af-mobile-client-vue3 1.3.1 → 1.3.2-2.1

package/src/views/user/my/index.vue

@@ -1,232 +1,489 @@
 <script setup lang="ts">
+import type { PhoneLocationStatus } from '@af-mobile-client-vue3/components/data/XOlMap/types'
+import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
-import {
-  Cell as VanCell,
-  Col as VanCol,
-  List as VanList,
-  Row as VanRow,
-} from 'vant/es'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import { Dialog as vanDialog, Icon as vanIcon } from 'vant'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ModifyPassword from './comm/ModifyPassword.vue'
 
+const router = useRouter()
 const username = useUserStore().getUserInfo().name
-const fullnames = useUserStore().getLogin().f.resources.parentname
+const fullnames = useUserStore().getLogin().f.resources.fullnames
+const roleName = useUserStore().getLogin().f.resources.f_role_name
 
-async function exit_login() {
-  await useUserStore().logout()
+// 修改密码弹窗显示状态
+const showModifyPassword = ref(false)
+// 退出登录确认弹窗显示状态
+const showLogoutConfirm = ref(false)
+// 在setup函数中
+let intervalId = null
+
+// 定义一个变量来存储上一次的上传结果
+const lastUploadResult = ref(null)
+
+/**
+ * 上次上传结果类型定义
+ */
+interface LocationInfo {
+  uploadTime: string
+  f_realtime: string
+  f_latitude: number
+  f_longitude: number
+  f_address?: string
+  f_speed?: number
+  f_bearing?: number
+  f_altitude?: number
+  isError: boolean
+  errorCode?: string
+  // ... 其他字段
+}
+
+interface UploadResult {
+  uploadTime: string
+  location: LocationInfo
+  response: {
+    code: number
+    msg?: string
+    [key: string]: any
+  }
+}
+
+// 兼容 lastUploadResult 可能为字符串或对象
+const lastUploadResultObj = computed<UploadResult | null>(() => {
+  if (!lastUploadResult.value)
+    return null
+  if (typeof lastUploadResult.value === 'string') {
+    try {
+      return JSON.parse(lastUploadResult.value)
+    }
+    catch {
+      return null
+    }
+  }
+  return lastUploadResult.value
+})
+
+const uploadDisplayInfo = computed(() => {
+  const result = lastUploadResultObj.value
+  if (!result)
+    return { error: null, info: null }
+  // response.code 不为 200
+  if (result.response && result.response.code !== 200) {
+    return { error: result.response.msg || '未知错误', info: null }
+  }
+
+  // location.errorCode 存在且 isError 为 true
+  if (result.location && result.location.isError && result.location.errorCode) {
+    return { error: result.location.errorCode, info: null }
+  }
+
+  // 正常展示
+  if (result.location) {
+    return {
+      error: null,
+      info: {
+        uploadTime: result.uploadTime,
+        latitude: result.location.f_latitude,
+        longitude: result.location.f_longitude,
+      },
+    }
+  }
+
+  return { error: null, info: null }
+})
+
+const uploadStatusTag = computed(() => {
+  const result = uploadDisplayInfo.value
+  if (result.error) {
+    return { text: '上传定位失败', color: 'red' }
+  }
+  if (result.info) {
+    return { text: '正在上传定位', color: 'green' }
+  }
+  return null
+})
+
+onMounted(() => {
+  if (roleName.includes('需要定位人员')) {
+    // 立即执行一次
+    mobileUtil.execute({
+      param: {},
+      funcName: 'getLastRealtimeUploadResult',
+      callbackFunc: (result: PhoneLocationStatus) => {
+        if (result.status === 'success') {
+          lastUploadResult.value = result.data
+        }
+      },
+    })
+
+    // 设置每5秒执行一次的定时器
+    intervalId = setInterval(() => {
+      mobileUtil.execute({
+        param: {},
+        funcName: 'getLastRealtimeUploadResult',
+        callbackFunc: (result: PhoneLocationStatus) => {
+          if (result.status === 'success') {
+            lastUploadResult.value = result.data
+          }
+        },
+      })
+    }, 5000) // 5000毫秒 = 5秒
+  }
+})
+
+onUnmounted(() => {
+  // 组件卸载时清除定时器
+  if (intervalId) {
+    clearInterval(intervalId)
+    intervalId = null
+  }
+})
+function exit_login() {
+  showLogoutConfirm.value = true
 }
+
+function confirmLogout() {
+  useUserStore().logout()
+  showLogoutConfirm.value = false
+}
+
+function cancelLogout() {
+  showLogoutConfirm.value = false
+}
+
+function goToAttendance() {
+  router.push('/user/attendance')
+}
+
+function openModifyPassword() {
+  showModifyPassword.value = true
+}
+
+const webMobileConfig = useSettingStore().getSetting()
 </script>
 
 <template>
-  <main class="my_main h-full w-full">
-    <div class="header">
-      <div class="style_back">
-        <div class="circle circle1" />
-        <div class="circle circle2" />
+  <main class="my_main">
+    <!-- 顶部导航栏 -->
+    <nav class="header_nav">
+      <div class="header_content">
+        <h1 class="main_title">
+          我的
+        </h1>
+        <!--        <div class="setting_section"> -->
+        <!--          <van-icon name="setting-o" class="setting-icon" /> -->
+        <!--        </div> -->
       </div>
-      <div class="header_main">
-        <div class="user_nav">
-          <img alt="setting_icon" class="user_setting_icon" src="../../../assets/img/user/my/setting.png">
-        </div>
-        <div class="user_content">
-          <VanRow :gutter="18">
-            <VanCol>
-              <img alt="default-user-profile" class="default_user_profile" src="../../../assets/common/default-user-profile.png">
-            </VanCol>
-            <VanCol class="user_info_col">
-              <p class="user_nickname">
-                {{ username }}
-              </p>
-              <p class="user_remark">
-                {{ fullnames }}
-              </p>
-            </VanCol>
-          </VanRow>
-        </div>
-      </div>
-    </div>
+    </nav>
+
+    <!-- 主要内容区域 -->
     <div class="content">
-      <div class="core">
-        <VanRow class="core_row">
-          <VanCol>
-            <p class="core_value">
-              24
+      <!-- 用户信息卡片 -->
+      <div class="user-card">
+        <div class="user-info">
+          <div class="avatar-wrap">
+            <img alt="default-user-profile" class="avatar" src="../../../assets/common/default-user-profile.png">
+            <div class="status-dot" />
+          </div>
+          <div class="user-detail">
+            <h2 class="username">
+              {{ username }}
+              <span
+                v-if="uploadStatusTag"
+                class="upload-status-tag" :class="[uploadStatusTag.color]"
+              >
+                {{ uploadStatusTag.text }}
+              </span>
+            </h2>
+            <p class="user-role">
+              {{ fullnames }}
             </p>
-            <p class="core_title">
+          </div>
+        </div>
+      </div>
+
+      <!-- 工作统计 -->
+      <div class="stats-card">
+        <div class="stats-grid">
+          <div class="stat-item">
+            <div class="stat-value">
+              0
+            </div>
+            <div class="stat-label">
               待办任务
-            </p>
-          </VanCol>
-          <VanCol>
-            <p class="core_value">
-              2
-            </p>
-            <p class="core_title">
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              0
+            </div>
+            <div class="stat-label">
               待办流程
-            </p>
-          </VanCol>
-          <VanCol>
-            <p class="core_value">
-              7
-            </p>
-            <p class="core_title">
+            </div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value">
+              0
+            </div>
+            <div class="stat-label">
               新消息
-            </p>
-          </VanCol>
-        </VanRow>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="setting">
-        <VanList>
-          <VanCell is-link @click="exit_login">
-            <template #title>
-              <VanRow :gutter="12" class="setting_row">
-                <VanCol>
-                  <img alt="exit_login_icon" class="setting_icon" src="../../../assets/img/user/my/exit-login.png">
-                </VanCol>
-                <VanCol class="setting_name_col">
-                  <span class="setting_name_text">退出登录</span>
-                </VanCol>
-              </VanRow>
-            </template>
-            <template #right-icon>
-              <img alt="setting_arrow_icon" class="setting_arrow_icon" src="../../../assets/img/user/my/setting-arrow.png">
-            </template>
-          </VanCell>
-        </VanList>
+
+      <!-- 功能列表 -->
+      <div class="menu-card">
+        <div class="menu-section">
+          <h3 class="menu-title">
+            系统功能
+          </h3>
+          <div class="menu-list">
+            <div v-if="webMobileConfig?.isAttendance" class="menu-item" @click="goToAttendance">
+              <div class="menu-item-content">
+                <van-icon name="user-o" class="menu-icon" />
+                <span class="menu-text">考勤管理</span>
+              </div>
+              <van-icon name="arrow" class="menu-arrow" />
+            </div>
+            <div class="menu-item" @click="openModifyPassword">
+              <div class="menu-item-content">
+                <van-icon name="lock" class="menu-icon" />
+                <span class="menu-text">修改密码</span>
+              </div>
+              <van-icon name="arrow" class="menu-arrow" />
+            </div>
+            <div class="menu-item" @click="exit_login">
+              <div class="menu-item-content">
+                <van-icon name="sign" class="menu-icon logout-icon" />
+                <span class="menu-text">退出登录</span>
+              </div>
+              <van-icon name="arrow" class="menu-arrow" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+
+    <!-- 修改密码弹窗 -->
+    <ModifyPassword
+      v-model:visible="showModifyPassword"
+    />
+
+    <!-- 退出登录确认弹窗 -->
+    <van-dialog
+      v-model:show="showLogoutConfirm"
+      title="确认退出"
+      message="确定要退出登录吗？"
+      show-cancel-button
+      confirm-button-text="确认退出"
+      cancel-button-text="取消"
+      @confirm="confirmLogout"
+      @cancel="cancelLogout"
+    />
   </main>
 </template>
 
 <style scoped lang="less">
 .my_main {
-  .header {
+  min-height: 100vh;
+  background-color: #f7f8fa;
+
+  // 顶部导航栏
+  .header_nav {
+    background-color: #fff;
+    padding: 0 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     position: relative;
-    height: 200px;
-    background-color: #336bf1;
-    overflow: hidden;
-    .style_back {
-      .circle {
-        position: absolute;
-        border-radius: 50%;
-      }
-      .circle1 {
-        background-color: #3f7afa;
-        width: 265px;
-        height: 265px;
-        top: -80px;
-        left: -50px;
-        z-index: 3;
-      }
-      .circle2 {
-        background-color: #3c75f9;
-        width: 300px;
-        height: 300px;
-        top: -80px;
-        left: 10px;
-        z-index: 2;
+    z-index: 50;
+
+    .header_content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 56px;
+
+      .main_title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
       }
-    }
-    .header_main {
-      padding: var(--base-interval-1);
-      .user_nav {
-        padding: 0 var(--base-interval-0);
-        color: #fff;
-        position: relative;
-        z-index: 4;
-        font-size: 26px;
-        text-align: right;
-        .user_setting_icon {
-          width: 26px;
-          height: 26px;
+
+      .setting_section {
+        padding: 8px;
+        cursor: pointer;
+
+        .setting-icon {
+          font-size: 20px;
+          color: #666;
         }
       }
-      .user_content {
-        padding: 0 35px 0 35px;
-        color: #fff;
-        position: relative;
-        z-index: 4;
-        .default_user_profile {
-          border-radius: 50%;
-          width: 76px;
-          height: 76px;
-          box-shadow:
-            0 10px 20px rgba(0, 0, 0, 0.05),
-            0 6px 6px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  .content {
+    padding: 16px;
+
+    // 用户信息卡片
+    .user-card {
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+
+      .user-info {
+        display: flex;
+        align-items: center;
+
+        .avatar-wrap {
+          position: relative;
+          margin-right: 16px;
+
+          .avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+          }
+
+          .status-dot {
+            position: absolute;
+            bottom: 2px;
+            right: 2px;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background-color: #10b981;
+            border: 2px solid #fff;
+          }
         }
-        .van-row {
-          flex-wrap: nowrap;
-          align-items: center;
-          .user_info_col {
-            flex-grow: 1;
-            p {
-              margin: 0;
-            }
-            .user_nickname {
-              font-size: 20px;
-              font-weight: bold;
-              margin-bottom: 4px;
+
+        .user-detail {
+          .username {
+            font-size: 20px;
+            font-weight: 600;
+            color: #333;
+            margin: 0 0 4px 0;
+          }
+          .upload-status-tag {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 2px 8px;
+            border-radius: 8px;
+            font-size: 12px;
+            font-weight: 400;
+            background: #f0f0f0;
+            &.green {
+              color: #10b981;
+              background: #e6f9f0;
+              border: 1px solid #10b981;
             }
-            .user_remark {
-              font-size: 14px;
+            &.red {
+              color: #ef4444;
+              background: #fdeaea;
+              border: 1px solid #ef4444;
             }
           }
+
+          .user-role {
+            font-size: 14px;
+            color: #666;
+            margin: 0;
+          }
         }
       }
     }
-  }
-  .content {
-    padding: var(--base-interval-1);
-    .core {
-      position: relative;
-      bottom: 50px;
-      padding: 16px 0;
+
+    // 工作统计卡片
+    .stats-card {
       background-color: #fff;
-      z-index: 4;
-      margin: 0 16px;
-      border-radius: 4px;
-      box-shadow:
-        0 10px 20px rgba(0, 0, 0, 0.05),
-        0 6px 6px rgba(0, 0, 0, 0.05);
-      .core_row {
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
         text-align: center;
-        .van-col {
-          flex-grow: 1;
-          p {
-            margin: 8px 0;
-          }
-          .core_value {
-            font-size: 20px;
-            font-weight: bold;
+
+        .stat-item {
+          .stat-value {
+            font-size: 24px;
+            font-weight: 600;
+            color: #3b82f6;
+            margin-bottom: 4px;
           }
-          .core_title {
+
+          .stat-label {
             font-size: 14px;
-            color: #999;
+            color: #666;
           }
         }
       }
     }
-    .setting {
-      .setting_row {
-        align-items: center;
-        .setting_icon {
-          width: 28px;
-          height: 28px;
-          vertical-align: middle;
+
+    // 功能列表卡片
+    .menu-card {
+      background-color: #fff;
+      border-radius: 8px;
+      overflow: hidden;
+
+      .menu-section {
+        padding: 16px;
+
+        .menu-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #666;
+          margin-bottom: 12px;
         }
-        .setting_name_col {
-          flex-grow: 1;
-          .setting_name_text {
-            font-size: 16px;
-            font-weight: bold;
+
+        .menu-list {
+          .menu-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px;
+            background-color: #f7f8fa;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            cursor: pointer;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .menu-item-content {
+              display: flex;
+              align-items: center;
+              gap: 12px;
+
+              .menu-icon {
+                font-size: 24px;
+                color: #3b82f6;
+
+                &.logout-icon {
+                  color: #ef4444;
+                }
+              }
+
+              .menu-text {
+                font-size: 16px;
+                color: #333;
+              }
+            }
+
+            .menu-arrow {
+              color: #999;
+              font-size: 16px;
+            }
           }
         }
       }
-      .van-cell {
-        align-items: center;
-        .setting_arrow_icon {
-          width: 12px;
-          height: 12px;
-          vertical-align: middle;
-        }
-      }
     }
   }
 }