微信小程序绿色风格地址金额提交订单样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="cell" wx:if="{{addressList.length == 0}}">
	<text>地址</text>
	<text class="area_select" bindtap="bindCreateNew">请先添加地址</text>
</view>
<view class="cell" wx:else>
	<text>地址</text>
	<picker bindchange="bindPickerChange" value="{{index}}" range="{{addressList}}">
		{{addressList[addressIndex]}}
	</picker>
</view>
<view class="cell">
	<text>金额</text>
	<text class="amount">{{amount}}</text>
</view>
<button class="submit" type="primary" bindtap="confirmOrder">提交订单</button>

二、wxss样式文件代码如下：

.amount:before {
	content: '￥';	
}

.submit {
	margin: 8px;
}

/*单元格*/
.cell {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items:center;
	margin: 4px;
	border-bottom: 1px solid #eee;
	line-height: 28px;
}

.cell:last-child {
	border-bottom: 0;
}

/*label显示字符*/
.cell text:first-child {
	width: 50px;
}

/*请先填写地址*/
.area_select {
	width: 100%;
}

/*选择器*/
picker {
	width: 60%;
}

三、js页面代码如下：

const AV = require('../../../utils/av-weapp.js')
Page({
	data: {
		amount : 0,
		carts: [],
		addressList: [],
		addressIndex: 0
	},
	addressObjects: [],
	onLoad: function (options) {
		this.readCarts(options);
	},
	onShow: function () {
		this.loadAddress();
	},
	readCarts: function (options) {
		var that = this;
		// from carts
		// amount
		var amount = parseFloat(options.amount);
		this.setData({
			amount: amount
		});

		// cartIds str
		var cartIds = options.cartIds;
		var cartIdArray = cartIds.split(',');
		// restore carts object
		for (var i = 0; i < cartIdArray.length; i++) {
			var query = new AV.Query('Cart');
			query.include('goods');
			query.get(cartIdArray[i]).then(function (cart) {
				var carts = that.data.carts == undefined ? [] : that.data.carts;
				carts.push(cart);
				that.setData({
					carts: carts
				});
			}, function (error) {

			});
		}
	},
	confirmOrder: function () {
		// submit order
		var carts = this.data.carts;
		var that = this;
		var user = AV.User.current();
		var order = new AV.Object('Order');
		order.set('user', user);
		order.set('status', 0);
		order.set('amount', this.data.amount);
		// set address
		var address = this.addressObjects[this.data.addressIndex];
		order.set('address', address);
		order.save().then(function (saveResult) {
			if (saveResult) {
				// OrderGoodsMap数组，批量提交
				var orderGoodsMapArray = [];
				// create buys & delete carts
				for (var i = 0; i < carts.length; i++) {
					// 创建订单商品中间表OrderGoodsMap
					var orderGoodsMap = AV.Object('OrderGoodsMap');
					// 遍历购物车对象
					// move cart to buy
					var cart = carts[i];
					orderGoodsMap.set('order', saveResult);
					orderGoodsMap.set('goods', cart.get('goods'));
					orderGoodsMap.set('quantity', cart.get('quantity'));
					orderGoodsMap.set('user', cart.get('user'));
					cart.destroy();
					orderGoodsMapArray.push(orderGoodsMap);
				}
				AV.Object.saveAll(orderGoodsMapArray).then(function () {
	            	// 保存到云端
	            	wx.navigateTo({
	               		url: '../../../../../payment/payment?orderId=' + order.get('objectId') + '&totalFee=' + that.data.amount
	            	});
					
				});
			}
		});
	},
	loadAddress: function () {
		var that = this;
		var user = AV.User.current();
		var query = new AV.Query('Address');
		query.equalTo('user', user);
		query.find().then(function (address) {
			var addressList = [];
			var addressObjects = [];
			for (var i = 0; i < address.length; i ++) {
				// find the default address
				if (address[i].get('isDefault') == true) {
					that.setData({
						addressIndex : i
					});
				}
				addressList.push(address[i].get('detail'));
			}
			that.setData({
				addressList: addressList
			});
			that.addressObjects = address;
		});
	},
	bindPickerChange: function (e) {
		this.setData({
	    	addressIndex: e.detail.value
	    })
	},
	bindCreateNew: function () {
		var addressList = this.data.addressList;
		if (addressList.length == 0) {
			wx.navigateTo({
				url: '../../address/add/add'
			});
		}
	}
})

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