egg(95下)--egg之購物車之異步改變數量

router.js

router.get('/incCart', initMiddleware, controller.default.cart.incCart);

    router.get('/decCart', initMiddleware, controller.default.cart.decCart);

controller

app/controller/default/cart.js

增長

async incCart() {

        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.length == 0) {
            this.ctx.body = {
                "success": false,
                msg: '修改數量失敗'
            }
        } else {

            var cartList = this.service.cookies.get('cartList');
            var currentNum = 0; //當前數量
            var allPrice = 0; //總價格
            for (var i = 0; i < cartList.length; i++) {
                if (cartList[i]._id == goods_id && cartList[i].color == color) {
                    cartList[i].num += 1;
                    currentNum = cartList[i].num;

                }
                if (cartList[i].checked) {
                    allPrice += cartList[i].price * cartList[i].num;
                }
            }
            this.service.cookies.set('cartList', cartList);


            this.ctx.body = {
                "success": true,
                num: currentNum,
                allPrice: allPrice
            }
        }

    }

減小

async decCart() {

        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.length == 0) {
            this.ctx.body = {
                "success": false,
                msg: '修改數量失敗'
            }
        } else {

            var cartList = this.service.cookies.get('cartList');
            var currentNum = 0; //當前數量
            var allPrice = 0; //總價格
            for (var i = 0; i < cartList.length; i++) {
                if (cartList[i]._id == goods_id && cartList[i].color == color) {
                    if (cartList[i].num > 1) {
                        cartList[i].num -= 1;
                    }
                    currentNum = cartList[i].num;

                }

                if (cartList[i].checked) {
                    allPrice += cartList[i].price * cartList[i].num;
                }
            }
            this.service.cookies.set('cartList', cartList);


            this.ctx.body = {
                "success": true,
                num: currentNum,
                allPrice: allPrice
            }
        }



    }

view

app/view/default/cart.html

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

前端js

app/public/default/js/cart.js

(function($) {

    var app = {
        init: function() {
            this.initCheckBox();

            this.changeCartNum();
        },
        initCheckBox() {
            $("#checkAll").click(function() {
                if (this.checked) {
                    $(":checkbox").prop("checked", true);
                } else {
                    $(":checkbox").prop("checked", false);
                }
            });



            $(".cart_list input:checkbox").click(function() {
                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) {
                    console.log(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();
    })

})($)

效果