小程序开发选择收货地址的交互实现

1、用户到了确认订单页面,首页通过接口将用户已经有填写的默认地址先过滤出来并展示出来,如果没有地址则显示去新增地址按钮。

此方法是用户选了某个地址回传过来的对象

setUserAddress(obj) {
				this.userAddress = obj;
			},

2、跳转到地址列表,在onShow钩子里将数据请求回来,在onShow里调的好处就是为了修改地址后回到地址列表页面,可以重新执行请求,拿到最新修改的地址数据。

onShow() {
          this.getList();
		}

3、编辑地址

toEdit(e) {
				let index = e.currentTarget.dataset.index;
				let userAddressForm = this.userAddress[index];
				/* 把参数信息异步存储到缓存当中 */
				uni.setStorage({
					key: 'param-userAddressForm',
					data: userAddressForm
				});
				uni.navigateTo({
					url: '/pages/user/user-address/form/index'
				});
			},

4、选择某个地址

selectUserAddress(userAddressForm) {
				if (this.select) {
					var pages = getCurrentPages(); // 获取页面栈
					var currPage = pages[pages.length - 1]; // 当前页面
					var prevPage = pages[pages.length - 2]; // 上一个页面
					prevPage.$vm.setUserAddress(userAddressForm); //调用上一个页面的 setUserAddress 方法,并传入 userAddressForm
					uni.navigateBack({
						delta: 1
					});
				}
				
			}

5、去编辑后跳到编辑地址页面

在onLoad中回显

//回显信息
			uni.getStorage({
				key: 'param-userAddressForm',
				success: function(res) {
					let userAddress = res.data;
          that.userAddress = userAddress
          if(userAddress.province){
            that.region = [userAddress.province+'',userAddress.city+'',userAddress.district+'']
            if(Array.isArray(userAddress) && userAddress.length==0){
              that.regionTxt = '省、市、区、街道'
              return
            }
            if(JSON.stringify(userAddress)!=="{}"){
              that.regionTxt = `${userAddress.provinceName},${userAddress.cityName},${userAddress.districtName}`
            }
          }
          if( userAddress.consigneeName){
          	userAddress.isDefault = userAddress.isDefault?userAddress.isDefault:"0";
          	that.userAddress = userAddress;
          }
				}
			});

猜你喜欢

转载自blog.csdn.net/liaoxianhua888/article/details/125201701