group_lawyer_app/pages/indexOrder/index.vue

<template>
  <view class="page">
    <!-- 搜索和筛选区域 -->
    <view class="search-section">
      <view class="search-box">
        <uni-icons type="search" size="18" color="#999999"></uni-icons>
        <input 
          class="search-input" 
          placeholder="搜客户姓名" 
          placeholder-style="color: #999999"
          v-model="searchKeyword"
          @input="handleSearch"
        />
        <text class="search-box-text">搜索</text>
      </view>
      <view class="filter-btn" @click="handleFilter">
        <uni-icons type="settings" size="18" color="#323232"></uni-icons>
        <text class="filter-text">筛选</text>
      </view>
    </view>

    <!-- 订单标签页 -->
    <view class="order-tabs">
      <view 
        v-for="tab in tabList" 
        :key="tab.key"
        class="tab-item" 
        :class="{ 'active': activeTab === tab.key }"
        @click="switchTab(tab.key)"
      >
        <text class="tab-text">{{ tab.label }}({{ tab.count }})</text>
      </view>
    </view>

    <!-- 订单列表组件 -->
    <order-list 
      :orders="filteredOrders"
      :order-info-fields="orderInfoFields"
      @delete="handleDelete"
      @message="handleMessage"
    ></order-list>

    <!-- 底部导航栏 -->
    <bar-navigasi-handap></bar-navigasi-handap>
  </view>
</template>

<script>
import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
import OrderList from "./components/order.vue"

export default {
  name: 'Index',
  components: {
    BarNavigasiHandap,
    OrderList
  },
  data() {
    return {
      activeTab: 'all', // 当前选中的标签页
      searchKeyword: '', // 搜索关键词
      // 标签页配置
      tabList: [
        { key: 'all', label: '全部订单', count: 2 },
        { key: 'progress', label: '进行中', count: 0 },
        { key: 'completed', label: '已完成', count: 0 }
      ],
      // 订单信息字段配置
      orderInfoFields: [
        { key: 'orderNo', label: '订单编号' },
        { key: 'phone', label: '联系电话' },
        { key: 'serviceFee', label: '服务费用' },
        { key: 'orderTime', label: '下单时间' },
        { key: 'payTime', label: '支付时间' },
        { key: 'commissionRate', label: '佣金比例' }
      ],
      // 订单列表数据
      orders: [
        {
          id: 1,
          customerName: '张明明',
          avatar: '/static/images/profile.jpg',
          validDate: '2025-11-07',
          status: 'progress',
          orderNo: 'LAW2023071500123',
          phone: '13877092066',
          serviceFee: '¥200/次',
          orderTime: '2025-11-11 11:11:11',
          payTime: '2025-11-11 11:11:11',
          commissionRate: '3%',
          revenue: 280
        },
        {
          id: 2,
          customerName: '张明明',
          avatar: '/static/images/profile.jpg',
          validDate: '2025-11-07',
          status: 'completed',
          orderNo: 'LAW2023071500123',
          phone: '13877092066',
          serviceFee: '¥200/次',
          orderTime: '2025-11-11 11:11:11',
          payTime: '2025-11-11 11:11:11',
          commissionRate: '3%',
          revenue: 280
        },
        {
          id: 3,
          customerName: '张明明',
          avatar: '/static/images/profile.jpg',
          validDate: '2025-11-07',
          status: 'completed',
          orderNo: 'LAW2023071500123',
          phone: '13877092066',
          serviceFee: '¥200/次',
          orderTime: '2025-11-11 11:11:11',
          payTime: '2025-11-11 11:11:11',
          commissionRate: '3%',
          revenue: 280
        }
      ]
    }
  },
  computed: {
    /**
     * 过滤后的订单列表
     */
    filteredOrders() {
      let result = this.orders
      
      // 根据标签页筛选
      if (this.activeTab !== 'all') {
        result = result.filter(order => order.status === this.activeTab)
      }
      
      // 根据搜索关键词筛选
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.trim().toLowerCase()
        result = result.filter(order => 
          order.customerName.toLowerCase().includes(keyword) ||
          order.orderNo.toLowerCase().includes(keyword) ||
          order.phone.includes(keyword)
        )
      }
      
      return result
    }
  },
  methods: {
    /**
     * 切换标签页
     */
    switchTab(tab) {
      if (this.activeTab === tab) return
      this.activeTab = tab
      this.updateTabCount()
    },
    
    /**
     * 更新标签页数量
     */
    updateTabCount() {
      this.tabList.forEach(tab => {
        if (tab.key === 'all') {
          tab.count = this.orders.length
        } else {
          tab.count = this.orders.filter(order => order.status === tab.key).length
        }
      })
    },
    
    /**
     * 处理搜索
     */
    handleSearch() {
      // 搜索逻辑已在 computed 中处理
    },
    
    /**
     * 处理筛选
     */
    handleFilter() {
      uni.showToast({
        title: '筛选功能开发中',
        icon: 'none'
      })
    },
    
    /**
     * 处理发消息（从子组件触发）
     */
    handleMessage(order) {
      // TODO: 实现跳转到消息页面
    },
    
    /**
     * 处理删除（从子组件触发）
     */
    handleDelete(order) {
      const index = this.orders.findIndex(item => item.id === order.id)
      if (index > -1) {
        this.orders.splice(index, 1)
        this.updateTabCount()
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    }
  },
  onLoad() {
    // 页面加载时更新标签页数量
    this.updateTabCount()
  }
}
</script>

<style scoped>
.page {
  padding-top: calc(var(--status-bar-height) + 20rpx);
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(40, 86, 199, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  min-height: 100vh;
  box-sizing: border-box;
}

/* 搜索区域 */
.search-section {
  display: flex;
  align-items: center;
  padding: 0 30rpx 24rpx;
  gap: 20rpx;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 38rpx;
  padding: 20rpx 24rpx;
  gap: 12rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #323232;
}

.search-box-text {
  font-weight: 400;
  font-size: 27rpx;
  color: #151515;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 20rpx 24rpx;
}

.filter-text {
  font-size: 28rpx;
  color: #323232;
}

/* 订单标签页 */
.order-tabs {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.tab-item {
  padding: 24rpx 0;
  position: relative;
  cursor: pointer;
}

.tab-item.active {
  font-weight: 600;
}

.tab-text {
  font-size: 28rpx;
  color: #8D8D8D;
  transition: color 0.3s;
}

.tab-item.active .tab-text {
  color: #323232;
}
</style>