Django 15 shopping mall project (total calculated and displayed, click on the orders, orders page, pending payment subscript style)

1, the total price

Effect screenshots

1.1、html

1.2, view

In all shopping cart status changes in the method are added

1.3、js

Remember to set the value corresponding to the total price of the click event occurs, there js

2, single-click

Write before the single function of a single original tag into the span, increases id = make_order

2.1, generate orders (js click event)

    $("#make_order").click(function () {
        // 商品判断选中状态
        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);
            }
        });
        // 如果选中状态的商品为0，直接返回
        if(select_list.length===0){
            return
        }
        $.getJSON("/axf/makeorder/",function (data) {
            console.log(data);
            
        })
    });

2.2, back to the server (routing, middleware)

Route

registered in the middleware

2.3, create order model (models.py)

models.py

# 订单
class Order(models.Model):
    O_user = models.ForeignKey(AXFUser, on_delete=models.CASCADE)
    O_price = models.FloatField(default=0)
    O_time = models.DateTimeField(auto_now=True)
    O_status = models.IntegerField(default=ORDER_STATUS_NOT_PAY)
    O_note = models.CharField(max_length=255)

    class Meta:
        db_table = 'axf_order'


# 订单里的商品（OrderGoods对Order是多对1，一个订单里面可以有多个商品）
class OrderGoods(models.Model):
    O_user = models.ForeignKey(Order, on_delete=models.CASCADE)
    O_goods = models.ForeignKey(Goods,on_delete=models.CASCADE)
    O_goods_num = models.IntegerField(default=1)

    class Meta:
        db_table = 'axf_ordergoods'

#生成迁移文件：
python manage.py makemigrations
#执行迁移文件：
python manage.py migrate

Creating success

2.4, the view (the views.py)

def make_order(request):
    # 获取选中状态的商品
    carts = Cart.objects.filter(C_user=request.user).filter(C_is_select=True)
    # 创建订单存入数据
    order = Order()
    order.O_user = request.user
    order.O_price = get_total_price()
    order.save()
    # 循环 存入商品信息
    for cart_obj in carts:
        ordergoods = OrderGoods()
        # ordergoods.O_user里存的是订单号
        ordergoods.O_user = order
        # 商品数量
        ordergoods.O_goods_num = cart_obj.C_goods_num
        # 商品
        ordergoods.O_goods=cart_obj.C_goods
        ordergoods.save()
        cart_obj.delete()

    data = {
        "status": 200,
        # 把订单id传到前端
        "order_id":order.id
    }
    return JsonResponse(data=data)

3, single-click after the jump to the order details

cart.js click event

4, order page

4.1、HTML

{% extends "bese_order.html" %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/order/css/order_detail.css' %}">
{% endblock %}

{% block content %}
    <div id="order_detail" class="container">
        <h6>订单编号： {{ order.id }} </h6>
        <ul>
            {# 查所有订单内商品的内容 ： 被关联的对象.字段名_set.all #}
            {% for ordergoods in order.ordergoods_set.all %}
                <li class="menuList">
                    <a href="#">
                        <img src="{{ ordergoods.O_goods.productimg }}" alt="{{ ordergoods.O_goods.productlongname }}">
                        <p class="longname">{{ ordergoods.O_goods.productlongname }}</p>
                        <p class="presentPrice">{{ ordergoods.O_goods.price }}</p>
                    </a>
                    <section>
                        <span class="num">{{ ordergoods.O_goods_num }}</span>
                    </section>
                </li>
            {% endfor %}

        </ul>
        {#    总价   #}
        <h1 id="total">总价：<span id="total_price">{{ order.O_price }}</span></h1>
        <button id="alipay" class="btn btn-success btn-block">支付</button>
    </div>
{% endblock %}

4.2, view

# 订单详情
def order_detail(request):
    # request:orderid（订单的id）、AXFUser（中间件传递）
    order_id = request.GET.get("orderid")
    order = Order.objects.get(pk=order_id)
    print(order)
    data = {
        "title": "订单详情",
        # 这里的order包含 单个订单的全部信息
        "order": order,
    }
    return render(request, "order/order_detail.html",context=data)

4.3 Routing

Remember registered in the middleware

5, mine pending payment page, Inbound

5.1, pending payment, receipt of data to be transferred (view)

5.1, subscript style (html, css)

#badge1{
    left: 1.8rem;
    top: 5.8rem;
}
#badge2{
    left: 4.2rem;
    top: 5.8rem;
}
.badge {
    background: red;
    color: white;
    position: absolute;
    font-size: 0.35rem;
    min-width: 0.5rem;
    padding: 0.1rem 0.1rem;
    border-radius: 1rem;
}