b60edb3d47
主要更新: 1. 按H5网页端完全重构匹配功能(match页面) - 4种匹配类型: 创业合伙/资源对接/导师顾问/团队招募 - 资源对接等类型弹出手机号/微信号输入框 - 去掉重新匹配按钮，改为返回按钮 2. 修复所有卡片对齐和宽度问题 - 目录页附录卡片居中 - 首页阅读进度卡片满宽度 - 我的页面菜单卡片对齐 - 推广中心分享卡片统一宽度 3. 修复目录页图标和文字对齐 - section-icon固定40rpx宽高 - section-title与图标垂直居中 4. 更新真实完整文章标题(62篇) - 从book目录读取真实markdown文件名 - 替换之前的简化标题 5. 新增文章数据API - /api/db/chapters - 获取完整书籍结构 - 支持按ID获取单篇文章内容
285 lines
11 KiB
Plaintext
285 lines
11 KiB
Plaintext
<!--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>
|