更新：我的订单增加状态筛选；

api/modules/user.ts

@@ -39,11 +39,11 @@ export async function getVipInfo() {
  * @param current 当前页码
  * @param limit 每页数量
  */
-export async function getOrderList(current: number, limit: number) {
+export async function getOrderList(current: number, limit: number, orderStatus: string) {
   const res = await mainClient.request<IApiResponse<{ orders: IPageData<IOrder> }>>({
     url: 'bookAbroad/home/getAbroadOrderList',
     method: 'POST',
-    data: { current, limit }
+    data: { current, limit, orderStatus }
   })
   return res
 }

pages/user/order/index.vue

@@ -3,6 +3,9 @@
     <template #top>
       <!-- 自定义导航栏 -->
       <nav-bar :title="$t('user.myOrders')"></nav-bar>
+      <wd-tabs v-model="orderStatus" @change="handleOrderStatusTabChange">
+        <wd-tab v-for="item in ordersTabs" :key="item.value" :title="item.name" :name="item.value"></wd-tab>
+      </wd-tabs>
     </template>
 
     <!-- 订单列表 -->
@@ -48,6 +51,35 @@ import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 const paging = ref<any>(null)
 
+// 订单状态
+const orderStatus = ref<string>('-1')
+const ordersTabs = [
+  {
+    name: "全部",
+    value: '-1',
+    badge: {},
+  },
+  {
+    name: "待付款",
+    value: '0',
+    badge: {},
+  },
+  {
+    name: "已完成",
+    value: '3',
+    badge: {},
+  },
+]
+
+/**
+ * 处理订单状态切换
+ */
+const handleOrderStatusTabChange = (val: number) => {
+  paging.value.reload()
+}
+
+
+
 // 订单列表
 const orderList = ref<IOrder[]>([])
 
@@ -56,7 +88,8 @@ const orderList = ref<IOrder[]>([])
  */
 const getData = async (page: number, pageSize: number) => {
   try {
-    const res = await getOrderList(page, pageSize)
+    // 添加订单状态参数
+    const res = await getOrderList(page, pageSize, orderStatus.value)
     paging.value.complete(res.orders.records)
   } catch (error) {
     paging.value.complete(false)