preliminary/src/components/Search.vue

<template>
    <portal to="notification-search">
      <div class="searchWrap">
        <div class="searchTop">
          <div class="iptWrap">
            <img
              class="searchImg"
              src="../images/searchB.png"
              alt=""
            >
            <input
              type="text"
              autofocus
              placeholder="请搜索"
              v-model="searchVal"
            >
          </div>
          <span @click="search">取消</span>
        </div>
        <div class="searchList">
          <p
            class="waring"
            v-if="!searchVal&&!hasMore&&searchLis.length==0"
          >请输入搜索内容</p>
          <p
            class="waring"
            v-if="hasMore&&searchVal"
          >暂无搜索结果</p>
          <ul>
            <li
              v-for="(item,idx) in searchLis"
              :key="item.conceptId+idx"
              @click="showDetil(item)"
              :style="{'borderBottom':(idx==searchLis.length-1)?'0':'1px solid #a8a8a8'}"
            ><img
                class="searchImgLis"
                src="../images/search.png"
                alt=""
              >{{item.description||item.name}}{{(item.tagName&&(item.description||item.name != item.tagName))?' ('+item.tagName+')':''}}</li>
          </ul>
        </div>
      </div>
    </portal>
</template>
<script>
import api from '@utils/api.js';
export default {
  props: ['age', 'sexType', 'chooseSymp'],
  data() {
    return {
      searchVal: '',
      searchLis: [],
      tmpItem:{},
      hasMore:false
    }
  },
  watch:{
    searchVal(curVal, oldVal) {
      if (curVal.trim() == "") {
        this.searchVal = "";
        this.searchLis = [];
        this.hasMore = false
        return;
      }
      if (curVal != "" && curVal != oldVal) {
        this.searchList()
      }
    }
  },
  methods: {
    showDetil(item) {
      let flg = false;
      if(JSON.stringify(this.tmpItem)==JSON.stringify(item)){//eg:重复点击胸痛bug
        flg = true
      }
      this.tmpItem = item
      let timer = setTimeout(() => {
        this.$emit('showDetil',item,flg)
        clearTimeout(timer)
      }, 250);
      // this.$emit('search', false)
    },
    search() {
      this.$emit('search', false)
    },
    searchList() {
      let tmpArr = [], chooseSymp = this.chooseSymp;
      for (let i = 0; i < chooseSymp.length; i++) {
        tmpArr.push(chooseSymp[i].conceptId)
      }
      const param = {
        "age": this.age,
        "inputIds": tmpArr,
        "inputStr": this.searchVal,
        "sexType": this.sexType
      }
      api.getTagInfos(param).then((res) => {
        const result = res.data;
        if (result.code == 0) {
          this.searchLis = result.data
          if(result.data.length>0){
            this.hasMore = false
          }else{
            this.hasMore = true
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchWrap {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 102;
  background-color: #ededed;
  font-size: .3rem;
}
.searchTop {
  padding: 0.15rem 0.4rem;
  padding-right: 1.2rem;
  background-color: #ededed;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 999;
  span {
    position: absolute;
    right: 0.32rem;
    top: 0.32rem;
    font-size: 0.3rem;
    color: #666666;
  }
}
.iptWrap {
  height: 0.74rem;
  border-radius: 0.37rem;
  background-color: #fff;
  overflow: hidden;
  padding: 0.16rem 0.3rem 0.16rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  .searchImg {
    width: 0.44rem;
    height: 0.44rem;
    position: absolute;
    left: 0.2rem;
    top: 0.14rem;
  }
  input {
    width: 100%;
    height: 0.42rem;
    font-size: 0.3rem;
    line-height: 0.42rem;
  }
}
.searchList {
  overflow: scroll;
  position: absolute;
  -webkit-overflow-scrolling: touch;
  top: 0;
  left: 0;
  padding-top: 1.04rem;
  height: 100%;
  width: 100%;
  background-color: #ededed;
  .waring {
    padding-left: 0.5rem;
    margin-top: 0.2rem;
  }
  ul {
    padding: 0 0.4rem;
    box-sizing: border-box;
    background-color: #fff;
  }
  li {
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.4rem;
    border-bottom: 1px solid #a8a8a8;
    box-sizing: border-box;
    .searchImgLis {
      width: 0.44rem;
      height: 0.44rem;
      float: left;
      margin-top: 0.26rem;
      margin-right: 0.15rem;
    }
  }
}
</style>