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" />
		<text class="search-box-text">搜索</text>
      </view>
      <view class="filter-btn">
        <uni-icons type="settings" size="18" color="#323232"></uni-icons>
        <text class="filter-text">筛选</text>
      </view>
    </view>

    <!-- 订单标签页 -->
    <view class="order-tabs">
      <view 
        class="tab-item" 
        :class="{ 'active': activeTab === 'all' }"
        @click="switchTab('all')"
      >
        <text class="tab-text">全部订单(2)</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ 'active': activeTab === 'progress' }"
        @click="switchTab('progress')"
      >
        <text class="tab-text">进行中(0)</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ 'active': activeTab === 'completed' }"
        @click="switchTab('completed')"
      >
        <text class="tab-text">已完成(0)</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="order-list" scroll-y>
      <!-- 订单卡片1 - 进行中 -->
      <view class="order-card">
        <view class="order-header">
          <view class="user-info">
            <image class="avatar" src="/static/images/profile.jpg" mode="aspectFill"></image>
            <view class="user-details">
              <text class="user-name">张明明</text>
              <text class="valid-date">有效期至: 2025-11-07</text>
            </view>
          </view>
          <view class="status-tag status-tag--progress">进行中</view>
        </view>
        
        <view class="order-content">
          <view class="order-row">
            <text class="order-label">订单编号</text>
            <text class="order-value">LAW2023071500123</text>
          </view>
          <view class="order-row">
            <text class="order-label">联系电话</text>
            <text class="order-value">13877092066</text>
          </view>
          <view class="order-row">
            <text class="order-label">服务费用</text>
            <text class="order-value">¥200/次</text>
          </view>
          <view class="order-row">
            <text class="order-label">下单时间</text>
            <text class="order-value">2025-11-11 11:11:11</text>
          </view>
          <view class="order-row">
            <text class="order-label">支付时间</text>
            <text class="order-value">2025-11-11 11:11:11</text>
          </view>
          <view class="order-row">
            <text class="order-label">佣金比例</text>
            <text class="order-value">3%</text>
          </view>
        </view>

        <view class="order-footer">
          <text class="revenue">收益: ¥280</text>
          <view class="action-buttons">
            <view class="action-btn action-btn--message">
              <uni-icons type="chat" size="16" color="#1976D2"></uni-icons>
              <text class="btn-text">发消息</text>
            </view>
            <view class="action-btn action-btn--call">
              <uni-icons type="phone" size="16" color="#4CAF50"></uni-icons>
              <text class="btn-text">联系客户</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单卡片2 - 已完成 -->
      <view class="order-card">
        <view class="order-header">
          <view class="user-info">
            <image class="avatar" src="/static/images/profile.jpg" mode="aspectFill"></image>
            <view class="user-details">
              <text class="user-name">张明明</text>
              <text class="valid-date">有效期至: 2025-11-07</text>
            </view>
          </view>
          <view class="status-tag status-tag--completed">已完成</view>
        </view>
        
        <view class="order-content">
          <view class="order-row">
            <text class="order-label">订单编号</text>
            <text class="order-value">LAW2023071500123</text>
          </view>
          <view class="order-row">
            <text class="order-label">联系电话</text>
            <text class="order-value">13877092066</text>
          </view>
          <view class="order-row">
            <text class="order-label">服务费用</text>
            <text class="order-value">¥200/次</text>
          </view>
          <view class="order-row">
            <text class="order-label">下单时间</text>
            <text class="order-value">2025-11-11 11:11:11</text>
          </view>
          <view class="order-row">
            <text class="order-label">支付时间</text>
            <text class="order-value">2025-11-11 11:11:11</text>
          </view>
          <view class="order-row">
            <text class="order-label">佣金比例</text>
            <text class="order-value">3%</text>
          </view>
        </view>

        <view class="order-footer">
          <text class="revenue">收益: ¥280</text>
          <view class="action-buttons">
            <view class="action-btn action-btn--delete">
              <uni-icons type="trash" size="16" color="#F44336"></uni-icons>
              <text class="btn-text">删除</text>
            </view>
            <view class="action-btn action-btn--message">
              <uni-icons type="chat" size="16" color="#1976D2"></uni-icons>
              <text class="btn-text">查看消息</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

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

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

export default {
  components: {
    BarNavigasiHandap
  },
  data() {
    return {
      activeTab: 'all' // 当前选中的标签页
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
      // 这里可以根据tab筛选订单列表
    }
  }
}
</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%);
  height: 100vh;
}
.search-box-text{
	font-weight: 400;
	font-size: 27rpx;
	color: #151515;
}

/* 搜索区域 */
.search-section {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  padding-top: 0rpx;
  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-btn {
  padding: 20rpx 32rpx;
  background-color: #007AFF;
  color: #FFFFFF;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.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: 100vw;
 margin: auto;
}

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

.tab-item.active {
  font-weight: 600;
  color: #323232;
}
.tab-text {
  font-size: 28rpx;
  color: #8D8D8D;
}

.tab-item.active .tab-text {
  color: #323232;
}

/* 订单列表 */
.order-list {
  flex: 1;
  padding: 24rpx 30rpx;
  height: calc(100vh - calc(16rpx + env(safe-area-inset-bottom)));
}

/* 订单卡片 */
.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;
}

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

.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;
}

.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-label {
  font-size: 28rpx;
  color: #999999;
}

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

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

.revenue {
  font-size: 32rpx;
  color: #FF9800;
  font-weight: 600;
}

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

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

.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;
}
</style>