From 3b4a5e1b0dfefa3782504b0b6866633795b60839 Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Tue, 12 May 2026 09:36:55 +0800
Subject: [PATCH] =?UTF-8?q?[AI=20Generated]:=20feat(Views):=20=E6=96=B0?=
=?UTF-8?q?=E5=A2=9E=E8=BF=9E=E6=8E=A5WiFi=E9=A1=B5=E4=BA=94=E6=80=81?=
=?UTF-8?q?=E7=8A=B6=E6=80=81=E6=9C=BA=E5=8F=8A=E5=AF=86=E7=A0=81=E8=BF=9E?=
=?UTF-8?q?=E6=8E=A5=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../pages/connectedWifi/connectedWifi.js | 114 +++++++-
.../pages/connectedWifi/connectedWifi.less | 263 +++++++++++++++++-
.../pages/connectedWifi/connectedWifi.wxml | 56 +++-
3 files changed, 411 insertions(+), 22 deletions(-)
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.js b/miniprogram/pages/connectedWifi/connectedWifi.js
index 9d91c9e..4af47dd 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.js
+++ b/miniprogram/pages/connectedWifi/connectedWifi.js
@@ -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',
+ })
},
})
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.less b/miniprogram/pages/connectedWifi/connectedWifi.less
index cb8ec27..82cfb1c 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.less
+++ b/miniprogram/pages/connectedWifi/connectedWifi.less
@@ -3,13 +3,15 @@
height: 100%;
display: flex;
flex-flow: column;
+ padding: 30rpx 30rpx 0;
+ box-sizing: border-box;
background-color: #FFFFFF;
}
.setWifi {
width: 100%;
height: 100%;
- padding: 60rpx 40rpx 0;
+ padding: 30rpx 10rpx 0;
box-sizing: border-box;
}
@@ -116,4 +118,261 @@
color: #1385FA;
background-color: #FFFFFF;
}
-}
\ No newline at end of file
+}
+
+/* 顶部已连接设备卡 */
+.deviceCard {
+ width: 100%;
+ height: 150rpx;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ padding: 30rpx;
+ box-sizing: border-box;
+ border: 2rpx solid #E6E6EA;
+ border-radius: 16rpx;
+ background-color: #FFFFFF;
+ margin-bottom: 46rpx;
+
+ /* 设备图标占位 */
+ >view:nth-of-type(1) {
+ width: 90rpx;
+ height: 90rpx;
+ overflow: hidden;
+ margin-right: 24rpx;
+ border-radius: 24rpx;
+ background-color: red;
+ flex-shrink: 0;
+ }
+
+ /* 右侧信息 */
+ >view:nth-of-type(2) {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ /* 设备名 */
+ >view:nth-of-type(1) {
+ color: #252535;
+ height: 32rpx;
+ font-size: 32rpx;
+ font-weight: bold;
+ line-height: 32rpx;
+ margin-bottom: 16rpx;
+ }
+
+ /* 状态行 */
+ >view:nth-of-type(2) {
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+
+ >view {
+ width: 12rpx;
+ height: 12rpx;
+ border-radius: 50%;
+ margin-right: 14rpx;
+ background-color: #2AC79F;
+ }
+
+ >text {
+ color: #2AC79F;
+ height: 28rpx;
+ font-size: 28rpx;
+ font-weight: 500;
+ line-height: 28rpx;
+ }
+ }
+ }
+}
+
+/* idle / searching 两态:居中文案 */
+.wifiIdle,
+.wifiSearching {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #B6B6B6;
+ font-size: 32rpx;
+ line-height: 32rpx;
+}
+
+/* 附近WiFi 标题区:title 行 + 副标题 */
+.wifiHeader {
+ width: 100%;
+ padding: 0 12rpx;
+ box-sizing: border-box;
+
+ /* 标题行:附近WiFi + 可选「刷新」 */
+ >view:nth-of-type(1) {
+ width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24rpx;
+
+ >view:nth-of-type(1) {
+ color: #252535;
+ height: 36rpx;
+ font-size: 36rpx;
+ font-weight: bold;
+ line-height: 36rpx;
+ }
+
+ >view:nth-of-type(2) {
+ color: #1385FA;
+ height: 36rpx;
+ font-size: 28rpx;
+ font-weight: 500;
+ line-height: 36rpx;
+ }
+ }
+
+ /* 副标题 */
+ >view:nth-of-type(2) {
+ color: #B6B6B6;
+ height: 30rpx;
+ font-size: 28rpx;
+ line-height: 30rpx;
+ margin-bottom: 32rpx;
+ }
+}
+
+/* WiFi 列表:scroll-view Y 轴滚动,撑满剩余高度 */
+.wifiList {
+ width: 100%;
+ flex: 1;
+ min-height: 0;
+ padding: 0 12rpx;
+ box-sizing: border-box;
+}
+
+/* 列表项:普通态 */
+.wifiItem {
+ width: 100%;
+ height: 80rpx;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ margin-bottom: 32rpx;
+
+ /* 左侧灰底圆形图标占位 */
+ >view:nth-of-type(1) {
+ width: 80rpx;
+ height: 80rpx;
+ overflow: hidden;
+ margin-right: 24rpx;
+ border-radius: 50%;
+ background-color: #F7F7F7;
+ flex-shrink: 0;
+ }
+
+ /* WiFi 名称 */
+ >text {
+ flex: 1;
+ color: #252535;
+ height: 32rpx;
+ font-size: 32rpx;
+ font-weight: 500;
+ line-height: 32rpx;
+ }
+
+ /* 右箭头 */
+ >view:nth-of-type(2) {
+ width: 10rpx;
+ height: 18rpx;
+ background-color: #B6B6B6;
+ flex-shrink: 0;
+ }
+}
+
+/* 列表项:已连接态 */
+.wifiItem-connected {
+ /* 左侧图标不加底色圆,保留图标自身颜色 */
+ >view:nth-of-type(1) {
+ background-color: transparent;
+ }
+
+ >text {
+ color: #1385FA;
+ }
+
+ /* 右侧「已连接」+ 勾 */
+ >view:nth-of-type(2) {
+ width: auto;
+ height: auto;
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
+ background-color: transparent;
+
+ >text {
+ color: #2AC79F;
+ font-size: 24rpx;
+ font-weight: 500;
+ line-height: 24rpx;
+ margin-right: 5rpx;
+ }
+
+ >view {
+ width: 24rpx;
+ height: 24rpx;
+ border-radius: 50%;
+ background-color: #2AC79F;
+ }
+ }
+}
+
+/* 列表态底部「确认」按钮:贴底 */
+.wifiBtn {
+ width: 100%;
+ height: 120rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ >view {
+ color: #FFFFFF;
+ width: 580rpx;
+ height: 88rpx;
+ font-size: 32rpx;
+ font-weight: bold;
+ text-align: center;
+ line-height: 88rpx;
+ border-radius: 44rpx;
+ background-color: #1385FA;
+ }
+
+ .wifiBtn-disabled {
+ background-color: #A8C9F0;
+ }
+}
+
+/* 空态 */
+.wifiEmpty {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 39rpx 42rpx 0;
+ box-sizing: border-box;
+
+ >view {
+ width: 566rpx;
+ height: 499rpx;
+ border-radius: 16rpx;
+ background-color: #F5F8FF;
+ }
+
+ >text {
+ color: #1385FA;
+ font-size: 36rpx;
+ font-weight: bold;
+ line-height: 36rpx;
+ margin-top: 8rpx;
+ }
+}
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.wxml b/miniprogram/pages/connectedWifi/connectedWifi.wxml
index 6ca486b..94434d8 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.wxml
+++ b/miniprogram/pages/connectedWifi/connectedWifi.wxml
@@ -7,7 +7,7 @@
- WIFI 账号
+ {{selectedWifi.name}}
密码
@@ -35,56 +35,82 @@
- 取消
- 连接
+ 取消
+ 连接
+
-
-
+ {{currentDevice.name}}
+
+
+ 已连接
+
+
查找周边WiFi
+
搜索中...
+
-
-
+ 网络列表(请选择一个网络进行连接)
+
+
+
+
+
+ {{item.name}}
+
+ 已连接
+
+
+
+
+
+
+
+ {{item.name}}
+
+
+
+
+
-
-
+ 确认
+
+
-
+
+ 未查找到可用wifi,请重试
-