egg(96上)–egg之购物车之check选中

jiezi

6 年前

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” />

<!– 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”>

<%for(var i=0;i<cartList.length;i++){%>

<td>
<input type=”checkbox” goods_id=”<%=cartList[i]._id%>” color=”<%=cartList[i].color%>” <%if(cartList[i].checked){%>checked
<%}%> />
</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”>

</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();
})

})($)
效果