[AI Generated]: refactor(Views): 重构连接设备页设备列表为统一循环并补全卡片样式
This commit is contained in:
@@ -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"> 台设备</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>
|
||||
|
||||
Reference in New Issue
Block a user