sky/starwork-uniapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成人员通行一级界面

Browse Source
This commit is contained in:
魏少阳 2025-01-20 16:42:05 +08:00
parent 347181ed31
commit ba168f84fa
10 changed files with 870 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages.json
View File

@ -286,6 +286,14 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/access-authority/access-authority",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/one-click-open-door/one-click-open-door",
"type": "page",
@ -310,6 +318,14 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/visitor-invitation/visitor-invitation",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/visitor-manage/visitor-manage-tab",
"type": "page",

17
src/pages/home/home.vue
View File

@ -120,16 +120,16 @@
name: '人员通行',
list: [
{
id: 106,
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
name: '通行权限',
id: 230,
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
name: '门禁管理',
url: '/pages/personnel-passage/traffic-correlation'
},
{
id: 230,
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png',
name: '门禁控制',
url: '/pages/personnel-passage/traffic-correlation'
id: 106,
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
name: '门禁授权',
url: '/pages/personnel-passage/access-authority/access-authority'
},
{
id: 302,
@ -164,7 +164,8 @@
{
id: 388,
icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png',
name: '访客邀约'
name: '访客邀约',
url: '/pages/personnel-passage/visitor-invitation/visitor-invitation'
}
]
},

184
src/pages/personnel-passage/AccessControl/AccessControl.vue
View File

