增加筛选功能

components/barNavigasiHandap.vue

@@ -129,7 +129,7 @@ export default {
 	background-color: #F5F5F5;
 	padding: 16rpx 24rpx;
 	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
-	z-index: 9999;
+	z-index: 98;
 	box-sizing: border-box;
 }
 

pages/indexOrder/components/orderFilter.vue

@@ -0,0 +1,505 @@
+<template>
+	<view>
+		<uni-popup ref="popup" type="bottom" :is-mask-click="true" @change="handlePopupChange">
+			<view class="filter-popup">
+				<!-- 标题栏 -->
+				<view class="filter-header">
+					<text class="filter-title">筛选</text>
+					<text class="filter-cancel" @click="handleCancel">取消</text>
+				</view>
+				
+				<!-- 日期范围输入 -->
+				<view class="date-range-section">
+					<view 
+						class="date-input" 
+						:class="{ 'active': activeDateType === 'start' }"
+						@click="selectDateType('start')"
+					>
+						<text class="date-label">起始日期</text>
+						<text class="date-value" :class="{ 'placeholder': !startDate }">
+							{{ startDate || '-年-月-日' }}
+						</text>
+						<view class="date-underline"></view>
+					</view>
+					<view 
+						class="date-input" 
+						:class="{ 'active': activeDateType === 'end' }"
+						@click="selectDateType('end')"
+					>
+						<text class="date-label">截止日期</text>
+						<text class="date-value" :class="{ 'placeholder': !endDate }">
+							{{ endDate || '-年-月-日' }}
+						</text>
+						<view class="date-underline"></view>
+					</view>
+				</view>
+				
+				<!-- 日期选择器 -->
+				<view class="date-picker-section">
+					<view class="picker-wrapper">
+						<picker-view 
+							class="date-picker-view" 
+							:value="pickerValue" 
+							@change="handlePickerChange"
+							:indicator-style="indicatorStyle"
+						>
+							<picker-view-column>
+								<view class="picker-item" v-for="(year, index) in years" :key="index">
+									<text>{{ year }}年</text>
+								</view>
+							</picker-view-column>
+							<picker-view-column>
+								<view class="picker-item" v-for="(month, index) in months" :key="index">
+									<text>{{ month }}月</text>
+								</view>
+							</picker-view-column>
+							<picker-view-column>
+								<view class="picker-item" v-for="(day, index) in days" :key="index">
+									<text>{{ day }}日</text>
+								</view>
+							</picker-view-column>
+						</picker-view>
+						<!-- 选中行指示器 -->
+						<view class="picker-indicator"></view>
+					</view>
+				</view>
+				
+				<!-- 底部按钮 -->
+				<view class="filter-footer">
+					<view class="btn-reset" @click="handleReset">重置</view>
+					<view class="btn-confirm" @click="handleConfirm">确定</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'OrderNyaringProp',
+	data() {
+		const currentDate = new Date()
+		const currentYear = currentDate.getFullYear()
+		const currentMonth = currentDate.getMonth() + 1
+		const currentDay = currentDate.getDate()
+		
+		return {
+			activeDateType: 'start', // 'start' | 'end'
+			startDate: '',
+			endDate: '',
+			// 日期选择器的值 [年索引, 月索引, 日索引]
+			pickerValue: [0, 0, 0],
+			// 年份列表
+			years: [],
+			// 月份列表
+			months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+			// 日期列表（动态生成）
+			days: [],
+			// 当前选中的日期
+			selectedYear: currentYear,
+			selectedMonth: currentMonth,
+			selectedDay: currentDay,
+			// 选择器指示器样式
+			indicatorStyle: `height: 50px; line-height: 50px;`,
+			show:false
+		}
+	},
+	mounted() {
+		this.initYears()
+		this.initDays()
+		this.initPickerValue()
+	},
+	methods: {
+		/**
+		 * 初始化年份列表（2022-2025）
+		 */
+		initYears() {
+			const years = []
+			for (let i = 2022; i <= 2025; i++) {
+				years.push(i)
+			}
+			this.years = years
+		},
+		
+		/**
+		 * 初始化日期列表
+		 */
+		initDays() {
+			const days = []
+			const daysInMonth = this.getDaysInMonth(this.selectedYear, this.selectedMonth)
+			for (let i = 1; i <= daysInMonth; i++) {
+				days.push(i)
+			}
+			this.days = days
+		},
+		open(){
+			
+		},
+		/**
+		 * 获取某年某月的天数
+		 */
+		getDaysInMonth(year, month) {
+			return new Date(year, month, 0).getDate()
+		},
+		
+		/**
+		 * 初始化选择器值
+		 */
+		initPickerValue() {
+			const currentDate = new Date()
+			const currentYear = currentDate.getFullYear()
+			const currentMonth = currentDate.getMonth() + 1
+			const currentDay = currentDate.getDate()
+			
+			// 如果已有选中的日期，使用选中的日期；否则使用当前日期
+			let year = currentYear
+			let month = currentMonth
+			let day = currentDay
+			
+			if (this.activeDateType === 'start' && this.startDate) {
+				const date = this.parseDate(this.startDate)
+				if (date) {
+					year = date.year
+					month = date.month
+					day = date.day
+				}
+			} else if (this.activeDateType === 'end' && this.endDate) {
+				const date = this.parseDate(this.endDate)
+				if (date) {
+					year = date.year
+					month = date.month
+					day = date.day
+				}
+			}
+			
+			this.selectedYear = year
+			this.selectedMonth = month
+			this.selectedDay = day
+			
+			// 先更新日期列表
+			this.updateDays()
+			
+			// 更新选择器索引
+			const yearIndex = this.years.indexOf(year)
+			const monthIndex = this.months.indexOf(month)
+			const dayIndex = this.days.indexOf(day)
+			
+			this.pickerValue = [
+				yearIndex >= 0 ? yearIndex : 0,
+				monthIndex >= 0 ? monthIndex : 0,
+				dayIndex >= 0 ? dayIndex : 0
+			]
+		},
+		
+		/**
+		 * 选择日期类型（起始日期或截止日期）
+		 */
+		selectDateType(type) {
+			if (this.activeDateType === type) return
+			this.activeDateType = type
+			// 延迟初始化，确保DOM更新
+			this.$nextTick(() => {
+				this.initPickerValue()
+			})
+		},
+		
+		/**
+		 * 处理选择器变化
+		 */
+		handlePickerChange(e) {
+			const [yearIndex, monthIndex, dayIndex] = e.detail.value
+			
+			this.selectedYear = this.years[yearIndex]
+			this.selectedMonth = this.months[monthIndex]
+			
+			// 更新日期列表
+			this.updateDays()
+			
+			// 确保选中的日期不超过当月最大天数
+			const maxDay = this.days.length
+			const newDayIndex = Math.min(dayIndex, maxDay - 1)
+			this.selectedDay = this.days[newDayIndex]
+			
+			// 更新选择器值
+			this.pickerValue = [yearIndex, monthIndex, newDayIndex]
+			
+			// 更新当前选中的日期显示
+			this.updateSelectedDate()
+		},
+		
+		/**
+		 * 更新日期列表
+		 */
+		updateDays() {
+			const daysInMonth = this.getDaysInMonth(this.selectedYear, this.selectedMonth)
+			const days = []
+			for (let i = 1; i <= daysInMonth; i++) {
+				days.push(i)
+			}
+			this.days = days
+			
+			// 如果当前选中的日期超过新月份的最大天数，调整为最大天数
+			if (this.selectedDay > daysInMonth) {
+				this.selectedDay = daysInMonth
+				const dayIndex = this.days.indexOf(this.selectedDay)
+				this.pickerValue[2] = dayIndex >= 0 ? dayIndex : 0
+			}
+		},
+		
+		/**
+		 * 更新选中的日期显示
+		 */
+		updateSelectedDate() {
+			const dateStr = `${this.selectedYear}年${this.selectedMonth}月${this.selectedDay}号`
+			if (this.activeDateType === 'start') {
+				this.startDate = dateStr
+			} else {
+				this.endDate = dateStr
+			}
+		},
+		
+		/**
+		 * 解析日期字符串
+		 */
+		parseDate(dateStr) {
+			// 格式：2024年10月9号
+			const match = dateStr.match(/(\d{4})年(\d{1,2})月(\d{1,2})号/)
+			if (match) {
+				return {
+					year: parseInt(match[1]),
+					month: parseInt(match[2]),
+					day: parseInt(match[3])
+				}
+			}
+			return null
+		},
+		
+		/**
+		 * 处理弹窗状态变化
+		 */
+		handlePopupChange(e) {
+			if (e.show) {
+				// 弹窗打开时，初始化选择器
+				this.initPickerValue()
+			}
+		},
+		
+		/**
+		 * 打开弹窗
+		 */
+		open() {
+			this.$refs.popup.open()
+		},
+		
+		/**
+		 * 关闭弹窗
+		 */
+		close() {
+			this.$refs.popup.close()
+		},
+		handleCancel() {
+			this.close()
+		},
+		
+		/**
+		 * 重置
+		 */
+		handleReset() {
+			this.startDate = ''
+			this.endDate = ''
+			this.activeDateType = 'start'
+			this.initPickerValue()
+		},
+		
+		/**
+		 * 确定
+		 */
+		handleConfirm() {
+			if(this.startDate && this.endDate){
+				this.$emit('confirmOrder', {
+					startDate: this.startDate,
+					endDate: this.endDate
+				})
+				this.close()
+			}else{
+				uni.showToast({
+					title:'请输入完整格式',
+					icon:'none'
+				})
+			}
+			
+		}
+	}
+}
+</script>
+
+<style scoped>
+.filter-popup {
+	background-color: #FFFFFF;
+	border-radius: 24rpx 24rpx 0 0;
+	box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.06);
+	padding-bottom: env(safe-area-inset-bottom);
+	min-height: 60vh;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 标题栏 */
+.filter-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 32rpx 36rpx 24rpx;
+	border-bottom: 1px solid #F2F2F2;
+}
+
+.filter-title {
+	font-size: 34rpx;
+	font-weight: 600;
+	color: #323232;
+	flex: 1;
+	text-align: center;
+}
+
+.filter-cancel {
+	font-size: 28rpx;
+	color: #C0C0C0;
+	padding: 8rpx 16rpx;
+}
+
+/* 日期范围输入 */
+.date-range-section {
+	display: flex;
+	justify-content: space-around;
+	padding: 16px 26px 8px;
+	/* gap: 49px; */
+	border-bottom: 1px solid #F2F2F2;
+}
+
+.date-input {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 6px 0 13px;
+	align-items: center;
+	position: relative;
+	justify-content: center;
+}
+
+.date-label {
+	font-size: 26rpx;
+	color: #999999;
+}
+
+.date-value {
+	font-size: 30rpx;
+	color: #3475E7;
+	line-height: 38rpx;
+}
+
+.date-value.placeholder {
+	color: #999999;
+}
+
+.date-input.active .date-value {
+	color: #3475E7;
+	font-weight: 500;
+}
+
+.date-underline {
+	position: absolute;
+	bottom: 0;
+	width: 57rpx;
+	height: 8rpx;
+	background-color: transparent;
+	border-radius: 4rpx;
+	transition: background-color 0.2s;
+}
+
+.date-input.active .date-underline {
+	background-color: #3475E7;
+}
+
+/* 日期选择器 */
+.date-picker-section {
+	flex: 1;
+	padding: 8rpx 40rpx 0;
+	position: relative;
+	min-height: 400rpx;
+}
+
+.picker-wrapper {
+	position: relative;
+	height: 420rpx;
+	width: 100%;
+}
+
+.date-picker-view {
+	height: 100%;
+	width: 100%;
+	position: relative;
+	z-index: 2;
+}
+
+.picker-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 50px;
+	font-size: 30rpx;
+	color: #323232;
+}
+
+/* 选中行指示器 - 模拟选中效果 */
+.picker-indicator {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	height: 50px;
+	transform: translateY(-50%);
+	background-color: rgba(52, 117, 231, 0.14);
+	pointer-events: none;
+	border-radius: 24rpx;
+	z-index: 1;
+}
+
+/* 选中项的样式 */
+.date-picker-section ::v-deep .uni-picker-view-column-item-selected {
+	color: #3475E7 !important;
+	font-weight: 500;
+}
+
+/* 底部按钮 */
+.filter-footer {
+	display: flex;
+	padding: 30rpx 36rpx 40rpx;
+	gap: 24rpx;
+	border-top: 1px solid #F5F5F5;
+}
+
+.btn-reset,
+.btn-confirm {
+	flex: 1;
+	height: 88rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 15rpx;
+	font-size: 32rpx;
+	font-weight: 500;
+}
+
+.btn-reset {
+	background-color: #FFFFFF;
+	border: 2rpx solid #3475E7;
+	color: #3475E7;
+	box-shadow: 0 6rpx 18rpx rgba(52, 117, 231, 0.08);
+}
+
+.btn-confirm {
+	background: linear-gradient(90deg, #2E6CFB 0%, #3E82FF 100%);
+	color: #FFFFFF;
+	box-shadow: 0 8rpx 24rpx rgba(62, 130, 255, 0.35);
+}
+</style>

pages/indexOrder/index.vue

@@ -1,295 +1,293 @@
 <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="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>
 
-    <!-- 订单标签页 -->
-    <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>
+<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
 
-    <!-- 订单列表组件 -->
-    <order-list 
-      :orders="filteredOrders"
-      :order-info-fields="orderInfoFields"
-      @delete="handleDelete"
-      @message="handleMessage"
-    ></order-list>
+				// 根据标签页筛选
+				if (this.activeTab !== 'all') {
+					result = result.filter(order => order.status === this.activeTab)
+				}
 
-    <!-- 底部导航栏 -->
-    <bar-navigasi-handap></bar-navigasi-handap>
-  </view>
-</template>
+				// 根据搜索关键词筛选
+				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)
+					)
+				}
 
