ai-c/pages/service-provider-detail/service-provider-detail.wxml

<!-- 服务人员详情页 -->
<view class="page-container">
  <!-- 固定导航栏 -->
  <view class="nav-container">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {{navBarHeight}}px;">
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
      </view>
      <view class="nav-title">服务详情</view>
      <view class="nav-share" bindtap="onShare">
        <image src="/images/icon-share.png" class="share-icon" mode="aspectFit"></image>
      </view>
    </view>
  </view>

  <!-- 内容滚动区域 -->
  <scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
    <!-- 服务人员信息卡片 -->
    <view class="provider-card">
      <!-- 头部背景渐变 -->
      <view class="card-header-bg"></view>
      
      <!-- 人员信息 -->
      <view class="provider-info">
        <view class="avatar-section">
          <view class="avatar-wrap">
            <image src="{{provider.avatar}}" class="avatar-img" mode="aspectFill"></image>
            <view class="verified-badge">
              <image src="/images/icon-verified.png" class="verified-icon" mode="aspectFit"></image>
              <text class="verified-text">实名认证</text>
            </view>
          </view>
        </view>
        
        <view class="info-section">
          <view class="name-row">
            <text class="provider-name">{{provider.name}}</text>
            <view class="provider-tag">{{provider.tag}}</view>
          </view>
          
          <view class="experience-row">
            <view class="experience-item">
              <image src="/images/icon-experience.png" class="exp-icon" mode="aspectFit"></image>
              <text class="exp-text">{{provider.experience}}</text>
            </view>
            <view class="rating-item">
              <image src="/images/service-star.png" class="star-icon" mode="aspectFit"></image>
              <text class="rating-text">{{provider.rating}}</text>
            </view>
          </view>
          
          <text class="provider-desc">{{provider.desc}}</text>
        </view>
      </view>
      
      <!-- 统计数据 -->
      <view class="stats-section">
        <view class="stat-item">
          <text class="stat-value">{{provider.hours}}</text>
          <text class="stat-label">服务时长</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{provider.serviceCount}}</text>
          <text class="stat-label">服务人次</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{provider.repeatRate}}%</text>
          <text class="stat-label">回头率</text>
        </view>
      </view>
    </view>

    <!-- 服务技能标签 -->
    <view class="skills-card">
      <view class="card-title">
        <view class="title-dot"></view>
        <text class="title-text">服务技能</text>
      </view>
      <view class="skills-list">
        <view class="skill-tag" wx:for="{{provider.skills}}" wx:key="*this">
          <image src="/images/icon-check-circle.png" class="check-icon" mode="aspectFit"></image>
          <text class="skill-text">{{item}}</text>
        </view>
      </view>
    </view>

    <!-- 服务介绍 -->
    <view class="intro-card">
      <view class="card-title">
        <view class="title-dot"></view>
        <text class="title-text">服务介绍</text>
      </view>
      <text class="intro-content">{{provider.introduction}}</text>
    </view>

    <!-- 服务案例（如果有） -->
    <view class="cases-card" wx:if="{{provider.cases && provider.cases.length > 0}}">
      <view class="card-title">
        <view class="title-dot"></view>
        <text class="title-text">服务案例</text>
      </view>
      <view class="cases-list">
        <view class="case-item" wx:for="{{provider.cases}}" wx:key="id">
          <image src="{{item.image}}" class="case-image" mode="aspectFill"></image>
          <text class="case-title">{{item.title}}</text>
        </view>
      </view>
    </view>

    <!-- 用户评价 -->
    <view class="reviews-card">
      <view class="card-title-row">
        <view class="card-title">
          <view class="title-dot"></view>
          <text class="title-text">用户评价</text>
          <text class="review-count">({{reviews.length}})</text>
        </view>
        <view class="view-all" bindtap="onViewAllReviews">
          <text class="view-all-text">查看全部</text>
          <image src="/images/service-arrow-right.png" class="arrow-icon" mode="aspectFit"></image>
        </view>
      </view>
      
      <!-- 评价列表 -->
      <view class="review-list">
        <view class="review-item" wx:for="{{reviews}}" wx:key="id" wx:if="{{index < 3}}">
          <view class="review-header">
            <view class="user-info">
              <image src="{{item.userAvatar || '/images/default-avatar.png'}}" class="user-avatar" mode="aspectFill"></image>
              <view class="user-detail">
                <text class="user-name">{{item.userName}}</text>
                <view class="review-stars">
                  <image src="/images/service-star.png" class="star-small" wx:for="{{item.rating}}" wx:for-item="star" wx:key="*this" mode="aspectFit"></image>
                </view>
              </view>
            </view>
            <text class="review-date">{{item.date}}</text>
          </view>
          <text class="review-content">{{item.content}}</text>
          <view class="review-tags" wx:if="{{item.tags && item.tags.length > 0}}">
            <view class="review-tag" wx:for="{{item.tags}}" wx:for-item="tag" wx:key="*this">
              <text class="tag-text">{{tag}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

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

  <!-- 底部操作栏 -->
  <view class="bottom-bar">
    <view class="price-section">
      <view class="price-row">
        <text class="price-symbol">¥</text>
        <text class="price-value">{{provider.price}}</text>
        <text class="price-unit">{{provider.unit}}</text>
      </view>
      <text class="price-tip">起步价</text>
    </view>
    
    <view class="action-buttons">
      <view class="consult-btn" bindtap="onConsult">
        <image src="/images/icon-chat.png" class="btn-icon" mode="aspectFit"></image>
        <text class="btn-text">咨询</text>
      </view>
      <view class="book-btn" bindtap="onBook">
        <text class="btn-text">立即预约</text>
      </view>
    </view>
  </view>
</view>

<!-- 预约弹窗 -->
<view class="booking-modal-mask" wx:if="{{showBookingModal}}" bindtap="closeBookingModal"></view>
<view class="booking-modal {{showBookingModal ? 'show' : ''}}" wx:if="{{showBookingModal}}">
  <view class="modal-header">
    <text class="modal-title">预约服务</text>
    <view class="modal-close" bindtap="closeBookingModal">
      <text class="close-icon">×</text>
    </view>
  </view>
  
  <scroll-view scroll-y class="modal-content">
    <!-- 服务人员信息 -->
    <view class="booking-provider">
      <image src="{{provider.avatar}}" class="provider-avatar-small" mode="aspectFill"></image>
      <view class="provider-info-small">
        <text class="provider-name-small">{{provider.name}}</text>
        <text class="provider-tag-small">{{provider.tag}}</text>
      </view>
    </view>
    
    <!-- 服务类型选择 -->
    <view class="form-section">
      <text class="form-label">服务类型</text>
      <view class="service-type-list">
        <view class="type-item {{selectedType === item.id ? 'active' : ''}}" 
              wx:for="{{serviceTypes}}" wx:key="id"
              bindtap="selectServiceType" data-id="{{item.id}}">
          <text class="type-name">{{item.name}}</text>
          <text class="type-price">¥{{item.price}}/{{item.unit}}</text>
        </view>
      </view>
    </view>
    
    <!-- 预约时间 -->
    <view class="form-section">
      <text class="form-label">预约时间</text>
      <view class="time-picker" bindtap="onPickTime">
        <text class="time-text">{{bookingTime || '请选择时间'}}</text>
        <image src="/images/icon-calendar.png" class="calendar-icon" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 服务地址 -->
    <view class="form-section">
      <text class="form-label">服务地址</text>
      <view class="address-picker" bindtap="onPickAddress">
        <text class="address-text">{{bookingAddress || '请选择地址'}}</text>
        <image src="/images/icon-location.png" class="location-icon" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 备注 -->
    <view class="form-section">
      <text class="form-label">备注说明</text>
      <textarea class="remark-input" placeholder="请输入您的需求或特殊说明" value="{{remark}}" bindinput="onRemarkInput" maxlength="200"></textarea>
      <text class="char-count">{{remark.length}}/200</text>
    </view>
    
    <!-- 价格汇总 -->
    <view class="price-summary">
      <view class="summary-row">
        <text class="summary-label">服务费用</text>
        <text class="summary-value">¥{{calculatePrice()}}</text>
      </view>
      <view class="summary-row">
        <text class="summary-label">平台服务费</text>
        <text class="summary-value">¥0</text>
      </view>
      <view class="summary-divider"></view>
      <view class="summary-row total">
        <text class="summary-label">合计</text>
        <text class="summary-value total">¥{{calculatePrice()}}</text>
      </view>
    </view>
  </scroll-view>
  
  <view class="modal-footer">
    <button class="confirm-btn" bindtap="confirmBooking">确认预约</button>
  </view>
</view>

<!-- 全部评价弹窗 -->
<view class="all-reviews-modal-mask" wx:if="{{showAllReviewsModal}}" bindtap="closeAllReviewsModal"></view>
<view class="all-reviews-modal {{showAllReviewsModal ? 'show' : ''}}" wx:if="{{showAllReviewsModal}}">
  <view class="modal-header">
    <text class="modal-title">全部评价</text>
    <view class="modal-close" bindtap="closeAllReviewsModal">
      <text class="close-icon">×</text>
    </view>
  </view>
  
  <!-- 评分汇总 -->
  <view class="review-summary">
    <view class="summary-left">
      <text class="summary-score">{{provider.rating}}</text>
      <view class="summary-stars">
        <image src="/images/service-star.png" class="star-icon" wx:for="{{5}}" wx:key="*this" mode="aspectFit"></image>
      </view>
      <text class="summary-count">{{reviews.length}}条评价</text>
    </view>
    <view class="summary-right">
      <text class="good-rate">{{provider.goodRate}}%</text>
      <text class="good-rate-label">好评率</text>
    </view>
  </view>
  
  <!-- 评价列表 -->
  <scroll-view scroll-y class="all-reviews-list">
    <view class="review-item" wx:for="{{reviews}}" wx:key="id">
      <view class="review-header">
        <view class="user-info">
          <image src="{{item.userAvatar || '/images/default-avatar.png'}}" class="user-avatar" mode="aspectFill"></image>
          <view class="user-detail">
            <text class="user-name">{{item.userName}}</text>
            <view class="review-stars">
              <image src="/images/service-star.png" class="star-small" wx:for="{{item.rating}}" wx:for-item="star" wx:key="*this" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <text class="review-date">{{item.date}}</text>
      </view>
      <text class="review-content">{{item.content}}</text>
      <view class="review-tags" wx:if="{{item.tags && item.tags.length > 0}}">
        <view class="review-tag" wx:for="{{item.tags}}" wx:for-item="tag" wx:key="*this">
          <text class="tag-text">{{tag}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</view>