[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' })
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationBarTitleText": "WiFi连接",
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,91 +1,111 @@
|
||||
<view class="connected-wifi">
|
||||
|
||||
<!-- 顶部装饰:configuring 显示三层同心圆动画;其余状态显示静态占位图 -->
|
||||
<block wx:if="{{ status === 'configuring' }}">
|
||||
<view class="ripple"></view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="hero"></view>
|
||||
</block>
|
||||
<!-- 密码输入态:整页覆盖,独立布局 -->
|
||||
<block wx:if="{{ status === 'password' }}">
|
||||
<view class="password-page">
|
||||
<view class="password-title">输入WiFi密码</view>
|
||||
|
||||
<!-- 主标题:随状态切换 -->
|
||||
<view class="title">
|
||||
{{
|
||||
status === 'idle' ? '为设备配置 WiFi' :
|
||||
status === 'configuring' ? '正在配网中...' :
|
||||
status === 'success' ? '配网成功' : '配网失败'
|
||||
}}
|
||||
</view>
|
||||
|
||||
<!-- 副标题:随状态切换 -->
|
||||
<view class="sub-title">
|
||||
{{
|
||||
status === 'idle' ? '请输入 2.4G WiFi 名称和密码,确保设备处于配网状态' :
|
||||
status === 'configuring' ? '请保持设备与手机靠近,正在传输配网信息' :
|
||||
status === 'success' ? '设备已成功连入 WiFi 网络,可正常使用' : '请检查 WiFi 密码或设备状态后重试'
|
||||
}}
|
||||
</view>
|
||||
|
||||
<!-- 配网表单:idle / configuring / failed 时显示 -->
|
||||
<block wx:if="{{ status !== 'success' }}">
|
||||
<view class="wifi-form">
|
||||
|
||||
<!-- WiFi 名称行 -->
|
||||
<view class="form-row">
|
||||
<text class="form-label">WiFi 名称</text>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="请输入 WiFi 名称"
|
||||
placeholder-class="form-placeholder"
|
||||
value="{{ form.ssid }}"
|
||||
disabled="{{ status === 'configuring' }}"
|
||||
bindinput="onInputSsid"
|
||||
/>
|
||||
<!-- 已选 WiFi 行 -->
|
||||
<view class="password-ssid">
|
||||
<view class="password-ssid-icon"></view>
|
||||
<text class="password-ssid-name">{{ selectedWifi.name }}</text>
|
||||
<view class="password-ssid-close" bind:tap="onCancelPwd"></view>
|
||||
</view>
|
||||
|
||||
<!-- WiFi 密码行 -->
|
||||
<view class="form-row">
|
||||
<text class="form-label">WiFi 密码</text>
|
||||
<!-- 密码输入行 -->
|
||||
<view class="password-input-row">
|
||||
<text class="password-label">密码</text>
|
||||
<input
|
||||
class="form-input"
|
||||
class="password-input"
|
||||
password="{{ !form.showPwd }}"
|
||||
placeholder="请输入 WiFi 密码"
|
||||
placeholder-class="form-placeholder"
|
||||
placeholder="输入您的wifi密码"
|
||||
placeholder-class="password-placeholder"
|
||||
value="{{ form.password }}"
|
||||
disabled="{{ status === 'configuring' }}"
|
||||
bindinput="onInputPwd"
|
||||
/>
|
||||
<view class="form-eye" bind:tap="onTogglePwd">
|
||||
{{ form.showPwd ? '隐藏' : '显示' }}
|
||||
<view class="password-eye" bind:tap="onTogglePwd"></view>
|
||||
</view>
|
||||
|
||||
<!-- 取消 / 连接 双按钮 -->
|
||||
<view class="password-actions">
|
||||
<view class="btn-ghost" bind:tap="onCancelPwd">取消</view>
|
||||
<view class="btn-primary" bind:tap="onConfirmPwd">连接</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 列表 / 空态:共用顶部设备卡 + 标题行 -->
|
||||
<block wx:if="{{ status === 'list' || status === 'empty' }}">
|
||||
|
||||
<!-- 顶部设备卡:始终显示"已连接" -->
|
||||
<view class="device-card">
|
||||
<view class="card-icon"></view>
|
||||
<view class="card-info">
|
||||
<view class="card-name">{{ currentDevice.name }}</view>
|
||||
<view class="card-status">
|
||||
<view class="card-dot"></view>
|
||||
<text class="card-status-text">已连接</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 成功结果区:仅 success 显示 -->
|
||||
<block wx:if="{{ status === 'success' }}">
|
||||
<view class="result-success">
|
||||
<view class="result-icon-success"></view>
|
||||
<view class="result-text">设备已成功连接到 {{ form.ssid || '当前 WiFi' }}</view>
|
||||
<!-- 附近WiFi 标题行 + 右侧「刷新」 -->
|
||||
<view class="wifi-header">
|
||||
<text class="wifi-title">附近WiFi</text>
|
||||
<view class="wifi-refresh" bind:tap="onRefresh">
|
||||
<view class="wifi-refresh-icon"></view>
|
||||
<text class="wifi-refresh-text">刷新</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 副标题 -->
|
||||
<view class="wifi-subtitle">
|
||||
<text class="wifi-subtitle-text">网络列表(</text>
|
||||
<text class="wifi-subtitle-tip">请选择一个网络进行连接</text>
|
||||
<text class="wifi-subtitle-text">)</text>
|
||||
</view>
|
||||
|
||||
<!-- 列表态 -->
|
||||
<block wx:if="{{ status === 'list' }}">
|
||||
<view class="wifi-list">
|
||||
<block wx:for="{{ wifiList }}" wx:key="id">
|
||||
<!-- 已连接项:蓝色文字 + 右侧已连接勾 -->
|
||||
<block wx:if="{{ item.connected }}">
|
||||
<view class="wifi-item wifi-item-connected" data-id="{{ item.id }}" bind:tap="onTapWifi">
|
||||
<view class="wifi-item-icon-connected"></view>
|
||||
<text class="wifi-item-name-connected">{{ item.name }}</text>
|
||||
<view class="wifi-item-tag">
|
||||
<text class="wifi-item-tag-text">已连接</text>
|
||||
<view class="wifi-item-tag-check"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 普通项:灰底圆形图标 + 右箭头 -->
|
||||
<block wx:else>
|
||||
<view class="wifi-item" data-id="{{ item.id }}" bind:tap="onTapWifi">
|
||||
<view class="wifi-item-icon"></view>
|
||||
<text class="wifi-item-name">{{ item.name }}</text>
|
||||
<view class="wifi-item-arrow"></view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 空态 -->
|
||||
<block wx:if="{{ status === 'empty' }}">
|
||||
<view class="empty">
|
||||
<view class="empty-image"></view>
|
||||
<view class="empty-text">未查找到可用wifi,请重试</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 底部「确认」按钮:必须连接成功一个 WiFi 后才可点击 -->
|
||||
<view
|
||||
class="confirm-btn {{ hasConnected ? '' : 'confirm-btn-disabled' }}"
|
||||
bind:tap="onConfirm"
|
||||
>
|
||||
确认
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 主按钮:文案与可用状态随 status 切换 -->
|
||||
<view
|
||||
class="submit-btn {{ status === 'configuring' ? 'submit-btn-disabled' : '' }}"
|
||||
bind:tap="onSubmit"
|
||||
>
|
||||
{{
|
||||
status === 'idle' ? '开始配网' :
|
||||
status === 'configuring' ? '配网中...' :
|
||||
status === 'success' ? '完成' : '重新配网'
|
||||
}}
|
||||
</view>
|
||||
|
||||
<!-- 帮助文案 -->
|
||||
<view class="help">
|
||||
<text class="help-text">设备无法连接 WiFi?</text>
|
||||
<text class="help-link" bind:tap="onOpenHelp">查看帮助</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user