首页功能调整

src/components/Home/Home.vue

@@ -9,9 +9,9 @@
                         <span><i class="el-icon-menu"></i> 热门标签</span>
                     </div>
                     <div class="bottom clearfix">
-                        <el-tabs tab-position="left" v-model="activeIndex" @tab-click="handleClick">
+                        <el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange">
-                            <el-tab-pane  v-for="(tag,index) in tags" :key="index" :index="index">
+                            <el-tab-pane  v-for="(tag,index) in tags" :key="index" :index="index" :name="tag.name" >
-                                <span slot="label" style="text-align: center" :name="tag.name" v-html="tag.icon"></span>
+                                <span slot="label" style="text-align: center"  v-html="tag.icon"></span>
                             </el-tab-pane>
                         </el-tabs>
 <!--                        <div v-for="(tag,index) in tags" :key="index" class="text item">-->
@@ -44,7 +44,7 @@
                             <p v-if="loading">加载中...</p>
                             <p v-if="noMore">没有更多了</p>
                         </el-tab-pane>
-                        <el-tab-pane label="最热" name="second">
+                        <el-tab-pane v-model="activeName" label="最热" name="second">
                             <div class="lsm-container">
                                 <el-scrollbar class="scrollbar-wrapper" style="position: relative;">
                                     <div class="infinite-list-wrapper">
@@ -216,8 +216,10 @@ export default {
     data() {
         return {
             activeName: 'first',
-            activeIndex:'综合',
+            currentTabName:"综合",
+            currentTabIndex:null,
             projectLists:[],
+            tabindex:0,
             count: 10,
             loading: false,
             loginDialogVisible: false,
@@ -259,12 +261,16 @@ export default {
                     name:"综合"
                 },
                 {
-                    icon: `<i class="el-ico-alicyuyan"></i> C++`,
+                    icon: `<i class="el-ico-alicyuyan"></i> C`,
-                    name:"C++"
+                    name:"C"
                 },
                 {
-                    icon: `<i class="el-ico-aliPython"></i> python`,
+                    icon: `<i class="el-ico-aliGoyuyan"></i> C#`,
-                    name:"python"
+                    name:"C#"
+                },
+                {
+                    icon: `<i class="el-ico-alicyuyan"></i> C++`,
+                    name:"C++"
                 },
             ],
 
@@ -275,17 +281,17 @@ export default {
         this.ProjectLists();
     },
     created() {
-        if (sessionStorage.getItem('current_name') == null){
+    //     if (sessionStorage.getItem('current_name') == null){
-            this.activeIndex = '综合'
+    //         this.activeIndex = '综合'
-        }else{
+    //     }else{
-            this.activeIndex = sessionStorage.getItem('current_name')
+    //         this.activeIndex = sessionStorage.getItem('current_name')
-        }
+    //     }
-    },
+    // },
-    beforeRouteLeave(to, from, next){
+    // beforeRouteLeave(to, from, next){
-        // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
+    //     // 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
-        // 根据个人需求决定清除的时间
+    //     // 根据个人需求决定清除的时间
-        sessionStorage.removeItem('currentTab')
+    //     sessionStorage.removeItem('currentTab')
-        next()
+    //     next()
     },
     computed: {
         noMore() {
@@ -297,10 +303,7 @@ export default {
     },
 
     methods: {
-        handleClick(tab, event) {
+
-            // location.search:获取路由上的参数
-            sessionStorage.setItem('current_name', this.activeIndex)
-        },
         openLogin() {
             this.loginDialogVisible = true;
         },
@@ -506,19 +509,59 @@ export default {
                 params: {
                     num: "0",
                 }
+            }).then((res)=>{
+                // console.log(res.data);
+                that.projectLists=res.data;
+            });
+        },
+        projectListsByCount(index){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectMostStar',
+                // URL 中的查询参数
+                params: {
+                    num: index,
+                }
+            }).then((res)=>{
+                // console.log(res.data);
+                that.projectLists=res.data;
+            });
+        },
+        tabChange(tab) {
+            if(tab.name=="first"){
+                this.ProjectLists();
+            }
+            else if (tab.name == "second") {
+                this.projectListsByCount(this.tabindex);
+            }
+        },
+
+        typeChangeFun(index){
+            var that=this;
+            axios({
+                method: 'post',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
+                // URL 中的查询参数
+                params: {
+                    num: index,
+                }
             }).then((res)=>{
                 console.log(res.data);
                 that.projectLists=res.data;
             });
         },
 
-        tabChange(tab, event) {
+        typeChange(tab){
-            console.log(tab, event);
+            if(this.activeName==="first"){
-            // eslint-disable-next-line no-empty
+                this.typeChangeFun(tab.index);
-            if (tab.name == "second") {
+            }
-
+            if(this.activeName==="second"){
+                this.projectListsByCount(tab.index);
+            }
         }
-        },
 
     }
 }