fnvtk/soul
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完整重构小程序匹配功能 + 修复UI对齐 + 文章数据API

Browse Source 
主要更新:
1. 按H5网页端完全重构匹配功能(match页面)
   - 4种匹配类型: 创业合伙/资源对接/导师顾问/团队招募
   - 资源对接等类型弹出手机号/微信号输入框
   - 去掉重新匹配按钮，改为返回按钮

2. 修复所有卡片对齐和宽度问题
   - 目录页附录卡片居中
   - 首页阅读进度卡片满宽度
   - 我的页面菜单卡片对齐
   - 推广中心分享卡片统一宽度

3. 修复目录页图标和文字对齐
   - section-icon固定40rpx宽高
   - section-title与图标垂直居中

4. 更新真实完整文章标题(62篇)
   - 从book目录读取真实markdown文件名
   - 替换之前的简化标题

5. 新增文章数据API
   - /api/db/chapters - 获取完整书籍结构
   - 支持按ID获取单篇文章内容
This commit is contained in:
卡若
2026-01-21 15:49:12 +08:00
parent 1ee25e3dab
commit b60edb3d47
197 changed files with 34430 additions and 7345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
miniprogram/pages/match/match.wxml
View File

@@ -1,128 +1,284 @@
<!--pages/match/match.wxml-->
<view class="container match-container page-transition">
<!-- 星空背景效果 -->
<canvas canvas-id="starCanvas" class="star-canvas"></canvas>
<!-- 顶部标题 -->
<view class="match-header">
<view class="match-title gradient-text">寻找合作伙伴</view>
<view class="match-subtitle">找到和你一起创业的灵魂</view>
</view>
<!-- 匹配状态区 -->
<view class="match-status-area">
<!-- 未匹配状态 -->
<view class="match-idle" wx:if="{{!isMatching && !currentMatch}}">
<!-- 中央大星球 -->
<view class="center-planet" bindtap="startMatch">
<view class="planet-gradient">
<view class="planet-icon">
<image class="icon-mic" src="/assets/icons/match.png" mode="aspectFit"></image>
</view>
<view class="planet-text">开始匹配</view>
<view class="planet-subtitle">寻找合作伙伴</view>
</view>
<view class="planet-ring"></view>
</view>
<view class="match-tips">
<view class="tip-item">💼 共同的创业方向</view>
<view class="tip-item">💬 实时在线交流</view>
<view class="tip-item">🎯 相似的商业洞察</view>
<!--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>
<!-- 匹配中状态 -->
<view class="match-loading" wx:if="{{isMatching}}">
<view class="loading-planet">
<image class="rotating-planet" src="/assets/images/planet-match.png" mode="aspectFit"></image>
<view class="loading-rings">
<view class="ring ring-1"></view>
<view class="ring ring-2"></view>
<view class="ring ring-3"></view>
<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>
<view class="loading-text">正在寻找志同道合的书友...</view>
<view class="loading-progress">已匹配 {{matchAttempts}} 次</view>
<button class="btn-secondary cancel-btn" bindtap="cancelMatch">
取消匹配
</button>
</view>
</block>
<!-- 匹配成功状态 -->
<view class="match-success" wx:if="{{currentMatch && !isMatching}}">
<view class="success-animation">
<view class="success-icon">✨</view>
</view>
<block wx:if="{{currentMatch && !isMatching}}">
<view class="matched-state">
<!-- 成功动画 -->
<view class="success-icon-wrapper">
<text class="success-icon">✨</text>
</view>
<view class="match-user-card card">
<image
class="user-avatar"
src="{{currentMatch.avatar}}"
mode="aspectFill"
></image>
<view class="user-info">
<view class="user-name">{{currentMatch.nickname}}</view>
<view class="user-tags">
<text class="tag" wx:for="{{currentMatch.tags}}" wx:key="*this">
{{item}}
</text>
<!-- 用户卡片 -->
<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="match-score">
<view class="score-label">匹配度</view>
<view class="score-value">{{currentMatch.matchScore}}%</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="common-interests card">
<view class="interests-title">共同兴趣</view>
<view class="interests-list">
<view class="interest-item" wx:for="{{currentMatch.commonInterests}}" wx:key="*this">
<text class="interest-icon">{{item.icon}}</text>
<text class="interest-text">{{item.text}}</text>
</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>
</view>
<!-- 核心理念 -->
<view class="core-concept card">
<view class="concept-title">核心理念</view>
<view class="concept-text">{{currentMatch.concept || '一个坚持长期主义的私域玩家，擅长内容结构化。'}}</view>
</view>
<!-- 操作按钮 -->
<view class="match-actions">
<button class="btn-primary action-btn" bindtap="addWechat">
<text class="btn-icon">➕</text>
<text>一键加好友</text>
</button>
<button class="btn-primary action-btn" bindtap="joinGroup">
<text class="btn-icon">👥</text>
<text>加入书友群</text>
</button>
</view>
</block>
<button class="btn-secondary next-btn" bindtap="nextMatch">
🔄 不喜欢？重新匹配
</button>
<!-- 表单状态 -->
<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="recent-matches" wx:if="{{recentMatches.length > 0 && !isMatching}}">
<view class="section-title">最近匹配</view>
<scroll-view class="matches-scroll" scroll-x>
<view class="match-item" wx:for="{{recentMatches}}" wx:key="id" bindtap="viewMatchDetail" data-id="{{item.id}}">
<image class="match-avatar" src="{{item.avatar}}" mode="aspectFill"></image>
<view class="match-name">{{item.nickname}}</view>
<view class="match-time">{{item.matchTime}}</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>
</scroll-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>