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

fix: 完成通行权限首页UI

Browse Source
This commit is contained in:
魏少阳 2025-01-15 17:37:58 +08:00
parent 24e369f4d0
commit 18b4e12ea7
15 changed files with 4013 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.config.ts
View File

@ -1,6 +1,7 @@
// manifest.config.ts
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
import path from 'node:path'
// import path from 'node:path'
import * as path from 'path'
import { loadEnv } from 'vite'
// 获取环境变量的范例

2
package.json
View File

@ -122,6 +122,8 @@
"@uni-helper/vite-plugin-uni-pages": "0.2.20",
"@uni-helper/vite-plugin-uni-platform": "^0.0.4",
"@unocss/preset-legacy-compat": "^0.59.4",
"@vue/cli-plugin-typescript": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"@vue/runtime-core": "^3.5.13",
"@vue/tsconfig": "^0.1.3",
"autoprefixer": "^10.4.20",

3406
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

7
src/components/TopNavigation/TopNavigation.vue
View File

@ -26,11 +26,14 @@
class="pos-absolute left-3 h-5 w-5"
@click="back"
></image>
<view class="flex flex-items-center">
<view class="line-clamp-1 max-w-60 break-all">
<view class="flex-1 text-center">
<view class="line-clamp-1 max-w-60 break-all mx-auto">
{{ title }}
</view>
</view>
<view class="pos-absolute right--3">
<slot></slot>
</view>
</view>
</view>
</view>

1
src/hooks/useRequest.ts
View File

@ -1,4 +1,5 @@
import { UnwrapRef } from 'vue'
import { IResData } from '@/typings'
type IUseRequestOptions<T> = {
/** 是否立即执行 */

8
src/pages.json
View File

@ -278,6 +278,14 @@
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/personnel-passage/access-authority/access-authority",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
],
"subPackages": []

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

@ -122,7 +122,8 @@
{
id: 106,
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png',
name: '通行权限'
name: '通行权限',
url: '/pages/personnel-passage/access-authority/access-authority'
},
{
id: 230,

384
src/pages/personnel-passage/access-authority/access-authority.vue Normal file
View File

@ -0,0 +1,384 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom'
}
}
</route>
<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" />
<!-- 权限组快捷入口 -->
<view class="quick-actions">
<view class="quick-item">
<view class="quick-content">
<text class="quick-title">添加权限组</text>
<text class="quick-desc">门禁授权</text>
<image class="quick-icon" src="/static/images/icon_add_group.png" mode="aspectFit" />
</view>
</view>
<view class="quick-item">
<view class="quick-content">
<text class="quick-title">下发权限</text>
<text class="quick-desc">同步权限到设备</text>
<image class="quick-icon" src="/static/images/icon_publish.png" mode="aspectFit" />
</view>
</view>
</view>
<!-- 人员管理 -->
<view class="feature-item">
<view class="feature-left">
<image
class="feature-icon"
src="https://file.hikmall.com/prod/image/e75144eac8984ee198ef533c2f9d3558.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="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>
</view>
</view>
<!-- 权限查询 -->
<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>
<!-- 下发记录 -->
<view class="feature-item">
<view class="feature-left">
<image
class="feature-icon"
src="https://file.hikmall.com/prod/image/e6860e8e5cc64369accadae5347fb0c1.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>
<!-- 底部导航 -->
<view class="tab-bar">
<view class="tab-item active">
<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">
<image
class="tab-icon"
src="https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png"
/>
<text>通行记录</text>
</view>
</view>
<!-- </view>-->
</template>
<script setup>
import TopNavigation from '@/components/TopNavigation/TopNavigation.vue'
import AccessSwiper from './components/AccessSwiper.vue'
</script>
<style scoped lang="scss">
.passage-container {
min-height: 100vh;
padding: 0 16px;
background-color: #f5f6fa;
}
.header-right {
display: flex;
gap: 8px; // 图标之间的间距
align-items: end;
.icon {
width: 20px;
height: 20px;
}
}
.banner {
padding: 20px;
margin-bottom: 16px;
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
border-radius: 12px;
.banner-content {
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
.banner-text {
display: flex;
flex-direction: column;
gap: 8px;
.banner-title {
font-size: 18px;
font-weight: bold;
}
.banner-desc {
font-size: 14px;
opacity: 0.8;
}
}
.banner-btn {
padding: 6px 12px;
font-size: 14px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
}
}
}
.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;
&: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 {
font-size: 15px;
font-weight: 500;
color: #333;
}
.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%);
image {
width: 100%;
height: 100%;
filter: brightness(0) invert(1); // 将图标改为白色
}
}
}
}
}
//.feature-list {
// padding: 4px 0;
// background-color: #fff;
//border-radius: 12px;
.access-authority-group {
display: flex;
flex-direction: column;
margin-bottom: 12px;
background-color: #fff;
border-radius: 12px;
}
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
margin-bottom: 12px;
background-color: #fff;
border-radius: 12px;
//border-bottom: 1px solid #f5f5f5;
.feature-left {
display: flex;
gap: 12px;
align-items: center;
.feature-icon {
width: 24px;
height: 24px;
}
.feature-text {
display: flex;
flex-direction: column;
gap: 4px;
.feature-title {
font-size: 16px;
font-weight: 500;
}
.feature-desc {
font-size: 12px;
color: #666;
}
}
}
.arrow {
width: 16px;
height: 16px;
}
}
//}
.sub-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 0 16px 12px 16px;
.sub-item {
display: flex;
gap: 8px;
align-items: center;
padding: 12px;
background-color: #f5f6fa;
border-radius: 8px;
.sub-icon {
width: 20px;
height: 20px;
}
text {
font-size: 14px;
}
}
}
.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>

