頁面使用的是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
}
}
})
}
})