fix-issue#15

pages/index.vue

@@ -5,8 +5,9 @@
       <card-container style="margin-top: 40px" title="热门项目"  more="查看更多" @listenCardConMore="changeRoute('/project?type=all')">
         <project-card v-for="(val,index) in projectList" :key="val.projectId" :info="val"></project-card>
       </card-container>
-      <card-container style="margin-top: 16px" title="热门博客"  more="查看更多" @listenCardConMore="changeRoute('/blog?type=all')">
+      <card-container style="margin-top: 16px" title="热门博客" @listenCardConMore="changeRoute('/blog?type=all')">
         <project-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></project-card>
+        <pagination ref="pagination" :paginationState="paginationState" :type="2" key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
       </card-container>
     </div>
     <div class="home-container__r">
@@ -42,16 +43,12 @@
   import UserCard from '../components/pc/userCard2'
   import {dateConvert} from '../action/utils/dataConvert'
   import HotTopicList from '../components/pc/hotSearchTopicCard'
+  import Pagination from '../components/pc/pagination';
+
   export default {
 
 
     async asyncData ({ $axios }) {
-      let blogList = await  $axios.$get(config.api.get.Blog.hotList,{
-        params:{
-          page:1,
-          size:20,
-        }
-      });
 
       let projectList = await  $axios.$get(config.api.get.Project.hotList,{
         params:{
@@ -77,7 +74,7 @@
           }
         })
 
-      return {blogList:blogList.data.dataList,
+      return {
         projectList:projectList.data.dataList,
         bannerList:bannerList.data.dataList,
         newsList:newsList.data.dataList}
@@ -90,6 +87,9 @@
         answerList:[],
         topicList:[],
         newsList:[],
+        blogList:[],
+        paginationState:'over',
+        pages:1,
       }
     },
     created() {
@@ -99,7 +99,7 @@
     },
 
     components:{
-      CardContainer,Banner,ProjectCard,UserCard,HotTopicList
+      CardContainer,Banner,ProjectCard,UserCard,HotTopicList,Pagination
     },
     methods:{
 
@@ -116,6 +116,50 @@
         return dateConvert(time);
       },
 
+      restartPagination(){
+        this.postList = [];
+        this.pages = 1;
+
+        if(process.browser){
+          this.$refs.pagination.setCurrentPage(1)
+        }
+      },
+
+      dataGetBlogList(currentPage){
+        this.paginationState = 'loading';
+
+        let params={
+          page:currentPage,
+          size:20
+        };
+        if(this.$route.query.type && this.$route.query.type!=='all' ){
+          params.categoryId = this.$route.query.type
+        }
+        this.$axios.$get(config.api.get.Blog.list, {params:params})
+          .then((response)=>{
+            this.paginationState = 'over';
+            this.pages  = response.data.totalPage;
+
+            if(currentPage===1){
+              this.blogList = response.data.dataList;
+              this.pages  = response.data.totalPage;
+            }else{
+              let list = response.data.dataList;
+              for(let i = 0;i<list.length;i++){
+                this.blogList.push(list[i]);
+
+              }
+            }
+
+          })
+      },
+
+      changePage(currentPage){
+        //返回页数 请求新的数据
+
+          this.dataGetBlogList(currentPage)
+      },
+
       dataGetBanner(){  //内容类型-0:幻灯，1:普通文章，3：广告
           let dataList = this.bannerList;
            dataList.map((val,index)=>{
@@ -158,6 +202,9 @@
 </script>
 
 <style lang="scss" scoped>
+  div{
+    position: relative;
+  }
   .home-container{
     width: $pageWidth;
     margin:0 auto;