87 lines
3.9 KiB
Plaintext
87 lines
3.9 KiB
Plaintext
<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">
|
||
<view class="help-text">找不到设备？</view>
|
||
<view class="help-link" bind:tap="onOpenHelp">前往设置页面打开权限</view>
|
||
</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="deviceId">
|
||
<view class="device-card" data-index="{{ index }}" data-connected="{{ item.connected }}" bind:tap="onTapCard">
|
||
<view class="device-card-top">
|
||
<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>
|
||
<view class="device-card-bottom">deviceId：{{ item.deviceId }}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</view>
|