jw-beauty/miniprogram/pages/scan-report/scan-report.wxml

<view class="page">
  <view class="page-header page-header-gradient" style="padding-top:{{statusBarHeight + 8}}px;">
    <view class="nav-back nav-back-light" bindtap="onBack">‹ {{i18n.common.back}}</view>
    <view class="page-header-title">{{i18n.report.title}}</view>
    <view class="page-header-subtitle">{{i18n.report.subtitle}}</view>
  </view>

  <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner"></view>
    <text class="loading-text">{{i18n.common.loading}}</text>
  </view>

  <view class="page-content" wx:if="{{!loading}}">
    <view class="concept-banner" wx:if="{{!calibrated}}">
      <text class="concept-icon">ⓘ</text>
      <text class="concept-text">{{i18n.report.conceptNotice}}</text>
    </view>

    <view class="scan-time">{{i18n.report.scannedAt}}：{{scannedAtText}}</view>

    <!-- Overall -->
    <view class="card">
      <view class="card-title">{{i18n.report.overallTitle}}</view>
      <view class="chip-row" wx:if="{{hasProblem}}">
        <view class="chip chip-lv{{item.level}}" wx:for="{{overallList}}" wx:key="label">
          <text class="chip-name">{{item.label}}</text>
          <text class="chip-lv">{{item.levelLabel}}</text>
        </view>
      </view>
      <view class="empty-hint" wx:else>{{i18n.report.noProblem}}</view>
    </view>

    <!-- Face zones — 脸型图布局（与「使用设置」区域选择一致，果果 2026-07-28 定稿） -->
    <view class="card">
      <view class="card-title">{{i18n.report.faceTitle}}</view>
      <!-- 脸型图（与「使用设置」同款布局）；位置↔faceZones 下标：1=中上 0=左 4=右 2=中 3=中下 -->
      <view class="face-map">
        <view class="face-region forehead {{faceZones[2].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[2].waveKey}}">
          <view class="fz-name">{{faceZones[2].name}}</view>
          <view class="fz-mode" wx:if="{{faceZones[2].hasProblem}}">{{faceZones[2].modeLabel}}</view>
        </view>
        <view class="face-region left-cheek {{faceZones[1].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[1].waveKey}}">
          <view class="fz-name">{{faceZones[1].name}}</view>
          <view class="fz-mode" wx:if="{{faceZones[1].hasProblem}}">{{faceZones[1].modeLabel}}</view>
        </view>
        <view class="face-region right-cheek {{faceZones[0].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[0].waveKey}}">
          <view class="fz-name">{{faceZones[0].name}}</view>
          <view class="fz-mode" wx:if="{{faceZones[0].hasProblem}}">{{faceZones[0].modeLabel}}</view>
        </view>
        <view class="face-region nose {{faceZones[3].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[3].waveKey}}">
          <view class="fz-name">{{faceZones[3].name}}</view>
          <view class="fz-mode" wx:if="{{faceZones[3].hasProblem}}">{{faceZones[3].modeLabel}}</view>
        </view>
        <view class="face-region chin {{faceZones[4].colorClass}}" bindtap="onTapZone" data-wave="{{faceZones[4].waveKey}}">
          <view class="fz-name">{{faceZones[4].name}}</view>
          <view class="fz-mode" wx:if="{{faceZones[4].hasProblem}}">{{faceZones[4].modeLabel}}</view>
        </view>
      </view>
      <!-- 底部图例：各光简要功效（果果指定保留） -->
      <view class="face-legend">
        <view class="legend-item"><view class="legend-dot dot-red"></view><text class="legend-label">{{i18n.report.modeNames.red}}</text></view>
        <view class="legend-item"><view class="legend-dot dot-ir"></view><text class="legend-label">{{i18n.report.modeNames.ir}}</text></view>
        <view class="legend-item"><view class="legend-dot dot-uv"></view><text class="legend-label">{{i18n.report.modeNames.uv}}</text></view>
        <view class="legend-item"><view class="legend-dot dot-yellow"></view><text class="legend-label">{{i18n.report.modeNames.yellow}}</text></view>
      </view>
      <view class="face-tap-hint">{{i18n.report.faceTapHint}}</view>
      <view class="face-all-normal-hint" wx:if="{{!hasProblem}}">{{i18n.report.allNormalHint}}</view>
    </view>

    <!-- Per-region -->
    <view class="card">
      <view class="card-title">{{i18n.report.regionTitle}}</view>
      <view class="region-row" wx:for="{{regionList}}" wx:key="name">
        <text class="region-name">{{item.name}}</text>
        <view class="region-right">
          <text class="region-problem {{item.hasProblem ? '' : 'region-problem-none'}}">{{item.problemLabel}}</text>
          <text class="region-lv region-lv{{item.level}}" wx:if="{{item.hasProblem}}">{{item.levelLabel}}</text>
        </view>
      </view>
    </view>

    <!-- Recommendation -->
    <view class="card" wx:if="{{recommendList.length > 0}}">
      <view class="card-title">{{i18n.report.recommendTitle}}</view>
      <view class="rec-row" wx:for="{{recommendList}}" wx:key="mask">
        <view class="rec-dot"></view>
        <view class="rec-body">
          <text class="rec-label">{{item.modeLabel}}</text>
          <text class="rec-meta">{{item.wavelengthLabel}} · {{item.regionsLabel}}</text>
        </view>
      </view>
    </view>

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

    <view class="actions">
      <button class="btn-primary" bindtap="onStartRecommend" disabled="{{starting}}" loading="{{starting}}" wx:if="{{recommendList.length > 0}}">{{i18n.report.startTreatment}}</button>
      <button class="btn-secondary" bindtap="onManual">{{i18n.report.manualInstead}}</button>
    </view>

    <view class="disclaimer">{{i18n.report.disclaimer}}</view>
  </view>
</view>