
<view class="address-list">
<view class="item" wx:for="{{addressObjects}}" wx:key="">
<!-- first row -->
<view class="header">
<text class="realname">{{item.realname}}</text>
<text class="mobile">{{item.mobile}}</text>
</view>
<!-- second row -->
<view class="summary">{{item.province}}{{item.city}}{{item.region}}{{item.town}}{{item.detail}}</view>
<!-- third row -->
<view class="footer">
<!-- is default switch -->
<view class="set-default" data-index="{{index}}" bindtap="setDefault">
<!-- circle or success type -->
<icon type="{{item.isDefault == true ? 'success_circle' : 'circle'}}"/>
<text>默认地址</text>
</view>
<!-- edit and delete button -->
<view class="operation">
<view class="container" data-index="{{index}}" bindtap="edit"><image src="../../../images/icon_edit.png" /><text>编辑</text></view>
<view class="container" data-index="{{index}}" bindtap="delete"><image src="../../../images/icon_delete.png" /><text>删除</text></view>
</view>
</view>
</view>
</view>
<button bindtap="add" type="primary" class="address-add">添加</button>
|
/*page background*/
page {
background: #eee;
}
/*that means a record*/
.item {
margin-bottom: 20rpx;
background: #fff;
padding: 20rpx;
}
/*姓名与手机号码*/
.item .header {
font-size: 36rpx;
color: #333;
line-height: 72rpx;
}
.item .header text {
margin-right: 40rpx;
}
.item .summary {
color: #999;
font-size: 32rpx;
line-height: 60rpx;
}
.item .footer {
border-top: 1px solid #ccc;
font-size: 30rpx;
color: #999;
padding-left: 10rpx;
padding-top: 10rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*设为默认地址*/
.set-default {
display: flex;
align-items: center;
}
.set-default text {
margin-left: 10rpx;
}
/*编辑与删除操作*/
.item .footer .operation {
width: 280rpx;
display: flex;
}
.item .footer .operation .container {
display: flex;
align-items: center;
}
.item .footer .operation .container image {
width: 60rpx;
height: 60rpx;
}
.item .footer .operation .container text {
margin-left: 10rpx;
}
/*地址列表包装容器*/
.address-list {
margin-bottom: 56px;
}
/*添加地址按钮*/
.address-add {
position: fixed;
bottom: 0;
width: 100%;
}
|
const AV = require('../../../utils/av-weapp.js')
Page({
add: function () {
wx.navigateTo({
url: '../add/add'
});
},
onShow: function () {
this.loadData();
},
setDefault: function (e) {
// 设置为默认地址
var that = this;
// 取得下标
var index = parseInt(e.currentTarget.dataset.index);
// 遍历所有地址对象设为非默认
var addressObjects = that.data.addressObjects;
for (var i = 0; i < addressObjects.length; i++) {
// 判断是否为当前地址,是则传true
addressObjects[i].set('isDefault', i == index)
}
// 提交网络更新该用户所有的地址
AV.Object.saveAll(addressObjects).then(function (addressObjects) {
// 成功同时更新本地数据源
that.setData({
addressObjects: addressObjects
});
// 设置成功提示
wx.showToast({
title: '设置成功',
icon: 'success',
duration: 2000
});
}, function (error) {
// 异常处理
});
},
edit: function (e) {
var that = this;
// 取得下标
var index = parseInt(e.currentTarget.dataset.index);
// 取出id值
var objectId = this.data.addressObjects[index].get('objectId');
wx.navigateTo({
url: '../add/add?objectId='+objectId
});
},
delete: function (e) {
var that = this;
// 取得下标
var index = parseInt(e.currentTarget.dataset.index);
// 找到当前地址AVObject对象
var address = that.data.addressObjects[index];
// 给出确认提示框
wx.showModal({
title: '确认',
content: '要删除这个地址吗?',
success: function(res) {
if (res.confirm) {
// 真正删除对象
address.destroy().then(function (success) {
// 删除成功提示
wx.showToast({
title: '删除成功',
icon: 'success',
duration: 2000
});
// 重新加载数据
that.loadData();
}, function (error) {
});
}
}
})
},
loadData: function () {
// 加载网络数据,获取地址列表
var that = this;
var query = new AV.Query('Address');
query.equalTo('user', AV.User.current());
query.find().then(function (addressObjects) {
that.setData({
addressObjects: addressObjects
});
});
}
})
|
模板简介:该模板名称为【微信小程序绿色地址编辑添加样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。