Merge branch 'liuqiang' into v3

src/views/highSearch/HighSearch.vue

@@ -33,24 +33,33 @@
         <el-checkbox v-model="checkState" size="large" />
         <div class="dataNum">共{{ total }}项</div>
       </div>
-      <div class="content_box" v-if="listData.length">
-        <el-scrollbar  @scroll="scrollFn" ref="scrollRef">
-          <div class="oneBox" v-for="item in listData" :key="item.id">
-            <span class="fileName">{{ item.content.docInfo.fileName }}</span>
-            <div class="flieTime">
-              <span>{{ item.content.docInfo.createTime }}</span>
-            </div>
-            <div
-              class="flieContent"
-              v-for="par in item.highlightFields.content"
-              :key="par"
-              v-html="par"
-            ></div>
+      <div
+        class="content_box"
+        v-infinite-scroll="setScroll"
+        infinite-scroll-distance="30"
+        v-if="listData.length"
+      >
+        <!-- <el-scrollbar height="200px"  ref="scrollRef" id="scrollRef"> -->
+        <div class="oneBox" v-for="item in listData" :key="item.id">
+          <span class="fileName">{{ item.content.docInfo.fileName }}</span>
+          <div class="flieTime">
+            <img src="@/assets/images/bx：bx-time-five.png" alt="" />
+            <span>{{ item.content.docInfo.createTime }}</span>
           </div>
-          <div class="showAll" v-if="beEnd">已经到达底部~</div>
-        </el-scrollbar>
+          <div
+            class="flieContent"
+            v-for="par in item.highlightFields.content"
+            :key="par"
+            v-html="par"
+          ></div>
+        </div>
+        <div class="showAll" v-if="beEnd">已经到达底部~</div>
+        <!-- </el-scrollbar> -->
+      </div>
+      <div class="error" v-if="noData">
+        <img src="@/assets/images/空白页 1.png" alt="" />
+        <span>没有关于“{{ searchText }}”的结果 </span>
       </div>
-      <div class="error" v-if="noData">未搜索到数据~</div>
     </div>
   </div>
 </template>
@@ -97,17 +106,30 @@ const doSearch = async () => {
     noData.value = true;
   }
 };
-const scrollFn = (num) => {
-  console.log("num", num);
-};
-const setScroll = () => {
-  scrollRef.value.addEventListener("scroll", async () => {
-    const { scrollTop, offsetHeight, scrollHeight } = scrollRef.value;
-    if (scrollTop + offsetHeight >= scrollHeight) {
-      //滚动条到达底部
-      console.log("chudi");
+const setScroll = async () => {
+  console.log("到底啦");
+  if (beEnd.value) return;
+  page.value += 1;
+  const query = {
+    keyword: searchText.value,
+    page: page.value,
+    size: size.value,
+    type: selectValue.value,
+  };
+  const res = await search(query);
+  console.log(res);
+  if (res.length > 0) {
+    // 如果返回的有数据
+    total.value += res.length;
+    noData.value = false;
+    res.forEach((item) => listData.value.push(item));
+    if(res.length<size.value){
+      //如果返回的数组长度小于size说明查完了
+      beEnd.value = true
     }
-  });
+  }else{
+    beEnd.value = true
+  }
 };
 </script>
 
@@ -176,11 +198,14 @@ const setScroll = () => {
   }
   .content_box {
     width: 100%;
+    height: 100%;
+    overflow: auto;
     .oneBox {
       width: 100%;
       // height: 120px;
       border-bottom: 1px dashed #c1cce3;
       padding-bottom: 16px;
+      padding-top: 16px;
       .fileName {
         font-size: 16px;
         color: #2e6bc8;
@@ -191,7 +216,14 @@ const setScroll = () => {
         font-size: 12px;
         font-weight: 400;
         color: #06286c;
-        line-height: 20px;
+        // line-height: 20px;
+        vertical-align: middle;
+        display: flex;
+        align-items: center;
+        margin: 4px 0;
+        span {
+          margin-left: 4px;
+        }
       }
       .flieContent {
         width: 100%;
@@ -217,14 +249,17 @@ const setScroll = () => {
     }
   }
   .error {
-    margin-top: 16px;
+    margin-top: 120px;
     display: flex;
-    justify-content: center;
-    width: 100%;
-    height: 30px;
-    color: #6f85b5;
-    font-size: 14px;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
     font-weight: 400;
+    color: #06286c;
+    img {
+      width: 320px;
+      height: 320px;
+    }
   }
 }
 ::v-deep em {
@@ -252,6 +287,9 @@ const setScroll = () => {
 ::v-deep .search_ipt .el-input__wrapper {
   box-shadow: none !important;
 }
+::v-deep .search_ipt .el-input__inner {
+  color: #06286c !important;
+}
 ::v-deep .search_ipt .el-input__inner::placeholder {
   color: #a4b0d8;
 }