d42652c51b
🎨 界面修复: - 修复章节列表锁图标和标题错位（用简单符号替代emoji） - 修复匹配页今日剩余图标和文字对齐 - 删除匹配页底部'每天3次免费匹配'提示 ✏️ 文案优化: - '分享赚钱' → '立即推广' - '分享给好友' → '推荐好友，共同成长' - '好友购买你获得90%佣金' → '邀请好友加入，享90%推广收益' 📄 文档更新: - 更新需求方案文档v1.1 - 添加上线检查清单 - 完善API接口文档
264 lines
9.7 KiB
Plaintext
264 lines
9.7 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">
|
||
<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>
|
||
|
||
<!-- 主内容区 -->
|
||
<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" 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">今日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>
|