111 lines
4.1 KiB
Plaintext
111 lines
4.1 KiB
Plaintext
<view class="container">
|
|
<!-- 顶部标题栏 -->
|
|
<view class="header">
|
|
<view class="back-btn" bindtap="goBack">
|
|
<text class="back-icon">←</text>
|
|
<text class="back-text">返回</text>
|
|
</view>
|
|
<text class="title">蓝牙设备搜索</text>
|
|
<button
|
|
class="refresh-btn"
|
|
bindtap="refreshDevices"
|
|
disabled="{{searching}}"
|
|
hover-class="btn-hover"
|
|
loading="{{searching}}"
|
|
>
|
|
{{searching ? '搜索中...' : '刷新'}}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 搜索状态提示 -->
|
|
<view class="status-bar">
|
|
<text class="status-indicator {{searching ? 'searching' : 'completed'}}">●</text>
|
|
<text class="status-text">
|
|
{{searching ? '正在搜索蓝牙设备...' : '搜索完成'}}
|
|
</text>
|
|
<text class="search-count" wx:if="{{!searching && devices.length > 0}}">
|
|
找到 {{devices.length}} 个设备
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 搜索进度条 -->
|
|
<view class="progress-container" wx:if="{{searching}}">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" style="width: {{searchProgress}}%;"></view>
|
|
</view>
|
|
<text class="progress-text">搜索中 {{searchProgress}}%</text>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-container" wx:if="{{loading}}">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">初始化蓝牙适配器...</text>
|
|
<text class="loading-subtext">请确保蓝牙已开启</text>
|
|
</view>
|
|
|
|
<!-- 设备列表 -->
|
|
<view class="device-list" wx:else>
|
|
<!-- 空状态 -->
|
|
<view wx:if="{{devices.length === 0}}" class="empty-state">
|
|
<view class="empty-icon">🔍</view>
|
|
<text class="empty-text">
|
|
{{searching ? '正在搜索附近的蓝牙设备...' : '未搜索到蓝牙设备'}}
|
|
</text>
|
|
<text class="empty-hint">请确保：</text>
|
|
<view class="empty-checklist">
|
|
<text class="checklist-item">• 蓝牙设备已开启</text>
|
|
<text class="checklist-item">• 设备处于可发现状态</text>
|
|
<text class="checklist-item">• 设备距离手机较近</text>
|
|
<text class="checklist-item">• 手机蓝牙已开启</text>
|
|
</view>
|
|
<button class="retry-btn" bindtap="refreshDevices" disabled="{{searching}}">
|
|
{{searching ? '搜索中...' : '重新搜索'}}
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 设备列表项 -->
|
|
<view
|
|
wx:for="{{devices}}"
|
|
wx:key="{{item.deviceId}}"
|
|
class="device-item"
|
|
bindtap="connectDevice"
|
|
data-device="{{item}}"
|
|
hover-class="item-hover"
|
|
>
|
|
<view class="item-header">
|
|
<view class="device-info">
|
|
<text class="device-name">{{item.name || '未知设备'}}</text>
|
|
<text class="device-type">{{item.name ? '蓝牙设备' : '未知设备'}}</text>
|
|
</view>
|
|
<view class="signal-strength">
|
|
<view class="signal-bars">
|
|
<view class="signal-bar" style="opacity: {{Math.max(0, (item.RSSI + 90) / 30)}}"></view>
|
|
<view class="signal-bar" style="opacity: {{Math.max(0, (item.RSSI + 80) / 30)}}"></view>
|
|
<view class="signal-bar" style="opacity: {{Math.max(0, (item.RSSI + 70) / 30)}}"></view>
|
|
<view class="signal-bar" style="opacity: {{Math.max(0, (item.RSSI + 60) / 30)}}"></view>
|
|
</view>
|
|
<text class="signal-value">{{item.RSSI ? item.RSSI + 'dBm' : 'N/A'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-body">
|
|
<text class="device-id">{{item.deviceId}}</text>
|
|
<text class="device-address" wx:if="{{item.advertisData}}">
|
|
广播数据: {{item.advertisData.byteLength}} bytes
|
|
</text>
|
|
</view>
|
|
<view class="item-footer">
|
|
<view class="connect-btn">
|
|
<text class="connect-icon">🔗</text>
|
|
<text class="connect-text">连接</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索提示 -->
|
|
<view class="search-tips" wx:if="{{!loading && devices.length > 0}}">
|
|
<text class="tips-text">💡 点击设备卡片进行连接</text>
|
|
<text class="tips-text">📱 信号强度越高，连接越稳定</text>
|
|
</view>
|
|
</view>
|