...

src/pages/mine/subs/order/index.vue

@@ -1,21 +1,50 @@
 <template>
-  <tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
-  <order-item v-for='(item,index) in orderList' :key='index' :item='item' />
+  <tabbar :titles="['全部', '进行中', '已结束']" @change='tabChange' />
+  <u-list :list='orderList' :border='false' @scrolltolower='loadMore'>
+    <u-list-item v-for='(item,index) in orderList' :key='index'>
+      <order-item :item='item' />
+    </u-list-item>
+    <u-loadmore status='loading' />
+  </u-list>
 </template>
 
 <script lang='ts' setup>
 
-import { getOrderList } from '@/api/goods';
+import { getOrderList } from '@/api/order';
 import OrderItem from '@/pages/mine/subs/order/components/order-item.vue';
+import { OrderBean } from '@/api/order/types';
+
+const orderList = ref<OrderBean[]>([]);
+const currentPageNum = ref(1);
+const payStatus = ref(0);
 
-const orderList = ref([1, 2, 4, 5]);
 onLoad((e) => {
   fetchData();
 });
 
-const fetchData = async () => {
-  const { rows } = await getOrderList({ pageNum: 1, pageSize: 10, obj: { payStatus: 0 } });
-  orderList.value = rows;
+const tabChange = (index: number) => {
+  payStatus.value = index;
+  fetchData(true);
+};
+
+const fetchData = async (refresh: boolean = true) => {
+  if(!refresh) {
+    currentPageNum.value += 1;
+  }
+  const { list } = await getOrderList({
+    pageNum: currentPageNum.value,
+    pageSize: 20,
+    obj: { payStatus: payStatus.value }
+  });
+  if(refresh) {
+    orderList.value = list;
+  } else {
+    orderList.value = orderList.value.concat(list);
+  }
+};
+
+const loadMore = () => {
+  fetchData(false);
 };
 </script>