location选择收货地址

上一个路由是首页

上一个路由不是首页

虚拟DOM挂载到真实DOM上面后 从路由中获取参数fromIndex 若为true 代表从首页跳转到本组件 展示“点击定位当前位置” 否则从其他页面跳转过来

mounted() {
	this.fromIndex = !!this.$route.query.fromIndex;
}

顶部导航条：复用head组件

<v-head goBack="true" title="选择收货地址"></v-head>

搜索：复用search组件

点击后带着输入框的内容调用后端的suggestion端口进行查询，suggestion端口会带着输入框的内容调用locationSearch方法，locationSearch方法先使用encodeURI()对内容进行编码，然后带着编码后的内容和腾讯地理位置服务的密钥向腾讯地理位置服务的API发送get请求，腾讯地理位置服务会返回查询结果，然后后端再返回给前端，前端展示出来

encodeURI(字符串)：将字符串的每个实例替换为转义序列来对URI进行编码，以便发送给浏览器，有效的URI中不能包含某些字符，如空格，而encodeURI()可以对URI编码

<search placeholder="请输入收货地址" :fun_click="fun_click"></search>
<script>
fun_click(val) {
	let _this = this;
    suggestion({keyword: val}).then((response) => {
    	_this.suggestionLists = response.data.data.data;
    })
}
suggestion(data){
  	let req = {data:data};
  	req.url = 'v1/suggestion'
  	return _get(req);
}
_get(req){
  return axios.get(req.url, {params: req.data})
}
</script>

点击定位当前位置

如果从首页跳转到本组件 展示“点击定位当前位置” 如果正在搜索 搜索出了数据 需要展示在这个地方 此时就不显示“点击定位当前位置” 点击后进行定位并返回首页

<div class="location-now" v-if="fromIndex && !suggestionLists.length" @click="locationNow">
	<i class="iconfont">&#xe793;</i>
    <span>点击定位当前位置</span>
</div>
<!--展示地址 遍历查询到的地址列表并展示-->
<div class="lists" v-else>
	<ul>
        <li v-for="item in suggestionLists" :key="item.id" @click="selectAddress(item)">
          	<h3>{{item.title}}</h3>
          	<span>{{item.address}}</span>
        </li>
	</ul>
</div>
<script>
	locationNow() {//定位当前位置
        this.$store.dispatch('clearAddress');// 清除定位
        this.$store.dispatch('location');
        this.$router.push('/index');
      }
    selectAddress(item) {
        if (this.fromIndex) {//如果是首页定位
          	this.$store.dispatch('clearAddress');
          	this.$store.dispatch('recordAddress', {address: item.title, ...item.location})
          	this.$router.push('/index');
        } else {//新增收货地址
          	this.$store.dispatch('recodeDeliveryAddress', item)
          	this.$router.go(-1); //返回上一个路由
        }
    }
    
    [types.CLEAR_ADDRESS](state) {
    	let address = {address: '定位中...', lat: '', lng: ''};
    	state.address = {...address};
  	}
  	
  	location({commit}) {
    	location().then((response) => {
      		if (response.data.status === 200) {//200表示地址获取成功
        		let data = response.data.data;//取得数据
        		//调用了给地址重新赋值的方法types.RECORD_ADDRESS 把拿到的data数据中的address和location赋值给address
        		commit(types.RECORD_ADDRESS, {address: data.address, ...data.location}); //保存地址和经纬度到VUEX中
        		commit(types.LOCATION_READY, true);//定位完成 拉取商店
      		}
    	})
	}
	location(data){
  		let req = {data}
  		req.url = 'v1/location'
  		return _get(req)
	}
	_get(req){
 		return axios.get(req.url, {params: req.data})
	}
	[types.RECORD_ADDRESS](state, address) {
    	state.address = {...address}
  	}
  	//定位完成拉取附近餐馆
  	[types.LOCATION_READY](state, boolean) {
    	state.locationReady = boolean;
  	}
  	[types.RECORD_DELIVERY_ADDRESS](state, address) {
    	state.deliveryAddress = {...address};
  	}
</script>

其他组件

复用alertTip组件

<alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>