小程序用户收货地址修改

页面使用的是weui的组件。主要实现的思路：
1、从地址管理页跳转过来，在onload里面将传过来的参数address获取后，渲染到前台页面；同时将address数据缓存到本地；
2、修改地址后提交，提交的数据与缓存中的数据值比对。
注意点：从上一个页面中传过来的参数是对象转的字符串，当前页要转其转为json对象，方便获取数据。【JSON.stringify()将对象、数组转换成字符串；JSON.parse()将字符串转成json对象。】
wxml

<form bindsubmit="modifySubmit"><!-- 修改地址需要这两个id提交 --><input value="{{addressid}}" name="addressid" hidden></input><input value="{{userid}}" name="userid" hidden ></input><view class="weui-cells weui-cells_after-title"><view class="weui-cell "><view class="weui-cell__hd"><view class="weui-label">收货人</view></view><view class="weui-cell__bd"><input class="weui-input" name="contactname"  placeholder="请输入收货人姓名" value="{{contactname}}" /></view></view><view class="weui-cell"><view class="weui-cell__hd"><view class="weui-label">手机号</view></view><view class="weui-cell__bd"><input class="weui-input" name="contacttel" placeholder="请输入手机号" value="{{contact_tel}}" /></view></view><view class="weui-cell "><view class="weui-cell__hd"><view class="weui-label">所在地区</view></view><view class="weui-cell__bd"><picker mode="region" bindchange="bindRegionChange" name="region"  value="{{region}}" custom-item="{{customItem}}"><view class="weui-input"> {{region[0]}} {{region[1]}} {{region[2]}} </view></picker></view></view><view class="weui-cell "><view class="weui-cell__hd"><view class="weui-label">详细地址</view></view><view class="weui-cell__bd"><input class="weui-input" name="street" placeholder="例如：xx街道xx小区xx单元" value="{{street}}" /></view></view></view><view class="btn-area"><button type="primary" form-type="submit" >保存</button></view>
</form>
<view class="btn-area" ><button  bindtap="delAddr">删除</button>
</view>

 Page({/*** 页面的初始数据*/data: {contactInfo:null,region: ['请点击选择'], //省市区选择器customItem: '全部',province: "",city: "",district: "",street: "",contactname: "",contact_tel: "",addressid: "",userid: ""},//改变省市区picker的事件bindRegionChange: function(e) {console.log(e)this.setData({region: e.detail.value,postcode: e.detail.postcode})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {console.log(options)var that = thisvar address = JSON.parse(options.address)//将传过来的参数存储于本地，修改后的值与之比对wx.setStorage({key: 'contactInfo',data: options.address})var addressArr = [address.province, address.city, address.district]// console.log(addressArr)that.setData({addressid: address.addressid,userid: address.userid,contactname: address.contactname,contact_tel: address.contact_tel,region: addressArr,street: address.street,})},//修改提交modifySubmit:function(e){console.log(e)var that = thisvar value = wx.getStorageSync('contactInfo')//console.log(value)wx.getStorage({key: 'contactInfo',success(res) {//console.log(res.data)that.setData({contactInfo: res.data})}})wx.request({url: 'xxxx.com/api/Address/uptAddr',header: {'content-type': 'application/json'},method: 'POST',data: {province: e.detail.value.region[0],city: e.detail.value.region[1],district: e.detail.value.region[2],street: e.detail.value.street,contactname: e.detail.value.contactname,contact_tel: e.detail.value.contacttel,addressid: e.detail.value.addressid,userid: e.detail.value.userid},success: function (res) {console.log(res)if (res.statusCode == 200) {wx.showToast({title: '提交成功',success:function(res){setTimeout(function(){wx.navigateBack({ delta: 1, })},1000)}})}},fail: function (res) { },complete: function (res) { }})},//删除delAddr: function(e){var that = thiswx.showModal({title: '提示',content: '确定要删除该地址吗？',success(res) {if (res.confirm) {//console.log('用户点击确定')wx.request({url: 'xxxx.com/api/Address/delAddr',header: { 'content-type': 'application/json' },method: 'POST',data: {addressid: that.data.addressid,userid: that.data.userid},success: function (res) {console.log(res)wx.showToast({title: '删除成功',success: function (res) {setTimeout(function () {wx.navigateBack({ delta: 1, })}, 1000)}})}})} else if (res.cancel) {console.log('用户点击取消')return false}}})}})

小程序用户收货地址修改相关推荐

微信小程序实现收货地址城市选择效果(添加收货地址)
先来张效果图这里主要是城市选择效果,请忽视其他,不要吐槽,谢谢接下来看一下代码吧 wxml  < ...
微信小程序获取收货地址及存储收货地址
这个城市数据的js直接放网盘了我链接:https://pan.baidu.com/s/18UsJ1VUxEI-7LJjVW8BW4w 提取码:mmao wxml <view class=&q ...
微信小程序购物车收货地址实现
首先理一下收获地址按钮的逻辑 1.获取用户的收获地址 1.绑定点击事件 2.调用小程序内置api 获取用户的收获地址,通过wx.chooseAddress 2.获取用户所授予获取地址的权限状态为sc ...
24-微信小程序商城收货地址列表（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
收货地址列表本节主要讲解收货地址列表界面的实现.效果如图15-5所示. 1.布局分析结构布局分析示意如图15-6所示. 根据上面的布局分析,我们会产生基础的框架,代码示例如下: <view ...
微信小程序获取用户收货地址完整代码
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 获取用户收货地址需要用户点击授权,所以有两种情况,确认授权.取消授权. 情况一,用户第一次访问用户地址授权,并 ...
微信小程序获取用户收货地址与指纹验证接口(安卓和iphone)
@toc 1.获取用户收货地址接口wx.chooseAddress() wx.chooseAddress(Object object)获取用户收货地址,此接口调用的是微信的收货地址.微信收货地址不 ...
商品属性对应表，商品相册表，用户表，用户收货地址表，地区表，购物车表，送货方式表，订单表，订单明细表的数据库设计
商品的属性通用属性: 名称价格图片存放goods表扩展属性,也叫规格参数,不同类型的商品其规格参数是不一样的,服装有尺码,颜色,材料等,手机有分辨率,内存,存储,摄像头,书籍有作者,出版社 ...
Vue3电商项目实战-结算支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】
文章目录 05-结算-收货地址-添加 06-结算-收货地址-修改 07-结算-提交订单 05-结算-收货地址-添加目的:实现收货地址的添加. 大致步骤: 独立组件,准备一个对话框完成表单布局完成 ...
微信小程序获取用户收货地址列表wx.chooseAddress
微信官方的说明,直接调用即可,但是由于该微信弹框如果拒绝,之后再不会弹出提示,而恰好wx.openSetting(),可以调起授权设置界面,显示用户已经调用过的微信授权,所以我们需要饶一下小弯路,但是 ...

小程序用户收货地址修改

小程序用户收货地址修改相关推荐

最新文章

热门文章