首页页面

pages/index.vue

@@ -4,10 +4,16 @@
     <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>
+        <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">
+      <view class="filter-btn" @click="handleFilter">
         <uni-icons type="settings" size="18" color="#323232"></uni-icons>
         <text class="filter-text">筛选</text>
       </view>
@@ -16,139 +22,78 @@
     <!-- 订单标签页 -->
     <view class="order-tabs">
       <view 
+        v-for="tab in tabList" 
+        :key="tab.key"
         class="tab-item" 
-        :class="{ 'active': activeTab === 'all' }"
-        @click="switchTab('all')"
+        :class="{ 'active': activeTab === tab.key }"
+        @click="switchTab(tab.key)"
       >
-        <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>
+        <text class="tab-text">{{ tab.label }}({{ tab.count }})</text>
       </view>
     </view>
 
     <!-- 订单列表 -->
     <scroll-view class="order-list" scroll-y>
-      <!-- 订单卡片1 - 进行中 -->
-      <view class="order-card">
+      <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="/static/images/profile.jpg" mode="aspectFill"></image>
+            <image 
+              class="avatar" 
+              :src="order.avatar || '/static/images/profile.jpg'" 
+              mode="aspectFill"
+            ></image>
             <view class="user-details">
-              <text class="user-name">张明明</text>
-              <text class="valid-date">有效期至: 2025-11-07</text>
+              <text class="user-name">{{ order.customerName }}</text>
+              <text class="valid-date">有效期至: {{ order.validDate }}</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 
+            class="status-tag" 
+            :class="`status-tag--${order.status}`"
+          >
+            {{ getStatusText(order.status) }}
           </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 
+            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">收益: ¥280</text>
+          <text class="revenue">
+			  <text class="revenue-syText">收益:</text>
+			  <text>¥{{ order.revenue }}</text>
+		  </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 
+              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>
 
     <!-- 底部导航栏 -->
@@ -160,19 +105,242 @@
 import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
 
 export default {
+  name: 'Index',
   components: {
     BarNavigasiHandap
   },
   data() {
     return {
-      activeTab: 'all' // 当前选中的标签页
+      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
-      // 这里可以根据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>
@@ -180,22 +348,17 @@ export default {
 <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;
+  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: 24rpx 30rpx;
-  padding-top: 0rpx;
+  padding: 0 30rpx 24rpx;
   gap: 20rpx;
 }
 
@@ -209,19 +372,16 @@ export default {
   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;
+.search-box-text {
+  font-weight: 400;
+  font-size: 27rpx;
+  color: #151515;
 }
 
 .filter-btn {
@@ -231,7 +391,6 @@ export default {
   padding: 20rpx 24rpx;
 }
 
-
 .filter-text {
   font-size: 28rpx;
   color: #323232;
@@ -239,24 +398,25 @@ export default {
 
 /* 订单标签页 */
 .order-tabs {
- display: flex;
- justify-content: space-around;
- width: 100vw;
- margin: auto;
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
 }
 
 .tab-item {
   padding: 24rpx 0;
   position: relative;
+  cursor: pointer;
 }
 
 .tab-item.active {
   font-weight: 600;
-  color: #323232;
 }
+
 .tab-text {
   font-size: 28rpx;
   color: #8D8D8D;
+  transition: color 0.3s;
 }
 
 .tab-item.active .tab-text {
@@ -265,9 +425,10 @@ export default {
 
 /* 订单列表 */
 .order-list {
-  flex: 1;
+  /* flex: 1; */
+  height:77vh;
   padding: 24rpx 30rpx;
-  height: calc(100vh - calc(16rpx + env(safe-area-inset-bottom)));
+  box-sizing: border-box;
 }
 
 /* 订单卡片 */
@@ -292,6 +453,7 @@ export default {
   display: flex;
   align-items: center;
   gap: 24rpx;
+  flex: 1;
 }
 
 .avatar {
@@ -299,6 +461,7 @@ export default {
   height: 96rpx;
   border-radius: 50%;
   background-color: #F5F5F5;
+  flex-shrink: 0;
 }
 
 .user-details {
@@ -322,6 +485,7 @@ export default {
   padding: 8rpx 20rpx;
   border-radius: 20rpx;
   font-size: 24rpx;
+  white-space: nowrap;
 }
 
 .status-tag--progress {
@@ -345,15 +509,20 @@ export default {
   margin-bottom: 20rpx;
 }
 
+.order-row:last-child {
+  margin-bottom: 0;
+}
+
 .order-label {
-  font-size: 28rpx;
-  color: #999999;
+  font-weight: 500;
+  font-size: 27rpx;
+  color: #666666;
 }
 
 .order-value {
-  font-size: 28rpx;
-  color: #323232;
   font-weight: 500;
+  font-size: 27rpx;
+  color: #323232;
 }
 
 /* 订单底部 */
@@ -366,10 +535,15 @@ export default {
 }
 
 .revenue {
-  font-size: 32rpx;
+  font-size: 34rpx;
   color: #FF9800;
   font-weight: 600;
 }
+.revenue-syText{
+	font-weight: 500;
+	font-size: 27rpx;
+	color: #666666;
+}
 
 .action-buttons {
   display: flex;
@@ -383,6 +557,7 @@ export default {
   padding: 12rpx 24rpx;
   border-radius: 8rpx;
   font-size: 24rpx;
+  cursor: pointer;
 }
 
 .action-btn--message {
@@ -404,4 +579,17 @@ export default {
   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>