BJ_web_developers / wxgzh

<template>
  <div>
    <div class="mapsearch" id="mapsearch">
      <div class="filter"></div>
      <div class="stext">
        <div class="inputxc">
          <input type="text" v-model="searchVal" id="ssearch"/>
          <i class="icon iconfont" v-show="searchVal.length>0" @click="clearSearch">&#xe67b;</i>
        </div>
        <span class="sbutton" @click="results">搜索</span>
      </div>
    </div>

    <div class="sresults" v-if="list.length>0">
      <ul>
        <li v-for="(item, index) in list"
          @click="tzmap(item)">
          <table>
            <tbody>
            <tr>
              <td rowspan="2"><i class="icon iconfont"></i></td>
              <td>{{ item.name }}</td>
            </tr>
            <tr>
              <td class="fontaddre">{{ item.address }}</td>
            </tr>
            </tbody>
          </table>
        </li>

      </ul>
    </div>

    <div v-else class="nomoredata" style="width: 50%;margin: 48% auto 0;">
      <div style="width: 100%;text-align: center;"><i class="icon iconfont" style="font-size: 50px;color: #B2B2B2;">&#xe65e;</i></div>
      <p style="text-align: center;color: #B2B2B2;font-size: 13px;">未搜索到相关停车场</p>
    </div>

  </div>
</template>

<script>

import { queryParkingLotsByParkName } from '@/api/map/map.js'

export default {
  name: 'search',
  data() {
    return {
      searchVal: '',
      list:[]
    }
  },
  methods: {
    results: function () {
      if (this.searchVal) {
        var salt = this.$utils.myCommonSalt(32);
        var jsondata = {
          app_id: this.$utils.myVarAppid,
          deviceInfo: this.$utils.myDeviceInfo,
          salt: salt,
          sign_type: "md5",
          parkName: this.searchVal
        }
        jsondata.sign = this.$utils.signObject(jsondata)

        queryParkingLotsByParkName(jsondata).then(response => {
          this.list = response.data
          console.log(jsondata)
        })

      }
    },

    // 清楚记录
    clearSearch: function () {
      this.searchVal = ''
      this.list = []
    },

    //  当个停车场点击事件
    tzmap: function (i) {
      console.log(i)
      this.$router.push({
        path:'map',
        query:{
          name: i.name,
          lng:i.longitude,
          lat:i.latitude
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .mapsearch {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #CCCCCC;
    height: 58px;
    position: fixed;
    top: 0;
    left: 0;
  }

  .mapsearch .filter {
    width: 100%;
    height: 58px;
    position: fixed;
    top: 0;
    left: 0;
    filter: blur(3px);
    -webkit-filter: blur(3px);
    z-index: 10;
    background: rgba(255, 255, 255, 1);
  }

  .mapsearch .stext {
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    position: relative;
    z-index: 111;
  }

  .mapsearch .stext .inputxc, .search .stext .sbutton {
    float: left;
    height: 35px;

  }

  .mapsearch .stext .inputxc {
    width: 80%;
    box-sizing: border-box;
    border: 0;
    border-right: 1px solid #ccc;
    padding-right: 10px;
  }

  .mapsearch .stext .sbutton {
    width: 20%;
    display: inline-block;
    text-align: center;
  }

  .mapsearch .stext .inputxc input {
    height: 100%;
    width: 88%;
    padding-left: 10px;
    float: left;
    border: 0;
    outline: none;
  }

  .mapsearch .stext .inputxc i {
    display: inline-block;
    text-align: center;
    float: right;
    color: #9B9B9B;
  }

  .maphis, .sresults {
    margin-top: 58px;
  }

  .maphis ul li, .maphis .clearhs {
    padding: 6px 10px;
    border-bottom: 1px solid #ccc;
  }

  .maphis ul li, .sresults ul li {
    list-style: none;
  }

  .maphis ul li i, .maphis .clearhs i {
    font-size: 18px;
    color: #C0C0C0;
    padding-right: 12px;
  }

  .maphis .clearhs {
    color: #C0C0C0;
    font-size: 13px;
  }

  .sresults ul li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

  .sresults ul li table {
    margin: 0;
  }

  .sresults ul li table td i {
    padding-right: 10px;
    font-size: 18px;
    color: #C0C0C0;
  }

  .sresults ul li table td.fontaddre {
    color: #C0C0C0;
    font-size: 12px;
  }
</style>