更新页面

src/components/Monthly/Monthly.vue

@@ -54,7 +54,7 @@
                                     <span style="font-size:18px;font-weight:540;color: #676767">选择期数: &nbsp;</span>
                                     <el-select clearable v-model="selectMonly" filterable placeholder="期数" style="width:80px;">
                                         <el-option
-                                            v-for="item in Monely"
+                                            v-for="item of Monely"
                                             :key="item"
                                             :label="item"
                                             :value="item"
@@ -72,7 +72,7 @@
                             <el-card shadow="always" class="card_style">
                                 <span style="font-size:25px;font-weight:540;color: #676767">共包含</span>
                                 <br/><br/>
-                                <span style="font-size:55px;font-weight:650;color: #3d8bff">17</span>
+                                <span style="font-size:55px;font-weight:650;color: #3d8bff">{{labelItem.length}}</span>
                                 <br/><br/>
                                 <span style="font-size:25px;font-weight:540;color: #676767">类</span>
                                 <br/>
@@ -80,19 +80,19 @@
                                 <div style="border-top:1.5px solid #ababab;border-bottom:1.5px solid #ababab;">
                                     <br/>
                                     <span style="font-size:18px;font-weight:540;color: #676767">选择分类: &nbsp;</span>
-                                    <el-select v-model="value" filterable placeholder="分类" style="width:80px;">
+                                    <el-select clearable v-model="selectlabelItem" placeholder="分类" style="width:100px;">
                                         <el-option
-                                            v-for="item in options"
-                                            :key="item.value"
-                                            :label="item.label"
-                                            :value="item.value"
+                                            v-for="item in labelItem"
+                                            :key="item"
+                                            :label="item"
+                                            :value="item"
                                         >
                                         </el-option>
                                     </el-select>
                                     <br/><br/>
                                 </div>
                                 <br/>
-                                <el-button type="info">查看分类</el-button>
+                                <el-button type="info" @click="changePage()">查看分类</el-button>
                                 <br/><br/>
                             </el-card>
                         </el-col>
@@ -150,14 +150,23 @@ export default {
             Monely:0,
             //保存用户选择期刊期数：
             selectMonly:null,
+            // 保存用户选择的分类：
+            selectlabelItem:null,
+            //标签：
+            labelItem:[],
         };
     },
     // 初始化渲染页面
     mounted(){
         this.getMonely();
         this.getProjectNum();
+        this.getLabel();
     },
     methods: {
+        test(){
+          var that = this;
+          console.log(that.selectlabelItem);
+        },
         goBack() {
             window.history.go(-1);
         },
@@ -187,6 +196,22 @@ export default {
                 // console.log(res.data);
             })
         },
+        //获取所有标签：
+        getLabel(){
+            var that = this;
+            axios({
+                method: 'post',
+                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
+                params: {
+                }
+            }).then(function (res){
+                that.labelItem = [];
+                for(let i=0;i<res.data.length;i++){
+                    let tmp = res.data[i]['categoryName'];
+                    that.labelItem.push(tmp);
+                }
+            })
+        },
         // 月刊详情页面跳转
         ToDetail(){
             if(this.selectMonly > 0 && this.selectMonly <= this.Monely){
@@ -205,6 +230,26 @@ export default {
                     duration:700,
                 });
             }
+        },
+        // 月刊分类页跳转
+        changePage(){
+            if(this.selectlabelItem){
+                let pathInfo = this.$router.resolve({
+                    path: '/MonthlyByTags',
+                    query:{
+                        Protype:this.selectlabelItem
+                    }
+                })
+                window.open(pathInfo.href, '_self');
+            }else{
+                this.$message({
+                    message: '请选择分类类型',
+                    type: 'warning',
+                    offset:100,
+                    duration:700,
+                });
+            }
+
         }
     }
 }
@@ -242,4 +287,9 @@ export default {
     text-align: center;
     border-radius:10px;
 }
+
+::v-deep .el-scrollbar{
+    max-height:150px;
+    overflow: scroll;
+}
 </style>