收获地址这部分主要有四个功能：新增地址，修改地址，删除地址，选择地址。
其中修改，删除，新增可以放在一个界面中，话不多说上代码
界面
image
选择界面
<view class='container'>
<view class = "item" wx:for="{{list}}" wx:key="" wx:for-index="index" data-address='{{item.address}}{{item.door_card}}' data-name='{{item.name}}' data-phone='{{item.phone}}' data-id='{{item.address_id}}' bindtap='select'>
<text class='address'>{{item.address}}{{item.door_card}}</text>
<text class='name' >{{item.name}}</text>
<text class='tel'>{{item.phone}}</text>
<image class='eidt' src = "../../../images/icon/modify.png" mode = "widthFix" data-index='{{index}}' bindtap = "edit"/>
</view>
</view>
<view class = "add" bindtap = "addAddre">
<image class = "left" src = "../../../images/icon/add.png" mode = "widthFix" />
<view class = "text">新增个人地址</view>
<image class="right" src = "../../../images/icon/right.png" mode = "widthFix" />
</view>
选择界面逻辑
新增地址点击，编辑按钮点击，选择地址后为上一页面的地址栏赋值;注意数据刷新一般放在onShow中
// pages/me/address/address.js
const tools = require('../../../utils/tools.js');
var app = getApp();
Page({
data: {
list:[]
},
onLoad: function (options) {
},
//修改地址
edit: function (e){
console.log(this.data.list[e.currentTarget.dataset.index])
var address = this.data.list[e.currentTarget.dataset.index]
wx.navigateTo({
url: '/pages/me/address/add-address/add-address?address='+ JSON.stringify(address)
})
},
//显示地址列表
onShow: function (options){
var vm = this;
tools.request(app.globalData.url + "/info/Address", 'post', {})
.then(resp => {
console.log("收到服务器回复地址信息", resp.data.data)
vm.setData({
list: resp.data.data
})
})
},
//增加地址
addAddre: function () {
wx.navigateTo({
url: '/pages/me/address/add-address/add-address'
})
},
//选择地址
select: function(e){
//为上一个页面的data赋值
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
if (prevPage.__route__ == 'pages/shoppingcart/pay/pay') {
var address = {
name: e.currentTarget.dataset.name,
address: e.currentTarget.dataset.address,
phone: e.currentTarget.dataset.phone,
id: e.currentTarget.dataset.id
}
console.log("为上一个页面的address赋值",address)
prevPage.setData({
address: address
})
wx.navigateBack({
delta: 1
})
}
}
})
新增/修改地址界面
image
<!--pages/me/address/add-address/add-address.wxml-->
<!-- 信息部分 -->
<form bindsubmit="saveAddr" report-submit="true">
<view class = "info">
<!-- 姓名部分 -->
<view class = "item">
<text>姓名</text>
<view class = "right">
<input type="text" name = "name" placeholder="请填写收货人姓名" value="{{list.name}}" />
</view>
</view>
<!-- 电话部分 -->
<view class = "item">
<text>电话</text>
<view class = "right">
<input name="phone" type="number" placeholder="请填写收货手机号" value="{{list.phone}}"/>
</view>
</view>
<!-- 收货地址部分 -->
<view class = "item">
<text>地址</text>
<view class = "right1" bindtap='cilickaddress'>
<text class='t1' wx:if="{{!address}}">点击选择</text>
<input name="address" wx:else value="{{address}}" />
<image src='../../../../images/icon/right.png'></image>
</view>
</view>
<!-- 详细地址部分 -->
<view class = "item">
<text>详细地址</text>
<view class = "right">
<input name="door_card" type="text" placeholder="例： 10栋5层502室" value="{{list.door_card}}" />
</view>
</view>
</view>
<!-- 信息部分end -->
<view class='save'>
<button class="savebt" formType="submit" hover-class="none">保存</button>
</view>
<view class="delete" bindtap='delete' hidden='{{tag}}'>删除</view>
</form>
js逻辑
地址部分使用了定位功能，详情请看<a href='https://blog.csdn.net/qq_42002651/article/details/89384456'> 微信小程序中腾讯位置API使用</a> ，通过判断传入值来决定是否显示删除按钮。
// pages/me/address/add-address/add-address.js
const tools = require('../../../../utils/tools.js');
var app = getApp();
Page({
data: {
tag: true
},
//判断是否有传入值
onLoad: function (e) {
console.log(e.address)
if (e.address != undefined){
var list = JSON.parse(e.address);
this.setData({
list: list,
address: list.address,
address_id: list.address_id
})
}else{
console.log("不存在传入值")
}
},
onShow: function(e){
if (this.data.list != undefined){
console.log("存在传入值")
this.setData({
tag:false
})
}
},
//点击地址信息，定位
cilickaddress: function(e){
wx.navigateTo({
url: '/pages/home/address/address',
})
},
//保存修改地址
saveAddr: function(e){
if (e.detail.value.name == "") {
wx.showModal({
title: '提示',
content: "请填写您的姓名！"
})
} else if (e.detail.value.phone == "") {
wx.showModal({
title: '提示',
content: "请填写您的手机号！"
})
} else if (!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.phone))) {
wx.showModal({
title: '提示',
content: "手机号格式不正确"
})
} else if (e.detail.value.address === undefined) {
wx.showModal({
title: '提示',
content: "请选择您的所在区域"
})
} else if (e.detail.value.door_card == "") {
wx.showModal({
title: '提示',
content: "请输入您的详细地址"
})
}else {
console.log(e.detail.value);
if(this.data.tag === true){
var address = e.detail.value
address = JSON.stringify(address);
//保存新地址
tools.request(app.globalData.url + "/info/InsertAddress", 'post', {'address': address})
.then(resp => {
console.log("新增地址成功", resp)
wx.showToast({
title: resp.data.msg,
icon: 'success',
duration: 1500,
success: function () {
setTimeout(function () {
wx.navigateBack({
delta: 1
})
}, 1500);
}
})
})
}else{
var address = e.detail.value
address.address_id = this.data.address_id;
address = JSON.stringify(address);
//修改地址
tools.request(app.globalData.url + "/info/AlterAddress", 'post', { 'address': address })
.then(resp => {
console.log("修改地址成功", resp)
wx.showToast({
title: resp.data.msg,
icon: 'success',
duration: 1500,
success: function () {
setTimeout(function () {
wx.navigateBack({
delta: 1
})
}, 1500);
}
})
})
}
}
},
//删除该地址
delete: function(e){
var vm = this;
console.log(vm.data.address_id)
tools.request(app.globalData.url + "/info/DeleteAddress", 'post', { 'address_id': vm.data.address_id})
.then(resp => {
console.log("删除地址成功", resp)
wx.showToast({
title: resp.data.msg,
icon: 'success',
duration: 1500,
success: function () {
setTimeout(function () {
wx.navigateBack({
delta: 1
})
}, 1500);
}
})
})
}
})
