[AI Generated]: feat(Views): 新增连接设备页三态(idle/searching/found/empty)及登录跳转
This commit is contained in:
17792275749
@@ -1,4 +1,84 @@
|
||||
// 是否 mock 能搜索到设备,false 则走空状态
|
||||
const MOCK_HAS_DEVICES = true
|
||||
|
||||
// 模拟搜索耗时(毫秒)
|
||||
const MOCK_SEARCH_DURATION = 2000
|
||||
|
||||
Page({
|
||||
data: {},
|
||||
onLoad() {}
|
||||
data: {
|
||||
/**
|
||||
* 页面状态
|
||||
* - idle: 未搜索(进入页面默认态)
|
||||
* - searching:搜索中
|
||||
* - found: 搜索完成且有设备
|
||||
* - empty: 搜索完成但无设备
|
||||
*/
|
||||
status: 'idle',
|
||||
|
||||
/* 已连接的设备(null 表示没有) */
|
||||
connectedDevice: null,
|
||||
|
||||
/* 未连接的设备列表 */
|
||||
deviceList: [],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
/* 清除搜索定时器,防止页面卸载后还触发 setData */
|
||||
if (this._searchTimer) {
|
||||
clearTimeout(this._searchTimer)
|
||||
this._searchTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
/* 开始搜索 / 重新搜索 */
|
||||
onStartSearch() {
|
||||
this.setData({
|
||||
status: 'searching',
|
||||
connectedDevice: null,
|
||||
deviceList: [],
|
||||
})
|
||||
|
||||
/* 模拟搜索,后续接入蓝牙真实 API 时删除 */
|
||||
this._searchTimer = setTimeout(() => {
|
||||
if (MOCK_HAS_DEVICES) {
|
||||
this.setData({
|
||||
status: 'found',
|
||||
connectedDevice: {
|
||||
id: 'mock-connected',
|
||||
name: '智能体重秤 Pro',
|
||||
icon: '',
|
||||
},
|
||||
deviceList: [
|
||||
{ id: 'mock-1', name: '体重秤 Basic', icon: '' },
|
||||
{ id: 'mock-2', name: '体脂秤 Plus', icon: '' },
|
||||
],
|
||||
})
|
||||
} else {
|
||||
this.setData({ status: 'empty' })
|
||||
}
|
||||
}, MOCK_SEARCH_DURATION)
|
||||
},
|
||||
|
||||
/* 连接某台未连接设备 */
|
||||
onConnect(e) {
|
||||
const { id } = e.currentTarget.dataset
|
||||
console.log('连接设备:', id)
|
||||
/* TODO: 接入真实蓝牙连接逻辑 */
|
||||
},
|
||||
|
||||
/* 断开已连接设备 */
|
||||
onDisconnect() {
|
||||
console.log('断开连接')
|
||||
/* TODO: 接入真实蓝牙断开逻辑 */
|
||||
},
|
||||
|
||||
/* 查看帮助 */
|
||||
onOpenHelp() {
|
||||
console.log('查看帮助')
|
||||
/* TODO: 跳帮助页 */
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"navigationBarTitleText": "搜索设备",
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,272 @@
|
||||
/* 连接设备页 —— 三态(idle / searching / found / empty)共用 */
|
||||
.connected-device {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 48rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ripple {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 48rpx;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.help-link {
|
||||
color: #1385FA;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-device {
|
||||
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 三层同心圆动画占位(搜索中态后续接入波纹动画) */
|
||||
//.ripple {
|
||||
|
||||
///* 主按钮:开始搜索 / 重新搜索 */
|
||||
//.searchBtn {
|
||||
// margin-top: 40rpx;
|
||||
// width: 580rpx;
|
||||
// height: 88rpx;
|
||||
// line-height: 88rpx;
|
||||
// border-radius: 44rpx;
|
||||
// background-color: #1385FA;
|
||||
// color: #FFFFFF;
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 700;
|
||||
// text-align: center;
|
||||
//}
|
||||
//
|
||||
///* 帮助行 */
|
||||
//
|
||||
///* 搜索结果区:左标题 + 右计数 */
|
||||
//.resultHeader {
|
||||
// margin-top: 59rpx;
|
||||
// width: 689rpx;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
//
|
||||
// &__title {
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 700;
|
||||
// color: #252535;
|
||||
// line-height: 32rpx;
|
||||
// }
|
||||
//
|
||||
// &__count {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
//
|
||||
// &__countText {
|
||||
// font-size: 28rpx;
|
||||
// color: #808080;
|
||||
// line-height: 28rpx;
|
||||
// }
|
||||
//
|
||||
// &__countNum {
|
||||
// font-size: 28rpx;
|
||||
// font-weight: 500;
|
||||
// color: #1385FA;
|
||||
// line-height: 28rpx;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 空状态:暂未搜索到设备 */
|
||||
//.empty {
|
||||
// margin-top: 199rpx;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
//
|
||||
// &__image {
|
||||
// width: 193rpx;
|
||||
// height: 138rpx;
|
||||
// background-color: #F5F5F5;
|
||||
// border-radius: 16rpx;
|
||||
// }
|
||||
//
|
||||
// &__text {
|
||||
// margin-top: 40rpx;
|
||||
// font-size: 30rpx;
|
||||
// color: #808080;
|
||||
// line-height: 30rpx;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 已连接设备卡片 */
|
||||
//.connectedCard {
|
||||
// margin-top: 39rpx;
|
||||
// width: 690rpx;
|
||||
// height: 150rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// background-color: #FFFFFF;
|
||||
// border: 2rpx solid #E6E6EA;
|
||||
// border-radius: 16rpx;
|
||||
// box-sizing: border-box;
|
||||
// padding: 0 30rpx;
|
||||
//
|
||||
// &__info {
|
||||
// flex: 1;
|
||||
// margin-left: 24rpx;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
// }
|
||||
//
|
||||
// &__name {
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 500;
|
||||
// color: #252535;
|
||||
// line-height: 32rpx;
|
||||
// }
|
||||
//
|
||||
// &__status {
|
||||
// margin-top: 16rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
//
|
||||
// &__dot {
|
||||
// width: 12rpx;
|
||||
// height: 12rpx;
|
||||
// border-radius: 50%;
|
||||
// background-color: #2AC79F;
|
||||
// margin-right: 15rpx;
|
||||
// }
|
||||
//
|
||||
// &__statusText {
|
||||
// font-size: 28rpx;
|
||||
// font-weight: 500;
|
||||
// color: #2AC79F;
|
||||
// line-height: 28rpx;
|
||||
// }
|
||||
//
|
||||
// &__btn {
|
||||
// width: 120rpx;
|
||||
// height: 48rpx;
|
||||
// line-height: 44rpx;
|
||||
// text-align: center;
|
||||
// border: 2rpx solid #F24439;
|
||||
// border-radius: 8rpx;
|
||||
// color: #F24439;
|
||||
// font-size: 24rpx;
|
||||
// font-weight: 500;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 未连接设备列表 */
|
||||
//.deviceList {
|
||||
// margin-top: 24rpx;
|
||||
// width: 690rpx;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//}
|
||||
//
|
||||
///* 设备卡片(已连接 + 未连接通用图标样式) */
|
||||
//.deviceCard {
|
||||
// width: 690rpx;
|
||||
// height: 150rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// background-color: #FFFFFF;
|
||||
// border: 2rpx solid #E6E6EA;
|
||||
// border-radius: 16rpx;
|
||||
// box-sizing: border-box;
|
||||
// padding: 0 30rpx;
|
||||
// margin-bottom: 24rpx;
|
||||
//
|
||||
// &__icon {
|
||||
// width: 90rpx;
|
||||
// height: 90rpx;
|
||||
// border-radius: 24rpx;
|
||||
// background-color: rgba(19, 133, 250, 0.1);
|
||||
// flex-shrink: 0;
|
||||
// }
|
||||
//
|
||||
// &__name {
|
||||
// flex: 1;
|
||||
// margin-left: 23rpx;
|
||||
// font-size: 32rpx;
|
||||
// font-weight: 500;
|
||||
// color: #252535;
|
||||
// line-height: 32rpx;
|
||||
// }
|
||||
//
|
||||
// &__btn {
|
||||
// width: 88rpx;
|
||||
// height: 48rpx;
|
||||
// line-height: 48rpx;
|
||||
// text-align: center;
|
||||
// border-radius: 8rpx;
|
||||
// background-color: #2AC79F;
|
||||
// color: #FFFFFF;
|
||||
// font-size: 24rpx;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
///* 已连接卡片复用 deviceCard__icon 的尺寸 */
|
||||
//.connectedCard .deviceCard__icon {
|
||||
// width: 90rpx;
|
||||
// height: 90rpx;
|
||||
//}
|
||||
|
||||
@@ -1 +1,80 @@
|
||||
<view class="page">connectedDevice 占位</view>
|
||||
<view class="connected-device">
|
||||
|
||||
<!-- 三层同心圆动画占位 -->
|
||||
<view class="ripple"></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>
|
||||
|
||||
<!-- 搜索完成态:头部"搜索结果 / 发现 X 台设备" -->
|
||||
<block wx:if="{{ status === 'found' || status === 'empty' }}">
|
||||
<view class="search-device">
|
||||
<text class="search-device-title">搜索结果</text>
|
||||
<view class="search-device-count">
|
||||
<text class="resultHeader__countText">发现</text>
|
||||
<text class="resultHeader__countNum">{{ status === 'found' ? (deviceList.length + (connectedDevice ? 1 : 0)) : 0 }}</text>
|
||||
<text class="resultHeader__countText"> 台设备</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 空状态:暂未搜索到设备 -->
|
||||
<block wx:if="{{ status === 'empty' }}">
|
||||
<view class="empty">
|
||||
<view class="empty-image"></view>
|
||||
<view class="empty-text">暂未搜索到可用设备,请重新搜索</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 找到设备:已连接卡片 + 未连接列表 -->
|
||||
<block wx:if="{{ status === 'found' }}">
|
||||
|
||||
<!-- 已连接卡片 -->
|
||||
<view wx:if="{{ connectedDevice }}" class="connectedCard">
|
||||
<view class="deviceCard__icon"></view>
|
||||
<view class="connectedCard__info">
|
||||
<view class="connectedCard__name">{{ connectedDevice.name }}</view>
|
||||
<view class="connectedCard__status">
|
||||
<view class="connectedCard__dot"></view>
|
||||
<text class="connectedCard__statusText">已连接</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="connectedCard__btn" bind:tap="onDisconnect">断开连接</view>
|
||||
</view>
|
||||
|
||||
<!-- 未连接列表 -->
|
||||
<view class="deviceList">
|
||||
<view
|
||||
wx:for="{{ deviceList }}"
|
||||
wx:key="id"
|
||||
class="deviceCard"
|
||||
>
|
||||
<view class="deviceCard__icon"></view>
|
||||
<view class="deviceCard__name">{{ item.name }}</view>
|
||||
<view
|
||||
class="deviceCard__btn"
|
||||
data-id="{{ item.id }}"
|
||||
bind:tap="onConnect"
|
||||
>连接</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
.sub-title {
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
@@ -40,7 +40,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
.login-btn {
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
|
||||
@@ -4,6 +4,6 @@
|
||||
|
||||
<view class="login">
|
||||
<view class="title">智能体重秤</view>
|
||||
<view class="subTitle">设备智联 · 掌握健康</view>
|
||||
<view class="loginBtn" bind:tap="onLogin">微信一键登录</view>
|
||||
<view class="sub-title">设备智联 · 掌握健康</view>
|
||||
<view class="login-btn" bind:tap="onLogin">微信一键登录</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user