property-manager-side/wuye-manager-uniapp/pageSubPack/oneClickOpen/oneClickOpen.vue

<template>
  <!-- 页面主容器 -->
  <view class="door-open-page">
	  <view class="status_bar"></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/imgs/xuancheng-bg.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 === index }]"
          @click="selectDoor(index)"
        >
          <!-- 图标占位（可替换为真实图标/图片） -->
          <view class="door-icon">
            <image class="icon-text" :src="selectedDoor === index ? item.iconActive:item.iconText"></image>
          </view>
          <!-- 门名称 -->
          <text class="door-name">{{ item.name }}</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>

    <!-- 确认开门按钮 -->
    <button class="confirm-btn" @click="openDoor" :disabled="selectedDoor === -1">确认开门</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getOpenDoorList, switchOpenDoor } from '../../api/api.js'

// 响应式数据：选中的门索引、开门成功提示
const selectedDoor = ref(-1) // -1表示未选中
const showSuccess = ref(false)

// 门列表数据
const doorList = ref([])

// 查询门禁列表
const fetchDoorList = () => {
  getOpenDoorList().then(res => {
    if (res.code === 200 && res.data) {
      doorList.value = res.data
        .filter(item => item.status === '1')
        .map(item => ({
          id: item.id,
          name: item.deviceName,
          iconText: item.iconText,
          iconActive: item.iconActive
        }))
    }
  }).catch(err => {
    uni.showToast({
      title: err.msg || '获取门禁列表失败',
      icon: 'none'
    })
  })
}

onShow(() => {
  selectedDoor.value = -1
  showSuccess.value = false
  fetchDoorList()
})

// 选择门的方法
const selectDoor = (index) => {
  selectedDoor.value = index
  showSuccess.value = false // 选择新门时隐藏成功提示
}
// 返回
const narBack = () =>{
		uni.switchTab({
			url:"/pages/index/index"
		})
}
// 确认开门方法
const openDoor = () => {
  const device = doorList.value[selectedDoor.value]
  if (!device) return

  uni.showLoading({ title: '开门中...' })
  switchOpenDoor({ deviceId: device.id }).then(res => {
    uni.hideLoading()
    if (res.code === 200) {
      showSuccess.value = true
    } else {
      uni.showToast({ title: res.msg || '开门失败', icon: 'none' })
    }
  }).catch(err => {
    uni.hideLoading()
    uni.showToast({ title: err.msg || '开门失败', icon: 'none' })
  })
}
</script>

<style scoped>
/* 页面全局样式 */
.door-open-page {
  background: linear-gradient(180deg, #E2F0FF, #F6FAFF);
  min-height: 100vh;
  padding: 30rpx 40rpx;
  box-sizing: border-box;
}
  .status_bar {
	height: 32px;
	width: 100%;
 }
/* 顶部标题 */
.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;
}

/* 提示文案 */
.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: #4D5DFA;
  color: #ffffff;
}
.door-item.active .door-name {
  color: #ffffff !important;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

/* 门图标 */
.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: 32rpx;
  color: #222;
  font-weight: 500;
}

/* 确认按钮 */
.confirm-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #4D5DFA;
  color: #fff;
  font-size: 32rpx;
  border-radius: 20rpx;
  border: none;
}
.confirm-btn::after {
  border: none; /* 去除uni-app默认按钮边框 */
}
</style>