You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<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 class="input" maxlength="30" @input="bindConfirm" focus auto-focus placeholder="请输入地址关键字搜索" @confirm='bindConfirm'></input> </view> <view class="addr-list"> <view class="addr-item b-b" v-for="(item, index) in list" :key="index" @click="confirm(item)"> <text class="title">{{item.title}}</text> <text class="addr">{{item.address}}</text> </view> </view> </view> </template>
<script> import config from '@/config' const QQMapWX = require('./js/qqmap-wx-jssdk.min.js') var qqmapsdk = new QQMapWX({ key: config.qqmapWxKey }) 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
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() }, } } </script>
<style scoped lang="scss"> view{ box-sizing: border-box; } .app{ padding-top: 100rpx; } .search-wrap{ position: fixed; left: 0; top: var(--window-top); z-index: 90; display: flex; background-color: #fff; align-items: center; width: 100%; height: 100rpx; padding: 0 30rpx; background-color: #fff; .city{ display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: #333; } .icon{ width: 34rpx; height: 34rpx; margin-right: 4rpx; } .c-icon{ width: 22rpx; height: 22rpx; margin-left: 4rpx; } .input{ flex: 1; margin-left: 16rpx; padding: 0 28rpx; height: 70rpx; line-height: 70rpx; font-size: 30rpx; color: #333; background-color: #f5f5f5; border-radius: 100rpx; } } .addr-list{ background-color: #fff; .addr-item{ display: flex; flex-direction: column; padding: 24rpx 30rpx; 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: 50rpx; } .title{ font-size: 28rpx; color: #303133; } .addr{ margin-top: 10rpx; font-size: 24rpx; color: #909399; line-height: 1.4; } } </style>
|