优化

src/components/content/information/articleItem.vue

@@ -18,16 +18,15 @@
   >
     <div class="img" v-if="!imgRight" :style="{'background': listStyle != 5 ? bgColor : ''}">
       <div
-        class="tagList flex"
+        class="tagList"
         v-if="info.tagList && info.tagList.length > 0 && tagShow"
       >
         <div
           class="tag"
-          v-for="(item, index) in info.tagShowList"
+          v-for="(item, index) in info.tagList"
           :key="index"
         >
-          <i class="tag-i">#</i>
-          <span class="tagName">{{ item.tagName }}</span>
+          <span class="tag-i">#</span><span class="tagName">{{ item.tagName }}</span>
         </div>
       </div>
       <image :src="info.coverUrl" mode="widthFix" lazy-load></image>
@@ -58,16 +57,15 @@
     <!-- 针对图片在右边 -->
     <div class="img" v-if="imgRight">
       <div
-        class="tagList flex"
+        class="tagList"
         v-if="info.tagList && info.tagList.length > 0 && tagShow"
       >
         <div
           class="tag"
-          v-for="(item, index) in info.tagShowList"
+          v-for="(item, index) in info.tagList"
           :key="index"
         >
-          <i class="tag-i">#</i>
-          <span class="tagName">{{ item.tagName }}</span>
+          <span class="tag-i">#</span><span class="tagName">{{ item.tagName }}</span>
         </div>
       </div>
       <image :src="info.coverUrl" lazy-load mode="widthFix"></image>
@@ -156,7 +154,7 @@ img {
   .img {
     width: 100%;
     position: relative;
-    background: #fdfdfd;
+    background: #f5f5f5;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -168,12 +166,14 @@ img {
     }
     .tagList {
       position: absolute;
-      bottom: 4px;
+      bottom: -20px;
       left: 4px;
-      max-width: 92%;
-      flex-wrap: wrap;
-      overflow: hidden;
+      padding-bottom: 24px;
+      overflow-x: auto;
+      white-space: nowrap;
+      width: 90%;
       .tag {
+        display: inline-block;
         padding: 0 8px;
         height: 22px;
         line-height: 22px;
@@ -181,8 +181,8 @@ img {
         border-radius: 4px;
         margin-left: 4px;
         margin-bottom: 4px;
-        display:flex;
         .tag-i {
+          font-size: italic;
           font-weight: 400;
           color: var(--main-color);
           font-size: 12px;

src/components/content/information/index.vue

@@ -8,7 +8,7 @@
           <h3 class="line-clamp1">{{title}}</h3>
           <div
             class="more"
-            v-if="datas.componentData['moreShow']&&datas.componentData.status==1"
+            v-if="showMoreBtn"
             @click="viewMore"
           >
             <div class="moreTop">
@@ -223,6 +223,7 @@ export default {
       //图片方块宽度
       waterfallImgWidth: null,
       // 瀑布流使用参数结束
+      total:0,
     };
   },
   components: {
@@ -263,6 +264,10 @@ export default {
     classifId() {
       return this.datas.componentData.classifId || "";
     },
+    // 排序条件
+    orderByField() {
+      return this.datas.componentData.orderByField || 1;
+    },
     // 分类名
     classifName() {
       if (
@@ -283,6 +288,24 @@ export default {
         this.datas.componentData.articityList = newValue;
       },
     },
+    // 标签列表
+    tagIds: {
+      get() {
+        return this.datas.componentData.tagIds || [];
+      },
+      set(newValue) {
+        this.datas.componentData.tagIds = newValue;
+      },
+    },
+    // 展示数量
+    showNum: {
+      get() {
+        return this.datas.componentData.showNum || 6;
+      },
+      set(newValue) {
+        this.datas.componentData.showNum = newValue;
+      },
+    },
     // 展示骨架屏数量
     skeletonNum() {
       if (this.addArticleType == 1 && this.articleStatus == 2) {
@@ -295,6 +318,13 @@ export default {
         return 4;
       }
     },
+    // 展示查看更多按钮
+    showMoreBtn(){
+      if(this.datas.componentData['moreShow']&&(this.articleStatus==1 || this.articleStatus==4) && this.total>=this.showNum){
+        return true;
+      }
+      return false;
+    }
   },
   mounted() {
     this.DFSImg = app.DFSImg;
@@ -313,6 +343,9 @@ export default {
           this.itemShow = false;
         }
         this.loading = true;
+      } else if(this.datas.componentData.status == 4){
+        // 指定标签
+        this.getArticle(4);
       }
     },
     initNoListShow() {
@@ -341,7 +374,7 @@ export default {
         query = {
           classifyName: this.classifName,
           pageNum : 1,
-          pageSize: 6,
+          pageSize: this.showNum,
           articleStatus: 1,
         };
         if (
@@ -384,7 +417,25 @@ export default {
             articleStatus: 1,
           };
         }
+      } else if(val == 4){
+        if (this.tagIds.length == 0) {
+          this.initQuery();
+          if (!this.render) {
+            this.initNoListShow();
+          } else {
+            this.itemShow = false;
+          }
+          return;
         }
+        query = {
+          tagIds: this.tagIds,
+          pageNum : 1,
+          pageSize: this.showNum,
+          articleStatus: 1,
+        };
+      }
+      query.orderByAscOrDesc=1;
+      query.orderByField=this.orderByField;
       console.log(query, "-----------------314");
       app.classificationApi.getArticleList(query).then((res) => {
         if (res.data.code == 200) {
@@ -392,20 +443,23 @@ export default {
           if (this.articityList.length > 0) {
             this.articityList.forEach((item, index) => {
               item.coverUrl = app.DFSImg(item.coverUrl,400,400,1);
-              item.tagShowList=[];
-              console.log(item.tagList,'-------tagList')
-              item.tagShowList=item.tagList?this.initTagList(item.tagList):[];
             });
           } else {
             this.itemShow = false;
           }
+          this.total=res.data.total;
           this.loading = true;
         }
       });
     },
     // 查看更多
     viewMore() {
-      let link = `/article/articleList?classifyId=${this.classifId}&categoryName=${this.classifName}`
+      let link ="";
+      if(this.articleStatus==1){
+        link= `/article/articleList?classifyId=${this.classifId}&categoryName=${this.classifName}`;
+      } else if(this.articleStatus==4){
+        link= `/article/articleList?tagIds=${this.tagIds.join(",")}`;
+      }
       app.$themeToLink({
         type :1,
         link : link
@@ -416,7 +470,8 @@ export default {
       console.log(item, "--------------------494");
       if (
         this.datas.componentData.status == 1 ||
-        this.datas.componentData.status == 2
+        this.datas.componentData.status == 2 ||
+        this.datas.componentData.status == 4
       ) {
         let query = {
           articityId: item.id,
@@ -453,8 +508,8 @@ export default {
       } else if (this.listStyle == 5 && this.num > 0) {
         i = 6;
       }
-      newTagList = finalFun(list, i);
-      console.log(newTagList,'---------------------------457')
+      // newTagList = finalFun(list, i);
+      // console.log(newTagList,'---------------------------457')
       return newTagList;
     },
   },