From b744f20537228d4316c9ff4f1a583d487f8f315e Mon Sep 17 00:00:00 2001 From: 17792275749 <812100002@qq.com> Date: Tue, 12 May 2026 09:23:56 +0800 Subject: [PATCH] =?UTF-8?q?[AI=20Generated]:=20refactor(Views):=20?= =?UTF-8?q?=E9=87=8D=E5=86=99=E8=BF=9E=E6=8E=A5WiFi=E9=A1=B5=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E4=B8=8E=E6=A0=B7=E5=BC=8F=E5=B9=B6=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=B3=A8=E5=86=8C=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/app.json | 4 +- .../pages/connectedWifi/connectedWifi.js | 112 ---- .../pages/connectedWifi/connectedWifi.less | 493 +++++------------- .../pages/connectedWifi/connectedWifi.wxml | 181 +++---- miniprogram/pages/equipment/equipment.less | 3 +- 5 files changed, 201 insertions(+), 592 deletions(-) diff --git a/miniprogram/app.json b/miniprogram/app.json index af404fb..342a6ac 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,12 +1,12 @@ { "pages": [ - "pages/equipment/equipment", + "pages/connectedWifi/connectedWifi", "pages/login/login", "pages/searchDevice/searchDevice", "pages/connectedDevice/connectedDevice", - "pages/connectedWifi/connectedWifi", "pages/supplementPersonal/supplementPersonal", "pages/home/home", + "pages/equipment/equipment", "pages/data/data", "pages/my/my" ], diff --git a/miniprogram/pages/connectedWifi/connectedWifi.js b/miniprogram/pages/connectedWifi/connectedWifi.js index 4c78f1f..9d91c9e 100644 --- a/miniprogram/pages/connectedWifi/connectedWifi.js +++ b/miniprogram/pages/connectedWifi/connectedWifi.js @@ -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' }) - }, }) diff --git a/miniprogram/pages/connectedWifi/connectedWifi.less b/miniprogram/pages/connectedWifi/connectedWifi.less index fe500dd..cb8ec27 100644 --- a/miniprogram/pages/connectedWifi/connectedWifi.less +++ b/miniprogram/pages/connectedWifi/connectedWifi.less @@ -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; + } +} \ No newline at end of file diff --git a/miniprogram/pages/connectedWifi/connectedWifi.wxml b/miniprogram/pages/connectedWifi/connectedWifi.wxml index 46af73a..6ca486b 100644 --- a/miniprogram/pages/connectedWifi/connectedWifi.wxml +++ b/miniprogram/pages/connectedWifi/connectedWifi.wxml @@ -1,111 +1,90 @@ - - - - - - 输入WiFi密码 - - - - - {{ selectedWifi.name }} - + + + + 输入Wi-Fi密码 + + + + + + WIFI 账号 + + + 密码 + + + + + + + + + + + + + + + 取消 + 连接 + + - - - 密码 - - - - - - - 取消 - 连接 + + + + + + - - - - - - - - - - {{ currentDevice.name }} - - - 已连接 + + + 查找周边WiFi + + + + + 搜索中... + + + + + + 附近WiFi + 网络列表（请选择一个网络进行连接） - - - - - 附近WiFi - - - 刷新 + + - - - - - 网络列表( - 请选择一个网络进行连接 - ) - - - - - - - - - - - {{ item.name }} - - 已连接 - - - - - - - - - {{ item.name }} - - - - + + + + + + + + 附近WiFi + 刷新 + + 网络列表（请选择一个网络进行连接） + + + - - - - - - 未查找到可用wifi,请重试 - - - - - - 确认 - - + + diff --git a/miniprogram/pages/equipment/equipment.less b/miniprogram/pages/equipment/equipment.less index 1e982fe..0da31c8 100644 --- a/miniprogram/pages/equipment/equipment.less +++ b/miniprogram/pages/equipment/equipment.less @@ -58,7 +58,7 @@ color: #252535; height: 32rpx; font-size: 32rpx; - font-weight: 500; + font-weight: bold; line-height: 32rpx; margin-bottom: 16rpx; } @@ -119,7 +119,6 @@ /* 单按钮:已连接态 */ &.card-actions-single { - justify-content: center; .btn-ghost-full { width: 100%;