200
src/pages/personnel-passage/access-authority/components/AccessSwiper.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<swiper
class="swiper-container"
:indicator-dots="true"
:autoplay="true"
:interval="3000"
:duration="500"
indicator-active-color="#FFFFFF"
indicator-color="rgba(255, 255, 255, 0.4)"
>
<!-- 访客通行卡片 -->
<swiper-item>
<view class="visitor-card">
<view class="card-content">
<view class="card-left">
<text class="card-title">访客人员，临时通行</text>
<text class="card-desc">使用访客管理，来访轻松搞定</text>
<view class="card-btn">看详情 ></view>
</view>
<view class="card-right">
<image src="/static/images/visitor-illustration.png" mode="aspectFit" />
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="visitor-card">
<view class="card-content">
<view class="card-left">
<text class="card-title">通行权限使用说明</text>
<text class="card-desc">区分长期通行与临时通行,对长期通信人员下发通行权限</text>
<view class="card-btn">看详情 ></view>
</view>
<view class="card-right">
<image src="/static/images/visitor-illustration.png" mode="aspectFit" />
</view>
</view>
</view>
</swiper-item>
<!-- 提醒卡片 -->
<swiper-item>
<view class="remind-card">
<view class="card-header">
<text class="remind-tag">提醒</text>
<text class="remind-text">您有11条信息未同步到设备</text>
<image class="arrow-icon" src="/static/images/icon_white_right.png" mode="aspectFit" />
</view>
<view class="stats-container">
<view class="stat-item">
<text class="stat-num">2</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">2</text>
<text class="stat-label">密码</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.swiper-container {
height: 140px;
overflow: hidden;
border-radius: 12px;
}
// .swiper-card {
// height: 100%;
// padding: 24px 16px;
// border-radius: 12px;
// }
.visitor-card {
height: 100%;
padding: 16px 16px;
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
border-radius: 12px;
.card-content {
display: flex;
align-items: start;
justify-content: space-between;
height: 100%;
color: #fff;
.card-left {
display: flex;
flex-direction: column;
gap: 4px;
.card-title {
font-size: 18px;
font-weight: 500;
}
.card-desc {
font-size: 10px;
opacity: 0.8;
}
.card-btn {
width: fit-content;
padding: 4px 8px;
margin-top: 15px;
font-size: 12px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
}
}
.card-right {
width: 120px;
height: 120px;
image {
width: 100%;
height: 100%;
}
}
}
}
.remind-card {
height: 100%;
padding: 16px;
color: #fff;
background: linear-gradient(135deg, #4080ff 0%, #2b5cff 100%);
border-radius: 12px;
.card-header {
display: flex;
gap: 6px;
align-items: center;
padding: 4px;
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
.remind-tag {
padding: 2px 6px;
font-size: 11px;
// background: rgba(255, 255, 255, 0.2);
// border-radius: 4px;
}
.remind-text {
flex: 1;
font-size: 12px;
}
.arrow-icon {
width: 12px;
height: 12px;
}
}
.stats-container {
display: flex;
justify-content: space-between;
padding: 0 12px;
padding-top: 12px;
.stat-item {
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
.stat-num {
font-size: 18px;
font-weight: 500;
}
.stat-label {
font-size: 11px;
opacity: 0.8;
}
}
}
}
</style>

4
src/service/user.ts
View File

@ -62,8 +62,8 @@ interface TeamInfo {
}
// 获取用户信息
export const getUserInfoApi = (params: UserInfo) => {
return http.post('/v1/user/detail', params)
export const getUserInfoApi = () => {
return http.post('/v1/user/detail')
}
export interface resetPasswordRequest {

BIN
src/static/images/icon_black_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/static/images/icon_white_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

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

@ -33,7 +33,8 @@ 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";
}
interface RedirectToOptions extends NavigateToOptions {}

1
tsconfig.json
View File

@ -1,5 +1,6 @@
{
"compilerOptions": {
"esModuleInterop": true,
"composite": true,
"skipLibCheck": true,
"module": "ESNext",

3
vite-plugins/copyNativeRes.ts
View File

@ -1,5 +1,6 @@
import fs from 'fs-extra'
import path from 'path'
// import path from 'path'
import * as path from 'path'
export function copyNativeRes() {
const waitPath = path.resolve(__dirname, '../src/nativeResources')