update shopping home page

hichina-admin-backend/src/main/resources/application-dev.properties

@@ -37,8 +37,8 @@ spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
 spring.jackson.time-zone=Asia/Shanghai
 
 
-spring.servlet.multipart.max-file-size=3MB
-spring.servlet.multipart.max-request-size=3MB
+spring.servlet.multipart.max-file-size=13MB
+spring.servlet.multipart.max-request-size=13MB
 
 logging.level.org.springframework.web=DEBUG
 logging.level.org.hibernate=ERROR

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

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

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

@@ -142,15 +142,6 @@
                 {{ item.value.content }}
               </div>
             </q-card-section>
-
-            <q-slide-transition>
-              <div v-show="expanded">
-                <q-separator />
-                <q-card-section class="text-subitle2">
-                  {{ lorem }}
-                </q-card-section>
-              </div>
-            </q-slide-transition>
           </q-card>
           <q-card
             v-if="item.type === 'product'"

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

@@ -0,0 +1,191 @@
+<template>
+  <q-page>
+    <div
+      class="row justify-center"
+      style="height: 376px; background-color: #2a82e4; position: relative"
+    >
+      <div
+        class="col-12 col-sm-9 col-md-7 flex flex-center row shadow-7"
+        style="
+          background-color: white;
+          height: 180px;
+          position: absolute;
+          top: 120px;
+          border-radius: 10px;
+        "
+      >
+        <q-input
+          class="col-10"
+          rounded
+          outlined
+          v-model="query"
+          label="Search by title"
+        />
+      </div>
+      <q-btn-toggle
+        class="col-11 col-sm-8 col-md-6 row shadow-7"
+        style="
+          background-color: white;
+          height: 95px;
+          position: absolute;
+          top: 70px;
+          border-radius: 20px;
+        "
+        v-model="btnToggle"
+        toggle-color="primary"
+        :options="[
+          { label: 'Group Tour', value: 'groupTour', icon: 'group' },
+          { label: 'Hotel Deals', value: 'hotelDeals', icon: 'business' },
+          { label: 'Flight Deals', value: 'flightDeals', icon: 'flight' },
+          {
+            label: 'Holiday Package',
+            value: 'holidayPackage',
+            icon: 'beach_access',
+          },
+          { label: 'China Stuff', value: 'chinaStuff', icon: 'shopping_cart' },
+        ]"
+      />
+    </div>
+    <div class="row" style="height: 50px"></div>
+    <div class="row justify-center text-blue text-h4 q-mt-xl">
+      Deals for you
+    </div>
+    <div class="row justify-left">
+      <div
+        class="col-12 col-sm-6 col-md-3"
+        v-for="(item, index) in globalProductList"
+        v-bind:key="index"
+      >
+        <div class="q-pa-md">
+          <q-card class="cursor-pointer" flat bordered>
+            <q-img
+              :src="item.imageUrl"
+              placeholder-src="https://photoprism.hichinatravel.com/api/v1/t/2bfc32550ae040956f7e861566d26c487c0143e7/32mcf2k4/tile_224"
+            />
+
+            <q-card-section>
+              <div class="text-subtitle1 text-pink">
+                Start from ￥{{ item.minPrice }}
+              </div>
+              <div class="text-h5 q-mt-sm q-mb-xs">
+                {{ item.skuGroupName }}
+              </div>
+            </q-card-section>
+          </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 { debounce } from "lodash";
+import { api } from "boot/axios";
+export default {
+  name: "TravelShopPage",
+  setup() {
+    const btnToggle = ref("groupTour");
+    const query = ref("");
+    const globalProductList = ref([]);
+    const currentPage = ref(1);
+    const pageSize = ref(100);
+    const productTypeId = ref("");
+    const productList = ref([]);
+
+    const totalProductCount = ref(-1);
+
+    const TOURPACKAGETYPE = "3a53caed-b788-4290-896d-7922532ad769";
+    const HOTELPACKAGETYPE = "a9f5adbe-c09b-49bc-a614-8a1c5d5e5337";
+    const FLIGTHPACKAGETYPE = "d7b95089-e278-4522-8f71-dacac41ba32f";
+    const HOLIDAYPACKAGETYPE = "e05d07a3-a717-45b8-b009-47a349890e41";
+    const CHINALOCALPACKAGETYPE = "fd264cab-ee8d-4571-a477-03d7e7c090b3";
+
+    function loadAllProducts() {
+      var params = {};
+      params.pageSize = pageSize.value;
+      params.page = currentPage.value;
+      (params.query = query.value),
+        (params.productTypeId = productTypeId.value);
+      api
+        .get("/api/public/productsku/productskugrouplist", { params: params })
+        .then(function (response) {
+          productList.value = response.data.data.data;
+          if (totalProductCount.value == -1) {
+            totalProductCount.value = response.data.data.total;
+          }
+          globalProductList.value = globalProductList.value.concat(
+            productList.value
+          );
+          console.log("globalProductList....");
+          console.log(globalProductList.value);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    }
+
+    function setActiveTab(index) {
+      globalProductList.value = [];
+      currentPage.value = 1;
+      console.log("activating..." + index);
+      btnToggle.value = index;
+      if (btnToggle.value == "groupTour") {
+        productTypeId.value = TOURPACKAGETYPE;
+      } else if (btnToggle.value == "hotelDeals") {
+        productTypeId.value = HOTELPACKAGETYPE;
+      } else if (btnToggle.value == "flightDeals") {
+        productTypeId.value = FLIGTHPACKAGETYPE;
+      } else if (btnToggle.value == "holidayPackage") {
+        productTypeId.value = HOLIDAYPACKAGETYPE;
+      } else if (btnToggle.value == "chinaStuff") {
+        productTypeId.value = CHINALOCALPACKAGETYPE;
+      } else {
+        productTypeId.value = "";
+      }
+      loadAllProducts();
+    }
+
+    function loadMore() {
+      var maxPage = totalProductCount.value / pageSize.value;
+      if (currentPage.value <= maxPage + 1) {
+        loadAllProducts();
+      } else {
+        console.log("Notify no more pages");
+      }
+    }
+
+    function getNextBatch() {
+      window.onscroll = debounce(function () {
+        let bottomOfWindow =
+          document.documentElement.scrollTop + window.innerHeight + 100 >
+          document.documentElement.scrollHeight;
+
+        if (bottomOfWindow) {
+          loadMore();
+        }
+      }, 500);
+    }
+
+    onMounted(() => {
+      setActiveTab("groupTour");
+      getNextBatch();
+    });
+
+    return {
+      query,
+      globalProductList,
+    };
+  },
+};
+</script>
+<style lang="sass" scoped>
+</style>
+

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

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