Django 15购物商城项目（总价计算和显示、点击下单、订单页面，待付款角标样式）

1、总价

效果截图

1.1、html

1.2、视图

在所有购物车状态改变方法里都加入

1.3、js

对应js里有点击事件发生时也要记得设置 总价 的值

2、点击下单

这里写下单功能前把 下单 原本的a标签改成了span，增加了id=make_order

2.1、生成订单（js点击事件）

    $("#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、传回服务器（路由、中间件）

路由

在中间件中注册

2.3、创建订单模型（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

创建成功

2.4、视图（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、点击下单后跳转到订单详情

cart.js点击事件

4、订单页面

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、视图

# 订单详情
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、路由

记得在中间件中注册

5、mine页面 待付款、待收货

5.1、待付款、待收货数据传递（视图）

5.1、角标样式（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;
}