博客发布页可选子分类

components/pc/select/selectCard.vue

@@ -72,7 +72,11 @@ export default {
   props: {
     selectType: String,
     classList: Array,
-    placeholder: String
+    placeholder: String,
+    childList:{
+      type:Array,
+      default:() => ([])
+    }
   },
   data(){
     return{

components/pc/select/selectContent.vue

 <template>
-  <div class="tag-box">
-    <p v-if="!isHot" @click="handleClick">{{item.tag}}</p>
-    <div v-if="isHot" @click="handleClick">{{item.tag}}（{{item.referenceCount}}）</div>
+  <div>
+    <div class="tag-box">
+      <p v-if="!isHot" @click="handleClick">{{item.tag}}</p>
+      <div v-if="isHot" @click="handleClick">{{item.tag}}（{{item.referenceCount}}）</div>
+      <yun-icon v-if="item.childList" @click="handleClick" :style="{paddingRight:'5px',transform:showChildList?'rotate(180deg)':'rotate(0)'}" name="down_arrow" size="8px" :color="showChildList?'#00AAE6':'#999'"></yun-icon>
+
+    </div>
+    <div  v-if="item.childList&&showChildList" >
+      <p class="tag-child" @click="handleChildClick(val.tag,val,tagId)" v-for="(val,index) in item.childList">{{val.tag}}</p>
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -16,10 +24,24 @@ export default {
       default: false
     }
   },
+  data(){
+    return{
+      showChildList:false
+    }
+  },
   methods: {
     handleClick(){
-      console.log(this.item);
-      this.$emit('select', this.item.tag, this.item.tagId);
+      if(this.item.childList){
+        this.showChildList = !this.showChildList;
+
+      }else {
+        this.$emit('select', this.item.tag, this.item.tagId);
+
+      }
+    },
+    handleChildClick(tag,id){
+      this.$emit('select', tag, id);
+
     }
   }
 }
@@ -27,7 +49,9 @@ export default {
 
 <style lang="scss" scoped>
   .tag-box{
-    display: inline-block;
+    @extend %flex-row-spb;
+    border-bottom: 1px solid #F4F8FA;
+
     > div {
       display: inline-block;
       margin: 2*$length 5*$length 8*$length 8*$length;
@@ -42,11 +66,27 @@ export default {
       @include fontStyle(14, 40, 500, #999, left);
       padding-left: 20*$length;
       @extend %cursorPointer;
-      &:hover {
-        background-color: #F4F8FA;
+
+    }
+    &:hover {
+      background-color: #F4F8FA;
+      > p{
         color: #00AAE6;
+
       }
     }
+
+  }
+
+  .tag-child {
+    @include fontStyle(12, 40, 500, #999, center);
+    padding-left: 20*$length;
+    @extend %cursorPointer;
+    box-sizing: border-box;
+    &:hover {
+      background-color: #F4F8FA;
+        color: #00AAE6;
+    }
   }
 
 </style>

pages/blog/release/index.vue

@@ -152,7 +152,7 @@ export default {
     if(blogListRes.code!==0){
       redirect('/users/login');
     }
-    blogClassRes.data.forEach(item => {
+    for (const item of blogClassRes.data) {
       if (item.category === '云顶笔记') {
         if (store.state.userProfile.nickName === '云顶笔记') {
           classList.push({
@@ -161,13 +161,31 @@ export default {
           })
         }
       } else {
-        classList.push({
-          tag: item.category,
-          tagId: item.categoryId
-        })
+        if(!item.leaf){
+          let childListData = await $axios.$get(config.api.get.BlogCategory.childList+item.categoryId+'/categories')
+          const childList =[];
+          childListData.data.map((val,index)=>{
+            childList.push({
+              tag: val.category,
+              tagId: val.categoryId,
+            })
+          })
+          classList.push({
+            tag: item.category,
+            tagId: item.categoryId,
+            childList
+          });
+
+        }else{
+          classList.push({
+            tag: item.category,
+            tagId: item.categoryId,
+          })
+        }
+
       }
 
-    });
+    }
     if (query.hasOwnProperty('id')) {
       const blogDetailRes = await $axios.$get(config.api.get.Blog.detail + query.id);
       return {