-<script>
-import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
-import OrderList from "./components/order.vue"
+				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) {
 
-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()
-  }
-}
+			},
+			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;
-}
+	.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-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-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-input {
+		flex: 1;
+		font-size: 28rpx;
+		color: #323232;
+	}
 
-.search-box-text {
-  font-weight: 400;
-  font-size: 27rpx;
-  color: #151515;
-}
+	.search-box-text {
+		font-weight: 400;
+		font-size: 27rpx;
+		color: #151515;
+	}
 
-.filter-btn {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  padding: 20rpx 24rpx;
-}
+	.filter-btn {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		padding: 20rpx 24rpx;
+	}
 
-.filter-text {
-  font-size: 28rpx;
-  color: #323232;
-}
+	.filter-text {
+		font-size: 28rpx;
+		color: #323232;
+	}
 
-/* 订单标签页 */
-.order-tabs {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-}
+	/* 订单标签页 */
+	.order-tabs {
+		display: flex;
+		justify-content: space-around;
+		width: 100%;
+	}
 
-.tab-item {
-  padding: 24rpx 0;
-  position: relative;
-  cursor: pointer;
-}
+	.tab-item {
+		padding: 24rpx 0;
+		position: relative;
+		cursor: pointer;
+	}
 
-.tab-item.active {
-  font-weight: 600;
-}
+	.tab-item.active {
+		font-weight: 600;
+	}
 
-.tab-text {
-  font-size: 28rpx;
-  color: #8D8D8D;
-  transition: color 0.3s;
-}
+	.tab-text {
+		font-size: 28rpx;
+		color: #8D8D8D;
+		transition: color 0.3s;
+	}
 
-.tab-item.active .tab-text {
-  color: #323232;
-}
+	.tab-item.active .tab-text {
+		color: #323232;
+	}
 </style>