ai-c/pages/companion-chat/companion-chat.wxml

<!-- 陪聊页面 -->
<view class="page-container">
  <!-- 吸顶搜索和筛选区域（滚动后显示） -->
  <view class="sticky-header {{isSticky ? 'show' : ''}}">
    <!-- 搜索框 -->
    <view class="search-box">
      <image src="/images/icon-search.png" class="search-icon" mode="aspectFit"></image>
      <input class="search-input" placeholder="请输入倾诉师姓名" value="{{searchKeyword}}" bindinput="onSearchInput" />
    </view>

    <!-- 筛选条 -->
    <view class="filter-bar">
      <view class="filter-item {{filters.sortBy && filters.sortBy !== 'rating' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="sort">
        <text class="filter-text">{{filterLabels.sort}}</text>
        <image src="/images/icon-chevron-down.png" class="filter-arrow" mode="aspectFit"></image>
      </view>
      <view class="filter-item {{filters.gender ? 'active' : ''}}" bindtap="onFilterTap" data-filter="gender">
        <text class="filter-text">{{filterLabels.gender}}</text>
        <image src="/images/icon-chevron-down.png" class="filter-arrow" mode="aspectFit"></image>
      </view>
      <view class="filter-item {{filters.specialty ? 'active' : ''}}" bindtap="onFilterTap" data-filter="specialty">
        <text class="filter-text">{{filterLabels.specialty}}</text>
        <image src="/images/icon-chevron-down.png" class="filter-arrow" mode="aspectFit"></image>
      </view>
      <view class="filter-item {{filters.status ? 'active' : ''}}" bindtap="onFilterTap" data-filter="filter">
        <text class="filter-text">{{filterLabels.filter}}</text>
        <image src="/images/icon-settings.png" class="filter-arrow" mode="aspectFit"></image>
      </view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" bindscroll="onPageScroll" enhanced show-scrollbar="{{false}}">
    <!-- 顶部 Header 背景（跟随滚动） -->
    <view class="header-scroll">
      <image src="{{bannerImage}}" class="header-image" mode="aspectFill"></image>
    </view>

    <!-- 红包提示条 -->
    <view class="notice-bar">
      <image src="{{giftIcon}}" class="notice-icon" mode="aspectFit"></image>
      <text class="notice-text">您有1个红包即将过期，请及时使用哦</text>
    </view>

    <!-- 分类按钮 -->
    <view class="category-grid" wx:if="{{showCategoryGrid}}">
      <view class="category-btn" bindtap="onCategoryTap" data-type="陪伴倾听">
        <image src="{{categoryImages[0]}}" class="category-image" mode="aspectFill" binderror="onCategoryImageError" bindload="onCategoryImageLoad"></image>
      </view>
      <view class="category-btn" bindtap="onCategoryTap" data-type="用心陪伴">
        <image src="{{categoryImages[1]}}" class="category-image" mode="aspectFill" binderror="onCategoryImageError" bindload="onCategoryImageLoad"></image>
      </view>
      <view class="category-btn" bindtap="onCategoryTap" data-type="心理健康">
        <image src="{{categoryImages[2]}}" class="category-image" mode="aspectFill" binderror="onCategoryImageError" bindload="onCategoryImageLoad"></image>
      </view>
      <view class="category-btn" bindtap="onCategoryTap" data-type="情感咨询">
        <image src="{{categoryImages[3]}}" class="category-image" mode="aspectFill" binderror="onCategoryImageError" bindload="onCategoryImageLoad"></image>
      </view>
    </view>

    <!-- 倾诉师列表区域 -->
    <view class="counselor-section">
      <!-- 标题行 -->
      <view class="section-header">
        <text class="section-title">倾听陪伴</text>
        <view class="guide-btn" bindtap="onGuideClick">
          <text class="guide-text">电话倾诉指南</text>
          <image src="/images/icon-chevron-right.png" class="guide-arrow" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 原位搜索框（未吸顶时显示） -->
      <view class="search-box {{isSticky ? 'hidden' : ''}}">
        <image src="/images/icon-search.png" class="search-icon" mode="aspectFit"></image>
        <input class="search-input" placeholder="请输入倾诉师姓名" value="{{searchKeyword}}" bindinput="onSearchInput" />
      </view>

      <!-- 原位筛选条（未吸顶时显示） -->
      <view class="filter-bar filter-bar-inline {{isSticky ? 'hidden' : ''}}">
        <view class="filter-item {{filters.sortBy && filters.sortBy !== 'rating' ? 'active' : ''}}" bindtap="onFilterTap" data-filter="sort">
          <text class="filter-text">{{filterLabels.sort}}</text>
          <image src="/images/icon-chevron-down.png" class="filter-arrow" mode="aspectFit"></image>
        </view>
        <view class="filter-item {{filters.gender ? 'active' : ''}}" bindtap="onFilterTap" data-filter="gender">
          <text class="filter-text">{{filterLabels.gender}}</text>
          <image src="/images/icon-chevron-down.png" class="filter-arrow" mode="aspectFit"></image>
        </view>
        <view class="filter-item {{filters.specialty ? 'active' : ''}}" bindtap="onFilterTap" data-filter="specialty">
          <text class="filter-text">{{filterLabels.specialty}}</text>
          <image src="/images/icon-chevron-down.png" class="filter-arrow" mode="aspectFit"></image>
        </view>
        <view class="filter-item {{filters.status ? 'active' : ''}}" bindtap="onFilterTap" data-filter="filter">
          <text class="filter-text">{{filterLabels.filter}}</text>
          <image src="/images/icon-settings.png" class="filter-arrow" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 吸顶占位（吸顶时显示，防止内容跳动） -->
      <view class="sticky-placeholder {{isSticky ? 'show' : ''}}"></view>

      <!-- 倾诉师列表 -->
      <view class="counselor-list">
        <view class="counselor-card" wx:for="{{counselorList}}" wx:key="id" bindtap="onCounselorTap" data-id="{{item.id}}">
          <!-- 左侧头像区域 -->
          <view class="counselor-avatar-section">
            <view class="avatar-wrap">
              <!-- 优先显示真实头像，没有则显示渐变占位符 -->
              <image wx:if="{{item.avatar && item.avatar.length > 0}}" src="{{item.avatar}}" class="avatar-image" mode="aspectFill" binderror="onAvatarError" data-index="{{index}}"></image>
              <view wx:else class="avatar-placeholder" style="background: linear-gradient(135deg, {{item.avatarColor || '#c984cd'}} 0%, {{item.avatarColorEnd || '#b06ab3'}} 100%);">
                <text class="avatar-text">{{item.name[0]}}</text>
              </view>
              <view class="online-dot {{item.onlineStatus === 'busy' ? 'busy' : ''}}" wx:if="{{item.online || item.onlineStatus === 'busy'}}"></view>
            </view>
            <text class="status-text {{item.onlineStatus}}" wx:if="{{item.statusText}}">{{item.statusText}}</text>
            <view class="trial-btn" catchtap="onTrialListen" data-id="{{item.id}}">
              <view class="play-icon"></view>
              <text class="trial-text">试听</text>
            </view>
          </view>

          <!-- 中间信息区域 -->
          <view class="counselor-info">
            <view class="name-row">
              <text class="counselor-name">{{item.name}}</text>
              <text class="counselor-type">{{item.type}}</text>
            </view>
            <text class="counselor-desc">{{item.age}} {{item.education}} {{item.training}}</text>
            <text class="counselor-cert">{{item.certification}}</text>
            <text class="counselor-quote">"{{item.quote}}"</text>
            <view class="tags-row">
              <view class="tag" wx:for="{{item.tags}}" wx:key="*this" wx:for-item="tag" wx:if="{{index < 2}}">
                <text class="tag-text">{{tag}}</text>
              </view>
            </view>
            <view class="stats-row">
              <view class="stat-item">
                <text class="stat-value">{{item.serviceCount}}</text>
                <text class="stat-label">服务人次</text>
              </view>
              <view class="stat-item">
                <text class="stat-value">{{item.rating}}</text>
                <text class="stat-label">评分</text>
              </view>
            </view>
          </view>

          <!-- 右侧咨询按钮和地址 -->
          <view class="counselor-action">
            <image src="{{consultButtonImage}}" class="consult-btn" mode="aspectFit" catchtap="onConsult" data-id="{{item.id}}"></image>
            <view class="location-row">
              <image src="{{locationIcon}}" class="location-icon" mode="aspectFit"></image>
              <text class="location-text">{{item.location}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="bottom-placeholder"></view>
  </scroll-view>

  <!-- 自定义底部导航栏 -->
  <view class="custom-tabbar">
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
      <image src="/images/tab-listen.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text">陪伴</text>
    </view>
    <view class="tabbar-item active">
      <image src="/images/tab-companion-active.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text active">文娱</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="{{totalUnread > 0 ? '/images/tab-message.png' : '/images/tab-message-nodot.png'}}" class="tabbar-icon" mode="aspectFit"></image>
      </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 class="guide-popup-mask" wx:if="{{showGuidePopup}}" bindtap="onCloseGuidePopup">
    <view class="guide-popup" catchtap="preventClose">
      <!-- 紫色渐变头部 -->
      <view class="guide-header">
        <view class="guide-header-left">
          <view class="guide-phone-icon">
            <image src="/images/icon-phone-white.png" class="phone-icon-img" mode="aspectFit"></image>
          </view>
          <view class="guide-header-text">
            <text class="guide-title">{{guideData.title}}</text>
            <text class="guide-subtitle">{{guideData.subtitle}}</text>
          </view>
        </view>
        <view class="guide-close-btn" catchtap="onCloseGuidePopup">
          <image src="/images/icon-close-white.png" class="close-icon-img" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 步骤列表 -->
      <view class="guide-steps">
        <view class="guide-step" wx:for="{{guideData.steps}}" wx:key="number">
          <view class="step-number">{{item.number}}</view>
          <view class="step-content">
            <text class="step-title">{{item.title}}</text>
            <text class="step-desc">{{item.description}}</text>
          </view>
        </view>
      </view>

      <!-- 温馨提示卡片 -->
      <view class="guide-tips">
        <view class="tips-icon-wrap">
          <text class="tips-icon-text">!</text>
        </view>
        <view class="tips-content">
          <text class="tips-title">{{guideData.tips.title}}</text>
          <text class="tips-text">{{guideData.tips.content}}</text>
        </view>
      </view>

      <!-- 我知道了按钮 -->
      <view class="guide-btn-wrap">
        <button class="guide-confirm-btn" bindtap="onCloseGuidePopup">我知道了</button>
      </view>
    </view>
  </view>
</view>