feat(订单页面): 添加订单状态筛选功能

在订单页面中添加了订单状态筛选功能，用户可以通过选择器筛选不同状态的订单。同时更新了 vant 配置以支持选择器的样式调整。

@@ -39,6 +39,7 @@ declare module 'vue' {
     VanImage: typeof import('vant/es')['Image']
     VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPicker: typeof import('vant/es')['Picker']
     VanPickerGroup: typeof import('vant/es')['PickerGroup']
     VanPopup: typeof import('vant/es')['Popup']
     VanProgress: typeof import('vant/es')['Progress']

 /*
  * @Date: 2025-03-24 13:44:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 13:54:49
+ * @LastEditTime: 2025-04-16 18:28:45
  * @FilePath: /mlaj/src/vant.config.js
  * @Description: 文件描述
  */
@@ -48,5 +48,8 @@ export const themeVars = {
   // 弹出层
   popupBackgroundColor: '#ffffff',
   popupCloseIconColor: '#9ca3af',
-  popupCloseIconActiveColor: '#6b7280'
+  popupCloseIconActiveColor: '#6b7280',
+
+  // Picker 选择器
+  pickerConfirmActionColor: '#22c55e',
 };

@@ -5,6 +5,35 @@
 <template>
   <AppLayout title="我的订单">
     <div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen">
+      <!-- 状态筛选 -->
+      <div class="px-4 py-3">
+        <div
+          class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm"
+          @click="showStatusPicker = true"
+        >
+          <span class="text-gray-600">订单状态</span>
+          <div class="flex items-center text-gray-500">
+            <span>{{ selectedStatusText }}</span>
+            <van-icon name="arrow" class="ml-1" />
+          </div>
+        </div>
+      </div>
+
+      <van-popup
+        v-model:show="showStatusPicker"
+        position="bottom"
+        round
+      >
+        <van-picker
+          :columns="statusColumns"
+          @confirm="onStatusConfirm"
+          @cancel="showStatusPicker = false"
+          :default-index="currentStatusIndex"
+          show-toolbar
+          title="选择订单状态"
+        />
+      </van-popup>
+
       <!-- 订单列表 -->
       <van-list
         v-model:loading="loading"
@@ -194,9 +223,46 @@ const statusMap = {
 
 // 初始化加载订单列表
 // 加载更多
+// 状态筛选相关
+const showStatusPicker = ref(false)
+const selectedStatus = ref('')
+const selectedStatusText = ref('全部')
+
+// 构建状态选项
+const statusColumns = [
+  { text: '全部', value: '' },
+  ...Object.entries(statusMap).map(([key, value]) => ({
+    text: value.text,
+    value: key
+  }))
+]
+
+// 获取当前状态在选项中的索引
+const currentStatusIndex = computed(() => {
+  return statusColumns.findIndex(item => item.value === selectedStatus.value)
+})
+
+// 状态选择确认
+const onStatusConfirm = ({ selectedValues, selectedOptions }) => {
+  selectedStatus.value = selectedValues[0]
+  selectedStatusText.value = selectedOptions[0].text
+  showStatusPicker.value = false
+  // 重置分页参数
+  page.value = 0
+  orders.value = []
+  finished.value = false
+  // 重新加载数据
+  onLoad()
+}
+
+// 修改加载更多函数
 const onLoad = async () => {
   const nextPage = page.value;
-  const res = await getOrderListAPI({ limit: limit.value, page: nextPage, status: '' });
+  const res = await getOrderListAPI({
+    limit: limit.value,
+    page: nextPage,
+    status: selectedStatus.value
+  });
   if (res.code) {
     orders.value = [...orders.value, ...res.data];
     finished.value = res.data.length < limit.value;