ジャンゴ16ショッピングモールプロジェクト
1、保留中のオーダーリスト
クリックして支払われるべき未決注文リストおよび表示にジャンプします
1.1、（JSクリックイベント）をジャンプします
鉱山ページをクリック支払われる、保留中のオーダーリストページにジャンプします
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.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 /オーダー/ 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、合計金額のフォーマット
小数点以下：
