首页 > 小程序教程 > 微信小程序绿色地址编辑添加样式模板制作设计下载

微信小程序绿色地址编辑添加样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
/*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%;
}
三、js页面代码如下:
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
			});
		});
	}
})

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

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 15,977次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-14
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信素材 微信公众平台 微信模板 自适应 企业网站 响应式 微信文章 单页式简历模板 微信图片
您可能会喜欢的其他模板