对接活动列表接口

property-uniapp-project/pageSubPack/notice-list/oneClickOpen.vue

@@ -28,42 +28,50 @@
         <view 
           v-for="(item, index) in doorList" 
           :key="index"
-          :class="['door-item', { active: selectedDoor === index }]"
-          @click="selectDoor(index)"
+          :class="['door-item', { active: selectedDoor === item.id }]"
+          @click="selectDoor(item.id)"
         >
-          <!-- 图标占位（可替换为真实图标/图片） -->
+          <!-- 图标占位 -->
           <view class="door-icon">
-            <image class="icon-text" :src="selectedDoor === index ? item.iconActive:item.iconText"></image>
+            <image class="icon-text" :src="selectedDoor === item.id ? item.iconActive:item.iconText"></image>
           </view>
           <!-- 门名称 -->
-          <text class="door-name">{{ item.name }}</text>
+          <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="60" color="#ccc"></uni-icons>
+	    <text class="empty-text">暂无可用门禁</text>
+	  </view>
+	  
     </view>
 
     <!-- 确认开门按钮 -->
-    <button class="confirm-btn" @click="openDoor" :disabled="selectedDoor === -1">确认开门</button>
+    <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([
-  { iconText: 'http://47.104.199.163:9090/images/openDoor/westDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/westDoorWhite.png", name: '西入门闸机' },
-  { iconText: 'http://47.104.199.163:9090/images/openDoor/eastDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/eastDoorWhite.png", name: '东入门闸机' },
-  { iconText: 'http://47.104.199.163:9090/images/openDoor/unitDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/unitDoorWhite.png", name: '1号楼1单元门' },
-  { iconText: 'http://47.104.199.163:9090/images/openDoor/unitDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/unitDoorWhite.png", name: '1号楼2单元门' }
+  // { iconText: 'http://47.104.199.163:9090/images/openDoor/westDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/westDoorWhite.png", name: '西入门闸机' },
+  // { iconText: 'http://47.104.199.163:9090/images/openDoor/eastDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/eastDoorWhite.png", name: '东入门闸机' },
+  // { iconText: 'http://47.104.199.163:9090/images/openDoor/unitDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/unitDoorWhite.png", name: '1号楼1单元门' },
+  // { iconText: 'http://47.104.199.163:9090/images/openDoor/unitDoor.png',iconActive:"http://47.104.199.163:9090/images/openDoor/unitDoorWhite.png", name: '1号楼2单元门' }
 ])
 
 // 选择门的方法
-const selectDoor = (index) => {
-  selectedDoor.value = index
+const selectDoor = (id) => {
+  selectedDoor.value = id
   showSuccess.value = false // 选择新门时隐藏成功提示
 }
 // 返回
@@ -80,8 +88,38 @@ const narBack = () =>{
 	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{
+		doorList.value = []
+		uni.showToast({
+			title:res.msg,
+			icon:"error"
+		})
+	}
+	
+}
+
+
 // 确认开门方法
-const openDoor = () => {
+const openDoorClick = () => {
   // 校验：未选择门时提示
   // if (selectedDoor.value === -1) {
   //   uni.showToast({
@@ -90,14 +128,42 @@ const openDoor = () => {
   //   })
   //   return
   // }
-
-  // 模拟开门接口请求（实际项目替换为真实接口）
-  setTimeout(() => {
-    showSuccess.value = true
-    // 可选：添加成功提示后自动隐藏
-    // setTimeout(() => showSuccess.value = false, 2000)
-  }, 500)
+  getAccessOpenData()
 }
+//  开门接口
+const getAccessOpenData = async () =>{
+	try{
+		let params = {deviceId:selectedDoor.value}
+		const res = await getAccessOpen(params)
+		if(res.code === 200){
+			if(res.data){
+				uni.showToast({
+					title:'开门成功',
+					icon:"success"
+				})
+			}else{
+				uni.showToast({
+					title:'开门失败',
+					icon:"error"
+				})
+			}
+		}else{
+			uni.showToast({
+				title:'开门失败',
+				icon:"error"
+			})
+		}	
+	}catch{
+		uni.showToast({
+			title: res.msg,
+			icon:"error"
+		})
+	}
+}
+
+onLoad(() =>{
+	getAccessControl()
+})
 </script>
 
 <style scoped>
@@ -229,6 +295,23 @@ const openDoor = () => {
   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: 32rpx;
+  color: #999;
+  margin-top: 20rpx;
+  margin-bottom: 10rpx;
+}
 
 /* 确认按钮 */
 .confirm-btn {