@ -10,7 +10,7 @@
<template>
<view class="control-container">
<!-- 快捷功能区 -->
<view class="quick-actions">
<!-- <view class="quick-actions">
<view class="quick-item" style="background-color: #fff7f2">
<view class="quick-content">
<text class="quick-title">门自动常开</text>
@ -25,7 +25,7 @@
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
</view>
</view>
</view>
</view> -->
<!-- 搜索框 -->
<view class="search-box">
@ -42,34 +42,35 @@
</view>
<!-- 设备列表 -->
<view class="device-list"></view>
<view class="device-item">
<text class="offline-tag">离线</text>
<view class="device-info">
<image
class="device-icon"
src="/static/images/icon_one_key_door_key.png"
mode="aspectFit"
/>
<text class="device-name">DS-K(FU6004429)</text>
<view class="device-list">
<view class="device-item">
<text class="offline-tag">离线</text>
<view class="device-info">
<image
class="device-icon"
src="/static/images/icon_one_key_door_key.png"
mode="aspectFit"
/>
<text class="device-name">DS-K(FU6004429)</text>
</view>
<view class="unlock-btn">
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
</view>
</view>
<view class="unlock-btn">
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
</view>
</view>
<view class="device-item">
<text class="offline-tag">离线</text>
<view class="device-info">
<image
class="device-icon"
src="/static/images/icon_one_key_door_key.png"
mode="aspectFit"
/>
<text class="device-name">DS-K(L40959329)</text>
</view>
<view class="unlock-btn">
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
<view class="device-item">
<text class="offline-tag">离线</text>
<view class="device-info">
<image
class="device-icon"
src="/static/images/icon_one_key_door_key.png"
mode="aspectFit"
/>
<text class="device-name">DS-K(L40959329)</text>
</view>
<view class="unlock-btn">
<image class="unlock-icon" src="/static/images/icon_unlock.png" mode="aspectFit" />
</view>
</view>
</view>
</view>
@ -105,75 +106,74 @@
}
}
.quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0;
// .quick-actions {
// display: grid;
// grid-template-columns: 1fr 1fr;
// gap: 12px;
// margin: 12px 0;
.quick-item {
position: relative;
height: 50px;
padding: 12px;
border-radius: 8px;
// .quick-item {
// position: relative;
// height: 50px;
// padding: 12px;
// border-radius: 8px;
&:first-child {
background-color: #eef4ff;
// background: red;
.quick-icon {
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
}
}
// &: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%);
}
}
// &:last-child {
// background-color: #fff7f2;
// .quick-icon {
// background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
// }
// }
.quick-content {
position: relative;
height: 100%;
// .quick-content {
// position: relative;
// height: 100%;
.quick-title {
font-size: 15px;
font-weight: 500;
color: #333;
}
// .quick-title {
// font-size: 15px;
// font-weight: 500;
// color: #333;
// }
.quick-desc {
display: block;
margin-top: 8px;
font-size: 11px;
color: #666;
}
// .quick-desc {
// display: block;
// margin-top: 8px;
// font-size: 11px;
// color: #666;
// }
.quick-icon {
position: absolute;
top: 50%;
right: 0;
width: 45px;
height: 45px;
// padding: 8px;
border-radius: 50%;
transform: translateY(-50%);
// .quick-icon {
// position: absolute;
// top: 50%;
// right: 0;
// width: 45px;
// height: 45px;
// // padding: 8px;
// border-radius: 50%;
// transform: translateY(-50%);
image {
width: 100%;
height: 100%;
filter: brightness(0) invert(1); // 将图标改为白色
}
}
}
}
}
// image {
// width: 100%;
// height: 100%;
// filter: brightness(0) invert(1); // 将图标改为白色
// }
// }
// }
// }
// }
.search-box {
display: flex;
align-items: center;
padding: 10px;
margin: 16px 0;
background-color: #fff;
border-radius: 8px;
@ -237,6 +237,7 @@
position: relative;
display: flex;
flex-direction: column;
height: 80px;
padding: 12px;
background-color: #fff;
border-radius: 10px;
@ -255,7 +256,7 @@
.unlock-btn {
position: absolute;
top: 50%; /* 改为50% */
top: 50%;
right: 8px;
z-index: 1;
display: flex;
@ -265,11 +266,11 @@
height: 35px;
background-color: #f5f5f5;
border-radius: 50%;
transform: translateY(-50%); /* 添加这行来实现精确居中 */
transform: translateY(-50%);
.unlock-icon {
width: 30px;
height: 30px;
width: 20px;
height: 20px;
}
}
@ -281,13 +282,12 @@
padding-top: 16px;
.device-icon {
width: 50px;
height: 50px;
//background-color: red;
width: 40px;
height: 40px;
margin-right: 8px;
}
.device-name {
margin-top: 4px;
font-size: 14px;
color: #333;
}

288
src/pages/personnel-passage/AccessManage/AccessManage.vue Normal file
View File

@ -0,0 +1,288 @@
<route lang="json5">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<view class="container">
<!-- 开局引导 -->
<view class="guide-section">
<view class="guide-title">门禁开局引导</view>
<view class="guide-link">点击查看→</view>
</view>
<!-- 数据统计 -->
<view class="stats-section">
<view class="stats-item">
<text class="number">0</text>
<text class="label">团队人员</text>
</view>
<view class="stats-item">
<text class="number">0</text>
<text class="label">陌生人</text>
</view>
<view class="stats-item">
<text class="number">0</text>
<text class="label">访客</text>
<text class="sub-label">今日开门次数统计</text>
</view>
</view>
<!-- 同步提示 -->
<view class="sync-tip">
<view class="dot"></view>
<text class="text">您有6个人员、15条信息未同步到设备</text>
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
</view>
<!-- 功能列表 -->
<view class="feature-grid">
<view class="feature-item" v-for="item in features" :key="item.name">
<image class="icon" :src="item.icon" mode="aspectFit" />
<text class="name">{{ item.name }}</text>
</view>
</view>
<!-- 更多应用 -->
<view class="more-section">
<text class="section-title">更多应用</text>
<view class="more-grid">
<view class="more-item" v-for="item in moreApps" :key="item.name">
<view class="content">
<view class="name">
<text>{{ item.name }}</text>
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
</view>
<text class="desc">{{ item.desc }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
const features = [
{
icon: 'https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png',
name: '人员管理'
},
{
icon: 'https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png',
name: '门禁授权'
},
{
icon: 'https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png',
name: '通行记录'
},
{
icon: 'https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png',
name: '消息订阅'
},
{
icon: 'https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png',
name: '门自动常开'
}
]
const moreApps = [
{
name: '访客',
desc: '访客人员，临时通行'
},
{
name: '信息发布',
desc: '广告、欢迎词发布到屏幕'
}
]
</script>
<style scoped lang="scss">
.container {
min-height: 100vh;
padding: 12px 16px;
background-color: #f5f6fa;
}
.guide-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
margin-right: 32px;
margin-bottom: 12px;
background: #fff;
border-radius: 12px;
.guide-title {
font-size: 16px;
font-weight: 500;
color: #333;
}
.guide-link {
font-size: 14px;
color: #2b5cff;
}
}
.stats-section {
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 32px;
margin-bottom: 12px;
background: #fff;
border-radius: 12px;
.stats-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.number {
margin-bottom: 8px;
font-size: 18px;
font-weight: 500;
line-height: 1;
color: #333;
}
.label {
font-size: 14px;
color: #666;
}
.sub-label {
position: absolute;
right: -15px;
bottom: -20px;
font-size: 12px;
color: #999;
white-space: nowrap;
}
}
}
.sync-tip {
display: flex;
align-items: center;
padding: 16px;
margin-right: 32px;
margin-bottom: 12px;
background: #fff;
border-radius: 12px;
.dot {
width: 6px;
height: 6px;
margin-right: 8px;
background: #ff4d4f;
border-radius: 50%;
}
.text {
flex: 1;
font-size: 14px;
color: #333;
}
.arrow {
width: 16px;
height: 16px;
}
}
.feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 16px;
margin-right: 32px;
margin-bottom: 12px;
background: #fff;
border-radius: 12px;
.feature-item {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
.icon {
width: 40px;
height: 40px;
}
.name {
font-size: 12px;
color: #333;
}
}
}
.more-section {
padding-bottom: 16px;
margin-right: 32px;
overflow: hidden;
background: #fff;
border-radius: 12px;
.section-title {
display: block;
padding: 16px;
font-size: 16px;
font-weight: 500;
color: #333;
}
.more-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 0 10px;
.more-item {
display: flex;
align-items: center;
padding: 16px 10px;
background: #f8f9fc;
border-radius: 8px;
.content {
display: flex;
flex: 1;
flex-direction: column;
.name {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
font-size: 16px;
color: #333;
.arrow {
flex-shrink: 0;
width: 16px;
height: 16px;
}
}
.desc {
display: block;
font-size: 12px;
line-height: 1.4;
color: #999;
}
}
}
}
}
</style>

