126 lines
4.6 KiB
Plaintext
126 lines
4.6 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">
|
|
<!-- 轮播图模式 -->
|
|
<swiper class="banner-swiper"
|
|
indicator-dots="{{bannerList.length > 1}}"
|
|
autoplay="{{true}}"
|
|
circular="{{true}}"
|
|
interval="5000"
|
|
duration="500"
|
|
indicator-color="rgba(255, 255, 255, 0.5)"
|
|
indicator-active-color="#FFFFFF"
|
|
wx:if="{{bannerList.length > 0}}">
|
|
<swiper-item wx:for="{{bannerList}}" wx:key="*this">
|
|
<image src="{{item}}" class="banner-image" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 遮罩层 -->
|
|
<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-state" wx:if="{{!loading && partnerList.length === 0}}">
|
|
<image src="/images/icon-empty.png" class="empty-icon" mode="aspectFit"></image>
|
|
<text class="empty-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.png" class="close-icon" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="modal-title">{{selectedPartner.group_name || '加入兴趣群'}}</view>
|
|
|
|
<!-- 副标题 -->
|
|
<view class="modal-subtitle">加入感兴趣的搭子，找到志同道合朋友</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>
|