foton-laws-system-front/src/pages/phone/databaseSearch.vue

<!--全库检索-->
<template>
<div id="database-search">
  <div class="search-head">
    <div class="head-title">
      <span class="left-title" @click="back"> < </span>
      <span class="right-title">全库搜索</span>
    </div>
    <van-search
      v-model="searchKey"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
  </div>
  <div class="card-box" ref="cardBox" @scroll="scrool">
    <div v-if="loading">
      <van-loading size="24px" color="#3170A8">加载中...</van-loading>
    </div>
    <div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id" @click="jumpDetails(item) ">
      <div class="standTitle">
        <div class="title">
          <span v-html="item.title"></span>
         </div>
      </div>
      <div class="standContent">
        <div class="standState">标准类别:
          <span v-if="item.indexType === 'stand'">国内标准</span>
          <span v-if="item.indexType === 'FOREIGN'">海外标准</span>
          <span v-if="item.indexType === 'bussstand'">企业标准</span>
        </div>
        <div class="standSubTime">发布日期: {{item.issue_time}} </div>
      </div>
    </div>
    <div v-else-if="!loading  && !standList.length">
      <van-empty description="暂无数据" />
    </div>
  </div>
  <div v-if="moreFlag" class="bottom-box">
    <div v-if="listFlag && !loading" class="list-box">没有更多数据了...</div>
    <div v-else-if="!listFlag && moreFlag"  @click="moreList" >点击加载更多</div>
<!--    <van-button v-else-if="!listFlag && moreFlag"  @click="moreList" >加载新数据</van-button>-->
    <van-loading v-else size="24px" color="#3170A8">加载中...</van-loading>
  </div>
 </div>
</template>

<script>
export default {
  name: "databaseSearch",
  data(){
    return{
      scrolled: '',
      moreFlag: false,
      loadingFlag: false,
      searchKey: '',
      standList: [],
      loading: true,
      listFlag: false,
      page: 1,
      addFlag: 0,
    }
  },
  watch:{
    scrolled:{
      handler(val){
        if(val === 0){
          console.log('滚动条消失');
        }
      }
    },
  },
  methods: {
    scrool(){
      this.scrolled = this.$refs.cardBox.scrollTop
      // console.log(this.scrolled);
      //获得可视区的高度
      const windowHeight = this.$refs.cardBox.clientHeight
      //获取滚动条的总高度
      const scrollHeight = this.$refs.cardBox.scrollHeight
      let windowScrolled  = this.scrolled + windowHeight
      if(scrollHeight - windowScrolled < 100 && this.scrolled !== 0){
        //把距离顶部的距离加上可视区域的高度
        this.moreFlag = true
      }else{
        this.moreFlag = false
      }
    },
    moreList(){
      this.moreFlag = false
      this.loadingFlag = true
      this.page++
      this.standSearch()
    },
    standSearch(){
      this.listFlag = false
      this.moreFlag = false
      this.$http.post('search/searchCenter/searchSarBykey',{
        selectIndex: 'fulltextserch',
        selectValue: this.searchKey,
        selectType: 'titleSearch',
        page: this.page,
        pageSize: 20
      },{
        _this: this,
      }, res => {
        if(res.data.list.length){
          if(this.standList.length){
            this.standList =  this.standList.concat(res.data.list)
          }else{
            this.standList = res.data.list
          }
          this.loading = false
        }else{
          this.listFlag = true
        }
      }, e => {
        console.log(e)
      })
    },
    //点击搜索触发事件
    onSearch(){
      this.moreFlag = false
      this.loading = true
      this.standList = []
      this.page = 1
      this.$http.post('search/searchCenter/searchSarBykey',{
        selectIndex: 'fulltextserch',
        selectValue: this.searchKey,
        selectType: 'titleSearch',
        page: this.page,
        pageSize: 20
      },{
        _this: this,
      }, res => {
        this.standList = res.data.list
        this.loading = false
      }, e => {
          console.log(e)
      })
    },
    //返回上一个页面
    back(){
      this.$router.push('/phoneHome')
    },
    jumpDetails(item){
      this.$router.push({
        name: 'domesticDetails',
        query: {
          id: item.id,
          pageType: 'INLAND_STAND'
        }
      })
    },
  },
  mounted(){
    this.searchKey = this.$route.query.searchKey
    this.standSearch()
    this.$refs.cardBox.addEventListener('scroll', this.scrool);
  },
};
</script>

<style lang="less" scoped>
#database-search{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #F6F6F6;
  .search-head{
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    z-index: 9999;
    background: #3170A8;
  }
  .head-title{
    color: #FFFFFF;
    line-height: 40px;
    font-size: 18px;
    .left-title{
      margin-left: 10px;
    }
    .right-title{
      float: right;
      margin-right: 40%;
    }
  }
  .van-search{
    background: #3170A8;
    padding: 10px 12px 0 12px;
  }
  .van-search__content{
    background: #8DB2D0;
  }
  .van-search__action{
    color: #FFFFFF;
  }
  .card-content{
    .van-cell-group--inset{
      margin: 10px 16px 0 16px;
    }
    .card-cell{
      /deep/.van-cell::after{
        display: none;
      }
    }
  }
  .card-box{
    height: 85%;
    position: relative;
    overflow-y: scroll;
    top: 100px;
  }
  .card-content{
    width: 95%;
    height: auto;
    margin: 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    .standTitle{
      .title{
        color: #333333;
        font-weight: 600;
        height: auto;
        line-height: 20px;
        padding: 5px 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    }
    .standContent{
      color: #555555;
      font-weight: 450;
      margin-top: 5px;
      .standState{
        padding-left: 10px;
        height: 35px;
        line-height: 35px;
      }
      .standSubTime{
        padding-left: 10px;
        height: 35px;
        line-height: 35px;
      }
    }
  }
  .van-loading {
    position: absolute;
    top: 40%;
    left: 37%;
  }
  .bottom-box{
    height: 40px;
    width: 91%;
    position: absolute;
    bottom: 0;
    text-align: center;
    color: #3170A8;
    .list-box{
      color: #3170A8;
      text-align: center;
    }
    .van-loading {
      position: absolute;
      left: 37%;
    }
  }
  .card-content:last-child{
     margin-bottom: 30px;
  }
  .van-button--normal{
    float: left;
    margin-left: 35%;
  }
}
</style>