<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 }); }); } }) |
模板简介:该模板名称为【微信小程序绿色地址编辑添加样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。