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

<!--pages/companion-orders/companion-orders.wxml-->
<wxs module="utils">
  var DEFAULT_AVATAR = 'https://ai-c.maimanji.com/images/default-avatar.png';
  module.exports = {
    getAvatar: function(avatar) {
      return avatar || DEFAULT_AVATAR;
    }
  };
</wxs>
<view class="container">
  <!-- 统计卡片 -->
  <view class="stats-card">
    <view class="stat-item">
      <text class="stat-value">{{stats.totalOrders || 0}}</text>
      <text class="stat-label">总订单</text>
    </view>
    <view class="stat-item">
      <text class="stat-value">{{stats.completedOrders || 0}}</text>
      <text class="stat-label">已完成</text>
    </view>
    <view class="stat-item">
      <text class="stat-value">¥{{stats.totalIncome || '0.00'}}</text>
      <text class="stat-label">总收入</text>
    </view>
  </view>

  <!-- 状态筛选 -->
  <view class="filter-tabs">
    <view class="tab {{currentTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">
      <text>全部</text>
    </view>
    <view class="tab {{currentTab === 'pending' ? 'active' : ''}}" bindtap="switchTab" data-tab="pending">
      <text>待服务</text>
    </view>
    <view class="tab {{currentTab === 'in_progress' ? 'active' : ''}}" bindtap="switchTab" data-tab="in_progress">
      <text>进行中</text>
    </view>
    <view class="tab {{currentTab === 'completed' ? 'active' : ''}}" bindtap="switchTab" data-tab="completed">
      <text>已完成</text>
    </view>
  </view>

  <!-- 订单列表 -->
  <view class="order-list" wx:if="{{orders.length > 0}}">
    <view class="order-item" wx:for="{{orders}}" wx:key="id" bindtap="goToDetail" data-id="{{item.id}}">
      <view class="order-header">
        <view class="user-info">
          <image class="user-avatar" src="{{utils.getAvatar(item.user.avatar)}}" mode="aspectFill"></image>
          <text class="user-name">{{item.user.nickname || '用户'}}</text>
        </view>
        <view class="order-status {{item.status}}">
          <text>{{item.statusText}}</text>
        </view>
      </view>

      <view class="order-content">
        <view class="order-info">
          <text class="service-type">{{item.serviceTypeText}}</text>
          <text class="service-duration">{{item.duration}}分钟</text>
        </view>
        <view class="order-price">
          <text>¥{{item.amount}}</text>
        </view>
      </view>

      <!-- 用户评价展示 -->
      <view class="order-review" wx:if="{{item.review}}" catchtap="viewReview" data-order="{{item}}">
        <view class="review-header">
          <text class="review-label">用户评价</text>
          <view class="review-rating">
            <text class="star" wx:for="{{item.review.rating}}" wx:for-item="star" wx:key="*this">⭐</text>
          </view>
        </view>
        <text class="review-content">{{item.review.content || '用户给了好评'}}</text>
        <view class="review-reply" wx:if="{{item.review.reply}}">
          <text class="reply-label">我的回复：</text>
          <text class="reply-text">{{item.review.reply}}</text>
        </view>
        <text class="reply-btn" wx:if="{{!item.review.reply}}">点击回复</text>
      </view>

      <view class="order-footer">
        <text class="order-time">{{item.createTimeText}}</text>
        <view class="order-actions">
          <button class="btn-action" wx:if="{{item.status === 'pending'}}" catchtap="startService" data-id="{{item.id}}">
            开始服务
          </button>
          <button class="btn-action secondary" wx:if="{{item.status === 'in_progress'}}" catchtap="endService" data-id="{{item.id}}">
            结束服务
          </button>
          <button class="btn-action" wx:if="{{item.status === 'in_progress'}}" catchtap="goToChat" data-order="{{item}}">
            继续聊天
          </button>
        </view>
      </view>
    </view>
  </view>

  <!-- 空状态 -->
  <view class="empty-state" wx:else>
    <image src="/images/empty-orders.png"></image>
    <text>暂无订单</text>
  </view>

  <!-- 加载更多 -->
  <view class="load-more" wx:if="{{loading}}">
    <text>加载中...</text>
  </view>
  <view class="load-more" wx:if="{{!hasMore && orders.length > 0}}">
    <text>没有更多了</text>
  </view>
</view>

<!-- 回复评价弹窗 -->
<view class="reply-modal-mask" wx:if="{{showReplyModal}}" bindtap="closeReplyModal"></view>
<view class="reply-modal {{showReplyModal ? 'show' : ''}}" wx:if="{{showReplyModal}}">
  <view class="reply-modal-header">
    <text class="reply-modal-title">回复评价</text>
    <view class="reply-modal-close" bindtap="closeReplyModal">
      <text class="close-icon">×</text>
    </view>
  </view>
  
  <view class="reply-modal-content">
    <!-- 用户评价信息 -->
    <view class="review-info">
      <view class="review-rating-row">
        <text class="rating-label">用户评分：</text>
        <view class="rating-stars">
          <text class="star" wx:for="{{currentReview.rating}}" wx:for-item="star" wx:key="*this">⭐</text>
        </view>
      </view>
      <view class="review-tags" wx:if="{{currentReview.tags && currentReview.tags.length > 0}}">
        <text class="tag" wx:for="{{currentReview.tags}}" wx:key="*this">{{item}}</text>
      </view>
      <text class="review-text">{{currentReview.content || '用户给了好评'}}</text>
    </view>
    
    <!-- 已有回复 -->
    <view class="existing-reply" wx:if="{{currentReview.reply}}">
      <text class="existing-reply-label">您已回复：</text>
      <text class="existing-reply-text">{{currentReview.reply}}</text>
    </view>
    
    <!-- 回复输入框 -->
    <view class="reply-input-section" wx:if="{{!currentReview.reply}}">
      <text class="input-label">输入回复内容</text>
      <textarea class="reply-textarea" 
                placeholder="感谢您的评价，期待下次为您服务..." 
                value="{{replyContent}}"
                bindinput="onReplyInput"
                maxlength="200"></textarea>
      <text class="char-count">{{replyContent.length}}/200</text>
    </view>
  </view>
  
  <view class="reply-modal-footer" wx:if="{{!currentReview.reply}}">
    <button class="submit-btn {{submittingReply ? 'disabled' : ''}}" 
            bindtap="submitReply" 
            disabled="{{submittingReply}}">
      {{submittingReply ? '提交中...' : '提交回复'}}
    </button>
  </view>
</view>