soul/miniprogram/pages/match/match.wxml

<!--pages/match/match.wxml-->
<!--Soul创业实验 - 找伙伴页 按H5网页端完全重构-->
<view class="page">
  <!-- 自定义导航栏 -->
  <view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <text class="nav-title">找伙伴</text>
      <view class="nav-settings" bindtap="openSettings">
        <text class="settings-icon">⚙️</text>
      </view>
    </view>
  </view>
  <view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>

  <!-- 匹配次数显示 - 仅购买用户显示 -->
  <view class="match-count-bar" wx:if="{{hasPurchased}}">
    <view class="count-left">
      <text class="count-icon {{matchesRemaining <= 0 && !hasFullBook ? 'icon-warning' : ''}}">⚡</text>
      <text class="count-text">
        {{hasFullBook ? '无限匹配机会' : matchesRemaining <= 0 ? '今日匹配机会已用完' : '剩余匹配机会'}}
      </text>
    </view>
    <view class="count-right">
      <text class="count-value {{matchesRemaining > 0 || hasFullBook ? 'text-brand' : 'text-red'}}">
        {{hasFullBook ? '无限' : matchesRemaining + '/' + totalMatchesAllowed}}
      </text>
      <view class="unlock-mini-btn" wx:if="{{matchesRemaining <= 0 && !hasFullBook}}" bindtap="goToChapters">
        购买小节+1次
      </view>
    </view>
  </view>

  <!-- 主内容区 -->
  <view class="main-content">
    <!-- 空闲状态 - 未匹配 -->
    <block wx:if="{{!isMatching && !currentMatch}}">
      <!-- 中央匹配圆环 -->
      <view 
        class="match-circle-wrapper" 
        bindtap="{{hasPurchased ? 'handleMatchClick' : 'showPurchaseTip'}}"
      >
        <!-- 外层光环 -->
        <view class="outer-glow {{hasPurchased ? 'glow-active' : 'glow-inactive'}}"></view>
        <!-- 中间光环 -->
        <view class="middle-ring {{hasPurchased ? 'ring-active' : 'ring-inactive'}}"></view>
        <!-- 内层球体 -->
        <view class="inner-sphere {{hasPurchased ? 'sphere-active' : 'sphere-inactive'}}">
          <view class="sphere-gradient"></view>
          <view class="sphere-content">
            <!-- 已购买用户 -->
            <block wx:if="{{hasPurchased}}">
              <block wx:if="{{needPayToMatch}}">
                <text class="sphere-icon">⚡</text>
                <text class="sphere-title gold-text">需要解锁</text>
                <text class="sphere-desc">今日免费次数已用完</text>
              </block>
              <block wx:else>
                <text class="sphere-icon">👥</text>
                <text class="sphere-title">开始匹配</text>
                <text class="sphere-desc">匹配{{currentTypeLabel}}</text>
              </block>
            </block>
            <!-- 未购买用户 -->
            <block wx:else>
              <text class="sphere-icon">🔒</text>
              <text class="sphere-title text-gray">购买后解锁</text>
              <text class="sphere-desc text-muted">购买9.9元即可使用</text>
            </block>
          </view>
        </view>
      </view>

      <!-- 当前模式显示 -->
      <view class="current-mode">
        当前模式: <text class="{{hasPurchased ? 'text-brand' : 'text-muted'}}">{{currentTypeLabel}}</text>
      </view>

      <!-- 购买提示 - 仅未购买用户显示 -->
      <view class="purchase-tip-card" wx:if="{{!hasPurchased}}">
        <view class="tip-left">
          <text class="tip-title">购买书籍解锁匹配功能</text>
          <text class="tip-desc">仅需9.9元，每天免费匹配</text>
        </view>
        <view class="tip-btn" bindtap="goToChapters">去购买</view>
      </view>

      <!-- 分隔线 -->
      <view class="divider"></view>

      <!-- 选择匹配类型 -->
      <view class="type-section">
        <text class="type-section-title">选择匹配类型</text>
        <view class="type-grid">
          <view 
            class="type-item {{selectedType === item.id ? 'type-active' : ''}}" 
            wx:for="{{matchTypes}}" 
            wx:key="id"
            bindtap="selectType"
            data-type="{{item.id}}"
          >
            <text class="type-icon">{{item.icon}}</text>
            <text class="type-label {{selectedType === item.id ? 'text-brand' : ''}}">{{item.label}}</text>
          </view>
        </view>
      </view>
    </block>

    <!-- 匹配中状态 -->
    <block wx:if="{{isMatching}}">
      <view class="matching-state">
        <view class="matching-animation">
          <view class="matching-ring"></view>
          <view class="matching-center">
            <text class="matching-icon">👥</text>
          </view>
          <view class="ripple ripple-1"></view>
          <view class="ripple ripple-2"></view>
          <view class="ripple ripple-3"></view>
        </view>
        <text class="matching-title">正在匹配{{currentTypeLabel}}...</text>
        <text class="matching-count">已匹配 {{matchAttempts}} 次</text>
        <view class="cancel-btn" bindtap="cancelMatch">取消匹配</view>
      </view>
    </block>

    <!-- 匹配成功状态 -->
    <block wx:if="{{currentMatch && !isMatching}}">
      <view class="matched-state">
        <!-- 成功动画 -->
        <view class="success-icon-wrapper">
          <text class="success-icon">✨</text>
        </view>

        <!-- 用户卡片 -->
        <view class="match-card">
          <view class="card-header">
            <image class="match-avatar" src="{{currentMatch.avatar}}" mode="aspectFill"></image>
            <view class="match-info">
              <text class="match-name">{{currentMatch.nickname}}</text>
              <view class="match-tags">
                <text class="match-tag" wx:for="{{currentMatch.tags}}" wx:key="*this">{{item}}</text>
              </view>
            </view>
            <view class="match-score-box">
              <text class="score-value">{{currentMatch.matchScore}}%</text>
              <text class="score-label">匹配度</text>
            </view>
          </view>

          <!-- 共同兴趣 -->
          <view class="card-section">
            <text class="section-title">共同兴趣</text>
            <view class="interest-list">
              <view class="interest-item" wx:for="{{currentMatch.commonInterests}}" wx:key="text">
                <text class="interest-icon">{{item.icon}}</text>
                <text class="interest-text">{{item.text}}</text>
              </view>
            </view>
          </view>

          <!-- 核心理念 -->
          <view class="card-section">
            <text class="section-title">核心理念</text>
            <text class="concept-text">{{currentMatch.concept}}</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <view class="btn-primary" bindtap="handleAddWechat">一键加好友</view>
          <view class="btn-secondary" bindtap="resetMatch">返回</view>
        </view>
      </view>
    </block>
  </view>

  <!-- 加入弹窗 - 填写手机号或微信号 -->
  <view class="modal-overlay" wx:if="{{showJoinModal}}" bindtap="closeJoinModal">
    <view class="modal-content join-modal" catchtap="preventBubble">
      <!-- 成功状态 -->
      <block wx:if="{{joinSuccess}}">
        <view class="join-success">
          <view class="success-check">✅</view>
          <text class="success-title">加入成功!</text>
          <text class="success-desc">我们会尽快与您联系</text>
        </view>
      </block>
      
      <!-- 表单状态 -->
      <block wx:else>
        <view class="modal-header">
          <text class="modal-title">加入{{joinTypeLabel}}</text>
          <view class="close-btn" bindtap="closeJoinModal">✕</view>
        </view>
        
        <text class="form-tip">
          {{userPhone ? '已检测到您的绑定信息，可直接提交或修改' : '请填写您的联系方式以便我们联系您'}}
        </text>
        
        <!-- 联系方式类型切换 -->
        <view class="contact-tabs">
          <view 
            class="contact-tab {{contactType === 'phone' ? 'tab-active-phone' : ''}}" 
            bindtap="switchContactType" 
            data-type="phone"
          >手机号</view>
          <view 
            class="contact-tab {{contactType === 'wechat' ? 'tab-active-wechat' : ''}}" 
            bindtap="switchContactType" 
            data-type="wechat"
          >微信号</view>
        </view>

        <!-- 输入框 -->
        <view class="input-group">
          <text class="input-label">{{contactType === 'phone' ? '手机号' : '微信号'}}</text>
          <input 
            wx:if="{{contactType === 'phone'}}"
            type="number"
            class="form-input"
            placeholder="请输入11位手机号"
            placeholder-class="input-placeholder"
            value="{{phoneNumber}}"
            bindinput="onPhoneInput"
            maxlength="11"
            disabled="{{isJoining}}"
          />
          <input 
            wx:else
            type="text"
            class="form-input"
            placeholder="请输入微信号"
            placeholder-class="input-placeholder"
            value="{{wechatId}}"
            bindinput="onWechatInput"
            disabled="{{isJoining}}"
          />
        </view>

        <!-- 错误提示 -->
        <text class="error-text" wx:if="{{joinError}}">{{joinError}}</text>

        <!-- 提交按钮 -->
        <view 
          class="btn-primary submit-btn {{isJoining || !(contactType === 'phone' ? phoneNumber : wechatId) ? 'btn-disabled' : ''}}"
          bindtap="handleJoinSubmit"
        >
          <text wx:if="{{isJoining}}">提交中...</text>
          <text wx:else>确认加入</text>
        </view>

        <text class="form-notice">提交即表示同意我们的服务条款</text>
      </block>
    </view>
  </view>

  <!-- 解锁弹窗 -->
  <view class="modal-overlay" wx:if="{{showUnlockModal}}" bindtap="closeUnlockModal">
    <view class="modal-content unlock-modal" catchtap="preventBubble">
      <view class="unlock-icon">⚡</view>
      <text class="unlock-title">匹配机会已用完</text>
      <text class="unlock-desc">每购买一个小节内容即可额外获得1次匹配机会</text>
      
      <view class="unlock-info">
        <view class="info-row">
          <text class="info-label">解锁方式</text>
          <text class="info-value">购买任意小节</text>
        </view>
        <view class="info-row">
          <text class="info-label">获得次数</text>
          <text class="info-value text-brand">+1次匹配</text>
        </view>
      </view>

      <view class="unlock-buttons">
        <view class="btn-gold" bindtap="goToChapters">去购买小节 (¥1/节)</view>
        <view class="btn-ghost" bindtap="closeUnlockModal">明天再来</view>
      </view>
    </view>
  </view>

  <!-- 底部留白 -->
  <view class="bottom-space"></view>
</view>