活动、营地、新闻、旅游、车型列表分页

pages/activity.vue

@@ -36,6 +36,13 @@
             </nuxt-link>
           </li>
         </ul>
+        <div class="pagination-container">
+          <el-pagination @current-change="handleCurrentChange"
+                         :current-page.sync="listQuery.page"
+                         @size-change="handleSizeChange"
+                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
+        </div>
         <div class="right">
           <nuxt-child :key="$route.params.id" />
         </div>
@@ -63,13 +70,13 @@
     data() {
       return {
         dataType: [],
-        totalCount: "",
+        totalCount: 0,
         dataDetail: [],
         bannerList: [],//车型banner列表
         listQuery: {
           type: "",
-          pageNo: 1,
-          pageSize: 6
+          page: 1,
+          limit: 10
         },
         store: "",
         curId: 0,
@@ -102,6 +109,15 @@
       },
       bannerClick () {
       },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getAll();
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.listQuery.page = 1;
+        this.getAll();
+      },
       /**
        * 获取车型列表页banner
        */
@@ -118,30 +134,11 @@
       async getAll() {
         let {
           data: { data }
-        } = await axios.get( `/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.pageNo}&limit=10000`);
+        } = await axios.get( `/api/uccn/summitActivity/app/unauth/list?page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
         // console.log(data);
         this.totalCount = data.totalCount;
         this.dataDetail = data.data;
       },
-      mounted() {
-        window.addEventListener('scroll', this.scrollHandle);  // 绑定页面的滚动事件
-      },
-      scrollHandle: function(e) {
-        //变量scrollTop是滚动条滚动时，距离顶部的距离
-        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
-        //变量windowHeight是可视区的高度
-        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
-        //变量scrollHeight是滚动条的总高度
-        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
-        //滚动条到底部的条件
-        if(scrollTop+windowHeight+0.7>scrollHeight){
-          //写后台加载数据的函数
-//          	      console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
-          // this.listQuery.pageNo++;
-          // this.getAll();
-
-        }
-      }
     },
     head () {
       return {

pages/campsite.vue

@@ -56,6 +56,13 @@
             </nuxt-link>
           </li>
         </ul>
+        <div class="pagination-container">
+          <el-pagination @current-change="handleCurrentChange"
+                         :current-page.sync="listQuery.page"
+                         @size-change="handleSizeChange"
+                         :page-sizes="[9,18,24, 45]" :page-size="listQuery.pageSize"
+                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
+        </div>
       </div>
     </div>
     <go-top></go-top>
@@ -84,7 +91,7 @@ export default {
       looptime: 4000, // 循环时间
       typeId: "营地类型",
       dataType: [],
-      totalCount: "",
+      totalCount: 0,
       dataDetail: [],
       width: 400,
       height:200,
@@ -94,7 +101,7 @@ export default {
       listQuery: {
         type: "",
         pageNo: 1,
-        pageSize: 100
+        pageSize: 9
       },
       store: "",
       dataNull:false
@@ -114,9 +121,14 @@ export default {
           this.listQuery.type = this.typeList
            this.getAll();
     },
-    goDetails() {
-      console.log(2222222);
-
+    handleCurrentChange(val) {
+      this.listQuery.pageNo = val;
+      this.getAll();
+    },
+    handleSizeChange(val) {
+      this.listQuery.pageSize = val;
+      this.listQuery.pageNo = 1;
+      this.getAll();
     },
     async getType() {
       const {

pages/news.vue

@@ -36,6 +36,13 @@
             </nuxt-link>
           </li>
         </ul>
+        <div class="pagination-container">
+          <el-pagination @current-change="handleCurrentChange"
+                         :current-page.sync="listQuery.page"
+                         @size-change="handleSizeChange"
+                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
+        </div>
         <div class="right">
           <nuxt-child :key="$route.params.id" />
         </div>
@@ -62,13 +69,13 @@
     },
     data() {
       return {
-        totalCount: "",
+        totalCount: 0,
         dataDetail: [],
         bannerList: [],//banner列表
         listQuery: {
           type: "",
-          pageNo: 1,
-          pageSize: 6
+          page: 1,
+          limit: 10
         },
         looptime: 4000, // 循环时间
         width: 400,
@@ -97,6 +104,15 @@
       },
       bannerClick () {
       },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getAll();
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.listQuery.page = 1;
+        this.getAll();
+      },
       /**
        * 获取车型列表页banner
        */
@@ -114,34 +130,14 @@
       async getAll() {
         let {
           data: { data }
-        } = await axios.get(`/api/uccn/article/app/unauth/list?type=1&page=1&limit=10000` );
+        } = await axios.get(`/api/uccn/article/app/unauth/list?type=1&page=${this.listQuery.page}&limit=${this.listQuery.limit}` );
         // console.log(data);
         this.totalCount = data.total;
         data.list.map(function(item){
           item.addTime = item.addTime.substring(0, 10);
         })
         this.dataDetail = data.list;
-        // this.dataDetail = this.dataDetail.push(data.data);
-      },
-      mounted() {
-        window.addEventListener('scroll', this.scrollHandle);  // 绑定页面的滚动事件
       },
-      scrollHandle: function(e) {
-        //变量scrollTop是滚动条滚动时，距离顶部的距离
-        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
-        //变量windowHeight是可视区的高度
-        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
-        //变量scrollHeight是滚动条的总高度
-        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
-        //滚动条到底部的条件
-        if(scrollTop+windowHeight+0.7>scrollHeight){
-          //写后台加载数据的函数
-//          	      console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
-          // this.listQuery.pageNo++;
-          // this.getAll();
-
-        }
-      }
     },
     head () {
       return {

pages/tour.vue

@@ -58,14 +58,18 @@
             <div style="float:left;padding-top:10px;width:850px;color:#333">
               <h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
               <h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
-
-
               <button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
-
             </div>
             </nuxt-link>
           </li>
         </ul>
+        <div class="pagination-container">
+          <el-pagination @current-change="handleCurrentChange"
+                         :current-page.sync="listQuery.page"
+                         @size-change="handleSizeChange"
+                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
+        </div>
       </div>
     </div>
     <go-top></go-top>
@@ -98,7 +102,7 @@
        looptime: 4000, // 循环时间
       typeId: "营地类型",
       dataType: [],
-      totalCount: "",
+      totalCount: 0,
       dataDetail: [],
       width: 400,
       height:200,
@@ -108,7 +112,7 @@
       listQuery: {
         tagId: "",
         page: 1,
-        limit: 100
+        limit: 10
       },
       store: "",
       dataNull:false
@@ -120,6 +124,15 @@
           this.listQuery.tagId = this.typeList
            this.getAll();
     },
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getAll();
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.listQuery.page = 1;
+        this.getAll();
+      },
     choose(e) {
       console.log(e.target.value);
       this.listQuery.tagId = e.target.value;

pages/vehicle.vue

@@ -47,6 +47,13 @@
             </nuxt-link>
           </li>
         </ul>
+        <div class="pagination-container">
+          <el-pagination @current-change="handleCurrentChange"
+                         :current-page.sync="listQuery.page"
+                         @size-change="handleSizeChange"
+                         :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
+                         layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
+        </div>
         <div class="right">
           <nuxt-child :key="$route.params.id" />
         </div>
@@ -74,13 +81,13 @@
     },
     data() {
       return {
-        totalCount: "",
+        totalCount: 0,
         dataDetail: [],
         bannerList: [],//车型banner列表
         listQuery: {
           type: "",
-          pageNo: 1,
-          pageSize: 6
+          page: 1,
+          limit: 10
         },
         store: "",
         curId: 0,
@@ -102,6 +109,15 @@
       window.addEventListener("scroll", this.scrollHandle); // 绑定页面的滚动事件
     },
     methods: {
+      handleCurrentChange(val) {
+        this.listQuery.page = val;
+        this.getAll();
+      },
+      handleSizeChange(val) {
+        this.listQuery.limit = val;
+        this.listQuery.page = 1;
+        this.getAll();
+      },
       // 点击下一页回调
       prev () {
       },
@@ -130,7 +146,7 @@
       async getAll() {
         let {
           data: { data }
-        } = await axios.get(`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=1&limit=100`);
+        } = await axios.get(`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=${this.listQuery.page}&limit=${this.listQuery.limit}`);
         this.totalCount = data.totalCount;
         data.data.map(function(item){
           item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
@@ -144,22 +160,6 @@
       mounted() {
         window.addEventListener('scroll', this.scrollHandle);  // 绑定页面的滚动事件
       },
-      scrollHandle: function(e) {
-        //变量scrollTop是滚动条滚动时，距离顶部的距离
-        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
-        //变量windowHeight是可视区的高度
-        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
-        //变量scrollHeight是滚动条的总高度
-        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
-        //滚动条到底部的条件
-        if(scrollTop+windowHeight+0.7>scrollHeight){
-          //写后台加载数据的函数
-//          	      console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
-          // this.listQuery.pageNo++;
-          // this.getAll();
-
-        }
-      }
     },
     head () {
       return {