微信小程序商城开发之实现用户收货地址管理页面的代码

本篇文章给大家带来的内容是关于微信小程序商城开发之实现用户收货地址管理页面的代码 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

看效果

开发计划

1、布局收货地址列表和新增收货地址页面

2、实现省市县三级联动功能

3、使用缓存管理数据

一、收货地址列表管理

addressList.wxml

 scroll-view >
addressList.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;
}
addressList.json
{
 navigationBarTitleText : 管理地址 
}
addressList.js
Page({
 * 页面的初始数据
 data: {
 addressList:[]
 * 生命周期函数--监听页面加载
 onLoad: function (options) {
 var arr = wx.getStorageSync( #39;addressList #39;) || [];
 console.info( 缓存数据： + arr);
 // 更新数据 
 this.setData({
 addressList: arr
 * 生命周期函数--监听页面显示
 onShow: function () {
 this.onLoad();
 addAddress:function(){
 wx.navigateTo({ url: #39;../address/address #39; });
 /* 删除item */
 delAddress: function (e) {
 this.data.addressList.splice(e.target.id.substring(3), 1);
 // 更新data数据对象 
 if (this.data.addressList.length 0) {
 this.setData({
 addressList: this.data.addressList
 wx.setStorageSync( #39;addressList #39;, this.data.addressList);
 } else {
 this.setData({
 addressList: this.data.addressList
 wx.setStorageSync( #39;addressList #39;, []);
})
二、新增收货信息
address.wxml
 form bindsubmit= saveAddress 
 view >
address.wxss
@import #39;../../utils/weui.wxss #39;;
.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%;
}
address.json
{
 navigationBarTitleText : 添加收货地址 
}
address.js
var area = require( #39;../../utils/area.js #39;);
var areaInfo = []; //所有省市区县数据
var provinces = []; //省
var provinceNames = []; //省名称
var citys = []; //城市
var cityNames = []; //城市名称
var countys = []; //区县
var countyNames = []; //区县名称
var value = [0, 0, 0]; //数据位置下标
var addressList = null;
Page({
 * 页面的初始数据
 data: {
 transportValues: [ 收货时间不限 , 周六日/节假日收货 , 周一至周五收货 ],
 transportIndex: 0,
 provinceIndex: 0, //省份
 cityIndex: 0, //城市
 countyIndex: 0, //区县
 c = areaInfo[i];
 if (c.xian != 00 c.sheng == provinces[column0].sheng c.di == citys[column1].di) {
 countys[num] = c;
 countyNames[num] = c.name;
 num++;
 if (countys.length == 0) {
 countys[0] = {
 name: #39; #39;
 countyNames[0] = {
 name: #39; #39;
 console.log( #39;countyNames: #39; + countyNames);
 var that = this;
 // value = [column0, column1, 0];
 that.setData({
 countys: countys,
 countyNames: countyNames,
 // value: value,
 bindTransportDayChange: function(e) {
 console.log( #39;picker country 发生选择改变，携带值为 #39;, e.detail.value);
 this.setData({
 transportIndex: e.detail.value
 bindProvinceNameChange: function(e) {
 var that = this;
 console.log( #39;picker province 发生选择改变，携带值为 #39;, e.detail.value);
 var val = e.detail.value
 that.getCityArr(val); //获取地级市数据
 that.getCountyInfo(val, 0); //获取区县数据
 value = [val, 0, 0];
 this.setData({
 provinceIndex: e.detail.value,
 cityIndex: 0,
 countyIndex: 0,
 value: value
 bindCityNameChange: function(e) {
 var that = this;
 console.log( #39;picker city 发生选择改变，携带值为 #39;, e.detail.value);
 var val = e.detail.value
 that.getCountyInfo(value[0], val); //获取区县数据
 value = [value[0], val, 0];
 this.setData({
 cityIndex: e.detail.value,
 countyIndex: 0,
 value: value
 bindCountyNameChange: function(e) {
 var that = this;
 console.log( #39;picker county 发生选择改变，携带值为 #39;, e.detail.value);
 this.setData({
 countyIndex: e.detail.value
 saveAddress: function(e) {
 var consignee = e.detail.value.consignee;
 var mobile = e.detail.value.mobile;
 var transportDay = e.detail.value.transportDay;
 var provinceName = e.detail.value.provinceName;
 var cityName = e.detail.value.cityName;
 var countyName = e.detail.value.countyName;
 var address = e.detail.value.address;
 console.log(transportDay + , + provinceName + , + cityName + , + countyName + , + address); //输出该文本 
 var arr = wx.getStorageSync( #39;addressList #39;) || [];
 console.log( arr,{} , arr);
 addressList = {
 consignee: consignee,
 mobile: mobile,
 address: provinceName + cityName + countyName+address,
 transportDay: transportDay
 arr.push(addressList);
 wx.setStorageSync( #39;addressList #39;, arr);
 wx.navigateBack({
})
area.js和weui.wxss 可以看下方源码获取方式，这里就不多做解释。
相关推荐：
微信小程序商城开发之用微信授权并实现个人中心的页面代码
微信小程序商城开发之实现商品加入购物车的功能（代码）
微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现
以上就是微信小程序商城开发之实现用户收货地址管理页面的代码的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！