feat(device): 新增搜索设备与 WiFi 配网页面，暂用假数据填充
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
17792275749
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
3c62c31b5d
commit
7105363e13
@@ -1,8 +1,10 @@
|
|||||||
{
|
{
|
||||||
"pages": [
|
"pages": [
|
||||||
"pages/home/home",
|
"pages/connectedDevice/connectedDevice",
|
||||||
"pages/login/login",
|
"pages/login/login",
|
||||||
"pages/supplementPersonal/supplementPersonal",
|
"pages/supplementPersonal/supplementPersonal",
|
||||||
|
"pages/connectedWifi/connectedWifi",
|
||||||
|
"pages/home/home",
|
||||||
"pages/equipment/equipment",
|
"pages/equipment/equipment",
|
||||||
"pages/data/data",
|
"pages/data/data",
|
||||||
"pages/my/my"
|
"pages/my/my"
|
||||||
@@ -12,8 +14,8 @@
|
|||||||
},
|
},
|
||||||
"window": {},
|
"window": {},
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"color": "#999999",
|
"color": "#808080",
|
||||||
"selectedColor": "#000000",
|
"selectedColor": "#1385FA",
|
||||||
"backgroundColor": "#ffffff",
|
"backgroundColor": "#ffffff",
|
||||||
"borderStyle": "black",
|
"borderStyle": "black",
|
||||||
"list": [
|
"list": [
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 976 B |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {},
|
||||||
|
"navigationBarTitleText": "搜索设备",
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
@@ -0,0 +1,285 @@
|
|||||||
|
/* 连接设备页 —— 三态(idle / searching / found / empty)共用 */
|
||||||
|
.connected-device {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 48rpx 30rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
/* 三层同心圆波纹动画 */
|
||||||
|
.ripple {
|
||||||
|
position: relative;
|
||||||
|
width: 300rpx;
|
||||||
|
height: 300rpx;
|
||||||
|
margin: 0 auto 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* 波纹圆环：默认隐藏，仅在 .ripple--active 时播放动画 */
|
||||||
|
.ripple-ring {
|
||||||
|
position: absolute;
|
||||||
|
width: 300rpx;
|
||||||
|
height: 300rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #1385FA;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ripple--active {
|
||||||
|
.ripple-ring {
|
||||||
|
animation: ripple-expand 2.4s ease-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ripple-ring--delay1 {
|
||||||
|
animation-delay: 0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ripple-ring--delay2 {
|
||||||
|
animation-delay: 1.6s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 中心实心圆 + 图标 */
|
||||||
|
.ripple-core {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #1385FA;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ripple-expand {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.46);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
height: 30rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: 580rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 88rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
margin: 0 auto 32rpx;
|
||||||
|
background-color: #1385FA;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .help {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 30rpx;
|
||||||
|
// text-align: center;
|
||||||
|
// line-height: 30rpx;
|
||||||
|
// margin-bottom: 60rpx;
|
||||||
|
|
||||||
|
// .help-text {
|
||||||
|
// color: #808080;
|
||||||
|
// font-size: 30rpx;
|
||||||
|
// line-height: 30rpx;
|
||||||
|
// margin-right: 8rpx;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .help-link {
|
||||||
|
// color: #1385FA;
|
||||||
|
// font-size: 30rpx;
|
||||||
|
// line-height: 30rpx;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
.search-device {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.search-device-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 38rpx;
|
||||||
|
|
||||||
|
.search-device-title {
|
||||||
|
color: #252535;
|
||||||
|
height: 32rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-device-count {
|
||||||
|
height: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
.count-text {
|
||||||
|
color: #808080;
|
||||||
|
height: 32rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-num {
|
||||||
|
color: #1385FA;
|
||||||
|
height: 32rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 32rpx;
|
||||||
|
padding: 0 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 160rpx;
|
||||||
|
|
||||||
|
.empty-image {
|
||||||
|
width: 193rpx;
|
||||||
|
height: 138rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
color: #808080;
|
||||||
|
width: 100%;
|
||||||
|
height: 30rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-list {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.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: 24rpx;
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
color: #252535;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 32rpx;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-status {
|
||||||
|
margin-top: 18rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.card-dot {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #2AC79F;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-status-text {
|
||||||
|
color: #2AC79F;
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-btn-primary {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
width: 88rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
line-height: 48rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background-color: #2AC79F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-btn-danger {
|
||||||
|
color: #F24439;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: center;
|
||||||
|
border: 2rpx solid #F24439;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
/** 展示用设备项 */
|
||||||
|
interface DeviceItem {
|
||||||
|
name: string
|
||||||
|
connected: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 页面状态 */
|
||||||
|
type DeviceStatus = 'idle' | 'searching' | 'found' | 'empty'
|
||||||
|
|
||||||
|
/** 假设备数据 */
|
||||||
|
const MOCK_DEVICES: DeviceItem[] = [
|
||||||
|
{ name: '乐福体脂秤 Pro', connected: false },
|
||||||
|
{ name: '乐福体脂秤 Air', connected: false },
|
||||||
|
{ name: '乐福体脂秤 Mini', connected: false },
|
||||||
|
]
|
||||||
|
|
||||||
|
/** 扫描定时器 */
|
||||||
|
let _searchTimer: number | null = null
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
status: 'idle' as DeviceStatus,
|
||||||
|
deviceList: [] as DeviceItem[],
|
||||||
|
},
|
||||||
|
|
||||||
|
onHide() {
|
||||||
|
this._clearSearchTimer()
|
||||||
|
},
|
||||||
|
|
||||||
|
onUnload() {
|
||||||
|
this._clearSearchTimer()
|
||||||
|
},
|
||||||
|
|
||||||
|
_clearSearchTimer() {
|
||||||
|
if (_searchTimer !== null) {
|
||||||
|
clearTimeout(_searchTimer)
|
||||||
|
_searchTimer = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 点击「开始搜索 / 重新搜索」：模拟扫描 */
|
||||||
|
onStartSearch() {
|
||||||
|
this._clearSearchTimer()
|
||||||
|
this.setData({ status: 'searching', deviceList: [] })
|
||||||
|
_searchTimer = setTimeout(() => {
|
||||||
|
this.setData({
|
||||||
|
status: 'found',
|
||||||
|
deviceList: MOCK_DEVICES.map(item => ({ ...item })),
|
||||||
|
})
|
||||||
|
}, 1500)
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 点击整张卡片：已连接 → 跳转配网页；未连接 → 走连接流程 */
|
||||||
|
onTapCard(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const connected = e.currentTarget.dataset.connected as boolean
|
||||||
|
if (connected) {
|
||||||
|
wx.navigateTo({ url: '/pages/connectedWifi/connectedWifi' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.onConnect(e)
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 模拟连接指定设备 */
|
||||||
|
onConnect(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const index = e.currentTarget.dataset.index as number
|
||||||
|
const list = this.data.deviceList.map((item, i) => ({
|
||||||
|
...item,
|
||||||
|
connected: i === index,
|
||||||
|
}))
|
||||||
|
this.setData({ deviceList: list })
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 断开当前连接 */
|
||||||
|
onDisconnect() {
|
||||||
|
const list = this.data.deviceList.map(item => ({ ...item, connected: false }))
|
||||||
|
this.setData({ deviceList: list })
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 查看帮助 */
|
||||||
|
onOpenHelp() {
|
||||||
|
wx.showToast({ title: '请确保设备已开机且在附近', icon: 'none' })
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<view class="connected-device">
|
||||||
|
|
||||||
|
<!-- 三层同心圆波纹动画：仅在非 idle（已点击开始搜索）时播放 -->
|
||||||
|
<view class="ripple {{ status === 'idle' ? '' : 'ripple--active' }}">
|
||||||
|
<view class="ripple-ring"></view>
|
||||||
|
<view class="ripple-ring ripple-ring--delay1"></view>
|
||||||
|
<view class="ripple-ring ripple-ring--delay2"></view>
|
||||||
|
<view class="ripple-core">
|
||||||
|
<image src="/images/connectedDevice/icon.png" mode=""/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<view class="title">
|
||||||
|
{{ status === 'idle' ? '搜索附近设备' : '搜索附近设备中...' }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<view class="sub-title">请确保蓝牙已开启，设备处于待机状态</view>
|
||||||
|
|
||||||
|
<!-- 主按钮:idle 显示开始搜索,其他显示重新搜索 -->
|
||||||
|
<view class="search-btn" bind:tap="onStartSearch">
|
||||||
|
{{ status === 'idle' ? '开始搜索' : '重新搜索' }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 帮助文案 -->
|
||||||
|
<!-- <view class="help">
|
||||||
|
<text class="help-text">无法配对设备?</text>
|
||||||
|
<text class="help-link" bind:tap="onOpenHelp">查看帮助</text>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<!-- 搜索结果模块:found / empty 时整体显示 -->
|
||||||
|
<block wx:if="{{ status === 'found' || status === 'empty' }}">
|
||||||
|
<view class="search-device">
|
||||||
|
|
||||||
|
<!-- 头部:标题 + 计数 -->
|
||||||
|
<view class="search-device-header">
|
||||||
|
<text class="search-device-title">搜索结果</text>
|
||||||
|
<view class="search-device-count">
|
||||||
|
<text class="count-text">发现</text>
|
||||||
|
<text class="count-num">{{ deviceList.length }}</text>
|
||||||
|
<text class="count-text">台设备</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<block wx:if="{{ status === 'empty' }}">
|
||||||
|
<view class="empty">
|
||||||
|
<view class="empty-image"></view>
|
||||||
|
<view class="empty-text">暂未搜索到可用设备,请重新搜索</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<!-- 找到设备:统一循环,内部按 connected 切换 UI -->
|
||||||
|
<block wx:if="{{ status === 'found' }}">
|
||||||
|
<view class="device-list">
|
||||||
|
<block wx:for="{{ deviceList }}" wx:key="name">
|
||||||
|
<view class="device-card" data-index="{{ index }}" data-connected="{{ item.connected }}" bind:tap="onTapCard">
|
||||||
|
<view class="card-icon">
|
||||||
|
<image src="/images/device/{{ item.name }}.png" mode="aspectFit" style="width:100%;height:100%;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="card-info">
|
||||||
|
<view class="card-name">{{ item.name }}</view>
|
||||||
|
<block wx:if="{{ item.connected }}">
|
||||||
|
<view class="card-status">
|
||||||
|
<view class="card-dot"></view>
|
||||||
|
<text class="card-status-text">已连接</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<block wx:if="{{ item.connected }}">
|
||||||
|
<view class="card-btn-danger" catch:tap="onDisconnect">断开连接</view>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<view class="card-btn-primary" data-index="{{ index }}" catch:tap="onConnect">连接</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"usingComponents": {},
|
||||||
|
"navigationBarTitleText": "WiFi连接",
|
||||||
|
"navigationBarTextStyle": "black",
|
||||||
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
|
}
|
||||||
@@ -0,0 +1,389 @@
|
|||||||
|
.connectedWifi {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
padding: 30rpx 30rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setWifi {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 30rpx 10rpx 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部已连接设备卡 */
|
||||||
|
.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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&--green { background-color: #2AC79F; }
|
||||||
|
&--red { background-color: #F24439; }
|
||||||
|
&--gray { background-color: #999999; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
height: 28rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 28rpx;
|
||||||
|
|
||||||
|
&--green { color: #2AC79F; }
|
||||||
|
&--red { color: #F24439; }
|
||||||
|
&--gray { color: #999999; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
&::after {
|
||||||
|
right: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表项:普通态 */
|
||||||
|
.wifiItem {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
|
||||||
|
/* 左侧 wifi 图标容器 */
|
||||||
|
>view:nth-of-type(1) {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* WiFi 名称 */
|
||||||
|
>text {
|
||||||
|
flex: 1;
|
||||||
|
color: #252535;
|
||||||
|
height: 32rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右箭头 */
|
||||||
|
>view:nth-of-type(2) {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表项:已连接态 */
|
||||||
|
.wifiItem-connected {
|
||||||
|
|
||||||
|
>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: 20rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表态底部「确认」按钮:贴底 */
|
||||||
|
.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;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #F5F8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
>text {
|
||||||
|
color: #1385FA;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 36rpx;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
interface WifiItem {
|
||||||
|
ssid: string
|
||||||
|
connected: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type WifiStatus = 'idle' | 'searching' | 'list' | 'empty' | 'password' | 'configuring'
|
||||||
|
type BleStatus = 'connected' | 'failed' | 'connecting'
|
||||||
|
|
||||||
|
/** 假 WiFi 列表 */
|
||||||
|
const MOCK_WIFI: WifiItem[] = [
|
||||||
|
{ ssid: 'TP-LINK_5G_8A3C', connected: false },
|
||||||
|
{ ssid: 'Home_WiFi', connected: false },
|
||||||
|
{ ssid: 'Xiaomi_1234', connected: false },
|
||||||
|
]
|
||||||
|
|
||||||
|
/** 搜索 / 配网定时器 */
|
||||||
|
let _searchTimer: number | null = null
|
||||||
|
let _configTimer: number | null = null
|
||||||
|
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
status: 'idle' as WifiStatus,
|
||||||
|
deviceName: '智能体重秤',
|
||||||
|
bleStatus: 'connected' as BleStatus,
|
||||||
|
wifiList: [] as WifiItem[],
|
||||||
|
hasConnected: false,
|
||||||
|
selectedSsid: '',
|
||||||
|
selectWifiPWD: '',
|
||||||
|
type: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.onStartSearch()
|
||||||
|
},
|
||||||
|
|
||||||
|
onUnload() {
|
||||||
|
wx.hideLoading()
|
||||||
|
this._clearTimers()
|
||||||
|
},
|
||||||
|
|
||||||
|
_clearTimers() {
|
||||||
|
if (_searchTimer !== null) { clearTimeout(_searchTimer); _searchTimer = null }
|
||||||
|
if (_configTimer !== null) { clearTimeout(_configTimer); _configTimer = null }
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 模拟获取 WiFi 列表 */
|
||||||
|
onStartSearch() {
|
||||||
|
if (_searchTimer !== null) { clearTimeout(_searchTimer); _searchTimer = null }
|
||||||
|
this.setData({ status: 'searching', wifiList: [] })
|
||||||
|
wx.showLoading({ title: '正在获取 WiFi 列表...', mask: true })
|
||||||
|
_searchTimer = setTimeout(() => {
|
||||||
|
wx.hideLoading()
|
||||||
|
this.setData({
|
||||||
|
status: 'list',
|
||||||
|
wifiList: MOCK_WIFI.map(item => ({ ...item })),
|
||||||
|
})
|
||||||
|
}, 1200)
|
||||||
|
},
|
||||||
|
|
||||||
|
onRefresh() {
|
||||||
|
this.onStartSearch()
|
||||||
|
},
|
||||||
|
|
||||||
|
onTapWifi(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const ssid = e.currentTarget.dataset.ssid as string
|
||||||
|
const target = this.data.wifiList.find(item => item.ssid === ssid)
|
||||||
|
if (!target || target.connected) return
|
||||||
|
this.setData({ status: 'password', selectedSsid: ssid, selectWifiPWD: '', type: true })
|
||||||
|
},
|
||||||
|
|
||||||
|
passwordInput(e: WechatMiniprogram.Input) {
|
||||||
|
this.setData({ selectWifiPWD: e.detail.value })
|
||||||
|
},
|
||||||
|
|
||||||
|
inputTypeChange() {
|
||||||
|
this.setData({ type: !this.data.type })
|
||||||
|
},
|
||||||
|
|
||||||
|
onCancelPwd() {
|
||||||
|
this.setData({ status: 'list', selectedSsid: '', selectWifiPWD: '' })
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 模拟配网 */
|
||||||
|
onConfirmPwd() {
|
||||||
|
const { selectedSsid, selectWifiPWD } = this.data
|
||||||
|
if (!selectedSsid) return
|
||||||
|
this.setData({ status: 'configuring' })
|
||||||
|
wx.showLoading({ title: '正在配网...', mask: true })
|
||||||
|
_configTimer = setTimeout(() => {
|
||||||
|
wx.hideLoading()
|
||||||
|
this.setData({
|
||||||
|
status: 'list',
|
||||||
|
wifiList: this.data.wifiList.map(item => ({ ...item, connected: item.ssid === selectedSsid })),
|
||||||
|
hasConnected: true,
|
||||||
|
selectedSsid: '',
|
||||||
|
selectWifiPWD: '',
|
||||||
|
})
|
||||||
|
}, 1500)
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm() {
|
||||||
|
if (!this.data.hasConnected) return
|
||||||
|
wx.navigateTo({ url: '/pages/supplementPersonal/supplementPersonal' })
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
<view class="connectedWifi">
|
||||||
|
<block wx:if="{{status === 'password'}}">
|
||||||
|
<view class="setWifi">
|
||||||
|
<view class="setWifi-title">输入Wi-Fi密码</view>
|
||||||
|
<view class="setWifi-form">
|
||||||
|
<view>
|
||||||
|
<view>
|
||||||
|
<image src="/images/connectedWifi/wifiPwd.png"/>
|
||||||
|
</view>
|
||||||
|
<view>{{selectedSsid}}</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view>密码</view>
|
||||||
|
<view>
|
||||||
|
<block wx:if="{{type}}">
|
||||||
|
<input
|
||||||
|
password="{{true}}"
|
||||||
|
value="{{selectWifiPWD}}"
|
||||||
|
bind:input="passwordInput"
|
||||||
|
placeholder="输入您的wi-fi密码"
|
||||||
|
placeholder-class="placeholderClass"/>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<input
|
||||||
|
password="{{false}}"
|
||||||
|
value="{{selectWifiPWD}}"
|
||||||
|
bind:input="passwordInput"
|
||||||
|
placeholder="输入您的wi-fi密码"
|
||||||
|
placeholder-class="placeholderClass"/>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view bind:tap="inputTypeChange">
|
||||||
|
<image src="/images/connectedWifi/{{type ? 'open' : 'close'}}.png"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="setWifi-btn">
|
||||||
|
<view bind:tap="onCancelPwd">取消</view>
|
||||||
|
<view bind:tap="onConfirmPwd">连接</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block wx:else>
|
||||||
|
<!-- 顶部已连接设备卡 -->
|
||||||
|
<view class="deviceCard">
|
||||||
|
<view class="card-icon">
|
||||||
|
<image src="/images/device/{{deviceName}}.png" mode="aspectFit" style="width:100%;height:100%;"></image>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view>{{deviceName}}</view>
|
||||||
|
<view>
|
||||||
|
<block wx:if="{{bleStatus === 'connected'}}">
|
||||||
|
<view class="status-dot status-dot--green"></view>
|
||||||
|
<text class="status-text status-text--green">已连接</text>
|
||||||
|
</block>
|
||||||
|
<block wx:elif="{{bleStatus === 'failed'}}">
|
||||||
|
<view class="status-dot status-dot--red"></view>
|
||||||
|
<text class="status-text status-text--red">连接断开</text>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<view class="status-dot status-dot--gray"></view>
|
||||||
|
<text class="status-text status-text--gray">连接中...</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<block wx:if="{{status === 'idle'}}">
|
||||||
|
<view class="wifiIdle">
|
||||||
|
查找周边WiFi
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block wx:if="{{status === 'searching'}}">
|
||||||
|
<view class="wifiSearching">
|
||||||
|
搜索中...
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block wx:if="{{status === 'list'}}">
|
||||||
|
<view class="wifiHeader">
|
||||||
|
<view>
|
||||||
|
<view>附近WiFi</view>
|
||||||
|
</view>
|
||||||
|
<view>网络列表(请选择一个网络进行连接)</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view class="wifiList" scroll-y>
|
||||||
|
<block wx:for="{{wifiList}}" wx:key="ssid">
|
||||||
|
<block wx:if="{{item.connected}}">
|
||||||
|
<view class="wifiItem wifiItem-connected" data-ssid="{{item.ssid}}" bind:tap="onTapWifi">
|
||||||
|
<view>
|
||||||
|
<image src="/images/connectedWifi/wifi.png" mode="aspectFit"/>
|
||||||
|
</view>
|
||||||
|
<text>{{item.ssid}}</text>
|
||||||
|
<view>
|
||||||
|
<text>已连接</text>
|
||||||
|
<view class="arrow"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<view class="wifiItem" data-ssid="{{item.ssid}}" bind:tap="onTapWifi">
|
||||||
|
<view>
|
||||||
|
<image src="/images/connectedWifi/wifi.png" mode="aspectFit"/>
|
||||||
|
</view>
|
||||||
|
<text>{{item.ssid}}</text>
|
||||||
|
<view class="arrow"></view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="wifiBtn">
|
||||||
|
<view class="{{hasConnected ? '' : 'wifiBtn-disabled'}}" bind:tap="onConfirm">确认</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
<block wx:if="{{status === 'empty'}}">
|
||||||
|
<view class="wifiHeader">
|
||||||
|
<view>
|
||||||
|
<view>附近WiFi</view>
|
||||||
|
<view bind:tap="onRefresh">刷新</view>
|
||||||
|
</view>
|
||||||
|
<view>网络列表(请选择一个网络进行连接)</view>
|
||||||
|
</view>
|
||||||
|
<view class="wifiEmpty">
|
||||||
|
<view>
|
||||||
|
<image src="/images/connectedWifi/noData.png" mode="aspectFit"/>
|
||||||
|
</view>
|
||||||
|
<text>未查找到可用wifi,请重试</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
Reference in New Issue
Block a user