diff --git a/.idea/claudeCodeTabState.xml b/.idea/claudeCodeTabState.xml
deleted file mode 100644
index 14424ed..0000000
--- a/.idea/claudeCodeTabState.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.js b/miniprogram/pages/connectedWifi/connectedWifi.js
index 3b53721..4c78f1f 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.js
+++ b/miniprogram/pages/connectedWifi/connectedWifi.js
@@ -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' })
},
})
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.json b/miniprogram/pages/connectedWifi/connectedWifi.json
index a97367d..e98f212 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.json
+++ b/miniprogram/pages/connectedWifi/connectedWifi.json
@@ -1,3 +1,4 @@
{
+ "navigationBarTitleText": "WiFi连接",
"usingComponents": {}
}
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.less b/miniprogram/pages/connectedWifi/connectedWifi.less
index 74e7076..4c06954 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.less
+++ b/miniprogram/pages/connectedWifi/connectedWifi.less
@@ -1,121 +1,239 @@
-/* WiFi 配网页 —— 四态(idle / configuring / success / failed)共用 */
+/* WiFi 配网页 —— 五态(idle / searching / list / empty / password)共用 */
.connected-wifi {
width: 100%;
height: 100%;
- padding: 48rpx 30rpx 0;
+ padding: 30rpx 30rpx 0;
box-sizing: border-box;
+ background-color: #FFFFFF;
- .ripple {
- width: 300rpx;
- height: 300rpx;
- border-radius: 50%;
- margin: 0 auto 48rpx;
- background-color: red;
- }
-
- .hero {
- width: 300rpx;
- height: 300rpx;
- border-radius: 50%;
- margin: 0 auto 48rpx;
- background-color: rgba(19, 133, 250, 0.1);
- }
-
- .title {
- color: #252535;
- width: 100%;
- height: 36rpx;
- font-size: 36rpx;
- font-weight: bold;
- line-height: 36rpx;
- text-align: center;
- margin-bottom: 22rpx;
- }
-
- .sub-title {
- color: #808080;
- width: 100%;
- font-size: 30rpx;
- text-align: center;
- line-height: 42rpx;
- margin-bottom: 40rpx;
- }
-
- .wifi-form {
+ /* 顶部已连接设备卡:沿用 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;
- padding: 0 30rpx;
- margin-bottom: 32rpx;
+ margin-bottom: 47rpx;
- .form-row {
- width: 100%;
- height: 100rpx;
+ .card-icon {
+ width: 90rpx;
+ height: 90rpx;
+ overflow: hidden;
+ margin-right: 24rpx;
+ border-radius: 24rpx;
+ background-color: red;
+ }
+
+ .card-info {
+ flex: 1;
display: flex;
- align-items: center;
- border-bottom: 2rpx solid #F5F5F5;
+ flex-direction: column;
+ justify-content: center;
- &:last-child {
- border-bottom: none;
- }
-
- .form-label {
+ .card-name {
color: #252535;
- width: 160rpx;
- font-size: 30rpx;
- font-weight: 500;
- line-height: 30rpx;
- flex-shrink: 0;
+ height: 32rpx;
+ font-size: 32rpx;
+ font-weight: bold;
+ line-height: 32rpx;
+ margin-bottom: 16rpx;
}
- .form-input {
- flex: 1;
- color: #252535;
- font-size: 30rpx;
- line-height: 30rpx;
- }
+ .card-status {
+ display: flex;
+ align-items: center;
- .form-placeholder {
- color: #B0B0B0;
- font-size: 30rpx;
- }
+ .card-dot {
+ width: 12rpx;
+ height: 12rpx;
+ border-radius: 50%;
+ margin-right: 14rpx;
+ background-color: #2AC79F;
+ }
- .form-eye {
- color: #1385FA;
- font-size: 28rpx;
- line-height: 28rpx;
- padding-left: 24rpx;
- flex-shrink: 0;
+ .card-status-text {
+ color: #2AC79F;
+ height: 28rpx;
+ font-size: 28rpx;
+ font-weight: 500;
+ line-height: 28rpx;
+ }
}
}
}
- .result-success {
+ /* 附近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;
+ border-radius: 50%;
+ background-color: rgba(19, 133, 250, 0.1);
+ }
+
+ .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-bottom: 40rpx;
+ margin-top: 39rpx;
- .result-icon-success {
- width: 120rpx;
- height: 120rpx;
- border-radius: 50%;
- background-color: rgba(42, 199, 159, 0.1);
- margin-bottom: 24rpx;
+ .empty-image {
+ width: 566rpx;
+ height: 499rpx;
+ border-radius: 16rpx;
+ background-color: #F5F8FF;
}
- .result-text {
- color: #2AC79F;
- font-size: 30rpx;
- font-weight: 500;
- line-height: 30rpx;
+ .empty-text {
+ color: #1385FA;
+ font-size: 36rpx;
+ font-weight: bold;
+ line-height: 36rpx;
+ margin-top: 8rpx;
}
}
- .submit-btn {
+ /* 底部「确认」按钮:连接成功后才可点击 */
+ .confirm-btn {
color: #FFFFFF;
width: 580rpx;
height: 88rpx;
@@ -124,31 +242,137 @@
text-align: center;
line-height: 88rpx;
border-radius: 44rpx;
- margin: 0 auto 32rpx;
+ margin: 60rpx auto 32rpx;
background-color: #1385FA;
}
- .submit-btn-disabled {
+ .confirm-btn-disabled {
background-color: #A8C9F0;
}
- .help {
+ /* 密码输入态:整页独立布局 */
+ .password-page {
width: 100%;
- height: 30rpx;
- text-align: center;
- line-height: 30rpx;
- margin-bottom: 60rpx;
+ padding-top: 29rpx;
- .help-text {
- color: #808080;
- font-size: 30rpx;
- line-height: 30rpx;
+ .password-title {
+ color: #252535;
+ font-size: 36rpx;
+ font-weight: bold;
+ line-height: 36rpx;
+ padding-left: 11rpx;
}
- .help-link {
- color: #1385FA;
- font-size: 30rpx;
- line-height: 30rpx;
+ /* 已选 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;
+ }
}
}
}
diff --git a/miniprogram/pages/connectedWifi/connectedWifi.wxml b/miniprogram/pages/connectedWifi/connectedWifi.wxml
index 3eab3e0..46af73a 100644
--- a/miniprogram/pages/connectedWifi/connectedWifi.wxml
+++ b/miniprogram/pages/connectedWifi/connectedWifi.wxml
@@ -1,91 +1,111 @@
-
-
-
-
-
-
-
+
+
+
+ 输入WiFi密码
-
-
- {{
- status === 'idle' ? '为设备配置 WiFi' :
- status === 'configuring' ? '正在配网中...' :
- status === 'success' ? '配网成功' : '配网失败'
- }}
-
-
-
-
- {{
- status === 'idle' ? '请输入 2.4G WiFi 名称和密码,确保设备处于配网状态' :
- status === 'configuring' ? '请保持设备与手机靠近,正在传输配网信息' :
- status === 'success' ? '设备已成功连入 WiFi 网络,可正常使用' : '请检查 WiFi 密码或设备状态后重试'
- }}
-
-
-
-
-
-
-
-
- WiFi 名称
-
+
+
+
+ {{ selectedWifi.name }}
+
-
-
- WiFi 密码
+
+
+ 密码
-
- {{ form.showPwd ? '隐藏' : '显示' }}
+
+
+
+
+
+ 取消
+ 连接
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentDevice.name }}
+
+
+ 已连接
-
-
-
-
-
- 设备已成功连接到 {{ form.ssid || '当前 WiFi' }}
+
+
+
+
+
+ 网络列表(
+ 请选择一个网络进行连接
+ )
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+ 已连接
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
+
+
+
+ 未查找到可用wifi,请重试
+
+
+
+
+
+ 确认
-
-
-
- {{
- status === 'idle' ? '开始配网' :
- status === 'configuring' ? '配网中...' :
- status === 'success' ? '完成' : '重新配网'
- }}
-
-
-
-
- 设备无法连接 WiFi?
- 查看帮助
-