AyaoJies-boot/AyaoJies-app/house-master/house-life/pages/chooseAddress/search.vue

<template>
  <view class='app'>
    <view class="search-wrap">
      <view class="city" @click="navTo('cityList?city='+city)">
        <image class="icon"
               src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAC70lEQVRIS8VW7VXcMBDctQsAKshRQYRcAJcKIBUAFQAVhFSQowKggpAKuBTgRVcBRwWQAiTljZ/Ek235436hf3e2NTuzO7vL9EmHPwmXZgMrpRZlWZ4Q0dJ7v2TmfQTtvX9n5jURra21D8aY9zlkJoGVUvtFUVwS0VUEG7oYQRDRyjl3OxXAKLBSSpVleUdEKrDbENG9c84Q0TYEsCiKAs/Pmflr+M9Yay+MMXgvewaBAVoUxVNg+c9ae2qMgaSDp6qqUwRGRHtg75w7MsbEAFvfZYEhb1mWT2Dqvd8455ZT0sVbQ2rWgT2Yf8t9mwXWWt8w8w8iAtNF90NcHmVFYLnnZVmCKZj/FJGbrkw94BDxCyT23l+ICKRrTnj2i5nP04u898j7dRqA1ho5vwuSH3aD6wEnH2xEpCmqCBrlhxKwT3i0BDMi6smqtTZQpksA3/WAq6p6JKIT7/2tiFxFYK31ipkvvfd/nXMotMavQYVHZj4e+oaI/tR1jcL7ODnGKIzjUBQfVVxVFYD2rLUHAzl9g6wicpCotIRKCFZEoMwo8JaZv6TAoWu95C5IFIkBI5+NhZRSEbiVtqzUWuse42CvN+SxruujnJFjPlNFEuBZjBvgrg201j0lMpK+isgiUaGx5Vypo4cf6rr+sE3HHt9jFwOroih+5+xXVRWseJbzcs7HMS+tQgGLeFFOaiJqBRrejwWJ7tVqt0Odq5E15z8wD5OqGQjoXJhIaaPB/4lCLflj0KMt03u/FZHDAYajf8eamN0yky4Ve+21iKx2AZ/q9Vk7JRXZ9Fr8ttZivA3O1jSoMMOfQxpavX60gaQPk/a5DbN1dK0J7fOZmWGpXpucDTx3tibpmT3D5+xcWH9ghTiBeitNZ0XCDFdDm8doVXcLKVzcgIf5OtRAXsPkmqyHScZJW8S2GVca+LepdGZuRueuK9Js4CSPADxLVcEcds7dzN3LRu005ltskynjuq6xPOx0dmK8080TL38a8H+fVUE94KTW6AAAAABJRU5ErkJggg=="></image>
        <text>{{ city }}</text>
        <image class="c-icon"
               src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvElEQVQ4T+3TwQ3CMAwF0G9lAQbgwgRlhEgegBEQm3UEFrCUEWACLgzAAlaQpQa1EJxK9MChvaVKXp3vmrDwQwt7WMHfE31lGGPchBBuAM4icppDM3MP4KCqu5TSw85MmsLMFyLqcs59CzWMiI4556uI7EsBE3CoMrXQMaaqsVT3UaG9aKEeVgU9tIV9BWuo5V0ye7/muIHupJTrA+iICNYAD3MrLF8d0LutVXU7bkDt11pnec7A+Xv+P8Mn98h9FeV7S88AAAAASUVORK5CYII="></image>
      </view>
      <input auto-focus class="input" focus maxlength="30" placeholder="请输入地址关键字搜索" @confirm='bindConfirm'
             @input="bindConfirm"></input>
    </view>

    <view class="addr-list">
      <view v-for="(item, index) in list" :key="index" class="addr-item b-b" @click="confirm(item)">
        <text class="title">{{ item.title }}</text>
        <text class="addr">{{ item.address }}</text>
      </view>
    </view>
  </view>
</template>

<script>
const QQMapWX = require('./js/qqmap-wx-jssdk.min.js')
var qqmapsdk = new QQMapWX({
  key: 'FALBZ-J2G3I-ZY5GX-5ATUZ-GHOOZ-YVFAR'
})
export default {
  data() {
    return {
      city: '',
      keyword: '',
      list: []
    }
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: '搜索地址'
    })
    this.city = options.city || '';
  },
  methods: {
    //选择地址
    confirm(item) {
      const pages = getCurrentPages()
      const prePages = pages[pages.length - 2].$vm

      prePages.tempAddress = item;
      prePages.position = {
        longitude: item.location.lng,
        latitude: item.location.lat,
      }
      prePages.map = {
        longitude: item.location.lng,
        latitude: item.location.lat,
      }
      // #ifdef H5 || MP-WEIXIN
      prePages.getAddressList(1); //h5没触发地图regionchange事件，需要手动调用获取新地址列表。微信小程序开发工具自动触发，真机不触发，同样需要调用一下。
      // #endif
      uni.navigateBack({
        delta: 1
      })
    },
    //搜索地址
    searchList() {
      qqmapsdk.getSuggestion({
        keyword: this.keyword,
        policy: 1, //默认0，常规策略  policy=1：本策略主要用于收货地址、上门服务地址的填写，
        page_size: 20, //每页条目数，最大限制为20条，默认值10
        page_index: 1,
        region: this.city || '全国',
        success: res => {
          this.list = res.data;
        },
        fail: err => {
          this.list = [];
        }
      })
    },
    bindConfirm(e) {
      this.keyword = e.detail.value;
      this.searchList()
    },
    navTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.app {
  padding-top: 100 rpx;
}

.search-wrap {
  position: fixed;
  left: 0;
  top: var(--window-top);
  z-index: 90;
  display: flex;
  background-color: #fff;
  align-items: center;
  width: 100%;
  height: 100 rpx;
  padding: 0 30 rpx;
  background-color: #fff;

  .city {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30 rpx;
    color: #333;
  }

  .icon {
    width: 34 rpx;
    height: 34 rpx;
    margin-right: 4 rpx;
  }

  .c-icon {
    width: 22 rpx;
    height: 22 rpx;
    margin-left: 4 rpx;
  }

  .input {
    flex: 1;
    margin-left: 16 rpx;
    padding: 0 28 rpx;
    height: 70 rpx;
    line-height: 70 rpx;
    font-size: 30 rpx;
    color: #333;
    background-color: #f5f5f5;
    border-radius: 100 rpx;
  }
}

.addr-list {
  background-color: #fff;

  .addr-item {
    display: flex;
    flex-direction: column;
    padding: 24 rpx 30 rpx;
    position: relative;

    &:after {
      position: absolute;
      z-index: 3;
      left: 0;
      top: auto;
      bottom: 0;
      right: 0;
      height: 0;
      content: '';
      transform: scaleY(.5);
      border-bottom: 1px solid #e5e5e5;
    }
  }

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 50 rpx;
  }

  .title {
    font-size: 28 rpx;
    color: #303133;
  }

  .addr {
    margin-top: 10 rpx;
    font-size: 24 rpx;
    color: #909399;
    line-height: 1.4;
  }
}
</style>