YD_WeChatApplet/subpackage/bluebooth/search.wxml

<view class="page-content">
  <mp-bar background="linear-gradient(190deg, #49a5fc 0%, #f7f7f7 800rpx, #f7f7f7 100%)" title="设备管理" color="#ffffffd8"></mp-bar>

  <view class="search-box-1">
    <image src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/train/search-blue.png" class="yellow {{isSearching?'anim':''}}" />
    <view class="search-box-2">
      <view class="search-box-3"></view>
    </view>
  </view>

  <!-- 开启蓝牙按钮 -->
  <!-- <button bindtap="startBluetooth">开启蓝牙</button> -->

  <!-- 搜索设备按钮 -->
  <button bindtap="startBluetooth" wx:if="{{!isSearching}}">搜索设备</button>
  <view wx:else class="text">
    <view class="now">正在扫描...</view>
    正在搜索可用设备
  </view>

  <!-- 设备列表 -->
  <view class="device-list">
    <view class="titlee">
      <view class="titlee-before"></view>检测到的设备
    </view>

    <block wx:for="{{devices}}" wx:key="deviceId">
      <view class="device-item" bindtap="connectDevice" data-device="{{item}}">
        <view class="left">
          <image src="https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/train/junm-smart.png" mode="" />{{item.name ? item.name : item.deviceId}}
        </view>
        <view class="right">
          {{connectedDeviceId == item.deviceId ? '已连接':'连接'}}
        </view>
      </view>
    </block>
  </view>

  <!-- 连接状态 -->
  <!-- <view class="status">连接状态: {{status}}</view> -->

  <!-- 跳绳计数 -->
  <!-- <view class="data">跳绳计数: {{skipCount}}</view> -->

  <!-- 断开连接按钮 -->
  <!-- <button bindtap="disconnectDevice" wx:if="{{connected}}">断开连接</button> -->

  <!-- 获取电量 -->
  <view class="battery-section" wx:if="{{connected}}">
    <view class="titlee">
      <view class="titlee-before"></view>设备电量
    </view>
    <view class="battery-card">
      <view class="battery-display" wx:if="{{battery !== null}}">
        <view class="battery-icon-wrap">
          <view class="battery-icon">
            <view class="battery-level" style="width: {{battery}}%;"></view>
          </view>
          <view class="battery-cap"></view>
        </view>
        <text class="battery-percent">{{battery}}%</text>
      </view>
      <view class="battery-placeholder" wx:else>
        <text>--</text>
      </view>
      <button class="battery-btn" bindtap="getBattery" loading="{{batteryLoading}}">获取电量</button>
    </view>
  </view>

  <!-- 设备名称管理 -->
  <view class="name-section" wx:if="{{connected}}">
    <view class="titlee">
      <view class="titlee-before"></view>设备名称
    </view>
    <view class="name-card">
      <view class="name-info">
        <text class="name-label">当前名称</text>
        <text class="name-value">{{deviceName || '--'}}</text>
      </view>
      <button class="name-action-btn" bindtap="getDeviceName" loading="{{nameLoading}}">获取名称</button>
    </view>
    <view class="name-edit-card">
      <input class="name-input" placeholder="输入新名称（最多8位）" maxlength="8" value="{{nameInput}}" bindinput="onNameInput" />
      <button class="name-action-btn" bindtap="setDeviceName">修改名称</button>
    </view>
  </view>
</view>