小程序用户收货地址修改

页面使用的是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>

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
          }
        }
      })
    }
    
  })