lzga-doc/lzga-ui/src/views1/Retrieval/RetrievalView.vue

<template>
  <div class="containe">
    <div class="picture">
      <img src="../../assets/img/Group 467.png" alt="" />
    </div>
    <div class="search">
      <el-select v-model="type">
        <el-option value="1">公共文档</el-option>
        <el-option value="2">部门文档</el-option>
        <el-option value="3">个人文档</el-option>
      </el-select>
      <el-input auto-complete="on" type="text" name="content" placeholder="请输入查询关键字" v-model="input"
        @keyup.enter.native="searchPre"></el-input>
      <span class="cen—top-span" @click="searchPre">快速搜索</span>
      <img src="../../assets/img/ri：search-2-line@2x.png" class="cen—top-img" />
    </div>
    <div class="mains" @scroll="handleScroll" v-if="mains_data2">
      <div v-for="item in count" :key="item.id" class="main-main">
        <div class="one" @click="docName(item.id, item.content.info)">
          {{ item.content.info.docName }}
        </div>
        <div class="two">
          <div class="two1">
            <img src="../../assets/img/UserCircle.png" />
            {{ item.content.info.createBy }}
          </div>
          <div>
            <img src="../../assets/img/Clock.png" />
            {{ item.content.info.createTime }}
          </div>
        </div>
        <div class="three" v-for="highlightFieldsContentItem in item.highlightFields.content"
          :key="highlightFieldsContentItem.id" v-html="highlightFieldsContentItem" style="white-space: normal"></div>
        <ul class="four">
          <li v-for="tagName in item.content.info.tagList" :key="tagName.id">
            {{ tagName.tagName }}
          </li>
        </ul>
      </div>
    </div>
    <div class="mains_prompt" v-if="mains_data2">
      <span>滚动显示更多内容</span>
      <img src="../../assets/img/chevrons-down.png" alt="" />
    </div>
    <div class="empty" v-if="mains_data">
      <img src="../../assets/img/Empty.png" alt="" />
      <p>您搜索的内容暂无数据，建议更换关键词</p>
    </div>
  </div>
</template>

<script>
  import {
    ret
  } from "@/api/doc/share1.js";

  export default {
    data() {
      return {
        //搜索框绑定
        input: "",
        type: "",
        //搜索出来的数据
        count: [],
        page: 0,
        size: 3,
        mains_data: false,
        mains_data2: false,
      };
    },
    created() {
      this.input = this.$route.query.datas;
      if (this.input) {
        this.searchs();
      }
    },
    watch: {
      $route: {
        handler(val, oldval) {
          this.input = this.$route.query.datas;
          this.count = [];
          if (this.input != "") {
            this.searchs();
          } else {
            this.mains_data = true;
            this.mains_data2 = false;
          }
        },
        // 深度观察监听
        deep: true,
      },
    },
    mounted() {
      //添加滚动条事件
      window.addEventListener("scroll", this.handleScroll, true);
    },
    methods: {
      // 点击搜索调用的方法
      searchPre() {
        this.$router.push("/home/retrieval?datas=" + this.input);
      },
      handleScroll() {
        const container = document.querySelector(".mains");
        const {
          scrollTop,
          scrollHeight,
          clientHeight
        } = container;
        // console.log('scrollHeight',scrollHeight);
        // console.log('clientHeight',clientHeight);
        // console.log(scrollTop);
        // 是否达到页面底部
        if (scrollTop + clientHeight >= scrollHeight) {
          // console.log('滚动到底部了！')
          this.page += 1;
          // 执行加载
          this.searchs();
        }
      },

      //查找返回的数据
      searchs() {
        ret({
          content: this.input,
          type: this.type,
          page: this.page,
          size: this.size,
        }).then((item) => {
          // console.log('item=',item)
          if (item.length > 0) {
            this.count.push(...item);
            this.mains_data = false;
            this.mains_data2 = true;
          } else {
            this.input = "";
            this.mains_data = true;
            this.mains_data2 = false;
          }
        });
      },
      //预览界面
      docName(curentDocId, value) {
        this.$tab.openPage(
          // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
          window.open(
            "/individual/Pre/user/" +
            curentDocId +
            "?value=" +
            JSON.stringify(value),
            "_blank"
          )
        );
      },
    },
  };
