修改bug,优化导航
This commit is contained in:
zhouyanli
@@ -1,50 +1,46 @@
|
||||
<template>
|
||||
<!-- 页面主容器 -->
|
||||
<view class="door-open-page">
|
||||
<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<!-- 顶部标题栏 -->
|
||||
<view class="top-bar">
|
||||
<uni-nav-bar left-icon="left" title="远程开门" backgroundColor ="none" :border="false" @clickLeft="narBack" />
|
||||
</view>
|
||||
<view class="top-img">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/openDoor/remoteOpen.png" mode="" style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
<view class="page-content">
|
||||
<view class="top-img">
|
||||
<image src="https://wuyeadmin.bugtc.com/images/openDoor/remoteOpen.png" mode="" style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
|
||||
<!-- 提示文案 -->
|
||||
<view class="tips-text">
|
||||
远程开门
|
||||
<text class="tips-desc">请选择要开的门并保持距离在10米以内，单次仅开一门</text>
|
||||
</view>
|
||||
<!-- 提示文案 -->
|
||||
<view class="tips-text">
|
||||
远程开门
|
||||
<text class="tips-desc">请选择要开的门并保持距离在10米以内，单次仅开一门</text>
|
||||
</view>
|
||||
|
||||
<!-- 开门成功提示（默认隐藏） -->
|
||||
<view v-if="showSuccess" class="success-toast">开门成功</view>
|
||||
<!-- 开门成功提示（默认隐藏） -->
|
||||
<view v-if="showSuccess" class="success-toast">开门成功</view>
|
||||
|
||||
<!-- 开门授权区域 -->
|
||||
<view class="auth-container">
|
||||
<view class="auth-title">开门授权</view>
|
||||
<!-- 网格布局：2行2列 -->
|
||||
<view class="grid-container">
|
||||
<!-- 每个门选项 -->
|
||||
<view
|
||||
v-for="(item, index) in doorList"
|
||||
:key="index"
|
||||
:class="['door-item', { active: selectedDoor === item.id }]"
|
||||
@click="selectDoor(item.id)"
|
||||
>
|
||||
<!-- 图标占位 -->
|
||||
<view class="door-icon">
|
||||
<image class="icon-text" :src="selectedDoor === item.id ? item.iconActive:item.iconText"></image>
|
||||
<!-- 开门授权区域 -->
|
||||
<view class="auth-container">
|
||||
<view class="auth-title">开门授权</view>
|
||||
<!-- 网格布局：2行2列 -->
|
||||
<view class="grid-container">
|
||||
<!-- 每个门选项 -->
|
||||
<view
|
||||
v-for="(item, index) in doorList"
|
||||
:key="index"
|
||||
:class="['door-item', { active: selectedDoor === item.id }]"
|
||||
@click="selectDoor(item.id)"
|
||||
>
|
||||
<!-- 图标占位 -->
|
||||
<view class="door-icon">
|
||||
<image class="icon-text" :src="selectedDoor === item.id ? item.iconActive:item.iconText"></image>
|
||||
</view>
|
||||
<!-- 门名称 -->
|
||||
<text class="door-name" :class="{active :selectedDoor === item.id}">{{ item.deviceName }}</text>
|
||||
</view>
|
||||
<!-- 门名称 -->
|
||||
<text class="door-name" :class="{active :selectedDoor === item.id}">{{ item.deviceName }}</text>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<view v-if="doorList.length === 0" class="empty-state">
|
||||
<uni-icons type="info" size="30" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">暂无可用门禁</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空状态 -->
|
||||
<view v-if="doorList.length === 0" class="empty-state">
|
||||
<uni-icons type="info" size="30" color="#ccc"></uni-icons>
|
||||
<text class="empty-text">暂无可用门禁</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 确认开门按钮 -->
|
||||
@@ -60,7 +56,6 @@ import {getAccessDevices,getAccessOpen} from '../api/api.js'
|
||||
// 响应式数据：选中的门索引、开门成功提示
|
||||
const selectedDoor = ref(-1) // -1表示未选中
|
||||
const showSuccess = ref(false)
|
||||
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
|
||||
|
||||
// 门列表数据
|
||||
const doorList = ref([])
|
||||
@@ -70,47 +65,33 @@ const selectDoor = (id) => {
|
||||
selectedDoor.value = id
|
||||
showSuccess.value = false // 选择新门时隐藏成功提示
|
||||
}
|
||||
// 返回
|
||||
const narBack = () =>{
|
||||
if(uni.getStorageSync('sourcePage') === "index"){
|
||||
uni.switchTab({
|
||||
url:"/pages/index/index"
|
||||
})
|
||||
}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
|
||||
uni.switchTab({
|
||||
url:"/pages/serviceIndex/serviceIndex"
|
||||
})
|
||||
}
|
||||
uni.removeStorageSync('sourcePage')
|
||||
|
||||
}
|
||||
// 查询门禁列表
|
||||
const getAccessControl = async () =>{
|
||||
|
||||
try{
|
||||
const res = await getAccessDevices()
|
||||
if(res.code === 200){
|
||||
if(res.data){
|
||||
doorList.value = res.data || []
|
||||
}else{
|
||||
doorList.value = []
|
||||
}
|
||||
}else{
|
||||
doorList.value = []
|
||||
uni.showToast({
|
||||
title:'门禁查询失败',
|
||||
icon:"error"
|
||||
})
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
doorList.value = []
|
||||
uni.showToast({
|
||||
title:err.msg || '查询失败',
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
try{
|
||||
const res = await getAccessDevices()
|
||||
if(res.code === 200){
|
||||
if(res.data){
|
||||
doorList.value = res.data || []
|
||||
}else{
|
||||
doorList.value = []
|
||||
}
|
||||
}else{
|
||||
doorList.value = []
|
||||
uni.showToast({
|
||||
title:'门禁查询失败',
|
||||
icon:"error"
|
||||
})
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
doorList.value = []
|
||||
uni.showToast({
|
||||
title:err.msg || '查询失败',
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -132,67 +113,62 @@ const openDoorClick = () => {
|
||||
}
|
||||
// 开门接口
|
||||
const getAccessOpenData = async () =>{
|
||||
uni.showLoading({
|
||||
title: '开门中...',
|
||||
mask: true
|
||||
})
|
||||
try{
|
||||
let params = {deviceId:selectedDoor.value}
|
||||
const res = await getAccessOpen(params)
|
||||
uni.hideLoading()
|
||||
if(res.code === 200){
|
||||
uni.showToast({
|
||||
title:'开门成功',
|
||||
icon:'success'
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'开门失败',
|
||||
icon:"error"
|
||||
})
|
||||
}
|
||||
}catch(err){
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: err.msg || '开门失败',
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '开门中...',
|
||||
mask: true
|
||||
})
|
||||
try{
|
||||
let params = {deviceId:selectedDoor.value}
|
||||
const res = await getAccessOpen(params)
|
||||
uni.hideLoading()
|
||||
if(res.code === 200){
|
||||
uni.showToast({
|
||||
title:'开门成功',
|
||||
icon:'success'
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'开门失败',
|
||||
icon:"error"
|
||||
})
|
||||
}
|
||||
}catch(err){
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: err.msg || '开门失败',
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() =>{
|
||||
getAccessControl()
|
||||
getAccessControl()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面全局样式 */
|
||||
.door-open-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #E2F0FF, #F6FAFF);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 30rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.status_bar {
|
||||
/* height: var(--status-bar-height); */
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 顶部标题 */
|
||||
.top-bar {
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.title-text {
|
||||
font-size: 48rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.top-img{
|
||||
width: 460rpx;
|
||||
height: 290rpx;
|
||||
float: right;
|
||||
width: 460rpx;
|
||||
height: 290rpx;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 提示文案 */
|
||||
@@ -324,8 +300,9 @@ onLoad(() =>{
|
||||
font-size: 28rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.confirm-btn::after {
|
||||
border: none; /* 去除uni-app默认按钮边框 */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user