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

微信小程序|小程序开发

微信小程序,微信小程序电商

微信小程序-小程序开发

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

带自动收录的网站源码,win7 vscode,ubuntu设置无效,前端安装tomcat,SQLite特定条件查询,爬虫请求头的英文名,bash php,巫溪seo推广效果,个人网站样式,网页文字特效,semantic ui模板lzw

看效果

网狐6.6源码,ubuntu终端登录命令,爬虫使用代理图片,flush()php,云南seo顾问lzw

java网上商城系统源码,vscode菜单栏无响应,ubuntu调整时间,tomcat8删除,兴平灭爬虫,无锡php培训,宜昌低成本seo推广哪家好lzw

开发计划

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

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

3、使用缓存管理数据

A、收货地址列表管理

addressList.wxml

{{item.consignee}} {{item.mobile}}{{item.address}}

{{item.transportDay}}

删除

新增地址

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, []); } }})

B、新增收货信息

address.wxml

收货人 手机号 收货时间{{transportValues[transportIndex]}} 省份{{provinceNames[provinceIndex]}}城市{{cityNames[cityIndex]}} 区县{{countyNames[countyIndex]}}详细地址保存

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 可以看下方源码获取方式，这里就不多做解释。

微信小程序商城开发之用微信授权并实现个人中心的页面代码

微信小程序商城开发之实现商品加入购物车的功能（代码）

微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现