微信小程序地址管理

最新推荐文章于 2024-05-23 20:55:07 发布

Eternity..74

最新推荐文章于 2024-05-23 20:55:07 发布

阅读量6k

点赞数 12

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_63194616/article/details/126559261

版权

开发小程序时，往往会用到地址管理这个功能。通常包括“地址选择”和“添加地址”两个功能。

1、在“地址选择”界面，我使用了一个数组，只需要把数组内的内容输出即可，在退出该界面时，将数据存到缓存中，确保下次进入该界面时能显示已经有的地址。并且还可以进行“删除”和“勾选”两个功能。

2、在“添加地址”界面，有“姓名”、“电话”、“收货地址”、“省市区三级联动”、“详细地址”以及“保存”功能。

话不多说，先来看效果图

在进行两个界面的实现时，查阅了一些资料，同时也看了CSDN上很多大神设计的，并且像他们借鉴了一下。现在来看看我最后完成的代码。

location.wxss:

page{

display: flex;

flex-direction: column;

height: 100%;

}

.product-name-wrap{

margin: 0px 10px;

font-size: 14px;

color: #404040;

}

.ui-list-item-info{

margin: 5px 0px;

}

.ui-list-item-address{

color: #585c64;

}

.ui-list-item-time{

margin: 5px 0px;

}

.ui-list-item-del{

position: absolute;

right: 10px;

color: #585c64;

}

/* 分割线 */

.separate {

margin: 5px 0px;

height: 2rpx;

background-color: #f2f2f2;

}

.add-address{

margin: 0 auto;

margin-top: 30px;

width: 150px;

height: 35px;

border: 1px #000 solid;

line-height: 35px;

text-align: center;

color: #000;

border-radius: 5rpx;

    display: block;

}

.add-img{

margin-right: 15rpx;

width: 15px;

height: 15px;

}

.b{

display: flex;

margin-left: 30rpx;

font-size: 30rpx;

margin-bottom: 30rpx;

}

.bb{

display: flex;

flex: 1;

width: 33%;

justify-content: space-between;

}

location.js:

Page({



/**



* 页面的初始数据



*/



data: {

nickName:'',

addressList:[],

aa:''

},



/**



* 生命周期函数--监听页面加载



*/



onLoad: function (options) {

var currentPages=getCurrentPages();

var prePages=currentPages[currentPages.length-2];

var arr = wx.getStorageSync('addressList') || [];

// 更新数据

this.setData({

addressList: arr,

nickName:prePages.data.nickName

});

},

/**



* 生命周期函数--监听页面显示



*/

onPullDownRefresh: function () {

this.onRefresh();

},

onRefresh:function(){

//导航条加载动画

wx.showNavigationBarLoading();

setTimeout(function () {

wx.hideNavigationBarLoading();

//停止下拉刷新

wx.stopPullDownRefresh();

}, 2000);

},

onShow: function () {



this.onLoad();



},

onUnload: function () {

var arr = this.data.addressList;

wx.setStorageSync('addressList', arr);

},

change:function(e){

var items = this.data.addressList;

for (var i = 0; i < items.length; i++){

if (items[i].mobile == this.data.aa){

for (var j = 0; j < items.length; j++) {

if (items[j].checked && j != i) {

items[j].checked = false;

}

}

items[i].checked = !(items[i].checked);

}

}

this.setData({

addressList: items

});

},

addAddress:function(){

if(this.data.nickName=='点击授权登录'){

wx.showToast({

title: '请登录',

image:'/icon/interjective.png'

})

return

}

wx.navigateTo({ url: '/pages/addLocation/addLocation' });

},

radioChange: function (e) {

this.data.aa = e.detail.value;

},

/* 删除item */

delAddress: function (e) {

var id = e.currentTarget.dataset.id//数组下标

this.data.addressList.splice(id, 1);

// 更新data数据对象



if (this.data.addressList.length > 0) {



this.setData({



addressList: this.data.addressList



})



wx.setStorageSync('addressList', this.data.addressList);



} else {



this.setData({



addressList: this.data.addressList



})



wx.setStorageSync('addressList', []);



}



}



})

location.wxml:

<scroll-view class="scroll" scroll-y="true">

<view wx:for="{{addressList}}" wx:key="key">

<view class="product-name-wrap">

<view class="ui-list-item-info">{{item.consignee}}

<text decode="{{true}}" space="{{true}}">  </text> {{item.mobile}}

</view>

<view class="ui-list-item-address">

<p>省城区： {{item.myregion[0]+item.myregion[1]+item.myregion[2]}}</p>

<p class="ui-list-item-del">

<radio-group bindchange="radioChange" class="b">

<radio wx:for-item="item" wx:key="mobile" value="{{item.mobile}}" bindtap="change" checked="{{item.checked}}" class="bb"></radio>

</radio-group>

</p>

</view>

<view class="ui-list-item-address">

详细地址：{{item.detailAddress}}

</view>

<view class="ui-list-item-time">

<p> 收货时间：{{item.transportDay}}</p>

<p class="ui-list-item-del" data-id="{{index}}" bindtap="delAddress">删除</p>

</view>

<view class="separate"></view>

</view>

</view>

</scroll-view>

<view class="add-address" bindtap="addAddress">

<image class="add-img" src="/icon/add1.png"></image>新增地址

</view>

addLocation.wxss

@import '../../utils/weui.wxss';

