顶部导航条：复用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"></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赋值给addresscommit(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>

location选择收货地址相关推荐

微信小程序的选择收货地址、新增地址、地址管理等模块的总结(1)
这几天主要在做公司微信小程序项目2.0版本的一些新增功能,其中就包括把原来的地址等个人固定信息独立成一个模块进行管理(选择收货地址),包括新增地址.地址修改.删除等可以直接选取个人地址而不需要每次都填 ...
微信小程序之radio应用实例(选择收货地址)
在地址列表中进行地址选择,且只能选中其中一个地址第一种写法: wxml代码如下: <radio-group bindchange="radioChange">< ...
选择收货地址，省市区街道联动
使用情景是填写快递邮寄到的地址信息,介绍实现此功能的方法之一,实现之后效果如图所示: 选择省市区,逐个选择逐个出现,如果选择的是北京.天津等直辖市,就不是四级联动是三级联动. 选择镇或街道. 实现步骤 ...
小程序开发选择收货地址的交互实现
1.用户到了确认订单页面,首页通过接口将用户已经有填写的默认地址先过滤出来并展示出来,如果没有地址则显示去新增地址按钮. 此方法是用户选了某个地址回传过来的对象 setUserAddress(obj) ...
html中选择收货地址时候,收货地址.html
dodou-移动框架 html,body{ background:#f4f4f4; } .weui-cells{ font-size: 15px; } 小官常用地址广东省深圳市宝安区留仙一路高新奇二 ...
jssdk 获取微信收货地址_微信收货地址共享开发接口讲解
写在前面的话:微信开发者文档写的比较清楚,也不容易出错,可是偏偏收货地址共享那儿写的比较绕,同时也会有很多坑,这里总结一下. ======正文开始====== 微信收货地址共享开发接口基本使用场景是: ...
写收货地址代码模块的思路整理——省市联动
最近,一个同事接到一个开发任务,其中有一个功能模块就是关于收货地址的,在收货地址的回显上遇到了一些麻烦,因为我之前做过收货地址的模块,因此将经验总结于下,供大家参考: 所用技术:AngularJs 一 ...
收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...
Vue3电商项目实战-结算支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】
文章目录 05-结算-收货地址-添加 06-结算-收货地址-修改 07-结算-提交订单 05-结算-收货地址-添加目的:实现收货地址的添加. 大致步骤: 独立组件,准备一个对话框完成表单布局完成 ...

location选择收货地址

目录

顶部导航条：复用head组件

搜索：复用search组件

点击定位当前位置

其他组件

location选择收货地址相关推荐

最新文章

热门文章