小程序用户收货地址修改

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

收货人 手机号 所在地区 {{region[0]}} {{region[1]}} {{region[2]}} 详细地址

js

 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 = this
      var 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 = this
      var 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 = this
      wx.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
          }
        }
      })
    }
    
  })

你可能感兴趣的:(微信小程序)