<!-- 服务页面 - 按照Figma设计实现 -->
<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>
  
  <!-- 内容区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: 194rpx;" enhanced show-scrollbar="{{false}}">
    <!-- 轮播图 Banner -->
    <view class="banner-section">
      <swiper class="banner-swiper" style="height: {{swiperHeight || 400}}rpx" indicator-dots="{{true}}" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff" autoplay="{{true}}" interval="{{3000}}" circular="{{true}}">
        <swiper-item wx:for="{{banners}}" wx:key="index">
          <image src="{{item}}" class="banner-image" mode="widthFix" bindload="onBannerLoad"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 服务类型 3宫格 -->
    <view class="service-types">
      <view class="service-type-item" wx:for="{{serviceTypes}}" wx:key="id" data-id="{{item.id}}" bindtap="onServiceType">
        <image src="{{item.icon}}" class="service-type-icon" mode="aspectFit"></image>
        <view class="service-type-name">{{item.name}}</view>
      </view>
    </view>

    <!-- 精选服务区域 -->
    <view class="featured-section">
      <view class="section-header">
        <text class="section-title">精选服务</text>
      </view>
    </view>

    <!-- 商家列表 -->
    <view class="provider-list">
      <view class="provider-card" wx:for="{{listData}}" wx:key="id" data-id="{{item.id}}" bindtap="onItemTap">
        <view class="provider-left">
          <view class="avatar-container">
            <view class="avatar-wrapper">
              <image src="{{item.image}}" class="provider-avatar" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <view class="provider-right">
          <view class="provider-header">
            <text class="provider-name">{{item.name}}</text>
            <view class="merchant-rating" wx:if="{{item.rating}}">
              <image src="/images/service-star.png" class="star-icon" mode="aspectFit"></image>
              <text class="rating-value">{{item.rating || '5.0'}}</text>
            </view>
          </view>
          <text class="provider-desc">{{item.desc}}</text>
          <view class="provider-skills" wx:if="{{item.tags && item.tags.length > 0}}">
            <view class="skill-tag" wx:for="{{item.tags}}" wx:for-item="tag" wx:key="*this">{{tag}}</view>
          </view>
        </view>
      </view>

      <!-- 暂无内容提示 -->
      <view class="empty-tip" wx:if="{{listData.length === 0 && !isLoading}}">
        <image src="/images/icon-empty.png" mode="aspectFit"></image>
        <text>暂无合作商家</text>
      </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" 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">
      <image src="/images/tab-service-active.png" class="tabbar-icon" mode="aspectFit"></image>
      <text class="tabbar-text active">服务</text>
    </view>
    <view class="tabbar-item" bindtap="switchTab" data-path="/pages/chat/chat">
      <view class="message-icon-wrapper">
        <image src="/images/tab-message-nodot.png" class="tabbar-icon" mode="aspectFit"></image>
        <view class="message-dot" wx:if="{{totalUnread > 0}}"></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>
