[WHAT] 展覽列表分頁查詢

FrontEnd/pages/exhibition/index.vue

@@ -214,7 +214,9 @@ export default {
   },
   data: () => ({
     page: 1,
-    perPage: 10,
+    perPageItems: 10,
+    currentPage: 1,
+    total: 0,
     adList: [],
     exhibitionList: [],
     categoryChecked: [],
@@ -357,16 +359,22 @@ export default {
     this.fetchUser();
   },
   computed: {
+    // result() {
+    //   // return this.exhibitionsFilter.length;
+    //   return this.exhibitionList.length;
+    // },
+    // pageLength() {
+    //   return Math.ceil(this.totalPages / this.perPage);
+    // },
+    // renderList() {
+    //   return this.sliceRenderList(this.exhibitionsFilter);
+    // },
     result() {
-      // return this.exhibitionsFilter.length;
-      return this.exhibitionList.length;
+      return this.total;
     },
     pageLength() {
-      return Math.ceil(this.result / this.perPage);
+      return Math.ceil(this.result / this.perPageItems);
     },
-    // renderList() {
-    //   return this.sliceRenderList(this.exhibitionsFilter);
-    // },
   },
   watch: {
     page() {
@@ -374,7 +382,7 @@ export default {
     },
     $route() {
 
-      console.log("route");
+      // console.log("route");
       this.getQuery();
 
     },
@@ -557,16 +565,14 @@ export default {
     },
     async getExhibitionCard() {
 
-      // to Fred
-      // should add q=? to api
+      // this.query = this.query + "工具機";
+      // console.log("getExhibitionCard"+": "+this.query)
 
-      this.query = this.query + "工具機";
-
-      console.log("getExhibitionCard"+": "+this.query)
-      
       await this.$axios
         .get(
           `/trending/api/Exhibition/Cards?Lang=${this.$i18n.localeProperties["langQuery"]}` +
+          `&PageIndex=${this.currentPage}` +
+          `&PageSize=${this.perPageItems}` +
           `&RegionIDs=${JSON.stringify(this.selectedRegion)}` +
           `&CountryIDs=${JSON.stringify(this.selectedCountry)}` +
           `&CityIDs=${JSON.stringify(this.selectedCity)}` +
@@ -579,11 +585,15 @@ export default {
         )
         .then((result) => {
 
-          console.log(result);
+          console.table(result);
 
-          if (result.data.DATA.rel) {
-            this.exhibitionList = result.data.DATA.rel;
-            this.setFavorite();
+          if(result && result.data && result.data.DATA && result.data.DATA.rel){
+            let data = result.data.DATA.rel
+            if(data.DataList.length>0){
+              this.total = data.Total;
+              this.exhibitionList = data.DataList;
+              this.setFavorite();
+            }
           }
 
         })
@@ -643,15 +653,18 @@ export default {
     },
     updateSortBy(data) {
 
+      this.query = "";
       this.sortBy = data;
       this.getExhibitionCard();
 
     },
     updatePage(value) {
-      this.page = value;
+      this.currentPage = value;
+      this.getExhibitionCard();
     },
     updateCategoryFilter(value) {
 
+      this.query = "";
       this.selectedMainCategory = [];
       this.selectedSubCategory = [];
 
@@ -672,6 +685,7 @@ export default {
     },
     updateLocationFilter(value) {
 
+      this.query = "";
       this.selectedRegion = [];
       this.selectedCountry = [];
       this.selectedCity = [];
@@ -697,6 +711,7 @@ export default {
     },
     updateStatusFilter(value) {
 
+      this.query = "";
       this.selectedStatus = [];
 
       value.forEach(key => {
@@ -712,6 +727,7 @@ export default {
     },
     updateDateFilter(value) {
 
+      this.query = "";
       this.selectedDates = value;
       this.getExhibitionCard();
     },
@@ -725,10 +741,6 @@ export default {
       this.selectedCity = [];
       this.query = "";
 
-      // vm.categoryQueryFilter = {};
-
-      console.log(this.$route.query);
-
       if (this.$route.query.category) {
         vm.categoryQueryFilter = vm.$route.query.category;
         this.selectedMainCategory.push(vm.$route.query.category);