.weui-cells:before{

top:0;

border-top:1rpx solid white;

}

.weui-cell{

line-height: 3.5rem;

}

.weui-cells:after{

bottom:0;border-bottom:1rpx solid white

}

.weui-btn{

width: 80%;

}

addLocation.js:

var value = [0, 0, 0]; //数据位置下标

var addressList = null;

Page({

data: {
myregion: ["北京市", "市辖区", "东城区"],

transportValues: ["收货时间不限", "周六日/节假日收货", "周一至周五收货"],

transportIndex: 0,

checked:false
},
/**

* 生命周期函数--监听页面加载

*/
onPullDownRefresh: function () {
this.onRefresh();
},

onRefresh:function(){
//导航条加载动画
wx.showNavigationBarLoading();
setTimeout(function () {
wx.hideNavigationBarLoading();
//停止下拉刷新
wx.stopPullDownRefresh();
}, 2000);
},
onLoad: function(options) {},

/**

* 生命周期函数--监听页面显示

*/
onShow: function() {},

bindTransportDayChange: function(e) {
console.log('picker country 发生选择改变，携带值为', e.detail.value);
this.setData({
transportIndex: e.detail.value
})
},
bindRegionChange:function(e){
console.log(e) //查看事件返回值
this.setData({
myregion:e.detail.value
}) //重新复制给myregion
},

saveAddress: function(e) {

var consignee = e.detail.value.consignee;

var mobile = e.detail.value.mobile;

var transportDay = e.detail.value.transportDay;

var detailAddress = e.detail.value.detailAddress;
if(consignee==''){
wx.showToast({
title: '请输入姓名',
image:'/icon/error.png'
})
return
}
else if(mobile==''){
wx.showToast({
title: '请输入手机号',
image:'/icon/error.png'
})
return
}
else if(detailAddress==''){
wx.showToast({
title: '请输入详细地址',
image:'/icon/error.png'
})
return
}
else if(mobile.length!=11){
wx.showToast({
title: '手机号格式错误',
image:'/icon/error.png'
})
return
}
var arr = wx.getStorageSync('addressList') || [];
console.log("arr,{}", arr);
addressList = {
consignee: consignee,
mobile: mobile,
myregion: this.data.myregion,
detailAddress:detailAddress,
transportDay: transportDay,
checked:this.data.checked
}
arr.push(addressList);
wx.setStorageSync('addressList', arr);
wx.navigateBack({
})

}

})

addLocation.wxml:

<form bindsubmit="saveAddress">

<view class="weui-cells weui-cells_after-title">



<view class="weui-cell weui-cell_input">

<view class="weui-cell__hd">

<view class="weui-label">收货人</view>

</view>

<view class="weui-cell__bd">

<input class="weui-input" name="consignee" placeholder="请输入收货人真实姓名" />

</view>

</view>



<view class="weui-cell weui-cell_input">

<view class="weui-cell__hd">

<view class="weui-label">手机号</view>

</view>

<view class="weui-cell__bd">

<input class="weui-input" name="mobile" placeholder="请输入收货人手机号" />

</view>

</view>



<view class="weui-cell weui-cell_select">

<view class="weui-cell__hd weui-cell__hd_in-select-after">

<view class="weui-label">收货时间</view>

</view>

<view class="weui-cell__bd">

<picker bindchange="bindTransportDayChange" value="{{transportIndex}}" range="{{transportValues}}">

<view class="weui-select weui-select_in-select-after">{{transportValues[transportIndex]}}</view>

<input name="transportDay" hidden="true" value="{{transportValues[transportIndex]}}" />

</picker>

</view>

</view>



<view class="weui-cell weui-cell_select">

<view class="weui-cell__hd weui-cell__hd_in-select-after">

<view class="weui-label">我的地址</view>

</view>

<view class="weui-cell__bd">

<picker mode="region" bindchange="bindRegionChange">{{myregion[0]+myregion[1]+myregion[2]}}

</picker>

</view>

</view>



<view class="weui-cell weui-cell_input">

<view class="weui-cell__hd">

<view class="weui-label">详细地址</view>

</view>

<view class="weui-cell__bd">

<input class="weui-input" name="detailAddress" placeholder="详细地址" />

</view>

</view>

</view>

<button class="weui-btn" type="primary" form-type="submit">保存</button>

</form>

总结:我在做小程序时，地址管理前面还有一个登录的页面，所以用到了像nickName这样的数据，如果程序报错了，大家可以去掉这些数据。另外，location.wxss中用到了weui.wxss这个组件，大家可以在网上搜索查找这个的源码，然后新建文件夹导入就行啦

Eternity..74

关注

12
点赞
踩
69

收藏

觉得还不错? 一键收藏
8
评论
微信小程序地址管理

开发小程序时，往往会用到地址管理这个功能。通常包括“地址选择”和“添加地址”两个功能。1、在“地址选择”界面，我使用了一个数组，只需要把数组内的内容输出即可，在退出该界面时，将数据存到缓存中，确保下次进入该界面时能显示已经有的地址。并且还可以进行“删除”和“勾选”两个功能。2、在“添加地址”界面，有“姓名”、“电话”、“收货地址”、“省市区三级联动”、“详细地址”以及“保存”功能。话不多说，先来看效果图在进行两个界面的实现时，查阅了一些资料，同时也看了CSDN上很多大神设计的...
复制链接

扫一扫