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-tip-bar" wx:if="{{matchesRemaining <= 0 && !hasFullBook}}">
    <text class="tip-icon">⚡</text>
    <text class="tip-text">今日免费次数已用完</text>
    <view class="tip-btn" bindtap="showUnlockModal">购买次数</view>
  </view>

  <!-- 主内容区 -->
  <view class="main-content">
    <!-- 空闲状态 - 未匹配 -->
    <block wx:if="{{!isMatching && !currentMatch}}">
      <!-- 中央匹配圆环 -->
      <view class="match-circle-wrapper" bindtap="handleMatchClick">
        <!-- 外层光环 -->
        <view class="outer-glow glow-active"></view>
        <!-- 中间光环 -->
        <view class="middle-ring ring-active"></view>
        <!-- 内层球体 -->
        <view class="inner-sphere sphere-active">
          <view class="sphere-gradient"></view>
          <view class="sphere-content">
            <block wx:if="{{needPayToMatch}}">
              <text class="sphere-icon">⚡</text>
              <text class="sphere-title gold-text">购买次数</text>
              <text class="sphere-desc">¥1 = 1次匹配</text>
            </block>
            <block wx:else>
              <text class="sphere-icon">👥</text>
              <text class="sphere-title">开始匹配</text>
              <text class="sphere-desc">匹配{{currentTypeLabel}}</text>
            </block>
          </view>
        </view>
      </view>

      <!-- 当前模式显示 -->
      <view class="current-mode">
        当前模式: <text class="text-brand">{{currentTypeLabel}}</text>
      </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-new" catchtap="preventBubble">
      <!-- 成功状态 -->
      <block wx:if="{{joinSuccess}}">
        <view class="join-success-new">
          <view class="success-icon-big">✅</view>
          <text class="success-title-new">提交成功</text>
          <text class="success-desc-new">工作人员将在24小时内与您联系</text>
        </view>
      </block>
      
      <!-- 表单状态 -->
      <block wx:else>
        <!-- 头部 -->
        <view class="join-header">
          <view class="join-icon-wrap">
            <text class="join-icon">{{joinType === 'investor' ? '👥' : joinType === 'mentor' ? '❤️' : '🎮'}}</text>
          </view>
          <text class="join-title">加入{{joinTypeLabel}}</text>
          <text class="join-subtitle" wx:if="{{needBindFirst}}">请先绑定联系方式</text>
          <text class="join-subtitle" wx:else>填写联系方式，专人对接</text>
          <view class="close-btn-new" bindtap="closeJoinModal">✕</view>
        </view>
        
        <!-- 联系方式切换 -->
        <view class="contact-switch">
          <view 
            class="switch-item {{contactType === 'phone' ? 'switch-active' : ''}}" 
            bindtap="switchContactType" 
            data-type="phone"
          >
            <text class="switch-icon">📱</text>
            <text>手机号</text>
          </view>
          <view 
            class="switch-item {{contactType === 'wechat' ? 'switch-active' : ''}}" 
            bindtap="switchContactType" 
            data-type="wechat"
          >
            <text class="switch-icon">💬</text>
            <text>微信号</text>
          </view>
        </view>

        <!-- 输入区域 -->
        <view class="input-area">
          <view class="input-wrapper">
            <text class="input-prefix">{{contactType === 'phone' ? '+86' : '@'}}</text>
            <input 
              wx:if="{{contactType === 'phone'}}"
              type="number"
              class="input-field"
              placeholder="请输入11位手机号"
              placeholder-class="input-placeholder-new"
              value="{{phoneNumber}}"
              bindinput="onPhoneInput"
              maxlength="11"
              disabled="{{isJoining}}"
              focus="{{contactType === 'phone'}}"
            />
            <input 
              wx:else
              type="text"
              class="input-field"
              placeholder="请输入微信号"
              placeholder-class="input-placeholder-new"
              value="{{wechatId}}"
              bindinput="onWechatInput"
              disabled="{{isJoining}}"
              focus="{{contactType === 'wechat'}}"
            />
          </view>
          <text class="error-msg" wx:if="{{joinError}}">{{joinError}}</text>
        </view>

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

        <text class="form-notice-new">提交后我们会尽快与您联系</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">今日3次免费匹配已用完，可付费购买额外次数</text>
      
      <view class="unlock-info">
        <view class="info-row">
          <text class="info-label">单价</text>
          <text class="info-value text-brand">¥1 / 次</text>
        </view>
        <view class="info-row">
          <text class="info-label">已购买</text>
          <text class="info-value">{{extraMatches || 0}} 次</text>
        </view>
      </view>

      <view class="unlock-buttons">
        <view class="btn-gold" bindtap="buyMatchCount">立即购买 ¥1</view>
        <view class="btn-ghost" bindtap="closeUnlockModal">明天再来</view>
      </view>
    </view>
  </view>

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