MBTI_wang/miniprogram/pages/result/disc.wxml

<!--pages/result/disc.wxml - DISC 结果页（高级排版）-->
<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="blue"
        bindnavtap="onTapSectionNav"
      />

      <!-- Hero -->
      <view class="hero-card hero-card--disc" id="sec-hero" wx:if="{{result}}">
        <text class="hero-eyebrow">DISC · BEHAVIOR STYLE</text>
        <text class="hero-code">{{typeSummaryLine}}</text>
        <text class="hero-title" wx:if="{{result.description && result.description.title}}">{{result.description.title}}</text>
        <text class="hero-subtitle" wx:if="{{profileGate && previewDiscDescription}}">{{previewDiscDescription}}</text>
        <text class="hero-subtitle" wx:elif="{{result.description && result.description.description && !profileGate}}">{{result.description.description}}</text>
        <view class="hero-badges">
          <view class="hero-badge hero-badge--solid" wx:if="{{discInsight && discInsight.mind}}">{{discInsight.mind}}</view>
          <view class="hero-badge" wx:for="{{discTags}}" wx:key="*this">{{item}}</view>
        </view>
      </view>

      <!-- 深度洞察 -->
      <block wx:if="{{discInsight}}">
        <view class="section-head" id="sec-insight">
          <view class="section-head__bar section-head__bar--disc"></view>
          <text class="section-head__title">深度洞察</text>
          <text class="section-head__desc">主导风格的底层逻辑</text>
        </view>
        <view class="insight-grid">
          <view class="insight-card">
            <view class="insight-card__icon insight-card__icon--blue">🧠</view>
            <text class="insight-card__label">心智模式</text>
            <text class="insight-card__value">{{discInsight.mind}}</text>
          </view>
          <view class="insight-card">
            <view class="insight-card__icon insight-card__icon--orange">🎯</view>
            <text class="insight-card__label">决策倾向</text>
            <text class="insight-card__value">{{discInsight.decision}}</text>
          </view>
          <view class="insight-card">
            <view class="insight-card__icon insight-card__icon--teal">⚡</view>
            <text class="insight-card__label">能量来源</text>
            <text class="insight-card__value">{{discInsight.energy}}</text>
          </view>
          <view class="insight-card">
            <view class="insight-card__icon insight-card__icon--rose">⚠️</view>
            <text class="insight-card__label">压力反应</text>
            <text class="insight-card__value">{{discInsight.stress}}</text>
          </view>
          <view class="insight-card" wx:if="{{discInsight.comm}}">
            <view class="insight-card__icon insight-card__icon--purple">💬</view>
            <text class="insight-card__label">沟通风格</text>
            <text class="insight-card__value">{{discInsight.comm}}</text>
          </view>
          <view class="insight-card" wx:if="{{discInsight.lead}}">
            <view class="insight-card__icon insight-card__icon--blue">🚩</view>
            <text class="insight-card__label">领导模式</text>
            <text class="insight-card__value">{{discInsight.lead}}</text>
          </view>
          <view class="insight-card" wx:if="{{discInsight.love}}">
            <view class="insight-card__icon insight-card__icon--rose">💝</view>
            <text class="insight-card__label">恋爱与亲密</text>
            <text class="insight-card__value">{{discInsight.love}}</text>
          </view>
          <view class="insight-card" wx:if="{{discInsight.team}}">
            <view class="insight-card__icon insight-card__icon--teal">👥</view>
            <text class="insight-card__label">团队角色</text>
            <text class="insight-card__value">{{discInsight.team}}</text>
          </view>
        </view>
      </block>

      <!-- 付费墙 -->
      <view class="type-card" wx:if="{{payInfo.requiresPayment && !payInfo.isPaid}}">
        <view class="paywall-card">
          <view class="paywall-content">
            <view class="paywall-blur">
              <text class="paywall-fake-title">完整DISC报告</text>
              <text class="paywall-fake-line">• 四维得分详情</text>
              <text class="paywall-fake-line">• 性格特征与优劣势</text>
              <text class="paywall-fake-line">• 职业匹配建议</text>
            </view>
            <view class="paywall-mask"></view>
            <view class="paywall-btn" bindtap="unlockFullReport">
              <text class="paywall-btn-main">解锁完整报告</text>
              <text class="paywall-btn-price">￥{{payInfo.amountYuan}} / 次</text>
            </view>
          </view>
        </view>
      </view>

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

      <!-- 四维得分 -->
      <block wx:if="{{discDimensions.length && (!payInfo.requiresPayment || payInfo.isPaid) && (profileGate || !result.locked)}}">
        <view class="section-head" id="sec-dim">
          <view class="section-head__bar section-head__bar--disc"></view>
          <text class="section-head__title">{{profileGate ? 'DISC 得分预览' : '四维行为得分'}}</text>
          <text class="section-head__desc">D · I · S · C 量化画像</text>
        </view>
        <view class="type-card" style="padding: 36rpx 32rpx;">
          <view class="dash-dimension-row" wx:for="{{discDimensions}}" wx:key="key">
            <view class="dash-dimension-labels">
              <text class="dash-lab">{{item.emoji}} {{item.label}}</text>
              <text class="dash-lab">{{item.percentage}}%</text>
            </view>
            <view class="dash-track">
              <view class="dash-fill {{item.dashClass}}" style="width: {{item.percentage}}%"></view>
            </view>
            <text class="dash-dim-desc">{{item.desc}}</text>
          </view>
        </view>
      </block>

      <!-- 资料门禁预览 -->
      <view wx:if="{{profileGate && result && (!payInfo.requiresPayment || payInfo.isPaid)}}">
        <view class="preview-teaser-card" wx:if="{{previewDiscStrengths.length}}">
          <text class="preview-teaser-title">优势摘录（预览约 30%）</text>
          <view class="preview-strength-row" wx:for="{{previewDiscStrengths}}" wx:key="*this">
            <text class="preview-strength-dot">•</text>
            <text class="preview-strength-text">{{item}}</text>
          </view>
          <text class="preview-teaser-hint">完善头像、昵称并绑定手机号后可查看完整解读与职业建议。</text>
        </view>
        <button class="paywall-btn paywall-btn--inline-profile" bindtap="goCompleteProfile">
          <text class="paywall-btn-main">去完善资料 · 解锁全文</text>
        </button>
      </view>

      <!-- 优势 / 注意两栏 -->
      <block wx:if="{{!profileGate && result && !result.locked && (!payInfo.requiresPayment || payInfo.isPaid)}}">
        <view class="section-head" id="sec-trait">
          <view class="section-head__bar section-head__bar--disc"></view>
          <text class="section-head__title">性格特征</text>
          <text class="section-head__desc">善用与防守指南</text>
        </view>
        <view class="trait-dual">
          <view class="trait-dual__col trait-dual__col--strength">
            <view class="trait-dual__title">
              <view class="trait-dual__ic trait-dual__ic--strength">✨</view>
              <text>天赋优势</text>
            </view>
            <view>
              <text class="trait-dual__chip trait-dual__chip--strength" wx:for="{{result.description.strengths}}" wx:key="*this">{{item}}</text>
            </view>
          </view>
          <view class="trait-dual__col trait-dual__col--caution">
            <view class="trait-dual__title">
              <view class="trait-dual__ic trait-dual__ic--caution">⚠️</view>
              <text>需要注意</text>
            </view>
            <view>
              <text class="trait-dual__chip trait-dual__chip--caution" wx:for="{{result.description.weaknesses}}" wx:key="*this">{{item}}</text>
            </view>
          </view>
        </view>
      </block>

      <!-- 职业网格 -->
      <block wx:if="{{!profileGate && result && !result.locked && (!payInfo.requiresPayment || payInfo.isPaid) && discCareerItems.length}}">
        <view class="section-head" id="sec-career">
          <view class="section-head__bar section-head__bar--disc"></view>
          <text class="section-head__title">职业匹配</text>
          <text class="section-head__desc">高契合度职业方向</text>
        </view>
        <view class="career-grid">
          <view class="career-grid__item" wx:for="{{discCareerItems}}" wx:key="name">
            <view class="career-grid__ic">{{item.icon}}</view>
            <text class="career-grid__text">{{item.name}}</text>
          </view>
        </view>
      </block>

      <!-- 深度解读 CTA -->
      <view class="deep-cta-card" id="sec-cta" wx:if="{{result}}">
        <view class="deep-cta-head">
          <view class="deep-cta-ic">💎</view>
          <text class="deep-cta-title">深度解读 · 团队/企业方案</text>
        </view>
        <text class="deep-cta-desc">结合 DISC、MBTI、PDP 与面相打造综合报告；团队可做岗位适配、沟通与协作建议。邀请好友测评可参与推广分润。</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>
  </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>