yuchunlei/bodyWeight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[AI Generated]: refactor(Views): 重构连接设备页设备列表为统一循环并补全卡片样式

Browse Source
This commit is contained in:
17792275749
2026-05-11 16:25:35 +08:00
parent 8b91edcef7
commit 640966ae61
5 changed files with 310 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/connectedDevice/connectedDevice.js
+16 -16
View File
@@ -15,10 +15,7 @@ Page({
*/
status: 'idle',
/* 已连接的设备(null 表示没有) */
connectedDevice: null,
/* 未连接的设备列表 */
/* 设备列表(包含已连接和未连接,每项含 connected: boolean) */
deviceList: [],
},
@@ -38,7 +35,6 @@ Page({
onStartSearch() {
this.setData({
status: 'searching',
connectedDevice: null,
deviceList: [],
})
@@ -47,14 +43,10 @@ Page({
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: '' },
{ id: 'mock-connected', name: '智能体重秤 Pro', icon: '', connected: true },
{ id: 'mock-1', name: '体重秤 Basic', icon: '', connected: false },
{ id: 'mock-2', name: '体脂秤 Plus', icon: '', connected: false },
],
})
} else {
@@ -63,16 +55,24 @@ Page({
}, MOCK_SEARCH_DURATION)
},
/* 连接某台未连接设备 */
/* 连接某台设备:同时只能一台已连接,自动断开其他设备 */
onConnect(e) {
const { id } = e.currentTarget.dataset
console.log('连接设备:', id)
const deviceList = this.data.deviceList.map(item => ({
...item,
connected: item.id === id,
}))
this.setData({ deviceList })
/* TODO: 接入真实蓝牙连接逻辑 */
},
/* 断开已连接设备 */
/* 断开当前已连接设备 */
onDisconnect() {
console.log('断开连接')
const deviceList = this.data.deviceList.map(item => ({
...item,
connected: false,
}))
this.setData({ deviceList })
/* TODO: 接入真实蓝牙断开逻辑 */
},
miniprogram/pages/connectedDevice/connectedDevice.less
+152 -2
View File
@@ -58,6 +58,7 @@
color: #808080;
font-size: 30rpx;
line-height: 30rpx;
margin-right: 8rpx;
}
.help-link {
@@ -68,11 +69,160 @@
}
.search-device {
width: 100%;
}
.search-device-header {
width: 100%;
height: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 38rpx;
.empty {
.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;
background-color: red;
}
.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;
}
}
}
}
}
miniprogram/pages/connectedDevice/connectedDevice.wxml
+45 -55
View File
@@ -23,62 +23,52 @@
</view>
<!-- 搜索结果模块:found / empty 时整体显示 -->
<view
wx:if="{{ status === 'found' || status === 'empty' }}"
class="search-device"
>
<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">{{ status === 'found' ? (deviceList.length + (connectedDevice ? 1 : 0)) : 0 }}</text>
<text class="count-text">&nbsp;台设备</text>
</view>
</view>
<!-- 头部:标题 + 计数 -->
<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>
<!-- 空状态 -->
<view wx:if="{{ status === 'empty' }}" class="empty">
<view class="empty-image"></view>
<view class="empty-text">暂未搜索到可用设备,请重新搜索</view>
</view>
<!-- 找到设备:已连接卡片 + 未连接列表 -->
<block wx:if="{{ status === 'found' }}">
<!-- 已连接卡片 -->
<view wx:if="{{ connectedDevice }}" class="connected-card">
<view class="card-icon"></view>
<view class="card-info">
<view class="card-name">{{ connectedDevice.name }}</view>
<view class="card-status">
<view class="card-dot"></view>
<text class="card-status-text">已连接</text>
</view>
</view>
<view class="card-btn-danger" bind:tap="onDisconnect">断开连接</view>
</view>
<!-- 未连接列表 -->
<view class="device-list">
<view
wx:for="{{ deviceList }}"
wx:key="id"
class="device-card"
>
<view class="card-icon"></view>
<view class="card-name">{{ item.name }}</view>
<view
class="card-btn-primary"
data-id="{{ item.id }}"
bind:tap="onConnect"
>连接</view>
</view>
</view>
</block>
</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="id">
<view class="device-card">
<view class="card-icon"></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" data-id="{{ item.id }}" bind:tap="onDisconnect">断开连接</view>
</block>
<block wx:else>
<view class="card-btn-primary" data-id="{{ item.id }}" bind:tap="onConnect">连接</view>
</block>
</view>
</block>
</view>
</block>
</view>
</block>
</view>