destination page

hichina-main-front-mobile-first/src/boot/globalMixin.js

@@ -9,6 +9,14 @@ export default boot(async (/* { app, router, ... } */ { app }) => {
       testGlobalMethod() {
         console.log("from global mixin method");
       },
+      normalizeMultiImageUrl(input) {
+        if (input.indexOf(",") > -1) {
+          return input.split(",").shift();
+        } else if (input.indexOf(";") > -1) {
+          return input.split(";").shift();
+        }
+        return input;
+      },
       gotoUrl(url) {
         window.location = url;
       },

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

@@ -43,7 +43,14 @@
         >
           Travel Shop
         </q-btn>
-        <q-btn flat no-caps no-wrap class="q-ml-sm" v-if="$q.screen.gt.xs">
+        <q-btn
+          @click="goPage('/destination')"
+          flat
+          no-caps
+          no-wrap
+          class="q-ml-sm"
+          v-if="$q.screen.gt.xs"
+        >
           Destinations
         </q-btn>
 

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

@@ -0,0 +1,130 @@
+<template>
+  <q-page>
+    <div class="row justify-center text-blue-6 text-h4 q-pt-xl">
+      Seasonal Recommendation
+    </div>
+    <div class="row justify-center q-mt-md">
+      <q-input
+        class="col-12 col-sm-8 col-md-6"
+        rounded
+        dense
+        outlined
+        v-model="query"
+        label="Search by title"
+      />
+    </div>
+    <div class="row justify-left">
+      <div
+        class="col-12 col-sm-4 col-md-3"
+        v-for="item in globalDestinationCards"
+        :key="item.destinationId"
+      >
+        <div class="q-pa-md">
+          <q-card
+            class="destination-card cursor-pointer rounded-borders"
+            @mouseenter="hoverFlag = true"
+            @mouseleave="hoverFlag = true"
+          >
+            <q-img
+              class="rounded-borders"
+              style="height: 100%"
+              :src="normalizeMultiImageUrl(item.destinationProfileImage)"
+            >
+              <div class="absolute-bottom">
+                <div class="text-h6">{{ item.destinationName }}</div>
+                <div class="text-subtitle2">
+                  {{ item.parentDestinationName }}
+                </div>
+              </div>
+            </q-img>
+          </q-card>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <p class="text-center" style="background-color: #b4b4b4">
+          Scroll to load more
+        </p>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { api } from "boot/axios";
+import { debounce } from "lodash";
+export default {
+  name: "DestinationPage",
+  setup() {
+    const pageSize = ref(44);
+    const currentPage = ref(1);
+    const destinationCards = ref([]);
+    const globalDestinationCards = ref([]);
+    const totalDestinationCount = ref(-1);
+    const query = ref("");
+    const hoverFlag = ref(true);
+
+    function loadMore() {
+      currentPage.value += 1;
+
+      var maxPage = totalDestinationCount.value / pageSize.value;
+      if (currentPage.value <= maxPage + 1) {
+        loadDestinations();
+      }
+    }
+
+    function getNextBatch() {
+      window.onscroll = debounce(function () {
+        let bottomOfWindow =
+          document.documentElement.scrollTop + window.innerHeight + 100 >
+          document.documentElement.scrollHeight;
+
+        if (bottomOfWindow) {
+          loadMore();
+        }
+      }, 500);
+    }
+
+    function loadDestinations() {
+      destinationCards.value = [];
+      var params = {};
+      params.pageSize = pageSize.value;
+      console.log("loading page: " + currentPage.value);
+      params.page = currentPage.value;
+      (params.query = query.value),
+        api
+          .get("/api/public/destination/list", { params: params })
+          .then(function (response) {
+            destinationCards.value = response.data.data.data;
+            totalDestinationCount.value = response.data.data.total;
+            globalDestinationCards.value = globalDestinationCards.value.concat(
+              destinationCards.value
+            );
+            console.log("globalDestinationCards.value");
+            console.log(globalDestinationCards.value);
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+    }
+    onMounted(() => {
+      loadDestinations();
+      getNextBatch();
+    });
+
+    return {
+      query,
+      globalDestinationCards,
+      hoverFlag,
+    };
+  },
+};
+</script>
+<style lang="sass" scoped>
+.destination-card
+  width: 100%
+  max-width: 550px
+  height: 300px
+</style>

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

@@ -216,14 +216,14 @@ export default defineComponent({
     //   window.location.href = url;
     // }
 
-    function normalizeMultiImageUrl(input) {
-      if (input.indexOf(",") > -1) {
-        return input.split(",").shift();
-      } else if (input.indexOf(";") > -1) {
-        return input.split(";").shift();
-      }
-      return input;
-    }
+    // function normalizeMultiImageUrl(input) {
+    //   if (input.indexOf(",") > -1) {
+    //     return input.split(",").shift();
+    //   } else if (input.indexOf(";") > -1) {
+    //     return input.split(";").shift();
+    //   }
+    //   return input;
+    // }
 
     function loadRand6Destinations() {
       api

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

@@ -117,6 +117,8 @@ export default {
       api
         .get("/api/public/productsku/productskugrouplist", { params: params })
         .then(function (response) {
+          console.log("response.data.data");
+          console.log(response.data.data);
           productList.value = response.data.data.data;
           if (totalProductCount.value == -1) {
             totalProductCount.value = response.data.data.total;
@@ -154,6 +156,7 @@ export default {
     }
 
     function loadMore() {
+      currentPage.value += 1;
       var maxPage = totalProductCount.value / pageSize.value;
       if (currentPage.value <= maxPage + 1) {
         loadAllProducts();

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

@@ -23,6 +23,13 @@ const routes = [
       { path: "", component: () => import("pages/TravelShopPage.vue") },
     ],
   },
+  {
+    path: "/destination",
+    component: () => import("layouts/MainLayout.vue"),
+    children: [
+      { path: "", component: () => import("pages/DestinationPage.vue") },
+    ],
+  },
 
   // Always leave this as last one,
   // but you can also remove it