Django 16购物商城项目（待付款订单显示、付款后订单状态）

1、待付款订单列表

点击待付款跳转到待付款订单列表并显示

1.1、点击跳转（js点击事件）

点击mine页面的待付款，跳转到待付款订单列表页面

1.2、跳转url（路由、中间件）

待付款订单列表页面的路由、中间件

1.3、传递数据（视图）

传递 待付款的订单列表

# mine页面待付款 到 订单列表
def order_not_pay(request):
    orders=Order.objects.filter(O_user=request.user)
    data={
        'title': "订单列表",
        'orders': orders,
    }
    return render(request,'order/order_not_pay.html',context=data)

1.4、显示（待付款订单列表页面html）

显示待付款订单列表

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

{% block ext_css %}
    {{ block.super }}
    {#    <link rel="stylesheet" href="{% static 'axf/order/css/order_not_pay.css' %}">#}
{% endblock %}
{% block ext_js %}
    {{ block.super }}
        <script type="text/javascript" src="{% static 'axf/order/js/order_not_pay.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="order_not_pay" class="container">
        <ol>{% for order in orders %}
            <li>
                <ul class="order" orderid="{{ order.id }}">
                    <h6>订单编号：{{ order.id }}</h6>
                    {% for ordergoods in order.ordergoods_set.all %}
                        <li>
                            <img src="{{ ordergoods.O_goods.productimg }}"
                                 alt="{{ ordergoods.O_goods.productlongname }}">
                        </li>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}</ol>

    </div>
{% endblock %}

2、选择订单支付

2.1、跳转到支付页面（js点击事件）

2.2、点击支付（从待付款变成待收货状态）

html

js(点击跳转)

点击支付后路由

路由解析到视图

def payed(request):
    order_id= request.GET.get("orderid")
    order = Order.objects.get(pk=order_id)
    order.O_status = ORDER_STATUS_NOT_SEND
    order.save()
    data={
        'status':200,
    }
    return JsonResponse(data=data)

2.3、页面截图

3、待付款订单列表页面样式完善

‘axf/order/css/order_not_pay.css’
目前该css所有代码

.menuList {
    border-bottom: 0.04rem solid lightgray;
    position: relative;
    margin: 0.3rem 0 0 0;
}


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

}
/*图片*/
.menuList > a > img {
    width: 13%;
    height: 100%;
    float: left;
}

/*商品名*/
.name{
    width: 40%;
    padding-left: 6% ;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*去除a标签的连接蓝色属性 text-decoration设置文本修饰属性*/
    text-decoration: none;
    color: #333;
}
/*价格*/
.presentPrice {
    width: 30%;
    padding-left: 6% ;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: red;
}
/*数量*/
.num{
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #7a3cff;
}

.num:before {
    content: "x";
}

.presentPrice:before {
    content: "￥";
}

#total {
    margin: 0.3rem 0;
    text-align: center;
    font-size: 0.4rem;
}

#total_price {
    color: red;
}

#total_price:before {
    content: "￥";
}

h6 {
    color: #3c763d;
}

.container > ol > li {
    margin-bottom: 0.6rem;
    border: solid 2px lightgray;
}

.order_list {
    margin: 0 0.5rem 0.5rem 0.5rem;
}
.order>button{
    margin-top: 0.5rem;
}

order_not_pay.html
目前该html所有代码

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

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/order/css/order_not_pay.css' %}">
{% endblock %}
{% block ext_js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'axf/order/js/order_not_pay.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="order_not_pay" class="container">
        <ol>
            {% for order in orders %}
                <h6>订单编号：{{ order.id }}</h6>
                <li>
                    <ul class="order_list">

                        {% for ordergoods in order.ordergoods_set.all %}
                            <li class="menuList">
                                <a href="#">
                                    <img src="{{ ordergoods.O_goods.productimg }}"
                                         alt="{{ ordergoods.O_goods.productname }}">
                                    <span class="name">
                                        {{ ordergoods.O_goods.productname }}
                                        </span>
                                    <span class="presentPrice">
                                        {{ ordergoods.O_goods.price }}
                                        </span>
                                    <span class="num">
                                        {{ ordergoods.O_goods_num }}
                                        </span>
                                </a>
                            </li>
                        {% endfor %}
                        <span orderid="{{ order.id }}" class="order">
                            <button class="btn btn-success btn-block">去支付</button>
                        </span>
                    </ul>
                </li>

            {% endfor %}
        </ol>

    </div>
{% endblock %}

页面效果

4、格式化总价

保留两位小数：