129 lines
4.6 KiB
Plaintext
129 lines
4.6 KiB
Plaintext
<!--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>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 匹配中状态 -->
|
||
<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>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="loading-text">正在寻找志同道合的书友...</view>
|
||
<view class="loading-progress">已匹配 {{matchAttempts}} 次</view>
|
||
|
||
<button class="btn-secondary cancel-btn" bindtap="cancelMatch">
|
||
取消匹配
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 匹配成功状态 -->
|
||
<view class="match-success" wx:if="{{currentMatch && !isMatching}}">
|
||
<view class="success-animation">
|
||
<view class="success-icon">✨</view>
|
||
</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>
|
||
</view>
|
||
|
||
<view class="match-score">
|
||
<view class="score-label">匹配度</view>
|
||
<view class="score-value">{{currentMatch.matchScore}}%</view>
|
||
</view>
|
||
</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>
|
||
</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>
|
||
|
||
<button class="btn-secondary next-btn" bindtap="nextMatch">
|
||
🔄 不喜欢？重新匹配
|
||
</button>
|
||
</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>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|