mini-prog/miniprogram/pages/event-prepare/event-prepare.wxml

<scroll-view class="page" scroll-y>
  <view class="shell">
    <view class="hero">
      <view class="hero__eyebrow">Prepare</view>
      <view class="hero__title">{{titleText}}</view>
      <view class="hero__desc">{{summaryText}}</view>
    </view>

    <view class="panel">
      <view class="panel__title">当前准备状态</view>
      <view class="summary">先确认赛道、设备和权限，再进入地图开始本局。</view>
      <view class="row">
        <view class="row__label">当前发布</view>
        <view class="row__value">{{releaseText}}</view>
      </view>
      <view class="row">
        <view class="row__label">当前动作</view>
        <view class="row__value">{{actionText}}</view>
      </view>
      <view class="row">
        <view class="row__label">进入状态</view>
        <view class="row__value">{{statusText}}</view>
      </view>
      <view class="summary">赛道模式：{{variantModeText}}</view>
      <view class="summary">赛道摘要：{{variantSummaryText}}</view>
      <view class="summary">当前选择：{{selectedVariantText}}</view>
    </view>

    <view class="panel">
      <view class="panel__title">活动版本摘要</view>
      <view class="summary">这里展示本次进入地图将会使用的发布对象摘要，方便你确认当前活动版本。</view>
      <view class="row">
        <view class="row__label">当前发布展示版本</view>
        <view class="row__value">{{presentationText}}</view>
      </view>
      <view class="row">
        <view class="row__label">当前发布内容包版本</view>
        <view class="row__value">{{contentBundleText}}</view>
      </view>
    </view>

    <view class="panel">
      <view class="panel__title">本局对象预览</view>
      <view class="summary">进入地图前先用已知信息做预览，最终绑定以后端 launch 返回结果为准。</view>
      <view class="row">
        <view class="row__label">地点</view>
        <view class="row__value">{{runtimePlaceText}}</view>
      </view>
      <view class="row">
        <view class="row__label">地图</view>
        <view class="row__value">{{runtimeMapText}}</view>
      </view>
      <view class="row">
        <view class="row__label">赛道</view>
        <view class="row__value">{{runtimeVariantText}}</view>
      </view>
      <view class="row">
        <view class="row__label">RouteCode</view>
        <view class="row__value">{{runtimeRouteCodeText}}</view>
      </view>
      <view class="preview-card" wx:if="{{previewVisible}}">
        <view class="preview-card__header">
          <view class="preview-card__title">地图预览</view>
          <view class="preview-card__status">{{previewStatusText}}</view>
        </view>
        <view class="preview-card__variant">{{previewVariantText}}</view>
        <view class="preview-frame">
          <view class="preview-stage">
            <image
              wx:for="{{previewTiles}}"
              wx:key="url"
              class="preview-tile"
              src="{{item.url}}"
              mode="scaleToFill"
              style="{{item.styleText}}"
            />
            <view class="preview-wash"></view>
            <view
              wx:for="{{previewControls}}"
              wx:key="styleText"
              class="preview-control {{item.kindClass}}"
              style="{{item.styleText}}"
            ></view>
            <view wx:if="{{previewLoading}}" class="preview-loading">预览加载中...</view>
          </view>
        </view>
        <view class="summary">{{previewHintText}}</view>
      </view>
    </view>

    <view class="panel" wx:if="{{showVariantSelector}}">
      <view class="panel__title">赛道选择</view>
      <view class="summary">如果当前活动支持手动选赛道，请先在这里确认你的本局路线。</view>
      <view wx:if="{{!selectableVariants.length}}" class="summary">{{variantSelectorEmptyText}}</view>
      <view wx:if="{{selectableVariants.length}}" class="variant-list">
        <view wx:for="{{selectableVariants}}" wx:key="id" class="variant-card {{item.selected ? 'variant-card--active' : ''}}" data-variant-id="{{item.id}}" bindtap="handleSelectVariant">
          <view class="variant-card__main">
            <view class="variant-card__title-row">
              <text class="variant-card__name">{{item.name}}</text>
              <text class="variant-card__badge" wx:if="{{item.selected}}">已选中</text>
            </view>
            <text class="variant-card__meta">{{item.routeCodeText}}</text>
            <text class="variant-card__meta">{{item.descriptionText}}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="panel">
      <view class="panel__title">设备准备</view>
      <view class="summary">定位权限建议先在这里确认；如果需要心率带，也建议先连接后再进入地图。</view>
      <view class="row">
        <view class="row__label">定位状态</view>
        <view class="row__value">{{locationStatusText}}</view>
      </view>
      <view class="summary" wx:if="{{locationPermissionGranted && !locationBackgroundPermissionGranted}}">已完成前台定位授权；如果后续需要后台持续定位，请在系统设置中补齐后台权限。</view>
      <view class="actions">
        <button class="btn btn--secondary" bindtap="handleRequestLocationPermission">申请定位权限</button>
        <button class="btn btn--ghost" bindtap="handleOpenLocationSettings">打开系统设置</button>
      </view>
      <view class="row">
        <view class="row__label">心率带</view>
        <view class="row__value">{{heartRateStatusText}}</view>
      </view>
      <view class="row">
        <view class="row__label">当前设备</view>
        <view class="row__value">{{heartRateDeviceText}}</view>
      </view>
      <view class="row">
        <view class="row__label">扫描状态</view>
        <view class="row__value">{{heartRateScanText}}</view>
      </view>
      <view class="row" wx:if="{{showMockSourceSummary}}">
        <view class="row__label">模拟源</view>
        <view class="row__value">{{mockSourceStatusText}}</view>
      </view>
      <view class="actions">
        <button class="btn btn--secondary" bindtap="handleOpenHeartRateDevicePicker">选择设备</button>
        <button class="btn btn--ghost" bindtap="handlePrepareHeartRateConnect">重新扫描</button>
        <button class="btn btn--ghost" bindtap="handlePrepareHeartRateDisconnect">断开连接</button>
        <button class="btn btn--ghost" bindtap="handlePrepareHeartRateClearPreferred">清除首选</button>
      </view>
    </view>

    <view class="panel">
      <view class="panel__title">进入地图</view>
      <view class="summary">进入地图后无需再次点开始；按玩法规则前往开始点，即可正式开始比赛。</view>
      <view wx:if="{{launchInFlight}}" class="launch-progress">
        <view class="launch-progress__row">
          <text class="launch-progress__label">当前进度</text>
          <text class="launch-progress__value">{{launchProgressText}}</text>
        </view>
        <view class="launch-progress__track">
          <view class="launch-progress__fill" style="width: {{launchProgressPercent}}%;"></view>
        </view>
      </view>
      <view class="actions">
        <button class="btn btn--secondary" bindtap="handleBack" disabled="{{launchInFlight}}">返回活动页</button>
        <button class="btn btn--ghost" bindtap="handleRefresh" disabled="{{launchInFlight}}">刷新</button>
        <button class="btn btn--primary" bindtap="handleLaunch" disabled="{{!canLaunch || launchInFlight}}">{{launchInFlight ? '正在进入地图...' : '进入地图'}}</button>
      </view>
    </view>
  </view>

  <view wx:if="{{showHeartRateDevicePicker}}" class="picker-mask" bindtap="handleCloseHeartRateDevicePicker"></view>
  <view wx:if="{{showHeartRateDevicePicker}}" class="picker-sheet">
    <view class="picker-sheet__header">
      <view class="picker-sheet__title">选择心率带设备</view>
      <button class="picker-sheet__close" bindtap="handleCloseHeartRateDevicePicker">关闭</button>
    </view>
    <view class="summary">扫描状态：{{heartRateScanText}}</view>
    <view wx:if="{{!heartRateDiscoveredDevices.length}}" class="summary">当前还没有发现设备，可先点“重新扫描”。</view>
    <view wx:if="{{heartRateDiscoveredDevices.length}}" class="device-list">
      <view wx:for="{{heartRateDiscoveredDevices}}" wx:key="deviceId" class="device-card">
        <view class="device-card__main">
          <view class="device-card__title-row">
            <text class="device-card__name">{{item.name}}</text>
            <text class="device-card__badge" wx:if="{{item.preferred}}">首选</text>
            <text class="device-card__badge device-card__badge--active" wx:if="{{item.connected}}">已连接</text>
          </view>
          <text class="device-card__meta">{{item.rssiText}}</text>
        </view>
        <button class="btn {{item.connected ? 'btn--ghost' : 'btn--secondary'}} device-card__action" data-device-id="{{item.deviceId}}" bindtap="handlePrepareHeartRateDeviceConnect">{{item.connected ? '已连接' : '连接'}}</button>
      </view>
    </view>
  </view>
</scroll-view>