完成项目列表接口

pages/answer/index.vue

@@ -2,68 +2,72 @@
   <yun-div>
     <Nav :path="path" :nav-list="navList"></Nav>
     <answer-card></answer-card>
-    <answer-card></answer-card>
-    <answer-card></answer-card>
-    <answer-card></answer-card>
-    <answer-card></answer-card>
+
   </yun-div>
 </template>
 
 <script>
 import Nav from "../../components/moblie/nav";
 import AnswerCard from "../../components/moblie/answerCard";
+import ScrollLoading from '../../components/moblie/scrollLoading';
+import config from "../../action/config";
 
 export default {
-  components: {AnswerCard, Nav},
+  components: {AnswerCard, Nav,ScrollLoading},
+  async asyncData({$axios}){
+    let typeList = await $axios.$get(config.api.get.QuestionCategory.list);
+    return {typeList:typeList.data}
+  },
   data() {
     return {
       path: '/answer',
-      navList: [
+      navList: [],
+      navList1: [
         {
           label: '全部问答',
           id: 'all'
         },
+      ],
+      navList2: [
         {
-          label: '讨论',
-          id: '10'
-        },
-        {
-          label: '项目讨论',
-          id: '11'
-        },
-        {
-          label: '问题求助',
-          id: '12'
-        },
-        {
-          label: '技术交流',
-          id: '13'
+          label: '热门问答',
+          id: 'hot'
         },
-        {
-          label: '前端技术交流',
-          id: '14'
-        },
-        {
-          label: '前技术交流端',
-          id: '15'
-        },
-        {
-          label: '吃土少女技术交流',
-          id: '16'
-        }
-      ]
+      ],
     }
   },
   created() {
-    if (this.$route.query.type) {
-      return
+    if(this.$route.query.type==='hot'){
+      this.navList = this.navList2;
+      this.$router.replace({
+        path: '/blog',
+        query: {
+          type: 'hot'
+        }
+      });
+    }if(this.$route.query.type){
+      this.navList = this.navList1
+    }else{
+      this.navList = this.navList1;
+      this.$router.replace({
+        path: '/blog',
+        query: {
+          type: 'all'
+        }
+      });
     }
-    this.$router.replace({
-      path: '/answer',
-      query: {
-        type: 'all'
-      }
-    })
+    this.dataGetQuestionCategory()
+  },
+  methods:{
+    dataGetQuestionCategory(){
+      this.typeList.map((val,index)=>{
+        this.navList1.push({
+          label: val.category,
+          id: val.categoryId
+        })
+      })
+
+    },
   }
 }
 </script>

pages/project/index.vue

 <template>
   <yun-div>
     <Nav :path="path" :nav-list="navList"></Nav>
-    <project-card ></project-card>
-    <project-card ></project-card>
-    <project-card ></project-card>
-    <project-card ></project-card>
-    <project-card ></project-card>
+    <project-card v-for="(val,index) in projectList" :info="val" :key="val.projectId"></project-card>
+    <scroll-loading ref="pagination" :pages="pages" v-on:changePage="changePage"></scroll-loading>
   </yun-div>
 </template>
 
@@ -16,6 +13,7 @@ import ScrollLoading from '../../components/moblie/scrollLoading';
 import config from "../../action/config";
 export default {
   components: {ProjectCard, Nav,ScrollLoading},
+
   async asyncData({$axios}){
     let typeList = await $axios.$get(config.api.get.ProjectCategory.list);
     return {typeList:typeList.data}
@@ -23,34 +21,58 @@ export default {
   data() {
     return {
       path: '/project',
-      navList: [
+      navList: [],
+      navList1: [
         {
           label: '全部项目',
           id: 'all'
         },
       ],
+      navList2: [
+        {
+          label: '热门项目',
+          id: 'hot'
+        },
+      ],
       projectList:[],
       pages:1,
     }
   },
 
   watch:{
-    $route(){
-    },
+      $route(val){
+        if(val.query.type==='hot'){
+          this.navList = this.navList2
+        }else{
+          this.navList = this.navList1
+        }
+
+        this.restartPagination();
+
+      }
+
   },
 
 
   created() {
-    if(this.$route.query.type){
-
+    if(this.$route.query.type==='hot'){
+      this.navList = this.navList2;
+      this.$router.replace({
+        path: '/project',
+        query: {
+          type: 'hot'
+        }
+      });
+    }if(this.$route.query.type){
+      this.navList = this.navList1
     }else{
+      this.navList = this.navList1;
       this.$router.replace({
         path: '/project',
         query: {
           type: 'all'
         }
       });
-
     }
     this.dataGetProjectCategory()
 
@@ -67,6 +89,62 @@ export default {
       })
 
     },
+    restartPagination(){
+
+      if(process.browser){
+        this.projectList = [];
+        this.pages = 1 ;
+        this.$refs.pagination.setCurrentPage(1)
+      }
+    },
+    handleResponse(currentPage,response){
+      if(currentPage===1){
+        this.projectList=response.data.dataList;
+        this.pages = response.data.totalPage;
+      }else{
+
+        response.data.dataList.map((val,index)=>{
+          this.projectList.push(val)
+        });
+        this.pages = response.data.totalPage;
+      }
+    },
+
+    dataGetProjectList(currentPage){
+      let  params={
+        page:currentPage,
+        size:12
+      };
+      if(this.$route.query.type&&this.$route.query.type==='hot' ){
+        this.$axios.$get(config.api.get.Project.hotList,{params:params}).then((response)=>{
+          this.handleResponse(currentPage,response)
+        })
+
+      }
+      else if(this.$route.query.type&&this.$route.query.type==='all' ){
+        this.$axios.$get(config.api.get.Project.list, {params:params})
+          .then((response)=>{
+            this.handleResponse(currentPage,response)
+
+          })
+      }
+      else if(this.$route.query.type&&this.$route.query.type!=='all' ){
+        params.categoryId = this.$route.query.type;
+        this.$axios.$get(config.api.get.Project.list, {params:params})
+          .then((response)=>{
+            this.handleResponse(currentPage,response)
+          })
+      }
+
+
+
+    },
+    changePage(currentPage){
+      //返回页数 请求新的数据
+      this.dataGetProjectList(currentPage)
+    },
+
+
 
   }
 }