107 lines
3.9 KiB
Plaintext
107 lines
3.9 KiB
Plaintext
<!-- 兴趣搭子页面 - Figma设计 -->
|
|
<view class="page-container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="unified-header">
|
|
<view class="unified-header-left" bindtap="onBack">
|
|
<image src="/images/icon-back.png" class="unified-back-icon" mode="aspectFit"></image>
|
|
<text class="unified-back-text">返回</text>
|
|
</view>
|
|
<text class="unified-header-title">兴趣搭子</text>
|
|
<view class="unified-header-right"></view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<scroll-view scroll-y class="content-scroll" style="padding-top: 194rpx;" enhanced show-scrollbar="{{false}}">
|
|
<!-- 顶部Banner -->
|
|
<view class="hero-banner">
|
|
<view class="hero-overlay"></view>
|
|
<view class="hero-content">
|
|
<view class="hero-title">寻找志同道合的伙伴</view>
|
|
<view class="hero-subtitle">加入感兴趣的社群，开启精彩退休生活</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 兴趣分类列表 -->
|
|
<view class="interest-list">
|
|
<!-- 动态渲染兴趣搭子列表 -->
|
|
<view class="interest-card"
|
|
wx:for="{{partnerList}}"
|
|
wx:key="id"
|
|
bindtap="onInterestTap"
|
|
data-partner="{{item}}">
|
|
<view class="interest-icon" style="background-color: {{item.bg_color}}">
|
|
<image src="{{item.icon}}" class="icon-image" mode="aspectFit" style="color: {{item.icon_color}}"></image>
|
|
</view>
|
|
<view class="interest-info">
|
|
<view class="interest-header">
|
|
<view class="interest-name">{{item.name}}</view>
|
|
<view class="interest-members">
|
|
<image src="/images/icon-users.png" class="members-icon" mode="aspectFit"></image>
|
|
<text class="members-count">{{item.member_count}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="interest-desc">{{item.description}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-tip" wx:if="{{loading}}">加载中...</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-tip" wx:if="{{!loading && partnerList.length === 0}}">
|
|
<text>暂无兴趣搭子数据</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 如何加入说明 -->
|
|
<view class="how-to-join">
|
|
<view class="join-icon-wrapper">
|
|
<view class="join-icon">
|
|
<view class="dot dot-1"></view>
|
|
<view class="dot dot-2"></view>
|
|
<view class="dot dot-3"></view>
|
|
<view class="dot dot-4"></view>
|
|
<view class="line"></view>
|
|
</view>
|
|
</view>
|
|
<view class="join-content">
|
|
<view class="join-title">如何加入？</view>
|
|
<view class="join-desc">点击上方感兴趣的分类，保存二维码图片或直接扫码，即可加入我们的官方企业微信社群。</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view style="height: 60rpx;"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 二维码弹窗 -->
|
|
<view class="qrcode-modal" wx:if="{{showQrcodeModal}}" catchtap="onCloseQrcodeModal">
|
|
<!-- 遮罩层 -->
|
|
<view class="modal-mask"></view>
|
|
|
|
<!-- 弹窗内容 -->
|
|
<view class="modal-content" catchtap="{{null}}">
|
|
<!-- 关闭按钮 -->
|
|
<view class="close-btn" catchtap="onCloseQrcodeModal">
|
|
<image src="/images/icon-close-gray.png" class="close-icon" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="modal-title">{{selectedPartner.group_name || '加入兴趣群'}}</view>
|
|
|
|
<!-- 副标题 -->
|
|
<view class="modal-subtitle">{{selectedPartner.group_description || '找到志同道合的伙伴'}}</view>
|
|
|
|
<!-- 二维码容器 -->
|
|
<view class="qrcode-container">
|
|
<image src="{{selectedPartner.qr_code}}" class="qrcode-image" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<view class="save-btn" catchtap="onSaveQrcode">
|
|
保存二维码
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|