功能完善

src/pages/orders.vue

@@ -1,43 +1,67 @@
 <script setup>
+import { ref } from "vue";
 import Container from "@/components/Container.vue";
-
-const orders = ["已生效", "已失效"];
+import ScrollList from "@/components/ScrollList.vue";
+import { getOrderListAPI } from "@/apis";
+import useStore from "@/store";
+import { orderStatusNames } from "@/constants";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, config } = storeToRefs(store);
 
 const getStatusColor = (status) => {
   switch (status) {
-    case "已生效":
+    case "4":
       return "#35CD67";
-    case "已失效":
+    case "5":
       return "#EF4848";
     default:
       return "#999999";
   }
 };
 
-const toDetailPage = (id) => {
+const toDetailPage = (detail) => {
+  uni.setStorageSync("order", detail);
   uni.navigateTo({
-    url: `/pages/order-detail?id=${id}`,
+    url: `/pages/order-detail`,
   });
 };
+
+const list = ref([]);
+
+const onLoading = async (page) => {
+  const result = await getOrderListAPI(page);
+  if (page === 1) {
+    list.value = result;
+  } else {
+    list.value = list.value.concat(result);
+  }
+  return result.length;
+};
 </script>
 
 <template>
   <Container title="订单">
     <view class="container">
-      <view
-        v-for="(item, index) in orders"
-        :key="index"
-        class="order-item"
-        @click="() => toDetailPage(item)"
-      >
-        <view :style="{ backgroundColor: getStatusColor(item) }">{{
-          item
-        }}</view>
-        <text>会员一个月</text>
-        <text>支付时间：2025-01-31 09:27:34</text>
-        <text>金额：10 元</text>
-        <text>支付方式：支付宝</text>
-      </view>
+      <ScrollList :onLoading="onLoading">
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="order-item"
+          @click="() => toDetailPage(item)"
+        >
+          <view
+            :style="{ backgroundColor: getStatusColor(item.orderStatus) }"
+            >{{ orderStatusNames[item.orderStatus] }}</view
+          >
+          <text>{{ item.vipName }}</text>
+          <!-- <text>订单号：{{ item.orderId }}</text> -->
+          <!-- <text>创建时间：{{ item.vipCreateAt }}</text> -->
+          <text>支付时间：2025-01-31 09:27:34</text>
+          <text>金额：{{ item.vipPrice }} 元</text>
+          <text>支付方式：微信</text>
+        </view>
+      </ScrollList>
     </view>
   </Container>
 </template>