微信小程序（五）购物车

shoppingcart.wxml

<!--pages/shoppingcart/shoppingcart.wxml-->
<view class="content"><view class="info"><view class="line"></view><view class="receive">购物</view><view class="line"></view><view class="items"><checkbox-group bindchange="checkboxChange"><block wx:for="{{orders}}"><view class="item"><view class="icon"><label for="{{item.id}}"><checkbox id="{{item.id}}" value="{{item.id}}" checked="{{item.selected}}" hidden/><icon type="{{item.selected==true?'success':'circle'}}"color="#E4393C" data-value="{{item.id}}" size="20" /></label></view><view class="pic"><image src="{{item.pic}}" style="width:80px;height:80px;"></image></view><view class="order"><view class="title">{{item.name}}</view><view class="desc"><view>数量: {{item.quantity}}</view></view><view class="priceInfo"><view class="price">￥{{item.nowPrice}}</view><view class="minus" id="{{item.id}}" bindtap="minusOrders">-</view><view class="count">{{item.quantity}}</view><view class="add" id="{{item.id}}" bindtap="addOrders">+</view></view></view></view><view class="line"></view></block></checkbox-group><checkbox-group bindchange="checkAll"><view class="totalInfo"><view class="all"><view><label for="boxAll"><checkbox checked="{{selectedAll}}" id="boxAll" hidden/><icon type="{{selectedAll==true?'success':'circle'}}"color="#E4393C" data-value="{{item.id}}" size="20" /></label></view><view>全选</view></view><view class="amount"><view class="total">总计:￥{{totalPrice}}元</view><view>不含运费，已优惠￥0.00</view></view><view class="opr">去结算</view></view></checkbox-group></view></view></view>

shoppingcart.js

