feat: 完成通行记录UI

src/pages.json

@@ -218,6 +218,14 @@
       "path": "pages/notification/notification",
       "type": "page"
     },
+    {
+      "path": "pages/personnel-passage/traffic-correlation",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/reset-password/reset-password",
       "type": "page",
@@ -278,21 +286,6 @@
       "style": {
         "navigationStyle": "custom"
       }
-    },
-    {
-      "path": "pages/personnel-passage/access-authority/access-authority",
-      "type": "page",
-      "layout": "default",
-      "style": {
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/personnel-passage/access-control/access-control",
-      "type": "page",
-      "style": {
-        "navigationStyle": "custom"
-      }
     }
   ],
   "subPackages": []

src/pages/home/home.vue

@@ -123,13 +123,13 @@
           id: 106,
           icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
           name: '通行权限',
-          url: '/pages/personnel-passage/access-authority/access-authority'
+          url: '/pages/personnel-passage/traffic-correlation'
         },
         {
           id: 230,
           icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
           name: '门禁控制',
-          url: '/pages/personnel-passage/access-control/access-control'
+          url: '/pages/personnel-passage/traffic-correlation'
         },
         {
           id: 302,
@@ -144,7 +144,8 @@
         {
           id: 299,
           icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png',
-          name: '通行记录'
+          name: '通行记录',
+          url: '/pages/personnel-passage/traffic-correlation'
         },
         {
           id: 387,

src/pages/personnel-passage/AccessAuthority/AccessAuthority.vue

@@ -9,12 +9,6 @@
 
 <template>
   <view class="passage-container">
-    <TopNavigation title="通行权限">
-      <view class="header-right mr-4">
-        <image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
-      </view>
-    </TopNavigation>
-
     <!-- 替换原来的 banner 部分为 AccessSwiper -->
     <AccessSwiper class="mt-4" />
 
@@ -126,14 +120,14 @@
       />
       <text>通行权限</text>
     </view>
-    <view class="tab-item">
+    <view class="tab-item" @click="navigateTo('access-control')">
       <image
         class="tab-icon"
         src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
       />
       <text>门禁控制</text>
     </view>
-    <view class="tab-item">
+    <view class="tab-item" @click="navigateTo('traffic-record')">
       <image
         class="tab-icon"
         src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
@@ -141,12 +135,21 @@
       <text>通行记录</text>
     </view>
   </view>
-  <!--  </view>-->
+
+  <!-- 根据当前组件加载 -->
+  <component :is="currentComponent" />
 </template>
 
 <script setup>
+  import { ref } from 'vue'
   import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
   import AccessSwiper from './components/AccessSwiper.vue'
+
+  const currentComponent = ref('') // 用于跟踪当前加载的组件
+
+  const navigateTo = page => {
+    currentComponent.value = page // 设置当前组件
+  }
 </script>
 
 <style scoped lang="scss">

src/pages/personnel-passage/AccessControl/AccessControl.vue

@@ -9,12 +9,6 @@
 
 <template>
   <view class="control-container">
-    <TopNavigation title="门禁控制">
-      <view class="header-right mr-4">
-        <image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
-      </view>
-    </TopNavigation>
-
     <!-- 快捷功能区 -->
     <view class="quick-actions">
       <view class="quick-item" style="background-color: #fff7f2">
@@ -83,15 +77,24 @@
     <!-- 底部导航 -->
     <view class="tab-bar">
       <view class="tab-item">
-        <image class="tab-icon" src="/static/images/icon_passage.png" mode="aspectFit" />
+        <image
+          class="tab-icon"
+          src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
+        />
         <text>通行权限</text>
       </view>
       <view class="tab-item active">
-        <image class="tab-icon" src="/static/images/icon_control_active.png" mode="aspectFit" />
+        <image
+          class="tab-icon"
+          src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
+        />
         <text>门禁控制</text>
       </view>
       <view class="tab-item">
-        <image class="tab-icon" src="/static/images/icon_record.png" mode="aspectFit" />
+        <image
+          class="tab-icon"
+          src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
+        />
         <text>通行记录</text>
       </view>
     </view>
@@ -105,7 +108,7 @@
   const tabs = ['收藏', '全部']
   const activeTab = ref(0)
 
-  const switchTab = (index: number) => {
+  const switchTab = index => {
     activeTab.value = index
   }
 </script>

src/pages/personnel-passage/TrafficRecord/TrafficRecord.vue

@@ -0,0 +1,353 @@
+<route lang="json5">
+{
+  type: 'page',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="record-container">
+    <!-- 快捷功能区 -->
+    <view class="quick-actions">
+      <view class="quick-item" style="background-color: #fff7f2">
+        <view class="quick-content">
+          <text class="quick-title">通行消息提醒</text>
+          <text class="quick-desc">没有收到人员通行消息提醒？</text>
+          <image class="quick-icon" src="/static/images/icon_door_auto.png" mode="aspectFit" />
+        </view>
+      </view>
+      <view class="quick-item" style="background-color: #eef4ff">
+        <view class="quick-content">
+          <text class="quick-title">通行权限检测</text>
+          <text class="quick-desc">识别为陌生人？记录中抓拍不是该人员？</text>
+          <image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 时间筛选 -->
+    <view class="time-filter">
+      <text
+        v-for="(item, index) in timeFilters"
+        :key="index"
+        class="filter-item"
+        :class="{ active: activeTimeFilter === index }"
+        @click="switchTimeFilter(index)"
+      >
+        {{ item }}
+      </text>
+    </view>
+
+    <!-- 通行记录列表 -->
+    <view class="record-list">
+      <view class="record-item">
+        <view class="user-info">
+          <image class="avatar" src="/static/images/icon_team_own.png" mode="aspectFit" />
+          <view class="info-content">
+            <text class="name">杨</text>
+            <text class="id">工号：16</text>
+          </view>
+          <view class="status-tag fail">认证失败</view>
+          <text class="remote-btn">远程开门</text>
+        </view>
+        <view class="record-detail">
+          <view class="detail-item">
+            <image
+              class="detail-icon"
+              src="/static/images/personnelPassage/icon_message.png"
+              mode="aspectFit"
+            />
+            <text class="detail-text">DS-K(FU6004429)</text>
+          </view>
+          <view class="detail-item">
+            <image
+              class="detail-icon"
+              src="/static/images/personnelPassage/icon_address.png"
+              mode="aspectFit"
+            />
+            <text class="detail-text">-</text>
+          </view>
+          <view class="detail-item">
+            <image
+              class="detail-icon"
+              src="/static/images/personnelPassage/icon_time.png"
+              mode="aspectFit"
+            />
+            <text class="detail-text">2025-01-15 15:51:32</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部导航 -->
+    <view class="tab-bar">
+      <view class="tab-item">
+        <image
+          class="tab-icon"
+          src="https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png"
+        />
+        <text>通行权限</text>
+      </view>
+      <view class="tab-item">
+        <image
+          class="tab-icon"
+          src="https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png"
+        />
+        <text>门禁控制</text>
+      </view>
+      <view class="tab-item active">
+        <image
+          class="tab-icon"
+          src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
+        />
+        <text>通行记录</text>
+      </view>
+    </view>
+    <!--  </view>-->
+  </view>
+</template>
+
+<script setup>
+  import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
+
+  const timeFilters = ['今天', '最近三天', '高级查询']
+  const activeTimeFilter = ref(0)
+
+  const switchTimeFilter = index => {
+    activeTimeFilter.value = index
+  }
+</script>
+
+<style lang="scss" scoped>
+  .record-container {
+    min-height: 100vh;
+    padding: 0 16px;
+    background-color: #f5f6fa;
+  }
+
+  .header-right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .more-text {
+      font-size: 14px;
+      color: #333;
+    }
+
+    .icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .quick-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin: 12px 0;
+
+    .quick-item {
+      position: relative;
+      height: 60px;
+      padding: 12px;
+      border-radius: 8px;
+
+      &:first-child {
+        background-color: #eef4ff;
+        // background: red;
+        .quick-icon {
+          background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
+        }
+      }
+
+      &:last-child {
+        background-color: #fff7f2;
+        .quick-icon {
+          background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
+        }
+      }
+
+      .quick-content {
+        position: relative;
+        height: 100%;
+
+        .quick-title {
+          position: relative;
+          z-index: 2;
+          font-size: 15px;
+          font-weight: 500;
+          color: #333;
+        }
+
+        .quick-desc {
+          position: relative;
+          z-index: 2;
+          display: block;
+          margin-top: 8px;
+          margin-right: 20px;
+          font-size: 11px;
+          color: #666;
+        }
+
+        .quick-icon {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          z-index: 1;
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          transform: translateY(-50%);
+
+          image {
+            width: 100%;
+            height: 100%;
+            filter: brightness(0) invert(1);
+          }
+        }
+      }
+    }
+  }
+
+  .time-filter {
+    display: flex;
+    gap: 16px;
+    margin: 16px 0;
+
+    .filter-item {
+      padding: 6px 12px;
+      font-size: 14px;
+      color: #666;
+      background-color: #fff;
+      border-radius: 16px;
+      transition: color 0.3s ease;
+
+      &.active {
+        font-weight: 500;
+        color: #2b5cff;
+      }
+    }
+  }
+
+  .record-list {
+    .record-item {
+      position: relative;
+      padding: 16px;
+      margin-bottom: 12px;
+      background-color: #fff;
+      border-radius: 12px;
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .avatar {
+          width: 45px;
+          height: 45px;
+          margin-right: 10px;
+          background-color: #f5f5f5;
+          border-radius: 50%;
+        }
+
+        .info-content {
+          flex: 1;
+
+          .name {
+            font-size: 16px;
+            font-weight: 500;
+            color: #333;
+          }
+
+          .id {
+            display: block;
+            margin-top: 4px;
+            font-size: 12px;
+            color: #999;
+          }
+        }
+
+        .status-tag {
+          position: absolute;
+          top: 0px;
+          right: 0px;
+          padding: 2px 8px;
+          font-size: 12px;
+          //   border-radius: 4px;
+          border-radius: 0 10px 0 10px;
+
+          &.fail {
+            color: #ff4d4f;
+            background-color: #fff2f0;
+          }
+        }
+
+        .remote-btn {
+          padding: 4px 8px;
+          font-size: 12px;
+          color: #2b5cff;
+          background-color: #eef4ff;
+          border-radius: 4px;
+        }
+      }
+
+      .record-detail {
+        .detail-item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .detail-icon {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+          }
+
+          .detail-text {
+            font-size: 14px;
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+
+  .tab-bar {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-around;
+    padding: 8px 0;
+    background-color: #fff;
+    border-top: 1px solid #f5f5f5;
+
+    .tab-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: center;
+
+      .tab-icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      text {
+        font-size: 12px;
+      }
+
+      &.active {
+        color: #2b5cff;
+      }
+    }
+  }
+</style>

src/pages/personnel-passage/traffic-correlation.vue

@@ -0,0 +1,65 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-50px)] flex flex-col">
+    <TopNavigation :title="titleTab[curIndex]"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <view v-if="curIndex == 0">
+        <AccessAuthority />
+      </view>
+      <view v-else-if="curIndex == 1">
+        <AccessControl />
+      </view>
+      <view v-else-if="curIndex == 2">
+        <TrafficRecord />
+      </view>
+    </scroll-view>
+  </view>
+  <CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
+</template>
+
+<script lang="ts" setup>
+  // import { onLoad } from '@dcloudio/uni-app'
+  import AccessAuthority from './AccessAuthority/AccessAuthority.vue'
+  import AccessControl from './AccessControl/AccessControl.vue'
+  import TrafficRecord from './TrafficRecord/TrafficRecord.vue'
+  import { TabBarItem } from '@/typings'
+  const pages = [AccessAuthority, AccessControl, TrafficRecord]
+  const titleTab = ['通行权限', '门禁控制', '通行记录']
+  const list = ref<Array<TabBarItem>>([
+    {
+      title: '通行权限',
+      icon: 'home'
+    },
+    {
+      title: '门禁控制',
+      icon: 'notification'
+    },
+    {
+      title: '通行记录',
+      icon: 'setting'
+    }
+  ])
+
+  const curIndex = ref(0)
+  // onLoad(options => {
+  //   console.log(`11111：${Number(options.curIndex)}`)
+  //   curIndex.value = Number(options.curIndex)
+  // })
+  const change = (data: { value: number }) => {
+    curIndex.value = data.value
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f6f8fc;
+  }
+</style>

src/types/uni-pages.d.ts

@@ -26,6 +26,7 @@ interface NavigateToOptions {
        "/pages/info-publish/notice-manage" |
        "/pages/login/login" |
        "/pages/notification/notification" |
+       "/pages/personnel-passage/traffic-correlation" |
        "/pages/reset-password/reset-password" |
        "/pages/workbench/workbench" |
        "/pages/attendance/attendance-add-group/attendance-add-group" |
@@ -33,9 +34,7 @@ interface NavigateToOptions {
        "/pages/attendance/attendance-add-group/attendance-staff" |
        "/pages/attendance/attendance-add-group/attendance-time" |
        "/pages/attendance/attendance-add-group/outside-rules" |
-       "/pages/attendance/attendance-add-group/special-date-set" |
+       "/pages/attendance/attendance-add-group/special-date-set";
-       "/pages/personnel-passage/access-authority/access-authority" |
-       "/pages/personnel-passage/access-control/access-control";
 }
 interface RedirectToOptions extends NavigateToOptions {}