Django 14 shopping mall project (logic Cart products selected)

1, a single item select logic

([Code] Django 14 shopping mall project already has)

1.1, the final results show

1.2、html

When no click event, get out the front over the parameters C_is_select judgment

1.3、js

When the click event occurs the data through asynchronous request / axf / changecart / clicks views to get inside changecart selected state and the transmission

1.4、views.py

Js sent, after receiving the asynchronous request, data processing

remember that this step is to determine the user's login status, so remember changecart added in a middleware routing which

routes

2, cart or select all

2.1, Logic

2.2、html

2.3、css

Here added a new all_select, modified at several css Lane, here is where all the content currently cart.css

/*底部图标*/
footer .cart span {
    background: url(/static/img/cart_selected.png) no-repeat;
    background-size: 0.513889rem;
}

footer .cart dd {
    color: orange;
}

/*内容*/
#cart {
    padding: 1.5rem 0;
    z-index: +15;
    width: 100%;
    background: #fafafa;
    overflow: hidden;
}

h3 {
    text-align: center;
    position: fixed;
    width: 100%;
    border-bottom: 0.04rem solid lightgray;
    line-height: 1.5rem;
    background: yellow;
    top: 0;
    z-index: +100;
}

.full > section {
    background: lightpink;
}

.full > section > ul {
    border: 0.2rem dashed lightgreen;
    border-width: 0.1rem 0;
    margin-bottom: 0.2rem;
}

.full > section > ul > li {
    padding-left: 0.3rem;
    line-height: 0.8rem;
    font-size: 0.375rem;
}

.clear:after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

.full > section > ul > li > div > p:last-child {
    float: right;
    width: 78%;
}

.full > section > ul > li > div > p:last-child > span {
    padding: 0.15rem;
}

.infoJustify {
    float: left;
    width: 20%;
    height: 0.8rem;
    overflow: hidden;
    text-align: justify;
}

.infoJustify b {
    display: inline-block;
}

.change {
    float: right;
    padding-right: 0.2rem;
}

/*闪送超市*/
.bill {
    line-height: 0.75rem;
    position: relative;
    border-bottom: 0.04rem solid lightgreen;
}

.bill > p {
    padding: 0 0.3rem;
    font-size: 0.3rem;
    color: #d35a00;

}

.bill > p:first-child:before {
    width: 0.2rem;
    height: 0.3rem;
    background: yellow;
    content: ".";
    color: yellow;
    margin-right: 0.2rem;

}

.bill > a {
    border: 0.05rem solid orangered;
    position: absolute;
    border-radius: 0.3rem;
    padding: 0 0.3rem;
    font-size: 0.35rem;
    line-height: 0.65rem;
    top: 0.2rem;
    right: 0.5rem;
}

/*收货时间，收货备注*/
.delivery {
    line-height: 1.5rem;
    border-bottom: 0.04rem solid lightgray;
    font-size: 0.4rem;
    padding: 0 0.3rem;
}

.delivery > span:first-child {
    padding-right: 0.3rem;

}

.delivery > span:nth-child(2) {
    color: orangered;
}

.delivery > span:last-child {
    float: right;

}

.delivery > input {
    height: 0.8rem;
    line-height: 0.8rem;
    border-radius: 0.1rem;
    border-width: 0.04rem;
    width: 70%;

}

.menuList {
    border-bottom: 0.04rem solid lightgray;
    height: 2.5rem;
    position: relative;

}

.confirm , .all_select{
    padding: 0.95rem 0;
    width: 15%;
    height: 2.5rem;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    float: left;
}

.confirm > span , .all_select> span{
    box-sizing: border-box;
    border: 0.04rem solid orange;
    background: white;
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    overflow: hidden;
    border-radius: 50%;
    line-height: 0.6rem;
}

.confirm > span > span ,.all_select> span > span{
    background: yellow;
    font-size: 0.5rem;
    display: block;

}

.menuList > a {
    width: 84%;
    display: inline-block;
    font-size: 0.4rem;
    line-height: 1rem;

}

.menuList > a > img {
    margin-top: 0.25rem;
    width: 25%;
    height: 100%;
    float: left;
}

.menuList > a > p {
    width: 70%;
    height: 1rem;
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*去除a标签的连接蓝色属性 text-decoration设置文本修饰属性*/
    text-decoration: none;
    color: #333;
}

.menuList > section {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    height: 0.75rem;
    border-radius: 1rem;
}

.menuList > section > button {
    background: white;
    border: 1px solid orange;
    border-radius: 1111px;
    color: red;
    display: inline-block;
    text-align: center;
    line-height: 0.65rem;
    font-weight: 900;
    width: 0.75rem;
    height: 0.75rem;
}

.menuList > section > span {
    display: inline-block;
    width: 0.5rem;
    text-align: center;
    line-height: 0.5rem;
    font-size: 0.4rem;

}

.presenPrice:before {
    content: "￥";
    font-size: 0.33rem;

}

/*下单，付钱*/
.payTheBill {
    height: 1.5rem;
    position: relative;
}

.payTheBill .all_select {
    width: 10%;
    padding-top: 0.4rem;
    padding-left: 0.4rem;

}

.payTheBill > p {
    line-height: 1.5rem;
    text-indent: 0.3rem;

}

.payTheBill > p > span:first-child {
    padding-right: 0.8rem;

}

.payTheBill > p > span:last-child {
    padding-left: 0.3rem;
    color: red;

}

.payTheBill > p > span:last-child:before {
    content: "￥";
    font-size: 0.35rem;
}

.payTheBill > a {
    padding: 0 0.7rem;
    line-height: 1.5rem;
    background: yellow;
    position: absolute;
    right: 0;
    top: 0;
}

Some changes at the screenshot:

2.4、js

Was added at the first (red part added)

                if (data["is_all_select"]) {
                   $(".all_select").find("span").find("span").html("√");
                } else {
                    $(".all_select").find("span").find("span").html("");
                }

The addition of a second (red is added)

$(".all_select").click(function () {
        var $all_select = $(this);
        var select_list = [];
        var unselect_list = [];

        $(".confirm").each(function () {
            var $confirm = $(this);
            var cartid = $confirm.parents("li").attr("cartid");
            if ($confirm.find("span").find("span").html().trim()) {
                select_list.push(cartid);
            } else {
                unselect_list.push(cartid);
            }
        });
        if (unselect_list.length > 0) {
            $.getJSON("/axf/allselect", {"cart_list": unselect_list.join("#")}, function (data) {
                console.log(data);
                if (data["status"] === 200) {
                    // 所有的商品变成选中状态
                    $(".confirm").find("span").find("span").html('√');
                    // ”全选“变成选中状态
                    $all_select.find("span").find("span").html('√');
                }
            });
        } else {
            if (select_list.length > 0) {
                $.getJSON("/axf/allselect", {"cart_list": select_list.join("#")}, function (data) {
                    console.log(data);
                    if (data["status"] === 200) {
                        // 所有的商品变成选中状态
                        $(".confirm").find("span").find("span").html('');
                        // ”全选“变成选中状态
                        $all_select.find("span").find("span").html('');
                    }
                });
            }
        }

    });

2.5, view

1, (red part added)

2, (red is added)

def all_select(request):
    cart_list = request.GET.get('cart_list')
    cart_list = cart_list.split("#")
    carts = Cart.objects.filter(id__in=cart_list)
    for cart in carts:
        cart.C_is_select = not cart.C_is_select
        cart.save()

    print(cart_list)
    data = {
        "status": 200,

    }
    return JsonResponse(data=data)

2.6 Routing