单图徽章代码提交

src/views/badge/myOrder.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="my-order">
     <div class="header" @click="goBack">
-      <span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
+      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 我的订单</span>
     </div>
     <div class="order-list">
-      <div class="order-item" @click="OrderDetail">
+      <div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
         <img class="order-img" src="@/assets/badge/suiji.png" alt="order1" />
         <span class="order-status status-processing">生产中</span>
       </div>
@@ -16,13 +16,48 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router'
+import * as badgeApi from '@/api/badge'
+import { onMounted, ref } from 'vue'
+const page = ref(1)
+const loading = ref(false)
+const finished = ref(false)
+const orders = ref([])
+onMounted(() => {
+  getOrder()
+})
+function getOrder() {
+  if(loading.value) return
+  loading.value = true
+  badgeApi.getMyOrder({
+    page: page.value,
+    pageSize: 10,
+  }).then(res => {
+    if(page.value === 1) {
+      orders.value = res.data.list
+    } else {
+      orders.value.push(...res.data.list)
+    }
+    if(res.data.list.length < 10) {
+      finished.value = true
+    } else {
+      page.value++
+    }
+  }).finally(() => {
+    loading.value = false
+  })
+}
 const router = useRouter();
 function goBack() {
   router.push('/badge');
 }
-function OrderDetail() {
-  router.push('/badge/orderDetail')
+function OrderDetail(id: number) {
+  router.push({
+    path: '/badge/orderDetail',
+    query: {
+      id: id,
+    },
+  })
 }
 </script>
 <style scoped>