微信小程序商城15天从零实战视频课程-收货地址列表

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

js代码

// pages/addr/addr.js
Page({ data: {addrlist: [{id: 1,name: "公司",phone: "13516821613",postNo: "41000",province: "浙江",city: "杭州",area: "余杭区",street: "东岗路118号",desc: "雷恩国际科技创新园13xx",isDefault: true,isLast: false},{id: 2,name: "家里",phone: "13516821613",postNo: "41000",province: "浙江",city: "杭州",area: "余杭区",street: "星源北路",desc: "美耀湾1-xxx",isDefault: false,isLast: false},{id: 3,name: "大伯",phone: "18670321728",postNo: "41000",province: "浙江",city: "杭州",area: "余杭区",street: "藕花洲大姐",desc: "擎天半岛5-xxx",isDefault: false,isLast: true}]},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数},//重新加载服务端中的收获地址updateAddr: function () {var that = this;wx.showToast({title: "Loading...",icon: "loading",duration: 300000})wx.request({url: 'https://www.yaoyiwangluo.com/wx/addr_list.asp',//data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: function (res) {console.log('getlist:', res.data)for (var i = 0; i < res.data.length; i++) {var addr = res.data[i];if (i == res.data.length - 1) {addr.isLast = true;} else {addr.isLast = false;}}that.setData({addrlist: res.data})},fail: function () {// failsetTimeout(function () {wx.showToast({title: "获取地址失败",duration: 2000})// setTimeout(function () {//   wx.navigateBack({//     delta: 1, // 回退前 delta(默认为1) 页面//   })// }, 2000)}, 100)},complete: function () {// completewx.hideToast();}})},onReady: function () {// 页面渲染完成},onShow: function () {// 页面显示//this.updateAddr();},onHide: function () {// 页面隐藏},onUnload: function () {// 页面关闭},onPullDownRefresh: function () {var that = this;setTimeout(function () {//that.updateAddr();wx.stopPullDownRefresh();console.log("stoppull")}, 2000)},//默认地址 处理函数beDefault: function (e) {//console.log(e.target)var id = e.target.dataset.id;var flag = e.detail.valueif (flag) {console.log(id)wx.showToast({title: "Loading",icon: "loading",duration: 900000})var that = this;wx.request({//url: 'http://192.168.43.63:8080/Wxmini/addr_bedefault.do?id=' + id,// data: {},url: 'https://www.yaoyiwangluo.com/wx/addr_list.asp',method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {'content-type': 'application/json'}, // 设置请求的 headersuccess: function (res) {var addrs = that.data.addrlist;console.log(addrs)for (var i = 0; i < addrs.length; i++) {//console.log(addrs[i])var addr = addrs[i]if (addr.id == id) {addr.isDefault = true;//console.log(addr)} else {addr.isDefault = false;}if (i == addrs.length - 1) {addr.isLast = true;} else {addr.isLast = false;}}console.log("over", addrs)that.setData({addrlist: addrs})setTimeout(function () {wx.showToast({title: "更改成功",duration: 1500})}, 100)},fail: function () {wx.showModal({content: "更改默认地址失败",showCancel: false})},complete: function () {wx.hideToast();}})}},//跳转到 新增页面navigateToAdd: function (e) {wx.navigateTo({url: '/pages/huiyuan/addr/edit'})},//跳转到 修改页面navigateToEdit: function (e) {var id = e.target.dataset.id;console.log(id)wx.navigateTo({url: '/pages/huiyuan/addr/edit?id=' + id})},//删除地址 函数delAddr: function (e) {var id = e.target.dataset.id;console.log(id)var that = this;wx.showModal({title: "警告",content: "是否删除该地址?",success: function (res) {if (res.confirm) {wx.showToast({title: "Loading",icon: "loading",duration: 900000})wx.request({//url: 'http://192.168.43.63:8080/Wxmini/addr_del.do?id=' + id,url:'http://www.yaoyiwangluo.com/wx/addr_list.asp',data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: function (res) {setTimeout(function () {wx.showToast({title: "删除成功",duration: 1500})}, 100)var addrs = that.data.addrlist;for (var i = 0; i < addrs.length; i++) {var addr = addrs[i]if (addr.id == id) {addrs.splice(i, 1);}}//根据索引顺序更改对应的 isLast值,确保页面正确显示for (var i = 0; i < addrs.length; i++) {if (i == addrs.length - 1) {addrs[i].isLast = true;} else {addrs[i].isLast = false;}}console.log("over", addrs)that.setData({addrlist: addrs})},fail: function () {wx.showModal({content: "操作失败,未删除此地址!",showCancel: false})},complete: function () {wx.hideToast();}})}}})}
})

wxml代码

