shoppingcart.js
// 引入配置文件config
const urlList = require('../../utils/config.js');
var app = getApp();
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 orders = new Array();
// 生成模拟数据
if (orders.length == 0) {
var obj0 = new Object();
obj0.id = 1;
obj0.name = 'CTS项目';
obj0.pic = '../../images/1.png';
obj0.quantity = 3;
obj0.nowPrice = 77;
obj0.selected = true;
orders[0] = obj0;
var obj1 = new Object();
obj1.id = 2;
obj1.name = 'WMS项目';
obj1.pic = '../../images/2.png';
obj1.quantity = 5;
obj1.nowPrice = 66;
obj1.selected = true;
orders[1] = obj1;
wx.setStorageSync("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(); //重新加载页面
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
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.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: 80px;
font-size: 15px;
font-weight: bold;
background-color: #E4393C;
height: 60px;
text-align: center;
line-height: 60px;
color:#ffffff;
}
.icon{
margin-right: 10px;
}