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

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

})($)

效果