[AI Generated]: feat(Views): 新增连接WiFi页五态状态机及密码连接交互
This commit is contained in:
17792275749
@@ -34,10 +34,114 @@ Page({
|
|||||||
name: '',
|
name: '',
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 密码表单 */
|
/* 密码输入框值 */
|
||||||
form: {
|
selectWifiPWD: '',
|
||||||
password: '',
|
|
||||||
showPwd: false,
|
/* 密码框明文/密文切换: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',
|
||||||
|
})
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -3,13 +3,15 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
|
padding: 30rpx 30rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.setWifi {
|
.setWifi {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 60rpx 40rpx 0;
|
padding: 30rpx 10rpx 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -117,3 +119,260 @@
|
|||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 顶部已连接设备卡 */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<view>
|
<view>
|
||||||
<image src="/images/configureDevice/wifiPwd.png"/>
|
<image src="/images/configureDevice/wifiPwd.png"/>
|
||||||
</view>
|
</view>
|
||||||
<view>WIFI 账号</view>
|
<view>{{selectedWifi.name}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<view>密码</view>
|
<view>密码</view>
|
||||||
@@ -35,56 +35,82 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="setWifi-btn">
|
<view class="setWifi-btn">
|
||||||
<view>取消</view>
|
<view bind:tap="onCancelPwd">取消</view>
|
||||||
<view>连接</view>
|
<view bind:tap="onConfirmPwd">连接</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<block wx:else>
|
<block wx:else>
|
||||||
|
<!-- 顶部已连接设备卡 -->
|
||||||
<view class="deviceCard">
|
<view class="deviceCard">
|
||||||
<view></view>
|
<view></view>
|
||||||
<view>
|
<view>
|
||||||
<view></view>
|
<view>{{currentDevice.name}}</view>
|
||||||
<view></view>
|
<view>
|
||||||
|
<view></view>
|
||||||
|
<text>已连接</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<block wx:if="{{status === 'idle'}}">
|
<block wx:if="{{status === 'idle'}}">
|
||||||
<view class="wifiIdle">
|
<view class="wifiIdle">
|
||||||
查找周边WiFi
|
查找周边WiFi
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<block wx:if="{{status === 'searching'}}">
|
<block wx:if="{{status === 'searching'}}">
|
||||||
<view class="wifiSearching">
|
<view class="wifiSearching">
|
||||||
搜索中...
|
搜索中...
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<block wx:if="{{status === 'list'}}">
|
<block wx:if="{{status === 'list'}}">
|
||||||
<view class="wifiHeader">
|
<view class="wifiHeader">
|
||||||
<view>
|
<view>
|
||||||
<view>附近WiFi</view>
|
<view>附近WiFi</view>
|
||||||
</view>
|
</view>
|
||||||
<view>网络列表（请选择一个网络进行连接）</view>
|
<view>网络列表(请选择一个网络进行连接)</view>
|
||||||
</view>
|
|
||||||
<view class="wifiList">
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
<scroll-view class="wifiList" scroll-y>
|
||||||
|
<block wx:for="{{wifiList}}" wx:key="id">
|
||||||
|
<block wx:if="{{item.connected}}">
|
||||||
|
<view class="wifiItem wifiItem-connected" data-id="{{item.id}}" bind:tap="onTapWifi">
|
||||||
|
<view></view>
|
||||||
|
<text>{{item.name}}</text>
|
||||||
|
<view>
|
||||||
|
<text>已连接</text>
|
||||||
|
<view></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<view class="wifiItem" data-id="{{item.id}}" bind:tap="onTapWifi">
|
||||||
|
<view></view>
|
||||||
|
<text>{{item.name}}</text>
|
||||||
|
<view></view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
<view class="wifiBtn">
|
<view class="wifiBtn">
|
||||||
<view></view>
|
<view class="{{hasConnected ? '' : 'wifiBtn-disabled'}}" bind:tap="onConfirm">确认</view>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<block wx:if="{{status === 'empty'}}">
|
<block wx:if="{{status === 'empty'}}">
|
||||||
<view class="wifiHeader">
|
<view class="wifiHeader">
|
||||||
<view>
|
<view>
|
||||||
<view>附近WiFi</view>
|
<view>附近WiFi</view>
|
||||||
<view>刷新</view>
|
<view bind:tap="onRefresh">刷新</view>
|
||||||
</view>
|
</view>
|
||||||
<view>网络列表（请选择一个网络进行连接）</view>
|
<view>网络列表(请选择一个网络进行连接)</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="wifiEmpty">
|
<view class="wifiEmpty">
|
||||||
|
<view></view>
|
||||||
|
<text>未查找到可用wifi,请重试</text>
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user