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>
		<!-- 订单筛选弹窗 -->
		<orderFilter ref="orderFilter" @confirmOrder="confirmOrder"></orderFilter>
		<!-- 底部导航栏 -->
		<bar-navigasi-handap></bar-navigasi-handap>
	</view>
</template>

<script>
	import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
	import OrderList from "./components/order.vue"
	// 订单筛选弹窗
	import orderFilter from "./components/orderFilter.vue"
	export default {
		components: {
			BarNavigasiHandap,
			OrderList,
			orderFilter
		},
		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() {
				this.$refs.orderFilter.open()
			},
			handleMessage(order) {

			},
			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'
					})
				}
			},
			confirmOrder(data) {
				console.log(data, '筛选日期')
			}
		},
		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>