156 lines
4.7 KiB
JavaScript
156 lines
4.7 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: '',
|
|
},
|
|
|
|
/* 密码表单 */
|
|
form: {
|
|
password: '',
|
|
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' })
|
|
},
|
|
})
|