add 自适应 blog page

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

@@ -6,7 +6,7 @@
           <div class="col-sm-12 col-xs-12 q-ml-xl q-mr-lg">
             <q-toolbar-title>
               <img
-                @click="$router.push('/home')"
+                @click="$router.push('/')"
                 class="cursor-pointer float-left"
                 src="~/assets/hichinalogo.png"
               />
@@ -23,7 +23,14 @@
         >
           GuideBooks
         </q-btn>
-        <q-btn flat no-caps no-wrap class="q-ml-sm" v-if="$q.screen.gt.xs">
+        <q-btn
+          @click="goPage('/blog')"
+          flat
+          no-caps
+          no-wrap
+          class="q-ml-sm"
+          v-if="$q.screen.gt.xs"
+        >
           Blogs/Vlogs
         </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/BlogPage.vue

@@ -0,0 +1,193 @@
+<template>
+  <q-page>
+    <div
+      class="row justify-center text-h4 text-weight-bold text-blue-6 q-mt-md"
+    >
+      Blogs of The Week
+    </div>
+    <div class="q-pa-md">
+      <q-carousel
+        animated
+        v-model="slide"
+        navigation
+        infinite
+        height="540px"
+        :autoplay="autoplay"
+        arrows
+        transition-prev="slide-right"
+        transition-next="slide-left"
+        @mouseenter="autoplay = false"
+        @mouseleave="autoplay = 2000"
+      >
+        <q-carousel-slide
+          v-for="(item, index) in sliders"
+          :key="index"
+          :name="index"
+          :img-src="item.imageUrl"
+          class="cursor-pointer"
+          @click="gotoUrl(item.linkToBlog)"
+        >
+          <div class="q-mt-xl q-ml-xl absolute-left custom-caption">
+            <div style="height: 100px"></div>
+            <div class="text-h1 text-white text-weight-bolder">
+              {{ item.title }}
+            </div>
+            <div class="text-h5 text-white text-weight-medium">
+              {{ item.subTitle }}
+            </div>
+          </div>
+        </q-carousel-slide>
+      </q-carousel>
+    </div>
+    <div class="row justify-center q-pa-md">
+      <q-btn rounded color="primary" size="xl" label="Write your blog" />
+    </div>
+    <div class="row q-pa-md">
+      <div class="q-gutter-y-md col-12 col-md-8">
+        <q-tabs v-model="tab" dense align="justify" class="text-primary">
+          <q-tab :ripple="false" name="lb" label="Latest Blogs" />
+          <q-tab :ripple="false" name="mvm" label="Most Viewed in a Month" />
+          <q-tab :ripple="false" name="bfl" label="Bloggers I'm following" />
+        </q-tabs>
+      </div>
+    </div>
+    <div class="row justify-left">
+      <div
+        class="col-12 col-sm-4 col-md-2"
+        v-for="(item, index) in globalUnifiedItemList"
+        v-bind:key="index"
+      >
+        <div class="q-pa-md">
+          <q-card
+            v-if="item.type === 'blog'"
+            class="cursor-pointer"
+            flat
+            bordered
+          >
+            <q-img
+              :src="item.value.headImageUrl"
+              placeholder-src="https://photoprism.hichinatravel.com/api/v1/t/2bfc32550ae040956f7e861566d26c487c0143e7/32mcf2k4/tile_224"
+            />
+
+            <q-card-section>
+              <div class="text-overline text-orange-9">
+                {{ item.value.createdTime }}
+              </div>
+              <div class="text-h5 q-mt-sm q-mb-xs">{{ item.value.title }}</div>
+              <div class="text-caption text-grey">
+                {{ item.value.content }}
+              </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 { api } from "boot/axios";
+import { debounce } from "lodash";
+
+export default {
+  name: "BlogPage",
+  setup() {
+    const unifiedItemList = ref([]);
+    const blogPageSizePage = ref(20);
+    const currentPage = ref(1);
+    const bloglist = ref([]);
+    const sliders = ref([]);
+    const totalBlogCount = ref(0);
+    const globalUnifiedItemList = ref([]);
+
+    function loadBlogList() {
+      unifiedItemList.value = [];
+      var params = {};
+      params.pageSize = blogPageSizePage.value;
+      params.query = "";
+      params.page = currentPage.value;
+      api
+        .get("/api/public/blog/list", { params: params })
+        .then(function (response) {
+          bloglist.value = response.data.data.data;
+          totalBlogCount.value = response.data.data.total;
+          for (var index in bloglist.value) {
+            var obj = {};
+            // obj.type=parseInt(Math.random() * 2)==0?'blog':'scaleblog';
+            obj.type = "blog";
+            obj.value = bloglist.value[index];
+            unifiedItemList.value.push(obj);
+          }
+          globalUnifiedItemList.value = globalUnifiedItemList.value.concat(
+            unifiedItemList.value
+          );
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    }
+
+    function loadSliders() {
+      api
+        .get("/api/public/pagecontent/bloghomesliders")
+        .then(function (response) {
+          console.log("blog sliders:");
+          sliders.value = response.data.data;
+          console.log(sliders.value);
+          loadBlogList();
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    }
+
+    function loadMore() {
+      currentPage.value += 1;
+      var maxPage = totalBlogCount.value / blogPageSizePage.value;
+      if (currentPage.value <= maxPage + 1) {
+        loadBlogList();
+      }
+    }
+
+    function getNextBatch() {
+      window.onscroll = debounce(function () {
+        let bottomOfWindow =
+          document.documentElement.scrollTop + window.innerHeight + 100 >
+          document.documentElement.scrollHeight;
+
+        if (bottomOfWindow) {
+          loadMore();
+        }
+      }, 500);
+    }
+
+    onMounted(() => {
+      loadSliders();
+      getNextBatch();
+    });
+
+    return {
+      slide: ref(1),
+      autoplay: ref(true),
+      sliders,
+      tab: ref("lb"),
+      globalUnifiedItemList,
+    };
+  },
+};
+</script>
+<style lang="sass" scoped>
+.custom-caption
+  text-align: left
+  padding: 12px
+  color: white
+</style>
+

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

@@ -20,7 +20,7 @@
           :name="index"
           :img-src="item.imageUrl"
           class="cursor-pointer"
-          @click="goToBlog(item.linkToBlog)"
+          @click="gotoUrl(item.linkToBlog)"
         >
           <div class="q-mt-xl q-ml-xl absolute-left custom-caption">
             <div style="height: 100px"></div>
@@ -186,7 +186,7 @@
     </div>
     <div class="row">
       <div class="col-12">
-        <p class="text-center" style="background-color: #9e9e9e">
+        <p class="text-center" style="background-color: #b4b4b4">
           Scroll to load more
         </p>
       </div>
@@ -221,9 +221,9 @@ export default defineComponent({
     const globalUnifiedItemList = ref([]);
     const unifiedItemList = ref([]);
 
-    function goToBlog(url) {
-      window.location.href = url;
-    }
+    // function goToBlog(url) {
+    //   window.location.href = url;
+    // }
 
     function normalizeMultiImageUrl(input) {
       if (input.indexOf(",") > -1) {
@@ -369,7 +369,6 @@ export default defineComponent({
       homePostLink,
       homePostImageUrl,
       globalUnifiedItemList,
-      goToBlog,
       normalizeMultiImageUrl,
     };
   },

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

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