ai-c/pages/index/index.wxml

<!-- 首页 - 遇见页面 -->
<view class="page-container">
  <!-- 顶部导航栏 -->
  <view class="unified-header">
    <view class="unified-header-left"></view>
    <text class="unified-header-title">陪伴</text>
    <view class="unified-header-right"></view>
  </view>

  <!-- 内容区域 -->
  <view class="content-area" style="padding-top: 194rpx;">
    <!-- 顶部 Banner -->
    <view class="banner-section" wx:if="{{homeBanner}}">
      <image class="home-banner" src="{{homeBanner}}" mode="aspectFill" bindtap="onBannerTap"></image>
    </view>

    <!-- 好友故事 -->
    <scroll-view scroll-x class="story-scroll" enhanced show-scrollbar="{{false}}">
      <view class="story-list">
        <view class="story-item" wx:for="{{storyUsers}}" wx:key="name" bindtap="onStoryTap" data-index="{{index}}">
          <view class="story-avatar-wrap">
            <view class="story-ring"></view>
            <image class="story-avatar" src="{{item.img}}" mode="aspectFill"></image>
          </view>
          <text class="story-name">{{item.name}}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 滑动提示 -->
    <view class="swipe-hint">
      <image src="/images/icon-chevron-left.png" class="hint-arrow" mode="aspectFit"></image>
      <text class="hint-text">左右滑动</text>
      <image src="/images/icon-chevron-right.png" class="hint-arrow" mode="aspectFit"></image>
    </view>

    <!-- 卡片堆叠区域 -->
    <view class="card-stack">
      <!-- 下一张卡片（背景） -->
      <view class="card-next" wx:if="{{!loading && profiles.length > 1 && currentIndex < profiles.length - 1}}">
        <image class="card-bg-image" src="{{profiles[currentIndex + 1].image}}" mode="aspectFill"></image>
      </view>

      <!-- 当前卡片 -->
      <view 
        class="card-current {{swipeDirection}}" 
        wx:if="{{!loading && profiles.length > 0 && currentIndex < profiles.length}}"
        bindtouchstart="onTouchStart"
        bindtouchmove="onTouchMove"
        bindtouchend="onTouchEnd"
        bindtap="onCardTap"
        style="transform: translateX({{offsetX}}px) rotate({{rotation}}deg);"
      >
        <view class="card-inner">
          <image class="card-image" src="{{profiles[currentIndex].image}}" mode="aspectFill"></image>
          
          <!-- 信息覆盖层 -->
          <view class="card-overlay">
            <view class="card-info">
              <view class="card-name-row">
                <text class="card-name">{{profiles[currentIndex].name}}</text>
                <text class="card-height">{{profiles[currentIndex].height}}</text>
              </view>
              <view class="card-location-row">
                <text class="card-location">{{profiles[currentIndex].location}}</text>
                <text class="card-divider">|</text>
                <text class="card-occupation">{{profiles[currentIndex].occupation}}</text>
              </view>
              <text class="card-bio">{{profiles[currentIndex].bio}}</text>
              <view class="card-tags">
                <text class="card-tag" wx:for="{{profiles[currentIndex].tags}}" wx:key="*this">{{item}}</text>
              </view>
            </view>
          </view>


        </view>

        <!-- 顶部头像信息 -->
        <view class="card-host">
          <view class="host-avatar-wrap">
            <image class="host-avatar" src="{{profiles[currentIndex].avatar}}" mode="aspectFill"></image>
          </view>
          <text class="host-name">{{profiles[currentIndex].name}}</text>
        </view>
      </view>

      <!-- 加载中状态 -->
      <view class="card-empty" wx:if="{{loading}}">
        <view class="empty-icon-wrap loading">
          <image src="/images/icon-refresh.png" class="empty-icon rotating" mode="aspectFit"></image>
        </view>
        <text class="empty-title">正在加载...</text>
        <text class="empty-desc">请稍候</text>
      </view>

      <!-- 加载失败或没有数据或已滑完 -->
      <view class="card-empty" wx:elif="{{!loading && (profiles.length === 0 || currentIndex >= profiles.length)}}">
        <view class="empty-icon-wrap">
          <image src="/images/icon-refresh.png" class="empty-icon" mode="aspectFit"></image>
        </view>
        <text class="empty-title">{{error || '暂时没有更多伙伴了'}}</text>
        <text class="empty-desc">点击下方按钮重新加载</text>
        <button class="refresh-btn" bindtap="onRefresh">换一批</button>
      </view>
    </view>

    <!-- 底部操作按钮 - 放在卡片堆叠区域外 -->
    <view class="floating-actions" wx:if="{{!loading && profiles.length > 0 && currentIndex < profiles.length}}">
      <view class="action-btn heart-btn {{likedProfiles[profiles[currentIndex].id] ? 'liked' : ''}}" catchtap="onToggleLike">
        <image src="/images/icon-heart{{likedProfiles[profiles[currentIndex].id] ? '-filled' : ''}}.png" class="action-icon" mode="aspectFit"></image>
        <text class="action-label">喜欢</text>
      </view>
      <view class="action-btn voice-btn" catchtap="onPlayVoice">
        <image src="/images/icon-voice.png" class="action-icon" mode="aspectFit"></image>
        <text class="action-label">声音</text>
      </view>
      <view class="action-btn select-btn {{unlockedProfiles[profiles[currentIndex].id] ? 'unlocked' : ''}}" catchtap="onSelectCharacter">
        <image src="/images/icon-check.png" class="action-icon" mode="aspectFit"></image>
        <text class="action-label">{{unlockedProfiles[profiles[currentIndex].id] ? '已选' : '选择'}}</text>
      </view>
    </view>
  </view>

  <!-- 解锁弹窗 -->
  <view class="modal-mask" wx:if="{{showVipModal}}" bindtap="closeVipModal">
    <view class="modal-content" catchtap="preventBubble">
      <view class="modal-header">
        <view class="modal-avatar-wrap">
          <image class="modal-avatar" src="{{profiles[currentIndex].avatar}}" mode="aspectFill"></image>
          <view class="modal-lock">
            <image src="/images/icon-lock.png" class="lock-icon" mode="aspectFit"></image>
          </view>
        </view>
        <text class="modal-title">解锁与 <text class="highlight">{{profiles[currentIndex].name}}</text> 的专属聊天</text>
      </view>
      
      <view class="modal-options">
        <view class="option-item" bindtap="onUpgrade">
          <view class="option-icon grass">
            <image src="/images/icon-heart.png" mode="aspectFit"></image>
          </view>
          <view class="option-info">
            <text class="option-price">{{unlockHeartsCost}} 爱心</text>
            <text class="option-desc">{{heartCount >= unlockHeartsCost ? '爱心值充足 立即兑换' : '爱心值不足 去充值'}}</text>
          </view>
          <view class="option-btn">兑换</view>
        </view>
        
        <view class="option-item highlight" bindtap="onPurchase">
          <view class="option-icon money">
            <text class="money-symbol">¥</text>
          </view>
          <view class="option-info light">
            <text class="option-price">9.9元</text>
            <text class="option-desc">限时特惠 立即购买</text>
          </view>
          <view class="option-btn light">购买</view>
        </view>
      </view>
      
      <text class="modal-cancel" bindtap="closeVipModal">暂不需要</text>
    </view>
  </view>

  <!-- 解锁弹窗 - 完全匹配Figma设计 -->
  <view class="unlock-popup-mask" wx:if="{{showHeartPopup}}" bindtap="closeHeartPopup" catchtouchmove="preventTouchMove">
    <view class="unlock-popup" catchtap="preventBubble">
      <!-- 关闭按钮 -->
      <view class="unlock-popup-close" bindtap="closeHeartPopup">
        <text>×</text>
      </view>
      
      <!-- 顶部白色区域 -->
      <view class="unlock-popup-header">
        <!-- 角色头像 -->
        <view class="unlock-avatar-container">
          <view class="unlock-avatar-wrap">
            <image class="unlock-avatar" src="{{currentCharacter.avatar || currentCharacter.image}}" mode="aspectFill"></image>
          </view>
          <!-- 锁图标 -->
          <view class="unlock-lock-icon">
            <image src="/images/icon-lock.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 标题 -->
        <view class="unlock-title">
          <text>解锁与 </text>
          <text class="highlight">{{currentCharacter.name}}</text>
          <text> 的专属聊天</text>
        </view>
      </view>
      
      <!-- 选项区域 -->
      <view class="unlock-options">
        <!-- 分享解锁选项 -->
        <view class="unlock-option-item share-option" bindtap="onShareUnlock">
          <view class="option-left">
            <view class="option-icon share-icon">
              <image src="/images/icon-share.png" mode="aspectFit"></image>
            </view>
            <view class="option-info">
              <text class="option-title">0元解锁</text>
              <text class="option-desc">传递温暖 回馈爱心</text>
            </view>
          </view>
          <view class="option-btn share-btn">
            <text>分享</text>
          </view>
        </view>
        
        <!-- 爱心兑换选项 -->
        <view class="unlock-option-item hearts-option" bindtap="onExchangeHearts">
          <view class="option-left">
            <view class="option-icon hearts-icon">
              <image src="/images/icon-heart-filled.png" mode="aspectFit"></image>
            </view>
            <view class="option-info">
              <text class="option-title">{{unlockHeartsCost}}爱心</text>
              <text class="option-desc">{{heartCount >= unlockHeartsCost ? '余额充足 立即兑换' : '爱心值不足 去充值'}}</text>
            </view>
          </view>
          <view class="option-btn hearts-btn">
            <text>兑换</text>
          </view>
        </view>
        
        <!-- 暂不需要 -->
        <view class="unlock-cancel" bindtap="closeHeartPopup">
          <text>暂不需要</text>
        </view>
      </view>
    </view>
  </view>

  <!-- GF100 领取弹窗 -->
  <view class="gf100-mask" wx:if="{{showGf100Popup}}" catchtouchmove="preventTouchMove">
    <view class="gf100-content">
      <image class="gf100-image" src="{{gf100ImageUrl}}" mode="widthFix" bindtap="onClaimGf100"></image>
      <view class="gf100-close" bindtap="closeGf100Popup">
        <text class="close-icon">×</text>
      </view>
    </view>
  </view>

  <!-- 自定义底部导航栏 -->
  <view class="custom-tabbar">
    <view class="tabbar-item active" wx:if="{{auditStatus === 0}}">
      <image src="/images/tab-listen-active.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text active">陪伴</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/entertainment/entertainment">
      <image src="/images/tab-companion.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">文娱</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/service/service">
      <image src="/images/tab-service.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">服务</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/chat/chat">
      <view class="message-icon-wrapper">
        <image src="/images/tab-message.png" class="tabbar-icon" mode="aspectFit"></image>
        <view class="message-badge" wx:if="{{totalUnread > 0}}">
          <text wx:if="{{totalUnread < 100}}">{{totalUnread}}</text>
          <text wx:else>99+</text>
        </view>
      </view>
      <text class="tabbar-text">消息</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/profile/profile">
      <image src="/images/tab-profile.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">我的</text>
    </view>
  </view>
</view>