add my order list page

hichina-main-front-mobile-first/src/layouts/MainLayout.vue

@@ -105,6 +105,9 @@
                 <q-item clickable @click="goPage('/my-blogs')">
                   <q-item-section>My Blogs</q-item-section>
                 </q-item>
+                <q-item clickable @click="goPage('/my-orders')">
+                  <q-item-section>My Orders</q-item-section>
+                </q-item>
                 <q-item clickable @click="goPage('/user-info')">
                   <q-item-section>Edit Profile</q-item-section>
                 </q-item>

hichina-main-front-mobile-first/src/pages/MyOrdersPage.vue

@@ -0,0 +1,110 @@
+<template>
+  <q-page>
+    <div class="row justify-center">
+      <div class="col-12 col-sm-7 q-pa-md">
+        <div class="row col-12" style="border: 1px solid gray">
+          <div class="col-2">Product Name</div>
+          <div class="col-2">Package Category</div>
+          <div class="col-2">Start Date</div>
+          <div class="col-2">Total Price</div>
+          <div class="col-2">Payment Status</div>
+          <div class="col-2"></div>
+        </div>
+        <div v-for="(item, index) in orderSummaries" v-bind:key="index">
+          <div>
+            <div class="text-body1" style="background-color: #d6d6d6">
+              Order No. {{ item.orderId }} | Created On: {{ item.createdTime }}
+            </div>
+            <div
+              class="row col-12 text-subtitle1"
+              style="border: 1px solid gray"
+            >
+              <div class="col-2">{{ item.productName }}</div>
+              <div class="col-2">{{ item.packageCategory }}</div>
+              <div class="col-2">{{ item.selectedDate }}</div>
+              <div class="col-2">CNY: {{ item.totalPrice }}</div>
+              <div class="col-2">{{ item.orderStatus }}</div>
+              <div class="col-2">
+                <q-btn
+                  @click="goPage('/order-detail/' + item.orderId)"
+                  color="grey-4"
+                  text-color="primary"
+                  glossy
+                  dense
+                  unelevated
+                  icon="info"
+                  label="Order Details"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import { ref, onMounted, getCurrentInstance, reactive } from "vue";
+import { api } from "boot/axios";
+import { useQuasar } from "quasar";
+
+export default {
+  name: "MyOrdersPage",
+  setup() {
+    const instance = getCurrentInstance();
+    const app = instance.appContext.app;
+    const gp = app.config.globalProperties;
+    const $q = useQuasar();
+
+    const pageSize = ref(100);
+    const currentPage = ref(1);
+    const orderSummaries = ref([]);
+    const totalCnt = ref(0);
+
+    function whoami() {
+      api
+        .get("/api/v1/user/whoami")
+        .then(function (response) {
+          console.log("current user in user page: " + response.data);
+        })
+        .catch(function (error) {
+          console.log("currently not logged in setup: " + error);
+          gp.goPage("/");
+        });
+    }
+
+    function loadMyOrderByPage() {
+      var params = {};
+      params.pageSize = pageSize.value;
+      params.page = currentPage.value;
+      params.query = "";
+      api
+        .get("/api/v1/order/myorders", {
+          params: params,
+        })
+        .then(function (response) {
+          console.log("Got my orders summary: ");
+          console.log(response.data.data);
+          orderSummaries.value = response.data.data.data;
+          totalCnt.value = response.data.data.total;
+          pageSize.value = response.data.data.pageSize;
+          currentPage.value = response.data.data.currentPage;
+        })
+        .catch(function (error) {
+          console.log("currently not logged in my order page: " + error);
+          gp.$goPage("/auth/login");
+        });
+    }
+
+    onMounted(() => {
+      whoami();
+      loadMyOrderByPage();
+    });
+
+    return {
+      orderSummaries,
+    };
+  },
+};
+</script>

hichina-main-front-mobile-first/src/router/routes.js

@@ -71,6 +71,11 @@ const routes = [
     component: () => import("layouts/MainLayout.vue"),
     children: [{ path: "", component: () => import("pages/MyBlogsPage.vue") }],
   },
+  {
+    path: "/my-orders",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [{ path: "", component: () => import("pages/MyOrdersPage.vue") }],
+  },
   {
     path: "/user-info",
     component: () => import("layouts/MainLayout.vue"),