[AI Generated]: feat(Views): 新增连接WiFi页五态状态机及跳转完善个人信息
This commit is contained in:
17792275749
@@ -1,43 +1,104 @@
|
||||
// 是否 mock 配网成功,false 则走失败态
|
||||
const MOCK_CONFIG_SUCCESS = true
|
||||
// 是否 mock 能搜索到 WiFi,false 则走空状态
|
||||
const MOCK_HAS_WIFI = true
|
||||
|
||||
// 模拟配网耗时(毫秒)
|
||||
const MOCK_CONFIG_DURATION = 2000
|
||||
// 模拟搜索耗时(毫秒)
|
||||
const MOCK_SEARCH_DURATION = 600
|
||||
|
||||
Page({
|
||||
data: {
|
||||
/**
|
||||
* 页面状态
|
||||
* - idle: 未配网(进入页面默认态)
|
||||
* - configuring: 配网中
|
||||
* - success: 配网成功
|
||||
* - failed: 配网失败
|
||||
* - 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: {
|
||||
ssid: '', // WiFi 名称
|
||||
password: '', // WiFi 密码
|
||||
showPwd: false, // 是否明文显示密码
|
||||
password: '',
|
||||
showPwd: false,
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
/* 设计稿表达"进入页面立即搜索",但状态机仍由 idle 起步,
|
||||
* 此处手动调用按钮事件,避免"自动逻辑"与"按钮逻辑"分叉 */
|
||||
this.onStartSearch()
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
/* 清除配网定时器,防止页面卸载后还触发 setData */
|
||||
if (this._configTimer) {
|
||||
clearTimeout(this._configTimer)
|
||||
this._configTimer = null
|
||||
/* 清除搜索定时器,防止页面卸载后还触发 setData */
|
||||
if (this._searchTimer) {
|
||||
clearTimeout(this._searchTimer)
|
||||
this._searchTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
/* 输入 WiFi 名称 */
|
||||
onInputSsid(e) {
|
||||
this.setData({ 'form.ssid': e.detail.value })
|
||||
/* 开始搜索 / 重新搜索 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 密码 */
|
||||
@@ -50,47 +111,45 @@ Page({
|
||||
this.setData({ 'form.showPwd': !this.data.form.showPwd })
|
||||
},
|
||||
|
||||
/* 主按钮:根据 status 路由到不同动作 */
|
||||
onSubmit() {
|
||||
const { status } = this.data
|
||||
if (status === 'configuring') return
|
||||
if (status === 'success') {
|
||||
this.onFinish()
|
||||
return
|
||||
}
|
||||
/* idle / failed 均触发开始配网 */
|
||||
this.onStartConfig()
|
||||
/* 取消密码输入:回到列表态 */
|
||||
onCancelPwd() {
|
||||
this.setData({
|
||||
status: 'list',
|
||||
selectedWifi: { id: '', name: '' },
|
||||
form: { password: '', showPwd: false },
|
||||
})
|
||||
wx.setNavigationBarTitle({ title: 'WiFi连接' })
|
||||
},
|
||||
|
||||
/* 开始配网 / 重新配网 */
|
||||
onStartConfig() {
|
||||
const { ssid, password } = this.data.form
|
||||
if (!ssid) {
|
||||
wx.showToast({ title: '请输入 WiFi 名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
/* 确认密码,提交连接 */
|
||||
onConfirmPwd() {
|
||||
const { password } = this.data.form
|
||||
if (!password) {
|
||||
wx.showToast({ title: '请输入 WiFi 密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
this.setData({ status: 'configuring' })
|
||||
/* TODO: 接入真实 WiFi 配网 API,这里直接 mock 成功并回到列表 */
|
||||
const { id: selectedId } = this.data.selectedWifi
|
||||
const wifiList = this.data.wifiList.map(item => ({
|
||||
...item,
|
||||
connected: item.id === selectedId,
|
||||
}))
|
||||
|
||||
/* 模拟配网,后续接入真实配网 API 时删除 */
|
||||
this._configTimer = setTimeout(() => {
|
||||
this.setData({ status: MOCK_CONFIG_SUCCESS ? 'success' : 'failed' })
|
||||
}, MOCK_CONFIG_DURATION)
|
||||
this.setData({
|
||||
status: 'list',
|
||||
wifiList,
|
||||
hasConnected: true,
|
||||
selectedWifi: { id: '', name: '' },
|
||||
form: { password: '', showPwd: false },
|
||||
})
|
||||
wx.setNavigationBarTitle({ title: 'WiFi连接' })
|
||||
wx.showToast({ title: '连接成功', icon: 'success' })
|
||||
},
|
||||
|
||||
/* 配网成功后点击完成 */
|
||||
onFinish() {
|
||||
/* TODO: 接入真实跳转逻辑,例如回到设备首页 */
|
||||
wx.navigateBack({ delta: 1 })
|
||||
},
|
||||
|
||||
/* 查看帮助 */
|
||||
onOpenHelp() {
|
||||
console.log('查看帮助')
|
||||
/* TODO: 跳帮助页 */
|
||||
/* 点击底部「确认」:连接成功后跳转完善个人信息页 */
|
||||
onConfirm() {
|
||||
if (!this.data.hasConnected) return
|
||||
wx.navigateTo({ url: '/pages/supplementPersonal/supplementPersonal' })
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user