</script>
<style lang='scss'>
  .three {
    margin-bottom: calc(100vw * (10 / 1920));

    em {
      color: #f00 !important;
    }
  }
</style>
<style scoped lang='scss'>
  .containe {
    color: #7ea4c8;
    font-size: 0.14rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
  }

  .picture {
    width: calc(100vw * (220 / 1920));
    height: calc(100vh * (57 / 1080));
    margin-left: calc(100vw * (860 / 1920));
    margin-top: calc(100vh * (100 / 1080));
    margin-bottom: calc(100vh * (40 / 1080));

    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .search {
    width: calc(100vw * (864 / 1920));
    height: calc(100vh * (50 / 1080));
    margin-left: calc(100vw * (528 / 1920));
    margin-bottom: calc(100vh * (50 / 1080));
    position: relative;
  }

  .cen—top-img {
    width: calc(100vw * (24 / 1920));
    height: calc(100vh * (24 / 1080));
    position: absolute;
    left: calc(100vw * (15 / 1920));
    top: calc(100vh * (15 / 1080));
  }

  .el-input {
    width: calc(100vw * (750 / 1920));
    height: calc(100vh * (50 / 1080));
    margin-right: calc(100vw * (14 / 1920));
  }

  .cen—top-span {
    display: inline-block;
    width: calc(100vw * (100 / 1920));
    height: calc(100vh * (50 / 1080));
    background: #2e8aecff;
    color: #ffffffcc;
    text-align: center;
    line-height: calc(100vh * (50 / 1080));

    &:hover {
      cursor: pointer;
    }
  }

  .mains {
    width: calc(100vw * (1450 / 1920));
    height: calc(100vh * (600 / 1080));
    // background: seagreen;
    margin-left: calc(100vw * (230 / 1920));
    overflow: auto;
  }

  .mains_prompt {
    display: flex;
    align-items: center;
    margin-left: calc(100vw * (850 / 1920));
    margin-top: calc(100vh * (20 / 1080));
  }

  .empty {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: calc(100vw * (160 / 1920));
      height: calc(100vh * (160 / 1080));
      margin-top: calc(100vh * (150 / 1080));
    }
  }

  .main-main {
    width: calc(100vw * (1430 / 1920));
    // height: calc(100vh * (220 / 1080));
    padding: calc(100vh * (20 / 1080));
    border-bottom: 1px dashed #083b61ff;
  }

  .one {
    margin-bottom: calc(100vw * (10 / 1920));
    color: #2e8aecff;
    font-size: 14px;
    text-decoration: underline;
  }

  .two {
    margin-bottom: calc(100vh * (10 / 1080));
    display: flex;

    .two1 {
      margin-right: calc(100vw * (30 / 1920));
    }

    img {
      vertical-align: middle;
    }
  }

  .four {
    display: flex;
    list-style: none;
    padding: 0;

    li {
      //  width: calc(100vw * (62 / 1920));
      //  height: calc(100vh * (24 / 1080));
      border: 1px solid #ff9839ff;
      background: #bba99240;
      padding: 0 5px;
      margin-right: calc(100vw * (5 / 1920));
    }
  }

  //滚动条样式
  ::-webkit-scrollbar {
    width: 3.5px;
  }

  ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
  }

  ::-webkit-scrollbar-thumb {
    background: #2e8aec;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #2e8aec;
  }

  ::v-deep .el-input--medium .el-input__inner {
    padding-left: calc(100vw * (50 / 1920));
    background: #14265e80;
    border: 1px solid #01d1ffff;
    color: #7ea4c8ff;
  }
</style>