共计 5981 个字符，预计需要花费 15 分钟才能阅读完成。
rotuer.js
router.get(‘/changeOneCart’, initMiddleware, controller.default.cart.changeOneCart);
router.get(‘/changeAllCart’, initMiddleware, controller.default.cart.changeAllCart);
controller
app/controller/default/cart.js
单个 check
async changeOneCart() {
var goods_id = this.ctx.request.query.goods_id;
var color = this.ctx.request.query.color;
var goodsResult = await this.ctx.model.Goods.find({“_id”: goods_id});
if (!goodsResult || goodsResult.length == 0) {
this.ctx.body = {
“success”: false,
msg: ‘ 改变状态失败 ’
}
} else {
var cartList = this.service.cookies.get(‘cartList’);
var allPrice = 0; // 总价格
for (var i = 0; i < cartList.length; i++) {
if (cartList[i]._id == goods_id && cartList[i].color == color) {
cartList[i].checked = !cartList[i].checked;
}
// 计算总价
if (cartList[i].checked) {
allPrice += cartList[i].price * cartList[i].num;
}
}
this.service.cookies.set(‘cartList’, cartList);
this.ctx.body = {
“success”: true,
allPrice: allPrice
}
}
}
全选
async changeAllCart() {
var type = this.ctx.request.query.type;
var cartList = this.service.cookies.get(‘cartList’);
var allPrice = 0; // 总价格
for (var i = 0; i < cartList.length; i++) {
if (type == 1) {
cartList[i].checked = true;
} else {
cartList[i].checked = false;
}
// 计算总价
if (cartList[i].checked) {
allPrice += cartList[i].price * cartList[i].num;
}
}
this.service.cookies.set(‘cartList’, cartList);
this.ctx.body = {
“success”: true,
allPrice: allPrice
}
}
view
app/view/default/cart.html
<% include ./public/header.html%>
<!–end header –>
<link rel=”stylesheet” href=”/public/default/css/cart.css” />
<script src=”/public/default/js/cart.js”>
</script>
<!– start banner_x –>
<div class=”banner_x center”>
<a href=”./index.html” target=”_blank”>
<div class=”logo fl”></div>
</a>
<div class=”wdgwc fl ml40″> 我的购物车 </div>
<div class=”wxts fl ml20″> 温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算 </div>
<div class=”dlzc fr”>
<ul>
<li><a href=”./login.html” target=”_blank”> 登录 </a></li>
<li>|</li>
<li><a href=”./register.html” target=”_blank”> 注册 </a></li>
</ul>
</div>
<div class=”clear”></div>
</div>
<div class=”xiantiao”></div>
<div class=”gwcxqbj”>
<div class=”gwcxd center”>
<table class=”table”>
<tr class=”th”>
<th>
<input type=”checkbox” id=”checkAll” /> 全选
</th>
<th>
商品名称
</th>
<th> 单价 </th>
<th> 数量 </th>
<th> 小计 </th>
<th> 操作 </th>
</tr>
<%for(var i=0;i<cartList.length;i++){%>
<tr class=”cart_list”>
<td>
<input type=”checkbox” goods_id=”<%=cartList[i]._id%>” color=”<%=cartList[i].color%>” <%if(cartList[i].checked){%>checked
<%}%> />
</td>
<td>
<div class=”col_pic”>
<img src=”<%=cartList[i].goods_img%>” />
</div>
<div class=”col_title”>
<%=cartList[i].title%>
</div>
</td>
<td class=”price”>
<%=cartList[i].price%> 元
</td>
<td>
<div class=”cart_number”>
<div class=”input_left decCart” goods_id=”<%=cartList[i]._id%>” color=”<%=cartList[i].color%>”>-</div>
<div class=”input_center”>
<input id=”num” name=”num” readonly=”readonly” type=”text” value=”<%=cartList[i].num%>” />
</div>
<div class=”input_right incCart” goods_id=”<%=cartList[i]._id%>” color=”<%=cartList[i].color%>”>+</div>
</div>
</td>
<td class=”totalPrice”>
<%=parseFloat(cartList[i].price)*cartList[i].num%> 元
</td>
<td>
<span><a class=”delete” href=”/removeCart?goods_id=<%=cartList[i]._id%>&color=<%=cartList[i].color%>”> 删除 </a></span>
</td>
</tr>
<%}%>
</table>
</div>
<div class=”jiesuandan mt20 center”>
<div class=”tishi fl ml20″>
<ul>
<li><a href=”./liebiao.html”> 继续购物 </a></li>
<li>|</li>
<li> 共 <span>2</span> 件商品，已选择 <span>1</span> 件 </li>
<div class=”clear”></div>
</ul>
</div>
<div class=”jiesuan fr”>
<div class=”jiesuanjiage fl”> 合计（不含运费）：<span id=”allPrice”><%=allPrice%> 元 </span></div>
<div class=”jsanniu fr”><input class=”jsan” type=”submit” name=”jiesuan” value=” 去结算 ” /></div>
<div class=”clear”></div>
</div>
<div class=”clear”></div>
</div>
</div>
<!– footer –>
<footer class=”center”>
<div class=”mt20″> 小米商城 |MIUI| 米聊 | 多看书城 | 小米路由器 | 视频电话 | 小米天猫店 | 小米淘宝直营店 | 小米网盟 | 小米移动 | 隐私政策 |Select Region</div>
<div>©mi.com 京 ICP 证 110507 号 京 ICP 备 10046444 号 京公网安备 11010802020134 号 京网文 [2014]0059-0009 号 </div>
<div> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </div>
</footer>
</body>
</html>
前端 js
app/public/default/js/cart.js
(function($) {
var app = {
init: function() {
this.initCheckBox();
this.changeCartNum();
this.isCheckedAll();
this.deleteConfirm();
},
deleteConfirm: function() {
$(‘.delete’).click(function() {
var flag = confirm(‘ 您确定要删除吗?’);
return flag;
})
},
initCheckBox() {
$(“#checkAll”).click(function() {
if (this.checked) {
$(“:checkbox”).prop(“checked”, true);
$.get(‘/changeAllCart?type=1’, function(response) {
if (response.success) {
$(“#allPrice”).html(response.allPrice + ‘ 元 ’);
}
});
} else {
$(“:checkbox”).prop(“checked”, false);
$.get(‘/changeAllCart?type=0’, function(response) {
if (response.success) {
$(“#allPrice”).html(response.allPrice + ‘ 元 ’);
}
});
}
});
var _that = this;
$(“.cart_list input:checkbox”).click(function() {
_that.isCheckedAll();
var goods_id = $(this).attr(‘goods_id’);
var color = $(this).attr(‘color’);
$.get(‘/changeOneCart?goods_id=’ + goods_id + ‘&color=’ + color, function(response) {
if (response.success) {
$(“#allPrice”).html(response.allPrice + ‘ 元 ’);
}
});
});
},
// 判断全选是否选择
isCheckedAll() {
var chknum = $(“.cart_list input:checkbox”).size(); //checkbox 总个数
var chk = 0; //checkbox checked=true 总个数
$(“.cart_list input:checkbox”).each(function() {
if ($(this).prop(“checked”) == true) {
chk++;
}
});
if (chknum == chk) {// 全选
$(“#checkAll”).prop(“checked”, true);
} else {// 不全选
$(“#checkAll”).prop(“checked”, false);
}
},
changeCartNum() {
$(‘.decCart’).click(function() {
var goods_id = $(this).attr(‘goods_id’);
var color = $(this).attr(‘color’);
// alert(color);
$.get(‘/decCart?goods_id=’ + goods_id + ‘&color=’ + color, function(response) {
if (response.success) {
$(“#allPrice”).html(response.allPrice + ‘ 元 ’);
$(this).siblings(‘.input_center’).find(‘input’).val(response.num);
var price = parseFloat($(this).parent().parent().siblings(‘.price’).html());
$(this).parent().parent().siblings(‘.totalPrice’).html(response.num * price + “ 元 ”);
}
}.bind(this)); // 注意 this 指向
})
$(‘.incCart’).click(function() {
var goods_id = $(this).attr(‘goods_id’);
var color = $(this).attr(‘color’);
$.get(‘/incCart?goods_id=’ + goods_id + ‘&color=’ + color, function(response) {
if (response.success) {
$(“#allPrice”).html(response.allPrice + ‘ 元 ’);
$(this).siblings(‘.input_center’).find(‘input’).val(response.num);
var price = parseFloat($(this).parent().parent().siblings(‘.price’).html());
$(this).parent().parent().siblings(‘.totalPrice’).html(response.num * price + ‘ 元 ’);
}
}.bind(this));
})
}
}
$(function() {
app.init();
})
})($)
效果
