微信小程序商城15天从零实战视频课程-收货地址列表
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: {}, // 设置请求的 header
success: 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 () {
// fail
setTimeout(function () {
wx.showToast({
title: "获取地址失败",
duration: 2000
})
// setTimeout(function () {
// wx.navigateBack({
// delta: 1, // 回退前 delta(默认为1) 页面
// })
// }, 2000)
}, 100)
},
complete: function () {
// complete
wx.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.value
if (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, CONNECT
header: {
'content-type': 'application/json'
}, // 设置请求的 header
success: 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: {}, // 设置请求的 header
success: 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.****.net/course/detail/19437