[AI Generated]: refactor(Views): 重写连接WiFi页结构与样式并调整页面注册顺序
This commit is contained in:
17792275749
@@ -40,116 +40,4 @@ Page({
|
||||
showPwd: false,
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
/* 设计稿表达"进入页面立即搜索",但状态机仍由 idle 起步,
|
||||
* 此处手动调用按钮事件,避免"自动逻辑"与"按钮逻辑"分叉 */
|
||||
this.onStartSearch()
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
/* 清除搜索定时器,防止页面卸载后还触发 setData */
|
||||
if (this._searchTimer) {
|
||||
clearTimeout(this._searchTimer)
|
||||
this._searchTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
/* 开始搜索 / 重新搜索 WiFi */
|
||||
onStartSearch() {
|
||||
this.setData({
|
||||
status: 'searching',
|
||||
wifiList: [],
|
||||
hasConnected: false,
|
||||
})
|
||||
wx.setNavigationBarTitle({ title: 'WiFi连接' })
|
||||
|
||||
/* 模拟搜索,后续接入真实 WiFi 扫描 API 时删除 */
|
||||
this._searchTimer = setTimeout(() => {
|
||||
if (MOCK_HAS_WIFI) {
|
||||
this.setData({
|
||||
status: 'list',
|
||||
wifiList: [
|
||||
{ id: 'wifi-1', name: 'HomeWiFi_5G', connected: false },
|
||||
{ id: 'wifi-2', name: 'Office_2.4G', connected: false },
|
||||
{ id: 'wifi-3', name: 'Guest_WiFi', connected: false },
|
||||
{ id: 'wifi-4', name: 'HUAWEI-4009AV', connected: false },
|
||||
],
|
||||
})
|
||||
} else {
|
||||
this.setData({ status: 'empty' })
|
||||
}
|
||||
}, MOCK_SEARCH_DURATION)
|
||||
},
|
||||
|
||||
/* 点击「刷新」按钮:重新搜索 */
|
||||
onRefresh() {
|
||||
this.onStartSearch()
|
||||
},
|
||||
|
||||
/* 点击 WiFi 列表项:跳转密码输入态 */
|
||||
onTapWifi(e) {
|
||||
const { id } = e.currentTarget.dataset
|
||||
const wifi = this.data.wifiList.find(item => item.id === id)
|
||||
if (!wifi) return
|
||||
|
||||
this.setData({
|
||||
status: 'password',
|
||||
selectedWifi: { id: wifi.id, name: wifi.name },
|
||||
form: { password: '', showPwd: false },
|
||||
})
|
||||
wx.setNavigationBarTitle({ title: '输入WiFi密码' })
|
||||
},
|
||||
|
||||
/* 输入 WiFi 密码 */
|
||||
onInputPwd(e) {
|
||||
this.setData({ 'form.password': e.detail.value })
|
||||
},
|
||||
|
||||
/* 切换密码明文/密文 */
|
||||
onTogglePwd() {
|
||||
this.setData({ 'form.showPwd': !this.data.form.showPwd })
|
||||
},
|
||||
|
||||
/* 取消密码输入:回到列表态 */
|
||||
onCancelPwd() {
|
||||
this.setData({
|
||||
status: 'list',
|
||||
selectedWifi: { id: '', name: '' },
|
||||
form: { password: '', showPwd: false },
|
||||
})
|
||||
wx.setNavigationBarTitle({ title: 'WiFi连接' })
|
||||
},
|
||||
|
||||
/* 确认密码,提交连接 */
|
||||
onConfirmPwd() {
|
||||
const { password } = this.data.form
|
||||
if (!password) {
|
||||
wx.showToast({ title: '请输入 WiFi 密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
/* TODO: 接入真实 WiFi 配网 API,这里直接 mock 成功并回到列表 */
|
||||
const { id: selectedId } = this.data.selectedWifi
|
||||
const wifiList = this.data.wifiList.map(item => ({
|
||||
...item,
|
||||
connected: item.id === selectedId,
|
||||
}))
|
||||
|
||||
this.setData({
|
||||
status: 'list',
|
||||
wifiList,
|
||||
hasConnected: true,
|
||||
selectedWifi: { id: '', name: '' },
|
||||
form: { password: '', showPwd: false },
|
||||
})
|
||||
wx.setNavigationBarTitle({ title: 'WiFi连接' })
|
||||
wx.showToast({ title: '连接成功', icon: 'success' })
|
||||
},
|
||||
|
||||
/* 点击底部「确认」:连接成功后跳转完善个人信息页 */
|
||||
onConfirm() {
|
||||
if (!this.data.hasConnected) return
|
||||
wx.navigateTo({ url: '/pages/supplementPersonal/supplementPersonal' })
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,376 +1,119 @@
|
||||
/* WiFi 配网页 —— 五态(idle / searching / list / empty / password)共用 */
|
||||
.connected-wifi {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/* 顶部已连接设备卡:沿用 connectedDevice 的 device-card 规范 */
|
||||
.device-card {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E6E6EA;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 47rpx;
|
||||
|
||||
.card-icon {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.card-name {
|
||||
color: #252535;
|
||||
height: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.card-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 14rpx;
|
||||
background-color: #2AC79F;
|
||||
}
|
||||
|
||||
.card-status-text {
|
||||
color: #2AC79F;
|
||||
height: 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 附近WiFi 标题行 */
|
||||
.wifi-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.wifi-title {
|
||||
color: #252535;
|
||||
height: 36rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.wifi-refresh {
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.wifi-refresh-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.wifi-refresh-text {
|
||||
color: #1385FA;
|
||||
height: 36rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 副标题:网络列表(请选择一个网络进行连接) */
|
||||
.wifi-subtitle {
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.wifi-subtitle-text {
|
||||
color: #B6B6B6;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.wifi-subtitle-tip {
|
||||
color: #B6B6B6;
|
||||
font-size: 28rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* WiFi 列表 */
|
||||
.wifi-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* 列表项通用骨架 */
|
||||
.wifi-item {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 普通项左侧:80rpx 灰底圆形 + 内嵌信号图标占位 */
|
||||
.wifi-item-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.wifi-item-name {
|
||||
flex: 1;
|
||||
color: #252535;
|
||||
height: 32rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.wifi-item-arrow {
|
||||
width: 10rpx;
|
||||
height: 18rpx;
|
||||
background-color: #B6B6B6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 已连接项:蓝色文字 + 右侧已连接勾(图标不加底色圆,沿用图标自身颜色) */
|
||||
.wifi-item-connected {
|
||||
.wifi-item-icon-connected {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.wifi-item-name-connected {
|
||||
flex: 1;
|
||||
color: #1385FA;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.wifi-item-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.wifi-item-tag-text {
|
||||
color: #2AC79F;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: 24rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.wifi-item-tag-check {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #2AC79F;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 空态 */
|
||||
.empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 39rpx;
|
||||
|
||||
.empty-image {
|
||||
width: 566rpx;
|
||||
height: 499rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #F5F8FF;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #1385FA;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部「确认」按钮:连接成功后才可点击 */
|
||||
.confirm-btn {
|
||||
color: #FFFFFF;
|
||||
width: 580rpx;
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
margin: 60rpx auto 32rpx;
|
||||
background-color: #1385FA;
|
||||
}
|
||||
|
||||
.confirm-btn-disabled {
|
||||
background-color: #A8C9F0;
|
||||
}
|
||||
|
||||
/* 密码输入态:整页独立布局 */
|
||||
.password-page {
|
||||
width: 100%;
|
||||
padding-top: 29rpx;
|
||||
|
||||
.password-title {
|
||||
color: #252535;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
line-height: 36rpx;
|
||||
padding-left: 11rpx;
|
||||
}
|
||||
|
||||
/* 已选 WiFi 行:灰底 16rpx 圆角 */
|
||||
.password-ssid {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 21rpx 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 39rpx;
|
||||
|
||||
.password-ssid-icon {
|
||||
width: 45rpx;
|
||||
height: 31rpx;
|
||||
background-color: #B6B6B6;
|
||||
border-radius: 4rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.password-ssid-name {
|
||||
flex: 1;
|
||||
color: #252535;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
margin-left: 49rpx;
|
||||
}
|
||||
|
||||
.password-ssid-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #E6E6EA;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 密码输入行:灰底 16rpx 圆角 */
|
||||
.password-input-row {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F6F6;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 21rpx 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.password-label {
|
||||
color: #252535;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: 32rpx;
|
||||
margin-right: 41rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
flex: 1;
|
||||
color: #252535;
|
||||
font-size: 32rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.password-placeholder {
|
||||
color: #B6B6B6;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.password-eye {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #E6E6EA;
|
||||
margin-left: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 取消 / 连接 双按钮 */
|
||||
.password-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 48rpx;
|
||||
|
||||
.btn-ghost {
|
||||
width: 300rpx;
|
||||
height: 88rpx;
|
||||
line-height: 84rpx;
|
||||
text-align: center;
|
||||
color: #1385FA;
|
||||
font-size: 32rpx;
|
||||
border: 2rpx solid #1385FA;
|
||||
border-radius: 44rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 300rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
background-color: #1385FA;
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.connectedWifi {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.setWifi {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 60rpx 40rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.setWifi-title {
|
||||
color: #252535;
|
||||
width: 100%;
|
||||
height: 48rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.setWifi-form {
|
||||
width: 100%;
|
||||
margin-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.setWifi-form>view {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
|
||||
.setWifi-form>view:first-of-type {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.setWifi-form>view>view:nth-of-type(1) {
|
||||
color: #252535;
|
||||
width: 100rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.setWifi-form>view:first-of-type>view:nth-of-type(1) {
|
||||
padding: 24rpx 45rpx 24rpx 7rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.setWifi-form>view>view:nth-of-type(2) {
|
||||
color: #252535;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.setWifi-form>view>view:nth-of-type(2) input {
|
||||
color: #252535;
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.placeholderClass {
|
||||
color: #B6B6B6;
|
||||
height: 96rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 96rpx;
|
||||
}
|
||||
|
||||
.setWifi-form>view>view:nth-of-type(3) {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
.setWifi-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 0 15rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.setWifi-btn>view {
|
||||
color: #FFFFFF;
|
||||
width: 300rpx;
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border-radius: 44rpx;
|
||||
line-height: 84rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #1385FA;
|
||||
border: 2rpx solid #1385FA;
|
||||
|
||||
&:first-of-type {
|
||||
color: #1385FA;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
@@ -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