<!-- 兴趣搭子页面 - 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-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">{{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>