<view style='background:#eee;'><!--pages/addr/addr.wxml--><scroll-view id='addrlist' scroll-y="true"><block wx:for="{{addrlist}}" wx:key="addr"><view class='list-item' wx:if="{{item.isDefault}}"><view class='item-head'><text>{{item.name}}</text><text class='right'>18670321728</text></view><view class='item-desc'><text>{{item.province}}省{{item.city}}市{{item.area}}</text><text>{{item.street}}</text><text>{{item.desc}}</text></view><view class='item-edit'><view class='left chk-active'><switch type="checkbox" disabled checked /><text class='ctr'>默认地址</text></view><view class='right'><text class='icon_edit' bindtap="navigateToEdit" data-id="{{item.id}}">编辑</text> -<text class='icon_trash' bindtap="delAddr" data-id="{{item.id}}">删除</text></view></view></view></block><block wx:for="{{addrlist}}" wx:key="addr"><view class='list-item' wx:if="{{item.isDefault==false}}"><view class='item-head'><text>{{item.name}}</text><text class='right'>18670321728</text></view><view class='item-desc'><text>{{item.province}}省{{item.city}}市{{item.area}}</text><text>{{item.street}}</text><text>{{item.desc}}</text></view><view class='item-edit'><view class='left'><switch type="checkbox" bindchange="beDefault" data-id="{{item.id}}" checked="{{item.isDefault}}" /><text class='ctr'>设为默认</text></view><view class='right'><text class='icon_edit' bindtap="navigateToEdit" data-id="{{item.id}}">编辑</text> -<text class='icon_trash' bindtap="delAddr" data-id="{{item.id}}">删除</text></view></view></view></block><view class='list-item' ><view class='item-head'><text>测试</text><text class='right'>18670321728</text></view><view class='item-desc'><text>浙江省杭州市江干区</text><text>东岗路118号</text><text>雷恩国际</text></view><view class='item-edit'><view class='left'><switch type="checkbox" bindchange="beDefault" data-id="1" checked="{{true}}" /><text class='ctr'>设为默认</text></view><view class='right'><text  bindtap="navigateToEdit" data-id="1">编辑</text> -<text  bindtap="delAddr" data-id="1">删除</text></view></view></view><view class='kongbai'></view></scroll-view><view id='add' bindtap='navigateToAdd'>添加新地址</view>
</view>

wxss代码

/* pages/addr/addr.wxss */#addrlist {height: 1146rpx;margin-bottom: 45rpx;color: #666;font-family: 'Times New Roman', Times, serif;
}#add {padding: 30rpx 0px;text-align: center;background: #f31;color: white;position: absolute;width: 100%;bottom: 0px;
}.list-item {font-size: 16px;padding: 30rpx;padding-bottom: 80rpx;margin-bottom: 30rpx;background: white;
}
.item-head {padding-bottom: 20rpx;
}
.item-desc {font-size: 16px;
}
.item-edit {margin-top: 20rpx;padding-top: 20rpx;border-top: 1px #ccc solid;
}
.right {padding-top: 10rpx;float: right;padding-right: 20rpx;
}
.left {float: left;vertical-align: middle;
}
.chk-active {color: #f31;
}
.ctr {position: relative;top: 6rpx;
}.kongbai{ height: 50rpx;}

欢迎大家收看我的视频教程：微信小程序商城15天从零实战视频课程
https://edu.csdn.net/course/detail/19437

微信小程序商城15天从零实战视频课程-收货地址列表相关推荐

视频教程-微信小程序商城15天从零实战课程-微信开发
微信小程序商城15天从零实战课程 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥499.00 立即订阅 ...
uniapp开发微信小程序如何调取自带的地址管理获取用户收货地址
handleChoiceAddress(){let that = this// 1 获取权限状态wx.getSetting({success:(result)=>{//2 获取权限状态当属性名 ...
视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习课程介绍本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-翟东平-专题视频课程...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-2445人已学习课程介绍微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识. 微信小 ...
零基础开发一款微信小程序商城
一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定. 主要是讲一个开源的微信小程 ...
微信小程序商城 (后台JAVA)
微信小程序商城(Java版) 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 mybatis3.4.1 1.3 shiro1.3.2 1.4 se ...
【程序源代码】微信小程序商城-最新源码
关键字:微信小程序商城源码前后端都有正文 | 内容 01 - 基于Spring Boot和微信小程序框架开发.其中包括微信小程序和后台管理端,功能上常用的功能都有包括:分销(支持三级).团购(拼 ...
【程序源代码】微信小程序商城，微信小程序微店
关键字:开源微信小程序商城正文 | 内容 01 - 商城前端使用uni-app开发, 可打包部署到微信小程序, APP, H5,系统后台则是用java语言开发. https://gitee.co ...

微信小程序商城15天从零实战视频课程-收货地址列表

js代码

wxml代码

wxss代码

微信小程序商城15天从零实战视频课程-收货地址列表相关推荐

最新文章

热门文章