group_lawyer_app/pages/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>

    <!-- 订单列表 -->
    <scroll-view class="order-list" scroll-y>
      <view 
        v-for="(order, index) in filteredOrders" 
        :key="order.id || index"
        class="order-card"
      >
        <view class="order-header">
          <view class="user-info">
            <image 
              class="avatar" 
              :src="order.avatar || '/static/images/profile.jpg'" 
              mode="aspectFill"
            ></image>
            <view class="user-details">
              <text class="user-name">{{ order.customerName }}</text>
              <text class="valid-date">有效期至: {{ order.validDate }}</text>
            </view>
          </view>
          <view 
            class="status-tag" 
            :class="`status-tag--${order.status}`"
          >
            {{ getStatusText(order.status) }}
          </view>
        </view>
        
        <view class="order-content">
          <view 
            v-for="(item, idx) in orderInfoFields" 
            :key="idx"
            class="order-row"
          >
            <text class="order-label">{{ item.label }}</text>
            <text class="order-value">{{ order[item.key] || '-' }}</text>
          </view>
        </view>

        <view class="order-footer">
          <text class="revenue">
			  <text class="revenue-syText">收益:</text>
			  <text>¥{{ order.revenue }}</text>
		  </text>
          <view class="action-buttons">
            <view 
              v-for="(action, idx) in getOrderActions(order.status)" 
              :key="idx"
              class="action-btn" 
              :class="`action-btn--${action.type}`"
              @click="handleAction(action.type, order)"
            >
              <uni-icons :type="action.icon" size="16" :color="action.color"></uni-icons>
              <text class="btn-text">{{ action.text }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="filteredOrders.length === 0" class="empty-state">
        <text class="empty-text">暂无订单数据</text>
      </view>
    </scroll-view>

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

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

export default {
  name: 'Index',
  components: {
    BarNavigasiHandap
  },
  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'
      })
    },
    
    /**
     * 获取状态文本
     */
    getStatusText(status) {
      const statusMap = {
        progress: '进行中',
        completed: '已完成'
      }
      return statusMap[status] || '未知'
    },
    
    /**
     * 获取订单操作按钮
     */
    getOrderActions(status) {
      if (status === 'progress') {
        return [
          { type: 'message', icon: 'chat', color: '#1976D2', text: '发消息' },
          { type: 'call', icon: 'phone', color: '#4CAF50', text: '联系客户' }
        ]
      } else if (status === 'completed') {
        return [
          { type: 'delete', icon: 'trash', color: '#F44336', text: '删除' },
          { type: 'message', icon: 'chat', color: '#1976D2', text: '查看消息' }
        ]
      }
      return []
    },
    
    /**
     * 处理操作按钮点击
     */
    handleAction(actionType, order) {
      switch (actionType) {
        case 'message':
          this.handleMessage(order)
          break
        case 'call':
          this.handleCall(order)
          break
        case 'delete':
          this.handleDelete(order)
          break
        default:
          console.warn('未知操作类型:', actionType)
      }
    },
    
    /**
     * 处理发消息
     */
    handleMessage(order) {
      uni.showToast({
        title: '跳转到消息页面',
        icon: 'none'
      })
      // TODO: 实现跳转到消息页面
    },
    
    /**
     * 处理打电话
     */
    handleCall(order) {
      uni.makePhoneCall({
        phoneNumber: order.phone,
        fail: (err) => {
          console.error('拨打电话失败:', err)
          uni.showToast({
            title: '拨打电话失败',
            icon: 'none'
          })
        }
      })
    },
    
    /**
     * 处理删除
     */
    handleDelete(order) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: (res) => {
          if (res.confirm) {
            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;
}

/* 订单列表 */
.order-list {
  /* flex: 1; */
  height:77vh;
  padding: 24rpx 30rpx;
  box-sizing: border-box;
}

/* 订单卡片 */
.order-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32rpx;
  padding-bottom: 24rpx;
  border-bottom: 1px solid #EEEEEE;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  flex: 1;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background-color: #F5F5F5;
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #323232;
}

.valid-date {
  font-size: 24rpx;
  color: #999999;
}

.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  white-space: nowrap;
}

.status-tag--progress {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.status-tag--completed {
  background-color: #FFF3E0;
  color: #FF9800;
}

/* 订单内容 */
.order-content {
  margin-bottom: 32rpx;
}

.order-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.order-row:last-child {
  margin-bottom: 0;
}

.order-label {
  font-weight: 500;
  font-size: 27rpx;
  color: #666666;
}

.order-value {
  font-weight: 500;
  font-size: 27rpx;
  color: #323232;
}

/* 订单底部 */
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24rpx;
  border-top: 1px solid #EEEEEE;
}

.revenue {
  font-size: 34rpx;
  color: #FF9800;
  font-weight: 600;
}
.revenue-syText{
	font-weight: 500;
	font-size: 27rpx;
	color: #666666;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  cursor: pointer;
}

.action-btn--message {
  background-color: #E3F2FD;
  color: #1976D2;
}

.action-btn--call {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.action-btn--delete {
  background-color: #FFEBEE;
  color: #F44336;
}

.btn-text {
  font-size: 24rpx;
  margin-left: 4rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>