[AI Generated]: refactor(Views): 重写连接WiFi页结构与样式并调整页面注册顺序
This commit is contained in:
17792275749
@@ -1,111 +1,90 @@
|
||||
<view class="connected-wifi">
|
||||
|
||||
<!-- 密码输入态:整页覆盖,独立布局 -->
|
||||
<block wx:if="{{ status === 'password' }}">
|
||||
<view class="password-page">
|
||||
<view class="password-title">输入WiFi密码</view>
|
||||
|
||||
<!-- 已选 WiFi 行 -->
|
||||
<view class="password-ssid">
|
||||
<view class="password-ssid-icon"></view>
|
||||
<text class="password-ssid-name">{{ selectedWifi.name }}</text>
|
||||
<view class="password-ssid-close" bind:tap="onCancelPwd"></view>
|
||||
<view class="connectedWifi">
|
||||
<block wx:if="{{status === 'password'}}">
|
||||
<view class="setWifi">
|
||||
<view class="setWifi-title">输入Wi-Fi密码</view>
|
||||
<view class="setWifi-form">
|
||||
<view>
|
||||
<view>
|
||||
<image src="/images/configureDevice/wifiPwd.png"/>
|
||||
</view>
|
||||
<view>WIFI 账号</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>密码</view>
|
||||
<view>
|
||||
<block wx:if="{{type}}">
|
||||
<input
|
||||
password="{{true}}"
|
||||
value="{{selectWifiPWD}}"
|
||||
bindinput="passwordInput"
|
||||
placeholder="输入您的wi-fi密码"
|
||||
placeholder-class="placeholderClass"/>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<input
|
||||
password="{{false}}"
|
||||
value="{{selectWifiPWD}}"
|
||||
bindinput="passwordInput"
|
||||
placeholder="输入您的wi-fi密码"
|
||||
placeholder-class="placeholderClass"/>
|
||||
</block>
|
||||
</view>
|
||||
<view bind:tap="inputTypeChange">
|
||||
<image src="/images/configureDevice/{{type ? 'open' : 'close'}}.png"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="setWifi-btn">
|
||||
<view>取消</view>
|
||||
<view>连接</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 密码输入行 -->
|
||||
<view class="password-input-row">
|
||||
<text class="password-label">密码</text>
|
||||
<input
|
||||
class="password-input"
|
||||
password="{{ !form.showPwd }}"
|
||||
placeholder="输入您的wifi密码"
|
||||
placeholder-class="password-placeholder"
|
||||
value="{{ form.password }}"
|
||||
bindinput="onInputPwd"
|
||||
/>
|
||||
<view class="password-eye" bind:tap="onTogglePwd"></view>
|
||||
</view>
|
||||
|
||||
<!-- 取消 / 连接 双按钮 -->
|
||||
<view class="password-actions">
|
||||
<view class="btn-ghost" bind:tap="onCancelPwd">取消</view>
|
||||
<view class="btn-primary" bind:tap="onConfirmPwd">连接</view>
|
||||
<block wx:else>
|
||||
<view class="deviceCard">
|
||||
<view></view>
|
||||
<view>
|
||||
<view></view>
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 列表 / 空态:共用顶部设备卡 + 标题行 -->
|
||||
<block wx:if="{{ status === 'list' || status === 'empty' }}">
|
||||
|
||||
<!-- 顶部设备卡:始终显示"已连接" -->
|
||||
<view class="device-card">
|
||||
<view class="card-icon"></view>
|
||||
<view class="card-info">
|
||||
<view class="card-name">{{ currentDevice.name }}</view>
|
||||
<view class="card-status">
|
||||
<view class="card-dot"></view>
|
||||
<text class="card-status-text">已连接</text>
|
||||
<block wx:if="{{status === 'idle'}}">
|
||||
<view class="wifiIdle">
|
||||
查找周边WiFi
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{status === 'searching'}}">
|
||||
<view class="wifiSearching">
|
||||
搜索中...
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{status === 'list'}}">
|
||||
<view class="wifiHeader">
|
||||
<view>
|
||||
<view>附近WiFi</view>
|
||||
</view>
|
||||
<view>网络列表（请选择一个网络进行连接）</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 附近WiFi 标题行 + 右侧「刷新」 -->
|
||||
<view class="wifi-header">
|
||||
<text class="wifi-title">附近WiFi</text>
|
||||
<view class="wifi-refresh" bind:tap="onRefresh">
|
||||
<view class="wifi-refresh-icon"></view>
|
||||
<text class="wifi-refresh-text">刷新</text>
|
||||
<view class="wifiList">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 副标题 -->
|
||||
<view class="wifi-subtitle">
|
||||
<text class="wifi-subtitle-text">网络列表(</text>
|
||||
<text class="wifi-subtitle-tip">请选择一个网络进行连接</text>
|
||||
<text class="wifi-subtitle-text">)</text>
|
||||
</view>
|
||||
|
||||
<!-- 列表态 -->
|
||||
<block wx:if="{{ status === 'list' }}">
|
||||
<view class="wifi-list">
|
||||
<block wx:for="{{ wifiList }}" wx:key="id">
|
||||
<!-- 已连接项:蓝色文字 + 右侧已连接勾 -->
|
||||
<block wx:if="{{ item.connected }}">
|
||||
<view class="wifi-item wifi-item-connected" data-id="{{ item.id }}" bind:tap="onTapWifi">
|
||||
<view class="wifi-item-icon-connected"></view>
|
||||
<text class="wifi-item-name-connected">{{ item.name }}</text>
|
||||
<view class="wifi-item-tag">
|
||||
<text class="wifi-item-tag-text">已连接</text>
|
||||
<view class="wifi-item-tag-check"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 普通项:灰底圆形图标 + 右箭头 -->
|
||||
<block wx:else>
|
||||
<view class="wifi-item" data-id="{{ item.id }}" bind:tap="onTapWifi">
|
||||
<view class="wifi-item-icon"></view>
|
||||
<text class="wifi-item-name">{{ item.name }}</text>
|
||||
<view class="wifi-item-arrow"></view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<view class="wifiBtn">
|
||||
<view></view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{status === 'empty'}}">
|
||||
<view class="wifiHeader">
|
||||
<view>
|
||||
<view>附近WiFi</view>
|
||||
<view>刷新</view>
|
||||
</view>
|
||||
<view>网络列表（请选择一个网络进行连接）</view>
|
||||
</view>
|
||||
<view class="wifiEmpty">
|
||||
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 空态 -->
|
||||
<block wx:if="{{ status === 'empty' }}">
|
||||
<view class="empty">
|
||||
<view class="empty-image"></view>
|
||||
<view class="empty-text">未查找到可用wifi,请重试</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 底部「确认」按钮:必须连接成功一个 WiFi 后才可点击 -->
|
||||
<view
|
||||
class="confirm-btn {{ hasConnected ? '' : 'confirm-btn-disabled' }}"
|
||||
bind:tap="onConfirm"
|
||||
>
|
||||
确认
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user