功能介绍:
这是我在开发微信小程序时实现的一个功能,在提交订单页面(A页面)点击设置收货地址跳转到地址列表页面(B页面)去选择地址后回退到订单页面并显示所选择的地址。
具体实现:
<!-- HTML结构不完整,仅做参考,部分类名为作者项目中的配置 -->
<view class='addressCon' v-if="shippingType == 1 && JSON.stringify(address) != '{}'" @tap='goAddress'>
<view class='name'>{{ address.realName }}
<text class='phone ml50'>{{ address.phone }}</text>
</view>
<view class="acea-row">
<text class='default font-color' v-if="address.isDefault === 1">[默认]</text>
<text class="line2">{{ address.province }}{{ address.city }}{{ address.district }}{{address.detail}}</text>
</view>
</view>
<view class='addressCon' v-else @tap="goAddress">
<view class='setaddress'>设置收货地址</view>
</view>
goAddress() {
uni.navigateTo({
url: '/pages/users/address_list/index'
})
}
如图,提交订单页面中,我们给设置收货地址的盒子绑定事件,跳转到收货地址列表页面,在这个页面我们可以对地址进行新增、编辑、删除等操作
<!-- HTML结构不完整,仅做参考,部分类名为作者项目中的配置 -->
<view class='item borRadius14' v-for="(item, index) in addressList" :key="item.id">
<view class='address' @tap='chooseAddress(item)'>
<view class='consignee'>收货人:{{ item.realName }}<text class='phone'>{{ item.phone }}</text></view>
<view>收货地址:{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
</view>
<view class='operation acea-row row-between-wrapper'>
<radio class="radio" :value="index" :checked="item.isDefault === 1"><text>设为默认</text></radio>
<view class='acea-row row-middle'>
<view @tap='editAddress(item.id)'><text class='iconfont icon-bianji'></text>编辑</view>
<view @tap='delAddress(item.id)'><text class='iconfont icon-shanchu'></text>删除</view>
</view>
</view>
</view>
<view class='footer acea-row row-between-wrapper'>
<view class='addressBnt bg-color' @tap='addAddress'>
<text class='iconfont icon-tianjiadizhi'></text>
添加新地址
</view>
</view>
思路:
在回退页面(B页面)的方法中调用 getCurrentPages 函数获取页面栈的实例,然后通过获取上一页面的页面栈的方式去传递数据。
实现的方法有两种,一种是直接去改变原来页面(A页面)的数据,另一种就是通过调用原来页面(A页面)的方法再去改变页面数据。
chooseAddress(item) {
// item 是需要传递的地址对象数据
let pages = getCurrentPages() // 使用getCurrentPages获取页面栈的实例
let prePage = pages[pages.length - 2] // 上一页面
// 方式一:直接修改上一页面的数据,把地址对象赋值过去
prePage.$vm.address = item
// 方式二:通过调用上一页面的方法,需要在A页面中定义处理地址对象的方法
// prePage.$vm.editAddress(item)
uni.navigateBack() // 返回上一页
}
标签:uniapp,收货,携带,address,item,地址,一页,pages,页面
From: https://blog.csdn.net/qq_59572992/article/details/139627979