preliminary/src/components/Search.vue

<template>
  <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&&searchLis.length==0"
      >请输入搜索内容</p>
      <p
        class="waring"
        v-if="searchVal&&searchLis.length==0"
      >暂无搜索结果</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.name}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import api from '@utils/api.js';
export default {
  props: ['age', 'sexType', 'chooseSymp'],
  data() {
    return {
      searchVal: '',
      searchLis: []
    }
  },
  watch:{
    searchVal(curVal, oldVal) {
      if (curVal.trim() == "") {
        this.searchVal = "";
        this.searchLis = [];
        return;
      }
      if (curVal != "" && curVal != oldVal) {
        this.searchList()
      }
    }
  },
  methods: {
    showDetil(item) {
      this.$emit('showDetil', item,true)
      // 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;
        console.log(result)
        if (result.code == 0) {
          this.searchLis = result.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchWrap {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 55;
  background-color: #ededed;
}
.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>