MBTI_wang/miniprogram/pages/result/sbti.wxml

<!--pages/result/sbti.wxml - SBTI 结果页（高级排版）-->
<view class="result-page">
  <scroll-view
    class="content-scroll {{fromShare ? 'content-scroll--with-fixed-footer' : ''}} {{result && !fromShare ? 'content-scroll--with-bottom-tools' : ''}}"
    scroll-y
    scroll-into-view="{{scrollTarget}}"
    scroll-with-animation
    bindscroll="onSectionScroll"
  >
    <view
      class="content-container {{fromShare ? 'content-container--with-fixed-footer' : ''}} {{result && !fromShare ? 'content-container--with-bottom-tools' : ''}}"
    >

      <!-- 分类锚点导航 -->
      <result-section-nav
        wx:if="{{result && !fromShare}}"
        sections="{{sectionNav}}"
        active="{{activeSection}}"
        theme="teal"
        bindnavtap="onTapSectionNav"
      />

      <!-- Hero -->
      <view class="hero-card hero-card--sbti" id="sec-hero" wx:if="{{result}}">
        <text class="hero-eyebrow">SBTI · 15-DIM PROFILE</text>
        <text class="hero-code">{{result.sbtiType}}</text>
        <text class="hero-title">{{result.sbtiCn}}</text>
        <text class="hero-subtitle" wx:if="{{profileGate && previewSbtiIntro}}">{{previewSbtiIntro}}</text>
        <text class="hero-subtitle" wx:elif="{{result.intro && !profileGate}}">{{result.intro}}</text>
        <view class="hero-badges">
          <view class="hero-badge hero-badge--solid">匹配度 {{result.matchPercent}}%</view>
          <view class="hero-badge">精准命中 {{result.hitDimCount}}/15 维</view>
        </view>
      </view>

      <!-- 类型插画（若有） -->
      <view class="card main-type-card" wx:if="{{typeImageUrl && !typeImageLoadFailed}}">
        <image
          class="type-avatar-image"
          src="{{typeImageUrl}}"
          mode="widthFix"
          show-menu-by-longpress="{{true}}"
          bindload="onTypeImageLoad"
          binderror="onTypeImageError"
        />
      </view>

      <!-- 付费墙 -->
      <view class="card paywall-card" wx:if="{{payInfo.requiresPayment && !payInfo.isPaid}}">
        <view class="paywall-content">
          <view class="paywall-blur">
            <text class="paywall-fake-title">完整维度解读</text>
            <text class="paywall-fake-line">• 15 维等级说明</text>
            <text class="paywall-fake-line">• 匹配度与兜底说明</text>
          </view>
          <view class="paywall-mask"></view>
          <button
            class="paywall-btn"
            wx:if="{{!hasPhone}}"
            open-type="getPhoneNumber"
            bindgetphonenumber="onGetPhoneNumberForSbtiPay"
          >
            <text class="paywall-btn-main">解锁完整报告</text>
            <text class="paywall-btn-price">￥{{payInfo.amountYuan}} / 次</text>
          </button>
          <button
            class="paywall-btn"
            wx:elif="{{hasPhone}}"
            bindtap="unlockFullReport"
          >
            <text class="paywall-btn-main">解锁完整报告</text>
            <text class="paywall-btn-price">￥{{payInfo.amountYuan}} / 次</text>
          </button>
        </view>
      </view>

      <view class="card paywall-card" wx:elif="{{result && result.locked && !fromShare && !profileGate}}">
        <view class="paywall-content">
          <text class="paywall-fake-title">完整报告需完善资料</text>
          <text class="paywall-fake-line">请补全头像、昵称并绑定手机号后查看完整解读。</text>
          <button class="paywall-btn" bindtap="goCompleteProfile">
            <text class="paywall-btn-main">去完善资料</text>
          </button>
        </view>
      </view>

      <view wx:if="{{(profileGate || !result.locked) && (!payInfo.requiresPayment || payInfo.isPaid)}}">

        <!-- 人格描述 -->
        <view class="section-head" id="sec-desc">
          <view class="section-head__bar section-head__bar--sbti"></view>
          <text class="section-head__title">{{profileGate ? '人格描述（预览约 30%）' : '人格描述'}}</text>
          <text class="section-head__desc">专属人格解读</text>
        </view>
        <view class="card description-card">
          <block wx:if="{{profileGate && previewSbtiDescParts.length}}">
            <text class="description-para" wx:for="{{previewSbtiDescParts}}" wx:key="*this">{{item}}</text>
          </block>
          <text class="description-text" wx:elif="{{profileGate}}">{{previewSbtiDesc}}</text>
          <block wx:elif="{{descParts.length}}">
            <text class="description-para" wx:for="{{descParts}}" wx:key="*this">{{item}}</text>
          </block>
          <text class="description-text" wx:else>{{result.desc}}</text>
        </view>

        <!-- 十五维度：按系分组 + 可展开 -->
        <block wx:if="{{dimGroups.length}}">
          <view class="section-head" id="sec-dim">
            <view class="section-head__bar section-head__bar--sbti"></view>
            <text class="section-head__title">{{profileGate ? '十五维度（预览约 30%）' : '十五维度详解'}}</text>
            <text class="section-head__desc">6 分制 · 分系展开</text>
          </view>
          <view class="sbti-group-wrap">
            <block wx:for="{{dimGroups}}" wx:key="key" wx:for-item="group">
              <view class="sbti-group">
                <view class="sbti-group__head" bindtap="toggleGroup" data-key="{{group.key}}">
                  <text class="sbti-group__title">{{group.title}}</text>
                  <text class="sbti-group__count">{{group.items.length}} 项</text>
                  <text class="sbti-group__chev {{openGroup === group.key ? 'sbti-group__chev--open' : ''}}">›</text>
                </view>
                <view class="sbti-group__body" wx:if="{{openGroup === group.key}}">
                  <view class="sbti-dim-grid sbti-dim-grid--in-group">
                    <view class="sbti-dim-card {{item.colorClass}}" wx:for="{{group.items}}" wx:for-item="item" wx:key="dim">
                      <view class="sbti-dim-card__head">
                        <view class="sbti-dim-card__ic">{{item.icon}}</view>
                        <view class="sbti-dim-card__meta">
                          <text class="sbti-dim-card__name">{{item.name}}</text>
                          <text class="sbti-dim-card__score">{{item.level}}/6<text wx:if="{{item.raw != null && item.raw !== ''}}"> · 原始 {{item.raw}}</text></text>
                        </view>
                      </view>
                      <view class="sbti-dim-card__track">
                        <view class="sbti-dim-card__fill" style="width: {{item.percent}}%"></view>
                      </view>
                      <text class="sbti-dim-card__text">{{item.text}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </block>

        <view wx:if="{{profileGate}}" class="card profile-gate-cta-card">
          <text class="preview-teaser-hint sbti-gate-hint">完善头像、昵称并绑定手机号后，可查看全部维度解读与分享完整卡片。</text>
          <button class="paywall-btn paywall-btn--inline-profile" bindtap="goCompleteProfile">
            <text class="paywall-btn-main">去完善资料 · 解锁全文</text>
          </button>
        </view>

        <!-- 深度解读 CTA -->
        <view class="deep-cta-card" id="sec-cta" wx:if="{{result && !profileGate}}">
          <view class="deep-cta-head">
            <view class="deep-cta-ic">💎</view>
            <text class="deep-cta-title">深度解读 · 综合人格方案</text>
          </view>
          <text class="deep-cta-desc">结合 SBTI、MBTI、PDP、DISC 与面相综合分析；获得亲密关系与发展路径的个性化建议。邀请好友参与测评可参与推广分润。</text>
          <view class="deep-cta-actions">
            <view class="deep-cta-btn deep-cta-btn--primary" bindtap="onTapDeepService">深度解读方案</view>
            <view class="deep-cta-btn deep-cta-btn--ghost" bindtap="onTapPromoCenter">推广中心</view>
          </view>
        </view>

      </view>
    </view>
  </scroll-view>

  <view class="result-bottom-tools" wx:if="{{result && !fromShare}}">
    <view class="journey-stepper">
      <view class="journey-stepper__item">
        <view class="journey-stepper__dot {{journey.step1Unlocked ? 'journey-stepper__dot--done' : (journey.activeStep===1 ? 'journey-stepper__dot--active' : '')}}">1</view>
        <text class="journey-stepper__label {{journey.activeStep===1 ? 'journey-stepper__label--active' : ''}}">看全文</text>
      </view>
      <view class="journey-stepper__bar {{journey.step1Unlocked ? 'journey-stepper__bar--done' : ''}}"></view>
      <view class="journey-stepper__item">
        <view class="journey-stepper__dot {{journey.step2Unlocked ? 'journey-stepper__dot--done' : (journey.activeStep===2 ? 'journey-stepper__dot--active' : '')}}">2</view>
        <text class="journey-stepper__label {{journey.activeStep===2 ? 'journey-stepper__label--active' : ''}}">分享朋友圈</text>
      </view>
      <view class="journey-stepper__bar {{journey.step2Unlocked ? 'journey-stepper__bar--done' : ''}}"></view>
      <view class="journey-stepper__item">
        <view class="journey-stepper__dot {{journey.step3Unlocked ? 'journey-stepper__dot--done' : (journey.activeStep===3 ? 'journey-stepper__dot--active' : '')}}">3</view>
        <text class="journey-stepper__label {{journey.activeStep===3 ? 'journey-stepper__label--active' : ''}}">AI 拍照</text>
      </view>
    </view>
    <view class="result-bottom-tools__row">
      <view class="result-tool-btn result-tool-btn--primary" bindtap="onTapReadFull">
        <text>{{journey.step1Unlocked ? '查看全文' : '① 解锁全文'}}</text>
        <text class="result-tool-sub">{{journey.step1Unlocked ? '已解锁' : (profileGate ? '完善资料即解锁' : '点击解锁')}}</text>
      </view>
      <view class="result-tool-btn {{journey.step1Unlocked ? 'result-tool-btn--rose' : 'result-tool-btn--locked'}}" bindtap="onTapShareMoment">
        <text><text wx:if="{{!journey.step1Unlocked}}" class="result-tool-btn__lock">🔒</text>朋友圈</text>
        <text class="result-tool-sub">{{journey.step1Unlocked ? (journey.step2Unlocked ? '已分享' : '点击分享') : '先解锁全文'}}</text>
      </view>
      <view class="result-tool-btn {{journey.step2Unlocked ? 'result-tool-btn--ghost' : 'result-tool-btn--locked'}}" bindtap="onTapFaceCamera">
        <text><text wx:if="{{!journey.step2Unlocked}}" class="result-tool-btn__lock">🔒</text>AI 拍照</text>
        <text class="result-tool-sub">{{journey.step2Unlocked ? '面相+人格' : '先分享朋友圈'}}</text>
      </view>
    </view>
  </view>

  <view class="result-share-footer result-share-footer--stack" wx:if="{{fromShare}}">
    <button class="result-share-footer-btn" bindtap="goWantTest">我也要测试</button>
    <view class="result-share-footer-row2">
      <button class="result-share-footer-btn result-share-footer-btn--ghost" bindtap="goReadFullFromShare">看全文</button>
      <button class="result-share-footer-btn result-share-footer-btn--share" open-type="share">分享给好友</button>
    </view>
  </view>
</view>