fix: 修复小程序多个问题

1. 修复章节内容加载卡住问题 - 更新API返回格式和章节映射 2. 修复找伙伴页面 - 去掉今日剩余次数显示 3. 添加匹配动画 - 1-3秒转动动画后再弹出加入弹窗 4. 加入资源对接需要先绑定手机号或微信号 5. 重构加入弹窗UI - 更简洁美观 6. 修复手机号输入框问题 7. 关于作者页面 - 内容与真实章节数据保持一致（62个案例）
2026-01-25 09:27:32 +08:00
parent e16dce118e
commit 4f11fe25f9
7 changed files with 547 additions and 180 deletions
--- a/miniprogram/pages/match/match.js
+++ b/miniprogram/pages/match/match.js
@@ -52,6 +52,7 @@ Page({
    isJoining: false,
    joinSuccess: false,
    joinError: '',
+    needBindFirst: false,
    
    // 解锁弹窗
    showUnlockModal: false
@@ -172,15 +173,27 @@ Page({
  handleMatchClick() {
    const currentType = MATCH_TYPES.find(t => t.id === this.data.selectedType)
    
-    // 如果是需要填写联系方式的类型，直接弹出加入弹窗
+    // 如果是需要填写联系方式的类型（资源对接、导师顾问、团队招募）
    if (currentType && currentType.showJoinAfterMatch) {
-      this.setData({
-        showJoinModal: true,
-        joinType: currentType.id,
-        joinTypeLabel: currentType.matchLabel || currentType.label,
-        joinSuccess: false,
-        joinError: ''
-      })
+      // 先检查是否已绑定联系方式
+      const hasPhone = !!this.data.phoneNumber
+      const hasWechat = !!this.data.wechatId
+      
+      if (!hasPhone && !hasWechat) {
+        // 没有绑定联系方式，先显示绑定提示
+        this.setData({
+          showJoinModal: true,
+          joinType: currentType.id,
+          joinTypeLabel: currentType.matchLabel || currentType.label,
+          joinSuccess: false,
+          joinError: '',
+          needBindFirst: true
+        })
+        return
+      }
+      
+      // 已绑定联系方式，先显示匹配动画1-3秒，再弹出确认
+      this.startMatchingAnimation(currentType)
      return
    }
    
@@ -192,6 +205,36 @@ Page({
    
    this.startMatch()
  },
+  
+  // 匹配动画后弹出加入确认
+  startMatchingAnimation(currentType) {
+    // 显示匹配中状态
+    this.setData({
+      isMatching: true,
+      matchAttempts: 0,
+      currentMatch: null
+    })
+    
+    // 动画计时
+    const timer = setInterval(() => {
+      this.setData({ matchAttempts: this.data.matchAttempts + 1 })
+    }, 500)
+    
+    // 1-3秒随机延迟后显示弹窗
+    const delay = Math.random() * 2000 + 1000
+    setTimeout(() => {
+      clearInterval(timer)
+      this.setData({
+        isMatching: false,
+        showJoinModal: true,
+        joinType: currentType.id,
+        joinTypeLabel: currentType.matchLabel || currentType.label,
+        joinSuccess: false,
+        joinError: '',
+        needBindFirst: false
+      })
+    }, delay)
+  },

  // 显示购买提示
  showPurchaseTip() {
--- a/miniprogram/pages/match/match.wxml
+++ b/miniprogram/pages/match/match.wxml
@@ -12,22 +12,11 @@
  </view>
  <view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>

-  <!-- 匹配次数显示 - 所有用户可见 -->
-  <view class="match-count-bar">
-    <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 + '次'}}
-      </text>
-      <view class="unlock-mini-btn" wx:if="{{matchesRemaining <= 0 && !hasFullBook}}" bindtap="showUnlockModal">
-        ¥1购买1次
-      </view>
-    </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>

  <!-- 主内容区 -->
@@ -153,82 +142,91 @@
    </block>
  </view>

-  <!-- 加入弹窗 - 填写手机号或微信号 -->
+  <!-- 加入弹窗 - 简洁版 -->
  <view class="modal-overlay" wx:if="{{showJoinModal}}" bindtap="closeJoinModal">
-    <view class="modal-content join-modal" catchtap="preventBubble">
+    <view class="modal-content join-modal-new" 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 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="modal-header">
-          <text class="modal-title">加入{{joinTypeLabel}}</text>
-          <view class="close-btn" bindtap="closeJoinModal">✕</view>
+        <!-- 头部 -->
+        <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>
        
-        <text class="form-tip">
-          {{userPhone ? '已检测到您的绑定信息，可直接提交或修改' : '请填写您的联系方式以便我们联系您'}}
-        </text>
-        
-        <!-- 联系方式类型切换 -->
-        <view class="contact-tabs">
+        <!-- 联系方式切换 -->
+        <view class="contact-switch">
          <view 
-            class="contact-tab {{contactType === 'phone' ? 'tab-active-phone' : ''}}" 
+            class="switch-item {{contactType === 'phone' ? 'switch-active' : ''}}" 
            bindtap="switchContactType" 
            data-type="phone"
-          >手机号</view>
+          >
+            <text class="switch-icon">📱</text>
+            <text>手机号</text>
+          </view>
          <view 
-            class="contact-tab {{contactType === 'wechat' ? 'tab-active-wechat' : ''}}" 
+            class="switch-item {{contactType === 'wechat' ? 'switch-active' : ''}}" 
            bindtap="switchContactType" 
            data-type="wechat"
-          >微信号</view>
+          >
+            <text class="switch-icon">💬</text>
+            <text>微信号</text>
+          </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 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>

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

-        <text class="form-notice">提交即表示同意我们的服务条款</text>
+        <text class="form-notice-new">提交后我们会尽快与您联系</text>
      </block>
    </view>
  </view>
--- a/miniprogram/pages/match/match.wxss
+++ b/miniprogram/pages/match/match.wxss
@@ -52,67 +52,35 @@
  width: 100%;
 }

-/* ===== 匹配次数条 ===== */
-.match-count-bar {
+/* ===== 匹配提示条 - 简化版 ===== */
+.match-tip-bar {
  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin: 24rpx 32rpx;
-  padding: 24rpx 32rpx;
-  background: #1c1c1e;
-  border-radius: 24rpx;
-  border: 2rpx solid rgba(255, 255, 255, 0.05);
-}
-
-.count-left {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.count-icon {
-  font-size: 28rpx;
-  width: 32rpx;
-  text-align: center;
-}
-
-.count-icon.icon-warning {
-  color: #FFD700;
-}
-
-.count-text {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.count-right {
-  display: flex;
-  flex-direction: row;
  align-items: center;
+  justify-content: center;
  gap: 16rpx;
+  margin: 24rpx 32rpx;
+  padding: 20rpx 32rpx;
+  background: rgba(255, 215, 0, 0.1);
+  border-radius: 16rpx;
+  border: 1rpx solid rgba(255, 215, 0, 0.2);
 }

-.count-value {
-  font-size: 32rpx;
-  font-weight: 600;
+.tip-icon {
+  font-size: 28rpx;
 }

-.count-text {
+.tip-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
 }

-.count-right {
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-}
-
-.count-value {
-  font-size: 32rpx;
-  font-weight: 700;
+.tip-btn {
+  padding: 10rpx 24rpx;
+  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
+  color: #000;
+  font-size: 24rpx;
+  font-weight: 500;
+  border-radius: 20rpx;
 }

 .text-brand {
@@ -135,15 +103,6 @@
  color: #FFD700;
 }

-.unlock-mini-btn {
-  padding: 12rpx 24rpx;
-  background: rgba(255, 215, 0, 0.2);
-  color: #FFD700;
-  font-size: 22rpx;
-  font-weight: 500;
-  border-radius: 24rpx;
-}
-
 /* ===== 主内容区 ===== */
 .main-content {
  padding: 0 32rpx;
@@ -737,7 +696,182 @@
  margin-top: 24rpx;
 }

-/* ===== 加入成功 ===== */
+/* ===== 新版加入弹窗 ===== */
+.join-modal-new {
+  padding: 0;
+  border-radius: 32rpx;
+  overflow: hidden;
+}
+
+.join-header {
+  position: relative;
+  padding: 48rpx 40rpx 32rpx;
+  background: linear-gradient(135deg, rgba(0, 206, 209, 0.15) 0%, rgba(123, 97, 255, 0.1) 100%);
+  text-align: center;
+}
+
+.join-icon-wrap {
+  width: 100rpx;
+  height: 100rpx;
+  margin: 0 auto 20rpx;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.join-icon {
+  font-size: 48rpx;
+}
+
+.join-title {
+  display: block;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 8rpx;
+}
+
+.join-subtitle {
+  display: block;
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.close-btn-new {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.contact-switch {
+  display: flex;
+  gap: 16rpx;
+  padding: 24rpx 40rpx;
+}
+
+.switch-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  padding: 24rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.6);
+  border: 2rpx solid transparent;
+}
+
+.switch-item.switch-active {
+  background: rgba(0, 206, 209, 0.15);
+  color: #00CED1;
+  border-color: rgba(0, 206, 209, 0.3);
+}
+
+.switch-icon {
+  font-size: 32rpx;
+}
+
+.input-area {
+  padding: 0 40rpx 24rpx;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.3);
+  border: 2rpx solid rgba(255, 255, 255, 0.1);
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+
+.input-prefix {
+  padding: 0 24rpx;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.5);
+  border-right: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.input-field {
+  flex: 1;
+  padding: 28rpx 24rpx;
+  font-size: 32rpx;
+  color: #ffffff;
+}
+
+.input-placeholder-new {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.error-msg {
+  display: block;
+  font-size: 24rpx;
+  color: #ff4444;
+  margin-top: 12rpx;
+  padding-left: 8rpx;
+}
+
+.submit-btn-new {
+  margin: 8rpx 40rpx 24rpx;
+  padding: 28rpx;
+  background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%);
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: 600;
+  text-align: center;
+  border-radius: 20rpx;
+}
+
+.btn-disabled-new {
+  opacity: 0.5;
+}
+
+.form-notice-new {
+  display: block;
+  text-align: center;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.3);
+  padding-bottom: 32rpx;
+}
+
+/* ===== 新版加入成功 ===== */
+.join-success-new {
+  padding: 64rpx 40rpx;
+  text-align: center;
+}
+
+.success-icon-big {
+  font-size: 96rpx;
+  display: block;
+  margin-bottom: 24rpx;
+}
+
+.success-title-new {
+  display: block;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 12rpx;
+}
+
+.success-desc-new {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ===== 旧版加入成功 (保留兼容) ===== */
 .join-success {
  padding: 48rpx;
  text-align: center;