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

最新推荐文章于 2024-07-08 05:03:14 发布
最新推荐文章于 2024-07-08 05:03:14 发布
阅读量1.4w 收藏 86
点赞数 6
分类专栏： 2019/2/14

在这里插入图片描述
1、布局收货地址列表和新增收货地址页面

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

3、使用缓存管理数据

一、收货地址列表管理

addressList.wxml

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

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

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

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

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

  </view>

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

    {{item.address}}

  </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="../../images/add.png"></image>新增地址
</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('addressList') || [];

    console.info("缓存数据：" + arr);

    // 更新数据  

    this.setData({
	    addressList: arr

    });

  },

  

  /**生命周期函数--监听页面显示 */
	  onShow: function () {

    this.onLoad();

  },

  addAddress:function(){

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

  },

  /* 删除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('addressList', this.data.addressList);

} else {

  this.setData({

    addressList: this.data.addressList

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

}
  }
})

二、新增收货信息
address.wxml

<form bindsubmit="saveAddress">

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

  <view class="weui-cells__title"></view>

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

<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="bindProvinceNameChange" value="{{provinceIndex}}" range="{{provinceNames}}">

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

      <input name="provinceName" hidden="true" value="{{provinceNames[provinceIndex]}}" />

    </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 bindchange="bindCityNameChange" value="{{cityIndex}}"range="{{cityNames}}">

      <view class="weui-select weui-select_in-select-after"name="city_name">{{cityNames[cityIndex]}}</view>



      <input name="cityName" hidden="true" value="{{cityNames[cityIndex]}}" />

    </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 bindchange="bindCountyNameChange" value="{{countyIndex}}"range="{{countyNames}}">

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

      <input name="countyName" hidden="true" value="{{countyNames[countyIndex]}}" />

    </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="address" placeholder="请输入收货人详细地址" />

  </view>

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

address.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%;
}

address.json

	{
  		"navigationBarTitleText": "添加收货地址"
	}

address.js

var area = require(’…/…/utils/area.js’);

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, //区县

},

/**

  • 生命周期函数–监听页面加载

*/

onLoad: function(options) {

},

/**

  • 生命周期函数–监听页面显示

*/

onShow: function() {

var that = this;

area.getAreaInfo(function(arr) {

  areaInfo = arr;

  //获取省份数据

  that.getProvinceData();

});

},

// 获取省份数据

getProvinceData: function() {

var that = this;

var s;

provinces = [];

provinceNames = [];

var num = 0;

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

  s = areaInfo[i];

  if (s.di == "00" && s.xian == "00") {

    provinces[num] = s;

    provinceNames[num] = s.name;

    num++;

  }

}

that.setData({

  provinceNames: provinceNames

})



that.getCityArr();

that.getCountyInfo();

},

// 获取城市数据

getCityArr: function(count = 0) {

var c;

citys = [];

cityNames = [];

var num = 0;

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

  c = areaInfo[i];

  if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") {

    citys[num] = c;

    cityNames[num] = c.name;

    num++;

  }

}

if (citys.length == 0) {

  citys[0] = {

    name: ''

  };

  cityNames[0] = {

    name: ''

  };

}

var that = this;

that.setData({

  citys: citys,

  cityNames: cityNames

})

console.log('cityNames:' + cityNames);

that.getCountyInfo(count, 0);

},

// 获取区县数据

getCountyInfo: function(column0 = 0, column1 = 0) {

var c;

countys = [];

countyNames = [];

var num = 0;

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

  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: ''

  };

  countyNames[0] = {

    name: ''

  };

}

console.log('countyNames:' + countyNames);

var that = this;

// value = [column0, column1, 0];



that.setData({

  countys: countys,

  countyNames: countyNames,

  // value: value,

})

},

bindTransportDayChange: function(e) {

console.log('picker country 发生选择改变，携带值为', e.detail.value);

this.setData({

  transportIndex: e.detail.value

})

},