189
src/pages/personnel-passage/AccessAuthority/AccessAuthority.vue → src/pages/personnel-passage/access-authority/access-authority.vue
View File

@ -9,8 +9,19 @@
<template>
<view class="passage-container">
<!-- 替换原来的 banner 部分为 AccessSwiper -->
<AccessSwiper class="mt-4" />
<TopNavigation title="门禁授权" />
<view class="visitor-card">
<view class="card-content">
<view class="card-left">
<text class="card-title">访客人员，临时通行</text>
<text class="card-desc">使用访客管理，来访轻松搞定</text>
</view>
<!-- <view class="card-right">
<image src="/static/images/visitor-illustration.png" mode="aspectFit" />
</view> -->
</view>
</view>
<!-- 权限组快捷入口 -->
<view class="quick-actions">
@ -30,6 +41,38 @@
</view>
</view>
<view class="remind-card">
<view class="card-header">
<view class="header-left">
<image class="user-icon" src="/static/images/icon_user.png" mode="aspectFit" />
<text class="user-count">6</text>
</view>
<text class="check-text">查看未同步信息 ></text>
</view>
<view class="stats-container">
<view class="stat-item">
<text class="stat-num">4</text>
<text class="stat-label">人员/通行规则</text>
</view>
<view class="stat-item">
<text class="stat-num">0</text>
<text class="stat-label">人脸</text>
</view>
<view class="stat-item">
<text class="stat-num">7</text>
<text class="stat-label">指纹</text>
</view>
<view class="stat-item">
<text class="stat-num">0</text>
<text class="stat-label">卡片</text>
</view>
<view class="stat-item">
<text class="stat-num">4</text>
<text class="stat-label">密码</text>
</view>
</view>
</view>
<!-- 人员管理 -->
<view class="feature-item">
<view class="feature-left">
@ -38,46 +81,26 @@
src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.png"
/>
<view class="feature-text">
<text class="feature-title">人员管理</text>
<text class="feature-desc">团队管理内录入人员信息/人脸/指纹/卡</text>
<text class="feature-title">人员信息录入</text>
<text class="feature-desc">团队管理录入人员信息及通行凭证信息</text>
</view>
</view>
<image class="arrow" src="/static/images/icon_black_right.png" />
</view>
<!-- 通行权限组 -->
<view class="access-authority-group">
<view class="feature-item">
<view class="feature-left">
<image
class="feature-icon"
src="https://file.hikmall.com/prod/image/cf46656ec73b404891e2b46b57ff5fc2.png"
/>
<view class="feature-text">
<text class="feature-title">通行权限组</text>
<text class="feature-desc">配置人员在某段时间能开某个门</text>
</view>
</view>
<image class="arrow" src="/static/images/icon_black_right.png" />
</view>
<!-- 时间计划和门禁点分组 -->
<view class="sub-features">
<view class="sub-item">
<image
class="sub-icon"
src="https://file.hikmall.com/prod/image/0526d084da4a49579f832dd4588dcb16.png"
/>
<text>通行时间计划</text>
</view>
<view class="sub-item">
<image
class="sub-icon"
src="https://file.hikmall.com/prod/image/7ea5f88d404442eeb958fbe0904777d1.png"
/>
<text>门禁点分组</text>
<view class="feature-item">
<view class="feature-left">
<image
class="feature-icon"
src="https://file.hikmall.com/prod/image/2887bb1c453244a2a872ec98c0360478.png"
/>
<view class="feature-text">
<text class="feature-title">门禁权限组管理</text>
<text class="feature-desc">配置人员通行的门与时间规则</text>
</view>
</view>
<image class="arrow" src="/static/images/icon_black_right.png" />
</view>
<!-- 权限查询 -->
@ -145,40 +168,35 @@
}
}
.banner {
padding: 20px;
margin-bottom: 16px;
.visitor-card {
height: 100%;
padding: 16px 16px;
margin-top: 12px;
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
border-radius: 12px;
.banner-content {
.card-content {
display: flex;
align-items: center;
align-items: start;
justify-content: space-between;
height: 100%;
color: #fff;
.banner-text {
.card-left {
display: flex;
flex-direction: column;
gap: 8px;
gap: 4px;
.banner-title {
.card-title {
font-size: 18px;
font-weight: bold;
font-weight: 500;
}
.banner-desc {
font-size: 14px;
.card-desc {
font-size: 10px;
opacity: 0.8;
}
}
.banner-btn {
padding: 6px 12px;
font-size: 14px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
}
}
}
@ -246,6 +264,73 @@
}
}
.remind-card {
height: 100%;
padding: 12px 16px;
margin-bottom: 12px;
color: #fff;
background-color: white;
border-radius: 12px;
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
.header-left {
display: flex;
gap: 4px;
align-items: center;
padding: 4px 8px;
background-color: #f5f6fa;
border-radius: 5px;
.user-icon {
width: 16px;
height: 16px;
}
.user-count {
font-size: 16px;
font-weight: 500;
color: #333;
}
}
.check-text {
font-size: 14px;
color: #333;
opacity: 0.8;
}
}
.stats-container {
display: flex;
justify-content: space-between;
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
.stat-num {
margin-bottom: 4px;
font-size: 16px;
font-weight: 500;
color: #333;
}
.stat-label {
font-size: 11px;
color: #333;
white-space: nowrap;
opacity: 0.8;
}
}
}
}
//.feature-list {
// padding: 4px 0;
// background-color: #fff;

0
src/pages/personnel-passage/AccessAuthority/components/AccessSwiper.vue → src/pages/personnel-passage/access-authority/components/AccessSwiper.vue
View File

9
src/pages/personnel-passage/traffic-correlation.vue
View File

@ -12,7 +12,7 @@
<TopNavigation :title="titleTab[curIndex]"></TopNavigation>
<scroll-view class="flex-1 box-border" scroll-y>
<view v-if="curIndex == 0">
<AccessAuthority />
<AccessManage />
</view>
<view v-else-if="curIndex == 1">
<AccessControl />
@ -24,14 +24,15 @@
<script lang="ts" setup>
// import { onLoad } from '@dcloudio/uni-app'
import AccessAuthority from './AccessAuthority/AccessAuthority.vue'
// import AccessAuthority from './AccessAuthority/AccessAuthority.vue'
import AccessManage from './AccessManage/AccessManage.vue'
import AccessControl from './AccessControl/AccessControl.vue'
import { TabBarItem } from '@/typings'
// const pages = [AccessAuthority, AccessControl]
const titleTab = ['通行权限', '门禁控制']
const titleTab = ['门禁管理', '门禁控制']
const list = ref<Array<TabBarItem>>([
{
title: '通行权限',
title: '门禁管理',
icon: 'home'
},
{

124
src/pages/personnel-passage/traffic-record/traffic-record.vue
View File

@ -11,7 +11,7 @@
<TopNavigation title="通行记录"></TopNavigation>
<view class="record-container">
<!-- 快捷功能区 -->
<view class="quick-actions">
<!-- <view class="quick-actions">
<view class="quick-item" style="background-color: #fff7f2">
<view class="quick-content">
<text class="quick-title">通行消息提醒</text>
@ -26,7 +26,7 @@
<image class="quick-icon" src="/static/images/icon_phone_unlock.png" mode="aspectFit" />
</view>
</view>
</view>
</view> -->
<!-- 时间筛选 -->
<view class="time-filter">
@ -118,74 +118,74 @@
}
}
.quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0;
// .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;
// .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%);
}
}
// &: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%);
}
}
// &:last-child {
// background-color: #fff7f2;
// .quick-icon {
// background: linear-gradient(135deg, #ff9853 0%, #ff7b30 100%);
// }
// }
.quick-content {
position: relative;
height: 100%;
// .quick-content {
// position: relative;
// height: 100%;
.quick-title {
position: relative;
z-index: 2;
font-size: 15px;
font-weight: 500;
color: #333;
}
// .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-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%);
// .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);
}
}
}
}
}
// image {
// width: 100%;
// height: 100%;
// filter: brightness(0) invert(1);
// }
// }
// }
// }
// }
.time-filter {
display: flex;

259
src/pages/personnel-passage/visitor-invitation/visitor-invitation.vue Normal file
View File

@ -0,0 +1,259 @@
<route lang="json5">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<template>
<TopNavigation title="访客邀约">
<text class="nav-right-text">生成记录</text>
</TopNavigation>
<view class="container">
<!-- 功能区域 -->
<view class="function-area">
<view class="function-item">
<text class="title">访客码</text>
<text class="desc">一键生成，分享权限，扫码通行</text>
</view>
<view class="function-item">
<text class="title">新建邀约</text>
<text class="desc">填写表单，短信邀约，灵活通行</text>
</view>
</view>
<!-- 访客通行凭证 -->
<view class="visitor-pass">
<view class="pass-header">
<image class="pass-icon" src="/static/images/visitor/icon_pass.png" mode="aspectFit" />
<text class="title">访客通行凭证</text>
<text class="help" @click="showHelp">如何生成访客密码？</text>
</view>
<!-- 表单内容 -->
<view class="form-content">
<view class="form-item">
<text class="label">到访地址</text>
<view class="value">
<text>19104656的互联</text>
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
</view>
</view>
<view class="form-item">
<text class="label">通行方式</text>
<view class="value">
<text>二维码</text>
</view>
</view>
<view class="form-item required">
<text class="label">通行有效时段</text>
<view class="value">
<text>24小时内</text>
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
</view>
</view>
<view class="form-item required">
<text class="label">通行次数</text>
<view class="value">
<text>不限制</text>
<image class="arrow" src="/static/images/icon_black_right.png" mode="aspectFit" />
</view>
</view>
<text class="tip-text">限制访客在每个门禁点的通行次数</text>
<view class="form-item">
<text class="label">访客姓名</text>
<input class="input" type="text" placeholder="请输入" />
</view>
<view class="form-item">
<text class="label">访客手机号</text>
<input class="input" type="number" placeholder="请输入" />
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="bottom-bar">
<button class="submit-btn" @click="handleSubmit">新建邀约</button>
<button class="submit-btn" @click="handleSubmit">立即生成</button>
</view>
</view>
</template>
<script setup>
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
import { ref } from 'vue'
const showHelp = () => {
// 显示帮助信息
}
const handleSubmit = () => {
// 处理提交
}
</script>
<style scoped lang="scss">
.container {
min-height: 100vh;
padding: 12px 16px;
background-color: #f5f6fa;
}
.function-area {
display: flex;
gap: 12px;
margin: 0 32px 12px 0;
.function-item {
flex: 1;
padding: 16px;
background: #fff;
border-radius: 12px;
.title {
display: block;
margin-bottom: 4px;
font-size: 16px;
font-weight: 500;
color: #333;
}
.desc {
font-size: 12px;
color: #999;
}
}
}
.visitor-pass {
margin: 0 32px 0 0;
background: #fff;
border-radius: 10px;
.pass-header {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #f5f5f5;
.pass-icon {
width: 24px;
height: 24px;
margin-right: 5px;
}
.title {
flex: 1;
font-size: 16px;
font-weight: 500;
color: #333;
}
.help {
font-size: 14px;
color: #2b5cff;
}
}
.form-content {
padding: 0 16px;
.form-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid #f5f5f5;
&.required .label::before {
margin-right: 4px;
color: #ff4d4f;
content: '*';
}
.label {
font-size: 16px;
color: #333;
}
.value {
display: flex;
gap: 8px;
align-items: center;
text {
font-size: 14px;
color: #999;
}
.arrow {
flex-shrink: 0;
width: 16px;
height: 16px;
}
}
.input {
flex: 1;
padding: 0 12px;
margin-right: 4px;
font-size: 14px;
color: #333;
text-align: right;
&::placeholder {
color: #999;
}
}
}
.tip-text {
display: block;
padding: 8px 0;
font-size: 12px;
color: #999;
}
}
}
.bottom-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
display: flex;
gap: 12px;
align-items: center;
padding: 8px 16px;
padding-bottom: calc(8px + constant(safe-area-inset-bottom));
padding-bottom: calc(8px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #f5f5f5;
.submit-btn {
flex: 1;
height: 44px;
font-size: 16px;
line-height: 44px;
color: #fff;
text-align: center;
background: #2b5cff;
border-radius: 22px;
}
}
.nav-right-text {
padding: 4px 16px 4px 0;
margin-right: 16px;
font-size: 14px;
color: #333;
}
</style>

2
src/types/uni-pages.d.ts vendored
View File

@ -35,9 +35,11 @@ interface NavigateToOptions {
"/pages/attendance/attendance-add-group/attendance-time" |
"/pages/attendance/attendance-add-group/outside-rules" |
"/pages/attendance/attendance-add-group/special-date-set" |
"/pages/personnel-passage/access-authority/access-authority" |
"/pages/personnel-passage/one-click-open-door/one-click-open-door" |
"/pages/personnel-passage/password-open-door/password-open-door" |
"/pages/personnel-passage/traffic-record/traffic-record" |
"/pages/personnel-passage/visitor-invitation/visitor-invitation" |
"/pages/personnel-passage/visitor-manage/visitor-manage-tab";
}
interface RedirectToOptions extends NavigateToOptions {}