[AI Generated]: feat(Views): 新增连接WiFi页五态状态机及密码连接交互

2026-05-12 09:36:55 +08:00
parent b744f20537
commit 3b4a5e1b0d
3 changed files with 411 additions and 22 deletions
@@ -34,10 +34,114 @@ Page({
            name: '',
        },

-        /* 密码表单 */
-        form: {
-            password: '',
-            showPwd: false,
-        },
+        /* 密码输入框值 */
+        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',
+        })
    },
 })