first commit
This commit is contained in:
zhouyanli
241
property-uniapp-project/pages/notice-list/oneClickOpen.vue
Normal file
241
property-uniapp-project/pages/notice-list/oneClickOpen.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<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="/static/一键开门/远程开门.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>
|
||||
|
||||
<!-- 确认开门按钮 -->
|
||||
<button class="confirm-btn" @click="openDoor" :disabled="selectedDoor === -1">确认开门</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 响应式数据：选中的门索引、开门成功提示
|
||||
const selectedDoor = ref(-1) // -1表示未选中
|
||||
const showSuccess = ref(false)
|
||||
|
||||
// 门列表数据（和设计图一致）
|
||||
const doorList = ref([
|
||||
{ iconText: '/static/一键开门/西入门.png',iconActive:"/static/一键开门/西入门-白.png", name: '西入门闸机' },
|
||||
{ iconText: '/static/一键开门/东入门.png',iconActive:"/static/一键开门/东入门-白.png", name: '东入门闸机' },
|
||||
{ iconText: '/static/一键开门/单元门.png',iconActive:"/static/一键开门/单元门-白.png", name: '1号楼1单元门' },
|
||||
{ iconText: '/static/一键开门/单元门.png',iconActive:"/static/一键开门/单元门-白.png", name: '1号楼2单元门' }
|
||||
])
|
||||
|
||||
// 选择门的方法
|
||||
const selectDoor = (index) => {
|
||||
selectedDoor.value = index
|
||||
showSuccess.value = false // 选择新门时隐藏成功提示
|
||||
}
|
||||
// 返回
|
||||
const narBack = () =>{
|
||||
// uni.navigateBack({
|
||||
// delta: 1
|
||||
// })
|
||||
uni.switchTab({
|
||||
url:"/pages/index/index"
|
||||
})
|
||||
}
|
||||
// 确认开门方法
|
||||
const openDoor = () => {
|
||||
// 校验：未选择门时提示
|
||||
// if (selectedDoor.value === -1) {
|
||||
// uni.showToast({
|
||||
// title: '请先选择要开的门',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
// 模拟开门接口请求（实际项目替换为真实接口）
|
||||
setTimeout(() => {
|
||||
showSuccess.value = true
|
||||
// 可选：添加成功提示后自动隐藏
|
||||
// setTimeout(() => showSuccess.value = false, 2000)
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面全局样式 */
|
||||
.door-open-page {
|
||||
background: linear-gradient(180deg, #4a90e2, #F6FAFF);
|
||||
min-height: 100vh;
|
||||
padding: 30rpx 26rpx;
|
||||
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: 30rpx 20rpx;
|
||||
margin-bottom: 60rpx;
|
||||
position: relative;
|
||||
top: -86px;
|
||||
left: 0;
|
||||
}
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
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 #e5e5e5;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
/* 选中状态 */
|
||||
.door-item.active {
|
||||
/* border-color: #2c6bc7; */
|
||||
background-color: #2F77FD;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 门图标 */
|
||||
.door-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
/* background-color: #f5f5f5; */
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.icon-text {
|
||||
/* font-size: 40rpx; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 门名称 */
|
||||
.door-name {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 确认按钮 */
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: #ffffff;
|
||||
color: #2c6bc7;
|
||||
font-size: 32rpx;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
.confirm-btn::after {
|
||||
border: none; /* 去除uni-app默认按钮边框 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user