soul-yongping/miniprogram/pages/index/index.wxml

<!--pages/index/index.wxml-->
<!--Soul创业派对 - 首页（按临时需求池/首页页面设计）-->
<view class="page page-transition">
  <!-- 自定义导航栏占位 -->
  <view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
  
  <!-- 顶部区域（按设计稿：S 图标 + 标题副标题 | 点击链接卡若） -->
  <view class="header">
    <view class="header-content">
      <view class="logo-section">
        <view class="logo-icon">
          <text class="logo-text">S</text>
        </view>
        <view class="logo-info">
          <text class="logo-title-text">Soul创业派对</text>
          <text class="logo-subtitle">来自派对房的真实故事</text>
        </view>
      </view>
      <view class="header-right">
        <view class="contact-btn" bindtap="onLinkKaruo">
          <image class="contact-avatar" src="/assets/images/author-avatar.png" mode="aspectFill"/>
          <text class="contact-text">点击链接卡若</text>
        </view>
      </view>
    </view>
    
    <!-- 搜索栏（根据配置显示） -->
    <view class="search-bar" wx:if="{{searchEnabled}}" bindtap="goToSearch">
      <view class="search-icon-wrap">
        <icon name="search" size="40" color="#8e8e93" customClass="search-icon-text"></icon>
      </view>
      <text class="search-placeholder">搜索章节标题或内容...</text>
    </view>
  </view>

  <!-- 主内容区 -->
  <view class="main-content">
    <!-- Banner卡片 - 最新章节（异步加载） -->
    <view class="banner-card" wx:if="{{latestSection}}" bindtap="goToRead" data-id="{{latestSection.id}}" data-mid="{{latestSection.mid}}">
      <view class="banner-glow"></view>
      <view class="banner-tag">推荐</view>
      <view class="banner-title">{{latestSection.title}}</view>
      <view class="banner-action">
        <text class="banner-action-text">点击阅读</text>
        <icon name="chevron-right" size="32" color="#fff" customClass="banner-arrow"></icon>
      </view>
    </view>
    <view class="banner-card banner-skeleton" wx:else bindtap="goToChapters">
      <view class="banner-glow"></view>
      <view class="banner-tag">推荐</view>
      <view class="banner-title">加载中...</view>
      <view class="banner-action"><text class="banner-action-text">点击阅读</text><icon name="chevron-right" size="32" color="#fff" customClass="banner-arrow"></icon></view>
    </view>

    <!-- 超级个体（横向滚动，已去掉「查看全部」；审核模式隐藏） -->
    <view class="section" wx:if="{{!auditMode}}">
      <view class="section-header">
        <text class="section-title">超级个体</text>
      </view>
      <!-- 加载中：骨架动画 -->
      <view wx:if="{{superMembersLoading}}" class="super-loading">
        <view class="super-loading-inner">
          <view class="super-loading-item" wx:for="{{[1,2,3,4]}}" wx:key="*this">
            <view class="super-loading-avatar"></view>
            <view class="super-loading-name"></view>
          </view>
        </view>
      </view>
      <!-- 已加载有数据 -->
      <scroll-view wx:elif="{{superMembers.length > 0}}" class="super-scroll" scroll-x>
        <view class="super-scroll-inner">
          <view 
            class="super-item-h {{item.isPinned ? 'super-item-pinned' : ''}}" 
            wx:for="{{superMembers}}" 
            wx:key="id"
            bindtap="goToMemberDetail"
            data-id="{{item.id}}"
          >
            <view class="super-avatar {{item.isVip ? 'super-avatar-vip' : ''}} {{item.isPinned ? 'super-avatar-pinned' : ''}}">
              <image class="super-avatar-img" wx:if="{{item.avatar}}" src="{{item.avatar}}" mode="aspectFill"/>
              <text class="super-avatar-text" wx:else>{{item.name[0] || '会'}}</text>
              <view class="pinned-badge" wx:if="{{item.isPinned}}">★</view>
            </view>
            <text class="super-name">{{item.name}}</text>
          </view>
        </view>
      </scroll-view>
      <!-- 已加载无数据 -->
      <view wx:else class="super-empty">
        <text class="super-empty-text">成为会员，展示你的项目</text>
        <view class="super-empty-btn" bindtap="goToVip">加入创业派对 <icon name="chevron-right" size="28" color="#00CED1" customClass="inline-arrow"></icon></view>
      </view>
    </view>

    <!-- 精选推荐（带 tag，支持展开更多） -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">精选推荐</text>
        <view class="section-more" wx:if="{{featuredSections.length > 0}}" bindtap="toggleFeaturedExpanded">
          <text class="more-text">{{featuredExpandedLoading ? '加载中...' : (featuredExpanded ? '收起' : '展开更多')}}</text>
          <icon name="{{featuredExpanded ? 'chevron-up' : 'chevron-down'}}" size="28" color="rgba(255,255,255,0.6)" customClass="more-arrow"></icon>
        </view>
      </view>
      <view class="featured-list">
        <view 
          class="featured-item" 
          wx:for="{{featuredSections}}" 
          wx:key="id"
          bindtap="goToRead"
          data-id="{{item.id}}"
          data-mid="{{item.mid}}"
        >
          <view class="featured-content">
            <view class="featured-meta">
              <text class="featured-id brand-color">{{item.id}}</text>
              <text class="featured-tag {{item.tagClass || 'tag-rec'}}">{{item.tag || '精选'}}</text>
            </view>
            <text class="featured-title">{{item.title}}</text>
          </view>
          <icon name="chevron-right" size="28" color="rgba(255,255,255,0.6)" customClass="featured-arrow"></icon>
        </view>
      </view>
    </view>

    <!-- 最新新增（时间线样式，支持展开更多） -->
    <view class="section" wx:if="{{latestChapters.length > 0}}">
      <view class="section-header latest-header">
        <text class="section-title">最新新增</text>
        <view class="section-header-right">
          <view class="daily-badge-wrap">
            <text class="daily-badge">+{{latestChapters.length}}</text>
          </view>
          <view class="section-more" wx:if="{{latestChapters.length > 5}}" bindtap="toggleLatestExpanded">
            <text class="more-text">{{latestExpanded ? '收起' : '展开更多'}}</text>
            <icon name="{{latestExpanded ? 'chevron-up' : 'chevron-down'}}" size="28" color="rgba(255,255,255,0.6)" customClass="more-arrow"></icon>
          </view>
        </view>
      </view>
      <view class="timeline-wrap">
        <view class="timeline-line"></view>
        <view class="timeline-list">
          <view class="timeline-item {{index === 0 ? 'timeline-item-first' : ''}}" wx:for="{{displayLatestChapters}}" wx:key="id" bindtap="goToRead" data-id="{{item.id}}" data-mid="{{item.mid}}">
            <view class="timeline-dot"></view>
            <view class="timeline-content">
              <view class="timeline-row">
                <view class="timeline-left">
                  <text class="latest-new-tag">NEW</text>
                  <text class="timeline-title">{{item.title}}</text>
                </view>
                <view class="timeline-right">
                  <text class="timeline-price">¥{{item.price}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 底部留白 -->
  <view class="bottom-space"></view>

  <!-- 链接卡若 - 留资弹窗（未填手机/微信号时）：一键获取 + 手动输入 -->
  <view class="lead-mask" wx:if="{{showLeadModal}}" catchtap="closeLeadModal">
    <!-- 使用 catchtap="stopPropagation" 阻止内部点击冒泡到遮罩层，避免点击输入框时弹窗被关闭 -->
    <view class="lead-box" catchtap="stopPropagation">
      <text class="lead-title">留下联系方式</text>
      <text class="lead-desc">方便卡若与您联系</text>
      <button class="lead-get-phone-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumberForLead">一键获取手机号</button>
      <text class="lead-divider">或手动输入</text>
      <view class="lead-input-wrap">
        <input class="lead-input" placeholder="请输入手机号" type="number" maxlength="11" value="{{leadPhone}}" bindinput="onLeadPhoneInput"/>
      </view>
      <view class="lead-actions">
        <button class="lead-btn lead-btn-cancel" bindtap="closeLeadModal">取消</button>
        <button class="lead-btn lead-btn-submit" bindtap="submitLead">提交</button>
      </view>
    </view>
  </view>
</view>