314 lines
6.6 KiB
Vue
314 lines
6.6 KiB
Vue
<template>
|
||
<!-- 页面主容器 -->
|
||
<view class="door-open-page">
|
||
<view class="page-content">
|
||
<view class="top-img">
|
||
<image src="https://wuye.ckdzkj.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 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>
|
||
<!-- 门名称 -->
|
||
<text class="door-name" :class="{active :selectedDoor === item.id}">{{ item.deviceName }}</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>
|
||
</view>
|
||
|
||
<!-- 确认开门按钮 -->
|
||
<button class="confirm-btn" @click="openDoorClick" :disabled="selectedDoor === -1">确认开门</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import {onLoad} from '@dcloudio/uni-app'
|
||
import {getAccessDevices,getAccessOpen} from '../api/api.js'
|
||
|
||
// 响应式数据：选中的门索引、开门成功提示
|
||
const selectedDoor = ref(-1) // -1表示未选中
|
||
const showSuccess = ref(false)
|
||
|
||
// 门列表数据
|
||
const doorList = ref([])
|
||
|
||
// 选择门的方法
|
||
const selectDoor = (id) => {
|
||
selectedDoor.value = id
|
||
showSuccess.value = false // 选择新门时隐藏成功提示
|
||
}
|
||
// 查询门禁列表
|
||
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:"none"
|
||
})
|
||
}
|
||
|
||
}catch(err){
|
||
doorList.value = []
|
||
uni.showToast({
|
||
title:err.msg || '查询失败',
|
||
icon:"none"
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// 确认开门方法
|
||
const openDoorClick = () => {
|
||
// 校验：未选择门时提示
|
||
// if (selectedDoor.value === -1) {
|
||
// uni.showToast({
|
||
// title: '请先选择要开的门',
|
||
// icon: 'none'
|
||
// })
|
||
// return
|
||
// }
|
||
uni.showToast({
|
||
title: '正在对接硬件中...',
|
||
icon: 'none'
|
||
})
|
||
// getAccessOpenData()
|
||
}
|
||
// 开门接口
|
||
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"
|
||
})
|
||
}
|
||
}
|
||
|
||
onLoad(() =>{
|
||
getAccessControl()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面全局样式 */
|
||
.door-open-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100%;
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #E2F0FF, #F6FAFF);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.page-content {
|
||
flex: 1;
|
||
height: 0;
|
||
overflow-y: auto;
|
||
padding: 30rpx 40rpx 160rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.top-img{
|
||
width: 460rpx;
|
||
height: 290rpx;
|
||
float: right;
|
||
}
|
||
|
||
/* 提示文案 */
|
||
.tips-text {
|
||
color: #000;
|
||
margin-bottom: 30rpx;
|
||
font-size: 68rpx;
|
||
line-height: 1.5;
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
clear: both;
|
||
position: relative;
|
||
top: -86px;
|
||
left: 0;
|
||
}
|
||
.tips-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
color: #666666;
|
||
}
|
||
|
||
/* 开门成功提示 */
|
||
.success-toast {
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: #ffffff;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
top: 200rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 99;
|
||
}
|
||
|
||
/* 开门授权容器 */
|
||
.auth-container {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 40rpx 42rpx;
|
||
margin-bottom: 60rpx;
|
||
position: relative;
|
||
top: -86px;
|
||
left: 0;
|
||
}
|
||
.auth-title {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
padding-bottom: 20rpx;
|
||
/* border-bottom: 1px solid #e5e5e5; */
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 网格布局 */
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
/* 门选项样式 */
|
||
.door-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 30rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
border: 2px solid #2F77FD;
|
||
background-color: #F6F9FE;
|
||
transition: all 0.3s;
|
||
}
|
||
/* 选中状态 */
|
||
.door-item.active {
|
||
/* border-color: #2c6bc7; */
|
||
background-color: #2F77FD;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* 门图标 */
|
||
.door-icon {
|
||
width: 126rpx;
|
||
height: 114rpx;
|
||
/* background-color: #f5f5f5; */
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 44rpx;
|
||
}
|
||
.icon-text {
|
||
/* font-size: 40rpx; */
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 门名称 */
|
||
.door-name {
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
}
|
||
.door-name.active {
|
||
color: #ffffff;
|
||
}
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
/* 确认按钮 */
|
||
.confirm-btn {
|
||
position: fixed;
|
||
left: 40rpx;
|
||
right: 40rpx;
|
||
bottom: 20rpx;
|
||
bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||
bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
background-color: #2F77FD;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 20rpx;
|
||
border: none;
|
||
z-index: 10;
|
||
}
|
||
.confirm-btn::after {
|
||
border: none; /* 去除uni-app默认按钮边框 */
|
||
}
|
||
</style>
|