微信小程序-省市区-收货地址及购物车使用
主页:写程序的小王叔叔的博客欢迎来访👀
支持:点赞
收藏
关注
社区:JAVA全栈进阶学习社区欢迎加入
目录
省市区-收货地址
1、效果
2、获取省市县三联动
3、wxml
4、js
5、wxss
购物车使用
一、效果
2、wxml
3、wxjs
4、wxss
省市区-收货地址
1、效果
2、获取省市县三联动
2.1）所有城市json数组文件参照，文件我已上传我的资源：【】
2.2）开始写组件代码
添加收货地址页面的js文件
//获取应用实例var base = getApp();var area = require('../../../utils/cityArray.js')var areaInfo = [];//所有省市区县数据var provinces = [];//省var citys = [];//城市var countys = [];//区县var index = [0, 0, 0];var t = 0;var show = false;var moveY = 200;Page({ data: { loaded: true, mode: "add", consigee: "", phone: "", address: "", editArea: "",//修改专用初始化字段 provinceIndex: 0, //省份 cityIndex: 0, //城市 countyIndex: 0, //区县 show: show, provinces: provinces, citys: citys, countys: countys, value: [0, 0, 0], }, //滑动事件 bindChange: function (e) { var val = e.detail.value // console.log(e) //判断滑动的是第几个column //若省份column做了滑动则定位到地级市和区县第一位 if (index[0] != val[0]) { val[1] = 0; val[2] = 0; getCityArr(val[0], this);//获取地级市数据 getCountyInfo(val[0], val[1], this);//获取区县数据 } else { //若省份column未做滑动，地级市做了滑动则定位区县第一位 if (index[1] != val[1]) { val[2] = 0; getCountyInfo(val[0], val[1], this);//获取区县数据 } } index = val; console.log(index + " => " + val); //更新数据 this.setData({ value: [val[0], val[1], val[2]], province: provinces[val[0]].name, city: citys[val[1]].name, county: countys[val[2]].name }) }, onLoad: function (options) { var that = this; //获取省市区县数据 areaInfo = area.getAreaInfo(); getProvinceData(that); }, onReady: function () { this.animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 0, timingFunction: "ease", delay: 0 }) this.animation.translateY(200 + 'vh').step(); this.setData({ animation: this.animation.export(), show: show }) }, //移动按钮点击事件 translate: function (e) { if (t == 0) { moveY = 0; show = false; t = 1; } else { moveY = 200; show = true; t = 0; } // this.animation.translate(arr[0], arr[1]).step(); animationEvents(this, moveY, show); }, //隐藏弹窗浮层 hiddenFloatView(e) { console.log(e); moveY = 200; show = true; t = 0; animationEvents(this, moveY, show); }, //页面滑至底部事件 onReachBottom: function () { // Do something when page reach bottom. }, changeName: function (e) { this.setData({ consigee: e.detail.value }) }, changePhone: function (e) { this.setData({ phone: e.detail.value }) }, changeAddress: function (e) { this.setData({ address: e.detail.value }) }, //提交按钮事件 submit: function () { var _this = this; if (_this.valid()) { var addr = { name: _this.data.consigee, phone: _this.data.phone, address: _this.data.address , };} }, valid: function () { var _this = this;var err = ""; if (!_this.data.consigee) { err = "请填写收货人姓名！"; wx.showModal({ showCancel: false, title: '', content: err }) return false; } if (!_this.data.phone) { err = "请填写收货人手机号码！"; wx.showModal({ showCancel: false, title: '', content: err }) return false; } if (!_this.phoneRegex(_this.data.phone)) { err = "手机号码格式不正确！"; wx.showModal({ showCancel: false, title: '', content: err }) return false; }if (!_this.data.address) { err = "请填写详细收货地址！"; wx.showModal({ showCancel: false, title: '', content: err }) return false; } return true; }, phoneRegex: function (val) { var regex = /^1[3|4|5|7|8][0-9]\d{8}$/; if (!regex.test(val)) { return false; } return true; }})//动画事件function animationEvents(that, moveY, show) { console.log("moveY:" + moveY + "\nshow:" + show); that.animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 400, timingFunction: "ease", delay: 0 }) that.animation.translateY(moveY + 'vh').step() that.setData({ animation: that.animation.export(), show: show })}//获取省份数据function getProvinceData(that) { var s; provinces = []; var num = 0; for (var i = 0; i < areaInfo.length; i++) { s = areaInfo[i]; if (s.di == "00" && s.xian == "00") { provinces[num] = s; num++; } } that.setData({ provinces: provinces }) //初始化调一次 getCityArr(0, that); getCountyInfo(0, 0, that);}// 获取地级市数据function getCityArr(count, that) { var c; citys = []; var num = 0; for (var i = 0; i < areaInfo.length; i++) { c = areaInfo[i]; //console.log(c); if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") { citys[num] = c; num++; } } if (citys.length == 0) { citys[0] = { name: '' }; } that.setData({ city: "", citys: citys, value: [count, 0, 0] })}// 获取区县数据function getCountyInfo(column0, column1, that) { var c; countys = []; 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; num++; } } if (countys.length == 0) { countys[0] = { name: '' }; } that.setData({ county: "", countys: countys, value: [column0, column1, 0] })}3、wxml
添加收货地址的wxml文件
地区： {{province}} {{city}} {{county}} 确认提交 取消 确定 {{item.name}} {{item.name}} {{item.name}} 收货地址列表的wxml
添加收货地址 {{a.wx_member_name}} {{a.wx_member_phone}} {{a.wx_province}} {{a.wx_city}} {{a.wx_Addr}} <!-- 设置默认 --> 删除 修改 4、js
添加收货地址 嵌入保存 + 编辑的回显方法
onLoad: function (options) { var that = this; //获取省市区县数据 areaInfo = area.getAreaInfo(); getProvinceData(that); if (wx.getStorageSync('toEdit') == true){ wx.request({ }) } }, //提交按钮事件 submit: function () { var _this = this; if (_this.valid()) { var addr = { name: _this.data.consigee, phone: _this.data.phone, address: _this.data.address , }; wx.request({ }) } },5、wxss
收货列表页的css效果
.body { margin: 10px 0; background-color: #fff; box-shadow: 5px 0 #f7f7f7; font-size: 13px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;} .shdz { display: block; height: 2.777em; line-height: 2.777em; margin: 10px auto; width: 80%; text-align: center; background: #ff6000; color: #fff; border-radius: 8px; border: none; font-size: 1.333em;} .m_box { width: 80%; margin: 12px auto; background: #eee; border-radius: 10px; box-shadow: 0 3px #f7f7f7;} .m_box .m_address_list { padding: 1.1111em; line-height: 2em;}.m_address_list .m_control { display: flex;padding: 10px 0 ;}.m_address_list .m_control .m_box_control { padding: 5px 10px ; margin:5px 5px; background:#fff; border-radius: 10px;}.m_address_list .m_control .m_box_control_select { padding: 5px 10px ; margin:5px 5px; background:#fff3e8; color:#ff6000; border-radius: 10px;}添加收获地址的css
.body { margin: 20px 0; background-color: #fff; box-shadow: 5px 0 #f7f7f7; font-size: 15px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;}.ipt{background: #eee; margin: 10px;width:95%;}.ipt input{height:40px;padding-left:10px; }.section{line-height:40px;background: #eee; margin: 10px;height:40px;width:95%;}.btn { display: block; height: 2.277em; line-height: 2.277em; margin: 10% auto; width: 80%; text-align: center; background: #ff6000; color: #fff; border-radius: 8px; border: none; font-size: 1.133em;}.infoText{ margin-top: 20rpx; text-align: center; width: 100%; justify-content: center; }picker-view{ background-color: white; padding: 0; width: 100%; height: 380rpx; bottom: 0; position: fixed;}picker-view-column view{ vertical-align:middle; font-size: 28rpx; line-height: 28rpx; height: 100%; display: flex; align-items: center; justify-content: center;}/* ----------------------------------------- */.animation-element-wrapper { display: flex; position: fixed; left: 0; top:0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.6);}.animation-element { display: flex; position: fixed; width: 100%; height: 470rpx; bottom: 0; background-color: rgba(255, 255, 255, 1);}.animation-button { top:20rpx; width: 290rpx; height: 100rpx; align-items:center;}text{ color: #999999; display: inline-flex; position: fixed; margin-top: 20rpx; height: 50rpx; text-align: center; line-height: 50rpx; font-size: 34rpx; font-family: Arial, Helvetica, sans-serif;}.left-bt{ left: 30rpx;}.right-bt { right: 30rpx;}.line{ display: block; position: fixed; height: 1rpx; width: 100%; margin-top: 89rpx; background-color: #eeeeee;}购物车使用
一、效果
2、wxml
返回 <!-- 详情(滑动可移除) --> <!-- 编辑 --> 编辑 完成 全选 合计：¥ {{totalPrice}} 去结算({{selectArr.length}}) 删除 3、wxjs
var base = getApp();var preview=require('../../utils/preview.js');Page({ data: { WxMemberCart: [], total: 0, his: "", plist:[], loaded: true, adminShow: true,//编辑或完成 totalPrice: 0,//总金额allselect: false,//是否全选 selectArr: [], //已选择的商品 hadOnShow: false, }, onLoad: function (e) { _this.onShow(); }, onShow: function (e) { let _this = this if (_this.data.hadOnShow) { return } _this.setData({ hadOnShow: true }) }, goBack: function () { var _this = this; wx.navigateTo({ url: _this.data.his }) },//------------------------- //计算价格 calculateTotal: function () { var selectArr = this.data.selectArr; //已选择的商品 var totalPrice = 0; if (selectArr.length) { //如果存在商品就计算价格 for (var i = 0; i < selectArr.length; i++) { totalPrice += selectArr[i].wx_goodsNum * selectArr[i].wx_productPrice; } totalPrice = totalPrice.toFixed(2); //乘法有点问题, 需要保留一下小数 console.log("计算价格:", totalPrice) this.setData({ totalPrice: totalPrice }) } else { //不存在商品就把总价格置为 0 this.setData({ totalPrice: 0 }) } }, //判断是否为全选 judgmentAll: function () { var WxMemberCart = this.data.WxMemberCart; //初始数据 var selectArr = this.data.selectArr; //已选择的商品 if (selectArr.length == WxMemberCart.length) { //长度相等就是全部选上了 this.setData({ allselect: true }) } else { this.setData({ allselect: false }) } }, //全选 allcheckTap: function () { var that = this; var WxMemberCart = that.data.WxMemberCart; //初始数据 var selectArr = []; //定义空数组 var allselect = !that.data.allselect; //data里的是否全选先改变状态存着 if (allselect) { //如果为真, 初始数据里的每条checked变为true, 然后push到定义的空数组里 for (var i = 0; i < WxMemberCart.length; i++) { WxMemberCart[i].checked = true; selectArr.push(WxMemberCart[i]) } } else { //不为真就变成false, 定义的数组再置空一次 for (var i = 0; i < WxMemberCart.length; i++) { WxMemberCart[i].checked = false; } selectArr = []; } that.setData({ //重新设置数据 WxMemberCart: WxMemberCart, //初始的数据 allselect: allselect, //全选的状态 selectArr: selectArr //已选择的商品 }) that.calculateTotal(); // 最后计算一次价格 (计算价格放到重置数据之前会出问题) }, //单个商品选择 checkTap: function (e) { var index = e.currentTarget.dataset.index; //取到渲染的下标 var WxMemberCart = this.data.WxMemberCart; //初始数据 var selectArr = this.data.selectArr; //已选择的商品数组 WxMemberCart[index].checked = !WxMemberCart[index].checked //没选中的就要选中, 选中了的就取消选中状态 if (WxMemberCart[index].checked) { //如果选中了, 就放到一选择的商品数组里 for (var i = 0; i < WxMemberCart.length; i++) { if (WxMemberCart[i] == WxMemberCart[index]) { selectArr.push(WxMemberCart[index]) } } this.judgmentAll(); //计算价格 } else { //取消选中就从已选择的商品数组里移除 for (var i = 0; i < selectArr.length; i++) { if (selectArr[i].id == WxMemberCart[index].id) { selectArr.splice(i, 1) } } this.judgmentAll(); //选择的时候要判断是不是已经选择了全部的 } this.calculateTotal(); //计算一次价格 console.log("已选择的商品:", selectArr) this.setData({ //重置数据 WxMemberCart: WxMemberCart, selectArr: selectArr }) }, //数量加减 numchangeTap: function (e) { var types = e.currentTarget.dataset.types; //加和减的两张图片上分别设置了types属性var index = e.currentTarget.dataset.index; //获取下标 var WxMemberCart = this.data.WxMemberCart; //初始数据 if (types == 'minus') { //减 var wx_goodsNum = WxMemberCart[index].wx_goodsNum; if (wx_goodsNum <= 1) { //不允许商品数量小于1 , 都添加到购物车了还要减到0是几个意思? 反正有个删除按钮 return; } else { WxMemberCart[index].wx_goodsNum--; this.setData({ WxMemberCart: WxMemberCart }) this.calculateTotal(); //计算价格 } } if (types == "add") { //加 WxMemberCart[index].wx_goodsNum++; //加就不判断了, 加到二十二世纪去都行 this.setData({ WxMemberCart: WxMemberCart }) this.calculateTotal(); //计算价格 } //购物车实时更新某个商品的数量 }, //删除商品 deleteshopTap: function () { var _this = this;var WxMemberCart = this.data.WxMemberCart; //初始数据 var selectArr = this.data.selectArr; //已选择的商品数组 if (selectArr.length) { //如果以选择的商品数组里有长度 for (var i = 0; i < WxMemberCart.length; i++) { for (var j = 0; j 0) { wx.navigateTo({ url: '../order/order?from=cart' }) } else { base.modal({ title: '未选择商品', showCancel: false }) } },});4、wxss
page { padding: 0 0 55px; background-color: #f3f3f3;}.tit { border-bottom: 1rpx solid #ddd; padding: 20rpx 25rpx; display: flex; align-items: center; background-color: #f0f0f0;}.tit-back { flex: 1; text-align: left; color: #576b95;}.tit-text { font-size: 11pt; color: #999; flex: 2;}.tit-tool { flex: 1; text-align: right; color: #576b95;}.fs_12{ font-size: 12pt;}.fs_14{ font-size: 14pt;}.cart_body{ box-sizing: border-box; /* padding: 0 32rpx; */}.cart_item{ box-sizing: border-box; padding-bottom: 100rpx;}.check_img{ width: 40rpx; height: 40rpx; margin-top: 32rpx;}label{ display: flex; padding: 26rpx 0; background-color: #fff; border-bottom: 1rpx solid #eee;}.cart_item_w{ display: flex; width:94vw; margin:0 auto;}.cart_image{ /* width: 192rpx; */ width: 110rpx; height: 110rpx; margin-left: 32rpx;}.cart_img{ width: 100%; height: 100%; border-radius: 8rpx;}.cart_content{ margin-left: 20rpx; flex:1; display: flex; flex-flow: column wrap; justify-content: space-between;}.content_title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; line-clamp: 2; -webkit-box-orient: vertical;}.quans{ width: 20vw; display: flex; color:#999; justify-content: flex-start;}.content_price{ /* width: 40vw; */ /* float: right; */ display: flex; justify-content: space-between;}.goods_number_container{ width: 170rpx; display: flex; /* justify-content: space-between; */ justify-content: flex-end;}.goods_number_icon_container{ width: 50rpx; height:50rpx;}.goods_number_icon{ width:100%; height:100%;}.goods_number{ height: 50rpx; width: 50rpx; flex:1; text-align: center;}.ft_color{ color: #ff6a00;}.cart_total_container{ font-size: 30rpx; height: 100rpx; line-height: 88rpx; background: #fff; position: fixed; bottom:0; left:0; right:0; box-sizing: border-box; padding: 12rpx 32rpx; display: flex;}.checkAllBox{ border-radius: 50%; height: 40rpx; width: 40rpx; margin-top: 23rpx; margin-right: 8rpx;}.totalPrice{ flex:1; margin-left: 40rpx;}.clearingBox{ width: 300rpx; display: flex; justify-content: space-between;}.btn{ width: 140rpx; text-align: center; border-radius: 36rpx; line-height: 72rpx;}.editbtn{ border: 1px solid #666666; background: #fff;}.clearbtn{ /* background: #ff5c4d; color: #fff; */ flex: 1;height: 40px;line-height: 40px;text-align: center;border-radius: 3px;background-color: #576b95;border: 1rpx solid #576b95;color: #fff;margin: 0 0rpx 0 10rpx;}转载声明：本文为博主原创文章，未经博主允许不得转载
⚠️注意 ~
💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！
如有疑问❓可以在评论区留言💬或私信留言💬，尽我最大能力🏃♀️帮大家解决👨🏫！
如果我的文章有帮助到您，欢迎打赏✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~