// pages/shoppingcart/shoppingcart.js
Page({data:{orders: [], //加人到购物车里的商品集合selectedAll:false, //全选按钮标志位，true 代表全选选中，false代表全选未选中totalPrice:0 //总金额},onLoad:function (options) {this.loadOrders();wx.setNavigationBarTitle({ //动态修改页面标题文字title: '购物车'})wx.setNavigationBarColor({frontColor: '#000000', //导航文字颜色backgroundColor: '#ffffff', //导航背景色animation: { //动画效果duration: 400,timingFunc: 'easeIn'}})},loadOrders:function () { //加载购物车里的商品var orders = wx.getStorageSync('orders'); //从本地级存数据orders里获取数据var newOrders = [];var totalPrice = 0;var selectedAll = true;for (var i = 0; i < orders.length; i++) {var order = orders[i];if (order.selected) { //购物车里的每件商品都有一个selected属性，selected等于true时代表这件商品被选中，要计算金额totalPrice += order.nowPrice * order.quantity; //计算选中商品的金额} else {selectedAll = false; //购物车里的商品，如果有一一件是未选中的，selectedAll全选标志位就等于false}newOrders.push(order);}wx.setStorageSync("orders", newOrders); //重新加入缓存this.setData({totalPrice:totalPrice,orders:newOrders,selectedAll: selectedAll});//数据绑定到页面里},checkboxChange: function (e) { //每件商品前的复选框操作函数var ids = e.detail.value; //会把选中的复选框的id值，以数组集合的形式传递过来var orders = wx.getStorageSync('orders');var totalPrice = 0;var newOrders = [];for (var i = 0; i < orders.length; i++) {var order = orders[i];var flag = true;for (var j = 0; j < ids.length; j++) {if (order.id == ids[j]) { //传递过来的ids数组集合值，都是选中的 商品，需要计算总的金额totalPrice += order.nowPrice * order.quantity;order.selected = true; //代表该商 品是选中状态flag = false; //代表该商品是选中状态}}if (flag) { //代表该商品是未选中状态order.selected = false;}newOrders.push(order);}wx.setStorageSync("orders", newOrders); //重新加人缓存数据this.loadOrders();//重新加载页面}, checkAll: function (e) { //全选复选框操作函数var orders = wx.getStorageSync("orders");console.log(e);var newOrders = [];var selectedAll = this.data.selectedAll;for (var i = 0; i < orders.length; i++) {var order = orders[i];if (selectedAll) { //如果当前状态值是全选中， 那么再单击的时候，全选复选框应该为未选中状态order.selected = false;} else {order.selected = true;}newOrders.push(order);}wx.setStorageSync("orders", newOrders) //重新加入缓存数据this.loadOrders(); //重新加载页面},addOrders: function (e) { //添加商品数量 函数var id = e.currentTarget.id;var orders = wx.getStorageSync('orders');var addOrders = new Array();for (var i = 0; i < orders.length; i++) {var order = orders[i];if (order.id == id) {var quantity = order.quantity;order.quantity = quantity + 1; //将该件商品数量加1}addOrders[i] = order;}wx.setStorageSync('orders', addOrders); //重新加人缓存数据this.loadOrders(); //重新加载页面},minusOrders: function (e) { //减少商品数量函数console.log(e);var id = e.currentTarget.id;var orders = wx.getStorageSync('orders');var addOrders = new Array();var add = true;for (var i = 0; i < orders.length; i++) {var order = orders[i];if (order.id == id) {var count = order.quantity;if (count >= 2) {order.quantity = count - 1; //将该件商 品数量减1}}addOrders[i] = order;}wx.setStorageSync('orders', addOrders); //重新加人缓存数据this.loadOrders(); //重新加载页面}})

shoppingcart.wxss

/* pages/shoppingcart/shoppingcart.wxss */
.content {font-family: "Microsoft YaHei";height: 600px;background-color: #F9F9F8;
}.info {background-color: #ffffff;
}.line {border: 1px solid #CCCCCC;opacity: 0.2;
}.receive {display: flex;flex-direction: row;padding: 10px;
}.item {display: flex;flex-direction: row;padding: 10px;align-items: center;
}.order {width: 100%;height: 87px;
}.title {font-size: 15px;
}.desc {display: flex;flex-direction: row;font-size: 13px;color: #cccccc;
}.desc view {margin-right: 10px;
}.priceInfo {display: flex;flex-direction: row;margin-top: 10px;
}.price {width: 65%;font-size: 15px;color: #ff0000;text-align: left;
}.minus,
.add {border: 1px solid #cccccC;width: 25px;text-align: center;
}.count {border-top: 1px solid #cccccc;border-bottom: 1px solid #cCCCCC;width: 40px;text-align: center;
}.totalInfo {display: flex;flex-direction: row;height: 60px;
}.all {align-items: center;Padding-left: 10px;width: 20%;font-size: 12px;margin-top: 10px;
}.amount {width: 50%;font-size: 13px;text-align: right;
}.total {font-size: 16px;color: #ff0000;font-weight: bold;margin-bottom: 10px;
}.opr {position: absolute;right: 0px;width: 92px;font-size: 15px;font-weight: bold;background-color: #E4393C;height: 60px;text-align: center;line-height: 60px;color: #ffffff;
}.icon {margin-right: 10px;
}

效果图

微信小程序（五）购物车相关推荐

微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...
小程序判断数组的index是否为空_微信小程序之购物车功能（仅学习）
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序：购物车总结（商品左右联动）
微信小程序开发之购物车总结之前开发小程序也是一头雾水,也走了很多的坑今天写出来给大家分享一下开发过程中所走的弯路,加以总结,点滴积累,供大家参考,也希望大佬们指正. 说起购物车那也的有商品列表,列表 ...
微信小程序商城购物车页二维数组怎么做
微信小程序购物车二维数组不同商家不同商品版本需求:电商平台内有众多不同商家,购物车页需要购买的产品以商家的类目作为分类,并满足基本的购物车需求: http://www.kundonghui.co ...
微信小程序之购物车 —— 微信小程序实战商城系列（5）
续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车也发现了自己的不足之处: 余额不 ...

微信小程序（五）购物车

微信小程序（五）购物车相关推荐

最新文章

热门文章