112 lines
3.5 KiB
Plaintext
112 lines
3.5 KiB
Plaintext
<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>
|
|
|
|
<!-- 密码输入行 -->
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</view>
|