feat: 文库首页接口联调

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

jydocs-pc/src/views/Home.vue

@@ -16,17 +16,19 @@
           <div class="new-list-group must-bottom">
             <div class="word-model">
               <div class="word-model-content">
-                <div class="word-model-list" @mouseenter="onSetWordModel(item, true)" @mouseleave="onSetWordModel(item, false)" :class="{'active': item.active}" v-for="(item, index) in wordModel" :key="index">
+                <div class="word-model-list" @mouseenter="onSetWordModel(item)" :class="{'active': item.active}" v-for="(item, index) in wordModel" :key="index">
                   {{item.value}}
                 </div>
               </div>
             </div>
             <div class="word-file-main">
-              <div class="word-file-list card-item" v-for="(item, index) in wordFileList" :key="index">
+              <div class="word-file-list" v-for="(item, index) in wordFileList" :key="index">
                 <div class="mini-img-group">
-                  <img :src="item.previewImgId" alt="">
-                  <i :class="'el-icon-jy-' + item.type" ></i>
+                  <img :src="item.img" alt="">
+                  <i class="word-type" :class="'el-icon-jy-' + item.type" ></i>
+                  <span v-if="item.productType === 1" class="word-vip-mark">会员免费</span>
                 </div>
+                <div class="word-file-name">{{ item.title }}</div>
               </div>
             </div>
               <!-- <div class="flex flex-c-c">
@@ -175,7 +177,7 @@ function checkType (type) {
 
 function formatData (v) {
   return {
-    img: v?.docImg,
+    img: v?.docImg || v?.previewImgId,
     type: checkType(v?.docFileType),
     id: v.docId,
     title: v?.docName || v?.docTitle,
@@ -183,7 +185,8 @@ function formatData (v) {
     size: v?.docFileSize,
     page: v?.docPageSize,
     down: v?.downTimes,
-    contribution: v?.sourceUserId
+    contribution: v?.sourceUserId,
+    productType: v?.productType
   }
 }
 
@@ -236,23 +239,25 @@ export default {
       })
       window.open(routeData.href, '_blank')
     },
-    onSetWordModel(data, isHover) {
+    onSetWordModel(data) {
       this.wordModel.forEach(v => {
         v.active = false
       });
-      if(isHover) {
-        data.active = true;
-        this.getSearchEvent(data.value)
-      } else {
-        setTimeout(() => {
-          const findItemActive = this.wordModel.find(v => v.active)
-          console.log(findItemActive, 'findItemActive')
-          if(!findItemActive) {
-            this.wordModel[0].active = true;
-            this.getSearchEvent(this.wordModel[0].value)
-          }
-        }, 300)
-      }
+      data.active = true;
+      this.getSearchEvent(data.value)
+      // if(isHover) {
+      //   data.active = true;
+      //   this.getSearchEvent(data.value)
+      // } else {
+      //   setTimeout(() => {
+      //     const findItemActive = this.wordModel.find(v => v.active)
+      //     console.log(findItemActive, 'findItemActive')
+      //     if(!findItemActive) {
+      //       this.wordModel[0].active = true;
+      //       this.getSearchEvent(this.wordModel[0].value)
+      //     }
+      //   }, 300)
+      // }
     },
     // 获取文件列表
     async getSearchEvent (type) {
@@ -260,7 +265,7 @@ export default {
       getSearch({tag: type, sort: 'vSort', num: 1, size: 8}).then(data => {
         const res = data.data
         if(res && res.error_code === 0) {
-          _this.wordFileList = res.data
+          _this.wordFileList = res.data.map((v) => formatData(v))
         }
       })
     },
@@ -539,10 +544,59 @@ export default {
     }
 
     .new-list-group {
+      .word-file-main{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        .word-file-list{
+          width: 136px;
+          height: 240px;
+          cursor: pointer;
+          .mini-img-group{
+            position: relative;
+            .word-type {
+              position: absolute;
+              right: 4px;
+              bottom: 2px;
+            }
+            .word-vip-mark{
+              position: absolute;
+              left: 0;
+              top: 0;
+              padding: 2px 5px;
+              font-size: 11px;
+              line-height: 14px;
+              color: #fff;
+              border-radius: 4px 0px 9px 0px;
+              background: linear-gradient(to right, #FF7C32 0%, #F33838 100%);
+            }
+            &>img{
+              width: 100%;
+              height: 184px;
+              border: 1px solid #ECECEC;
+              border-radius: 4px;
+            }
+          }
+          .word-file-name{
+            display: -webkit-box;
+            -webkit-line-clamp: 2; /* 控制显示的行数 */
+            -webkit-box-orient: vertical;
+            margin-top: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-break: break-all;
+            font-size: 16px;
+            line-height: 24px;
+            color: #1D1D1D;
+          }
+        }
+      }
       .word-model {
         .word-model-content {
           display: flex;
+          flex-wrap: wrap;
           .word-model-list {
+            margin:0 10px 10px 0;
             padding: 2px 8px;
             color: #686868;
             font-size: 14px;