hms/apps/miniprogram/native/pkg-veepoo/index.wxml

<!--
  Veepoo M2 原生小程序页面 — 连接 + 测量
  设计原型: docs/design/veepoo-measure-prototype.html
  完全匹配 SDK 官方 Demo 流程，不依赖 Taro
-->

<!-- ═══ 未连接 / 错误 / 断开 ═══ -->
<block wx:if="{{phase === 'idle' || phase === 'error' || phase === 'disconnected'}}">
  <view class="connect-screen">
    <view class="connect-anim">
      <view class="connect-ring"></view>
      <view class="connect-center">
        <text class="connect-bt">BT</text>
      </view>
    </view>
    <text class="connect-title">M2 手环健康测量</text>
    <text class="connect-hint">请确保手环已开机且蓝牙已开启</text>

    <view wx:if="{{error}}" class="connect-error">
      <text class="connect-error-text">{{error}}</text>
    </view>

    <view class="connect-btn-wrap">
      <view class="btn-primary" bindtap="handleConnect">
        {{phase === 'error' ? '重新连接' : phase === 'disconnected' ? '重新连接' : '连接 M2 手环'}}
      </view>
    </view>

    <view wx:if="{{hasResults}}" class="connect-back">
      <view class="btn-text" bindtap="handleBack">查看测量结果并返回</view>
    </view>
  </view>
</block>

<!-- ═══ 连接中（扫描/连接/认证） ═══ -->
<block wx:elif="{{phase === 'scanning' || phase === 'connecting' || phase === 'authenticating'}}">
  <view class="connect-screen">
    <view class="connect-anim">
      <view class="connect-ring connect-ring--active"></view>
      <view class="connect-center">
        <text class="connect-bt">BT</text>
      </view>
    </view>
    <text class="connect-title">
      {{phase === 'scanning' ? '正在搜索 M2 手环...' : phase === 'connecting' ? '正在连接...' : '正在认证...'}}
    </text>
    <text class="connect-hint">请确保手环已开机且靠近手机</text>
  </view>
</block>

<!-- ═══ 就绪 + 测量 ═══ -->
<block wx:elif="{{phase === 'ready'}}">
  <view class="measure-page">
    <!-- 设备状态栏 -->
    <view class="device-bar">
      <view class="device-bar__left">
        <view class="device-bar__dot"></view>
        <text class="device-bar__name">{{deviceName}}</text>
        <text wx:if="{{batteryLevel !== null}}" class="device-bar__battery">{{batteryLevel}}%</text>
      </view>
      <view class="device-bar__disconnect" bindtap="handleDisconnect">断开</view>
    </view>

    <!-- 指标选择器 — 药丸式 -->
    <scroll-view class="selector" scroll-x enhanced show-scrollbar="{{false}}">
      <view
        wx:for="{{measureTypes}}"
        wx:key="type"
        class="selector__pill {{selectedType === item.type ? 'selector__pill--active' : ''}} {{results[item.type] ? 'selector__pill--done' : ''}}"
        data-type="{{item.type}}"
        bindtap="handleSelectType"
      >
        <view class="selector__icon-wrap" style="background: {{item.color}}">
          <text class="selector__icon">{{item.icon}}</text>
        </view>
        <text class="selector__label">{{item.label}}</text>
      </view>
    </scroll-view>

    <!-- 仪表盘区域 -->
    <view class="gauge-section">
      <view class="gauge {{measurePhase === 'measuring' ? 'gauge--measuring' : ''}}">
        <!-- SVG 圆环 -->
        <view class="gauge__ring-wrap">
          <view class="gauge__ring-bg"></view>
          <view class="gauge__ring-progress" style="background: conic-gradient({{selectedColor}} {{measureProgress * 3.6}}deg, #E8E2DC 0deg);"></view>
          <view class="gauge__center">
            <!-- 空闲 -->
            <block wx:if="{{measurePhase === 'idle'}}">
              <text class="gauge__icon-lg" style="color: {{selectedColor}}">{{selectedIcon}}</text>
              <text class="gauge__hint">点击下方按钮开始</text>
            </block>
            <!-- 测量中 -->
            <block wx:elif="{{measurePhase === 'measuring'}}">
              <text wx:if="{{measureDisplayValue}}" class="gauge__value" style="color: {{selectedColor}}">{{measureDisplayValue}}</text>
              <text wx:else class="gauge__loading">测量中...</text>
              <text wx:if="{{measureDisplayValue}}" class="gauge__unit">{{selectedUnit}}</text>
            </block>
            <!-- 成功 -->
            <block wx:elif="{{measurePhase === 'success'}}">
              <text class="gauge__value" style="color: {{selectedColor}}">{{measureDisplayValue}}</text>
              <text class="gauge__unit">{{selectedUnit}}</text>
            </block>
            <!-- 错误 -->
            <block wx:elif="{{measurePhase === 'error'}}">
              <text class="gauge__err">!</text>
              <text class="gauge__err-text">{{measureError}}</text>
            </block>
          </view>
        </view>
      </view>

      <!-- 进度条 -->
      <view wx:if="{{measurePhase === 'measuring' && measureProgress > 0}}" class="progress-bar">
        <view class="progress-bar__fill" style="width: {{measureProgress}}%; background: {{selectedColor}};"></view>
      </view>
    </view>

    <!-- 免责声明 -->
    <view class="disclaimer">
      <text class="disclaimer__text">测量数据仅供参考，不作为医学诊断依据。如有不适请及时就医。</text>
    </view>

    <!-- 操作按钮 -->
    <view class="actions">
      <block wx:if="{{measurePhase === 'idle'}}">
        <view class="btn btn--primary" style="background: {{selectedColor}}; box-shadow: 0 4px 16px rgba(0,0,0,0.15);" bindtap="handleStartMeasure">
          开始测量{{selectedLabel}}
        </view>
      </block>
      <block wx:elif="{{measurePhase === 'measuring'}}">
        <view class="btn btn--secondary" bindtap="handleCancelMeasure">停止测量</view>
        <view class="btn btn--text" bindtap="handleBack">完成并查看结果</view>
      </block>
      <block wx:elif="{{measurePhase === 'success'}}">
        <view class="btn btn--primary" style="background: {{selectedColor}}; box-shadow: 0 4px 16px rgba(0,0,0,0.15);" bindtap="handleResetResult">重新测量</view>
        <view class="btn btn--secondary" bindtap="handleBack">完成并查看结果</view>
      </block>
      <block wx:elif="{{measurePhase === 'error'}}">
        <view class="btn btn--primary" style="background: {{selectedColor}}; box-shadow: 0 4px 16px rgba(0,0,0,0.15);" bindtap="handleStartMeasure">重新测量</view>
      </block>
    </view>
  </view>
</block>