yangshi_cloudExbition/src/pages/mobilescene/search/index.vue

<template>
  <div class="vsearch" @click.stop @keydown.stop @touchstart.stop>
    <img class="searchbg" :src="require(`@/assets/images/mobile/kuangti/daka_${theme}.png`)" alt="">
    <div class="brightness"></div>
    <div class="vinput">
      <img @click="$emit('closeSearch')" :src="require(`@/assets/images/project/icon/jiantoul.png`)" alt="">
      <div>
        <img :src="require(`@/assets/images/project/icon/search.png`)" alt="">
        <input type="text" placeholder="请输入关键字…" v-model="key">
      </div>
      <span>搜索</span>
    </div>
    <div class="cpylist">
      <p>参展项目及企业</p>
        <ul v-if="region.length>0">
          <li v-for="(item,i) in region" :key="i">
            <p>{{item.name}}</p>
            <ul>
              <li @click="handleItem(sub)" class="textActive" v-for="(sub,idx) in item.company" :key="idx">
                {{sub.name}}
              </li>
            </ul>
          </li>
        </ul>
        <ul v-else>
          <li>未搜索到该项目</li>
        </ul>
      </div>
  </div>
</template>

<script>
import {Booth,region} from '@/data/raw'

let gregion = region.map(item=>{
  let tmp = []
  item.company.forEach(sub=> {
    let ii = Booth.find(son=>son.id==sub)
    if (ii) {
      tmp.push(ii)
    }
  })
  let tt = tmp.filter(item=>(item.mapId.indexOf('xt')<=-1))

  item.company = tt
  return item
})

console.log(gregion);

let arr = [] 

export default {
   data(){
    this.u_extend(arr,gregion)
    return {
      key:'',
      region:arr,
    }
  },
    watch:{
    key(newVal){
     let tmpregion = []
      this.u_extend(tmpregion,gregion)
      if (!newVal) {
        this.region = tmpregion
      }
      else{
        this.region = tmpregion.filter(item=>{
          item.company = item.company.filter(sub=>{
            if (sub.name.indexOf(newVal)>-1) {
              return sub
            }
          })
          if (item.company.length>0) {
            return item
          }
        })
      }
    }
  },
  methods:{
    handleItem(item){
      this.$bus.$emit('ifrMessage',{
        events:'flyToPano',
        data:item
      })
      this.$emit('closeSearch')
    }
  }
}
</script>

<style lang="less" scoped>

::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.4);
  outline: 2px solid rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-thumb:hover {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.4);
}

@w:100%;

.vsearch{
  width: @w;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  .searchbg{
    width: @w;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .brightness{
    &::before{
      z-index: -2;
    }
  }
  .vinput{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 0 20px;
    width: 100%;
    >img{
      cursor: pointer;
      width: 10px;
      flex-shrink: 0;
      margin-right: 20px;
    }
      >div{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        overflow: hidden;
        padding: 0 10px;
        flex: auto;
        >input{
          line-height: 35px;
          height: 35;
          width: 80%;
          margin-left: 10px;
          color: #fff;
        }
        >img{
          width: 20px;
        }
    }
    >span{
      display: inline-block;
      margin-left: 10px;
      flex-shrink: 0;
      min-width: 30px;
    }
  }
  .cpylist{
    padding: 25px 30px 0 44px;
    height: 100%;
    >p{
      font-size: 16px;
      padding: 0 10px;
    }
    >ul{
      max-height: calc(100% - 110px);
      overflow-y: auto;
      padding:0 15px 0;
      
       >li{
         margin: 18px 0;
         &:last-of-type{
           margin-bottom: 0;
         }
         >p{
            font-size: 16px;
            font-weight: bold;
          }
          >ul{
            margin-left: 20px;
            >li{
              line-height: 1.2;
              margin: 12px 0;
              color: rgba(255, 255, 255, 0.6);
            }
          }
       }
    }
  }
}
</style>