bindProvinceNameChange: function(e) {

var that = this;

console.log('picker province 发生选择改变，携带值为', 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('picker city 发生选择改变，携带值为', 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('picker county 发生选择改变，携带值为', 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('addressList') || [];
console.log("arr,{}", arr);
addressList = {
  consignee: consignee,
  mobile: mobile,
  address: provinceName + cityName + countyName+address,
  transportDay: transportDay
}
  arr.push(addressList);
wx.setStorageSync('addressList', arr);
wx.navigateBack({   
    })
  }
})

area.js和weui.wxss 可以看下方源码获取方式，这里就不多做解释。

库行天下
关注
专栏目录
微信小程序手动添加收货地址省市区联动
12-28
本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码，供大家参考，具体内容如下 先看效果图 html部分 用小程序的piceker-view 嵌入页面的滚动选择器 {{it
微信小程序收获地址管理
Beyond the Horizon
05-07 7437
微信小程序收获地址管理 收获地址这部分主要有四个功能：新增地址，修改地址，删除地址，选择地址。 其中修改，删除，新增可以放在一个界面中，话不多说上代码 界面 选择界面 <view class='container'> <view class = "item" wx:for="{{list}}" wx:key="" wx:for-index="index" data-ad...
移动端收货地址页（一键复制）
最新发布
qq_43422957的博客
07-08 240
空闲时间写个uniapp收货地址静态页面，用到时直接拿来用，需要的道友一键复制即可。本文首发于公众号【雪天前端】，欢迎关注！
微信小程序获取用户收货地址 完整代码
热门推荐
a_靖的博客
11-12 1万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 获取用户收货地址需要用户点击授权，所以有两种情况，确认授权、取消授权。 情况一，用户第一次访问用户地址授权，并且点击确定授权。 情况二，用户点击取消授权后，再次获取授权 流程：（代码逻辑整理） 1.点击事件触发函数，获取用户当前设置 2.根据用户当前设置中的用户授权结果，判断是否包含收货...
微信小程序设置用户收货地址
田兴的博客
05-11 8509
1. 获取用户收货地址需要用户点击授权，所以有两种情况，确认授权、取消授权。 情况一，用户第一次访问用户地址授权，并且点击确定授权 情况二，用户点击取消授权后，再次获取授权 流程： （代码逻辑整理） 1.点击事件触发函数，获取用户当前设置 2.根据用户当前设置中的用户授权结果，判断是否包含收货地址授权 3.如果包含收货地址授权并且没有取消过收货地址授权，直接调用wx.chooseAddress（），获取用户收货地址。 4.取消过收货地址授权，调用wx.openSetting（），调起客户端小程序设置界
微信小程序的选择收货地址、新增地址、地址管理等模块的总结(1)
书写人生
01-20 1万+
这几天主要在做公司微信小程序项目2.0版本的一些新增功能，其中就包括把原来的地址等个人固定信息独立成一个模块进行管理（选择收货地址），包括新增地址、地址修改、删除等可以直接选取个人地址而不需要每次都填写，话不多说，先上一张动态效果图： 动态效果图： 下面是修改前后的对比图：      修改前：     修改后：          
微信小程序地址管理
weixin_63194616的博客
08-27 6435
开发小程序时，往往会用到地址管理这个功能。通常包括“地址选择”和“添加地址”两个功能。 1、在“地址选择”界面，我使用了一个数组，只需要把数组内的内容输出即可，在退出该界面时，将数据存到缓存中，确保下次进入该界面时能显示已经有的地址。并且还可以进行“删除”和“勾选”两个功能。 2、在“添加地址”界面，有“姓名”、“电话”、“收货地址”、“省市区三级联动”、“详细地址”以及“保存”功能。 话不多说，先来看效果图 在进行两个界面的实现时，查阅了一些资料，同时也看了CSDN上很多大神设计的...
【愚公系列】2022年10月 微信小程序-电商项目-收货地址功能实现
时光隧道
10-09 1万+
在电商系统中，收货地址是必不可少的功能，没有收货地址用户在下单就没法收到货，而且一个用户会有多个收货地址，比如寄给自己，或者寄给别人。一搬在收货地址选择中会有个默认收货地址以防止每次下单都要选择地址。
微信小程序开发之——个人中心-收货地址(9)
2401_84149675的博客
04-20 848
页面搭建页面逻辑二 页面搭建。
微信小程序实现收货地址城市选择效果(添加收货地址)mock.zip
03-31
微信小程序实现收货地址城市选择效果(添加收货地址)
电商小程序填写收货地址页面源码.zip
10-05
仅供学习交流使用，不提供技术支持
微信小程序Demo--移动端商城-附完整源代码.rar
03-20
5. 用户中心：用户可以查看个人信息、收货地址、优惠券等，实现个性化设置。 6. 客服咨询：提供在线客服功能，解答用户疑问，提升购物体验。 二、技术特点 1. 采用微信小程序原生框架，兼容性强，性能优越。 2. ...
微信小程序商城项目实战(第九篇:收货地址管理)
没有途径，只有努力
04-26 5764
收货地址管理收购地址查询分析代码实现效果图展示新增收货地址分析代码实现效果图 收购地址查询 分析 顶部改为"管理收货地址" 中部为收货地址+单选按钮(用与设为默认收货地址,编辑删除没做(简单不想做hh) 下方为添加新地址 代码实现 改变顶部导航内容"navigationBarTitleText": "管理收货地址" 界面: <radio-group bindchange="radioChange"> <view class='list-item' wx:for="{{address
微信小程序开发之——个人中心-收货地址(9)(1)
2401_84149635的博客
04-20 801
分享一份工作1到5年以上的Android程序员架构进阶学习路线体系，希望能对那些还在从事Android开发却还不知道如何去提升自己的，还处于迷茫的朋友！阿里P7级Android架构师技术脑图；查漏补缺，体系化深入学习提升**全套体系化高级架构视频；**七大主流技术模块，视频+源码+笔记有任何问题，欢迎广大网友一起来交流《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！**全套体系化高级架构视频；**七大主流技术模块，视频+源码+笔记。
微信小程序获取收货地址及存储收货地址
weixin_65490785的博客
11-18 2229
微信小程序获取收货地址及存储收货地址
微信小程序代码示例地址
zhou279818998的专栏
10-26 230
微信小程序代码示例地址
微信小程序商品管理页面
05-23
微信小程序的商品管理页面可以包括以下功能： 1. 商品列表展示：展示所有商品的图片、名称、价格等基本信息，并提供搜索、筛选等功能。 2. 商品添加：提供添加商品的功能，包括商品信息、价格、库存、图片等。 3. 商品编辑：提供编辑商品信息的功能，包括修改商品信息、价格、库存、图片等。 4. 商品删除：提供删除商品的功能，包括单个删除、批量删除等。 5. 商品分类管理：提供对商品分类的管理功能，包括添加、编辑、删除商品分类等。 6. 库存管理：提供对商品库存的管理功能，包括库存数量、库存预警等。 7. 订单管理：提供对订单的管理功能，包括订单列表展示、订单详情查看等。 8. 数据统计：提供对商品销售数据的统计功能，包括销售量、收入、利润等。 以上是一些常见的微信小程序商品管理页面功能，根据实际需求可以进行调整和添加。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值