148 lines
4.3 KiB
JavaScript
148 lines
4.3 KiB
JavaScript
// 是否 mock 能搜索到 WiFi,false 则走空状态
|
|
const MOCK_HAS_WIFI = true
|
|
|
|
// 模拟搜索耗时(毫秒)
|
|
const MOCK_SEARCH_DURATION = 600
|
|
|
|
Page({
|
|
data: {
|
|
/**
|
|
* 页面状态
|
|
* - idle: 未搜索(进入页面默认态,onLoad 立即流转)
|
|
* - searching: 搜索中
|
|
* - list: 搜索完成且有 WiFi
|
|
* - empty: 搜索完成但无 WiFi
|
|
* - password: 从列表选中某项后进入密码输入态
|
|
*/
|
|
status: 'idle',
|
|
|
|
/* 当前已连接的设备(从上一页带过来的固定卡片信息) */
|
|
currentDevice: {
|
|
id: 'mock-device',
|
|
name: '智能体重秤 Pro',
|
|
},
|
|
|
|
/* WiFi 列表(connected: true 表示已通过本页配网成功的网络) */
|
|
wifiList: [],
|
|
|
|
/* 是否已有任一 WiFi 配网成功,决定底部「确认」按钮是否可点击 */
|
|
hasConnected: false,
|
|
|
|
/* 当前在密码态选中的 WiFi */
|
|
selectedWifi: {
|
|
id: '',
|
|
name: '',
|
|
},
|
|
|
|
/* 密码输入框值 */
|
|
selectWifiPWD: '',
|
|
|
|
/* 密码框明文/密文切换:true 为密文(默认),false 为明文 */
|
|
type: true,
|
|
},
|
|
|
|
onLoad() {
|
|
/* 设计稿表达"进入页面立即搜索",但状态机仍由 idle 起步,
|
|
* 此处手动调用按钮事件,避免"自动逻辑"与"按钮逻辑"分叉 */
|
|
this.onStartSearch()
|
|
},
|
|
|
|
onUnload() {
|
|
/* 清除搜索定时器,防止页面卸载后还触发 setData */
|
|
if (this._searchTimer) {
|
|
clearTimeout(this._searchTimer)
|
|
this._searchTimer = null
|
|
}
|
|
},
|
|
|
|
/* 开始搜索:idle/empty/list → searching → list/empty */
|
|
onStartSearch() {
|
|
this.setData({ status: 'searching' })
|
|
|
|
this._searchTimer = setTimeout(() => {
|
|
if (MOCK_HAS_WIFI) {
|
|
this.setData({
|
|
status: 'list',
|
|
wifiList: [
|
|
{ id: 'wifi-1', name: 'Rk-Health-5G', connected: false },
|
|
{ id: 'wifi-2', name: 'Rk-Guest', connected: false },
|
|
{ id: 'wifi-3', name: 'ChinaNet-7Hk2', connected: false },
|
|
{ id: 'wifi-4', name: 'TP-LINK_8899', connected: false },
|
|
],
|
|
})
|
|
} else {
|
|
this.setData({ status: 'empty', wifiList: [] })
|
|
}
|
|
}, MOCK_SEARCH_DURATION)
|
|
},
|
|
|
|
/* 空态「刷新」:重新进入搜索 */
|
|
onRefresh() {
|
|
this.onStartSearch()
|
|
},
|
|
|
|
/* 点击某个 WiFi 项 → 进密码态 */
|
|
onTapWifi(e) {
|
|
const id = e.currentTarget.dataset.id
|
|
const target = this.data.wifiList.find(item => item.id === id)
|
|
if (!target) return
|
|
|
|
/* 已连接项再次点击不进入密码态 */
|
|
if (target.connected) return
|
|
|
|
this.setData({
|
|
status: 'password',
|
|
selectedWifi: { id: target.id, name: target.name },
|
|
selectWifiPWD: '',
|
|
type: true,
|
|
})
|
|
},
|
|
|
|
/* 密码输入 */
|
|
passwordInput(e) {
|
|
this.setData({ selectWifiPWD: e.detail.value })
|
|
},
|
|
|
|
/* 密码明文/密文切换 */
|
|
inputTypeChange() {
|
|
this.setData({ type: !this.data.type })
|
|
},
|
|
|
|
/* 密码态「取消」:回列表态,清空当前选中 */
|
|
onCancelPwd() {
|
|
this.setData({
|
|
status: 'list',
|
|
selectedWifi: { id: '', name: '' },
|
|
selectWifiPWD: '',
|
|
})
|
|
},
|
|
|
|
/* 密码态「连接」:把对应项标 connected,回列表态 */
|
|
onConfirmPwd() {
|
|
const { selectedWifi, wifiList } = this.data
|
|
if (!selectedWifi.id) return
|
|
|
|
const next = wifiList.map(item => ({
|
|
...item,
|
|
connected: item.id === selectedWifi.id,
|
|
}))
|
|
|
|
this.setData({
|
|
status: 'list',
|
|
wifiList: next,
|
|
hasConnected: true,
|
|
selectedWifi: { id: '', name: '' },
|
|
selectWifiPWD: '',
|
|
})
|
|
},
|
|
|
|
/* 列表底部「确认」:必须有连接成功的 WiFi 才可点击 */
|
|
onConfirm() {
|
|
if (!this.data.hasConnected) return
|
|
|
|
wx.navigateTo({
|
|
url: '/pages/supplementPersonal/supplementPersonal',
|
|
})
|
|
},
|
|
})
|