支付按钮
支付原理
点击支付按钮就调用支付宝接口
调用接口，用户扫描生成的二维码支付之后就可以支付。
oeder_detail添加点击事件：
{# 导入css #}
{% block ext_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'peiqi1/order/css/order_detail.css' %}">
{% endblock %}新建order_detail.js文件
$(function(){
$('#alipay').click(function(){
console.log('支付')
})
})支付之后订单状态
支付之后，支付宝返回给用户支付完成，支付宝服务端以及用户客户端都会告诉服务器支付完成，如果两边都返回支付成功订单就变成已支付，如果客户端返回支付成功而支付宝服务端没有返回，那么订单状态就是已支付未确认。
个人中心——待付款
views:添加订单状态
def mine(request):
user_id = request.session.get('user_id')
data = {
'title': '我的',
'is_login': False, # 判断是否登录，默认为未登录
}
if user_id: # 如果登录，有user_id
user = peiqi1user.objects.get(pk=user_id)
data['is_login'] = True
data['username'] = user.u_usename # 用户名
data['icon'] = MEDIA_KEY_PREFIX+user.u_icon.url
# 未支付的商品条目数
data['order_not_pay'] = Order.objects.filter(o_user=user).filter(o_status=ORDER_STATUS_NOT_PAY)
# 已付款但未收
data['order_not_receive'] = Order.objects.filter(o_user=user).filter(o_status=ORDER_STATUS_NOT_RECEIVE)
return render(request, 'main/mine.html', context=data)之后我们要呈现在mine页面上，给未付款选项上添加一个徽章，提示未付款的单数。
mine.css:
.mine #nav ul, .mine menu ul {
display: flex;
justify-content: space-around;
}
.mine #nav ul li, .mine menu ul li{
position: relative;
}
.mine #nav ul li dl, .mine menu ul li dl {
text-align: center;
}
.mine #nav ul li > span{
right:0;
position: absolute;
color: white;
background: red;
}mine.html:
第3行添加了一个bootstrap样式
<li>
<dl>
<span class="badge">{{ order_not_pay }}</span>
<dt>
<span class="glyphicon glyphicon-usd"></span>
</dt>
<dd>待付款</dd>
</dl>
</li>测试：
接下来给个人中心的待付款图标添加点击事件，点击待付款图标，会出现待付款列表（点击待收货也是同理）。
给li标签添加选择器:
<li id="not_pay">
<dl>
<span class="badge">{{ order_not_pay }}</span>
<dt>
<span class="glyphicon glyphicon-usd"></span>
</dt>
<dd>待付款</dd>
</dl>
</li>接着mine.js添加点击事件：
$(function () {
$('#not_login').click(function(){
window.open('/peiqi1/login',target='_self'); /* 利用js在当前窗口打开页面跳转至登录页面*/
})
$('#regis').click(function(){
window.open('/peiqi1/register/', target='_self'); /*利用js在当前窗口打开网页跳转至注册页面*/
})
$('#not_pay').click(function(){
window.open('/peiqi1/orderlistnotpay/', target='_self');
})
})添加orderlistnotpay的url:
url(r'^orderlistnotpay/', views.order_list_not_pay, name='orderlistnotpay'),添加入中间件中:
REQUIRE_LOGIN = [
'/peiqi1/cart/',
'/peiqi1/orderdetail/',
'/peiqi1/orderlistnotpay/',
]views:
def order_list_not_pay(request):
orders = Order.objects.filter(o_user=request.user)
data = {
'title': '订单列表',
'orders': orders,
}
return render(request, 'order/order_list_not_pay.html', context=data)测试:
接下来实现点击每一个订单跳转到对应的支付界面
首先给标签添加类：（第4行）
<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 %}新建js事件：别忘记html中导入事件
order_list_not_pay:
$(function(){
$('.order').click(function(){
var $order = $(this);
var order_id = $order.attr('orderid'); /*获取orderid*/
window.open('/peiqi1/orderdetail/?orderid='+ order_id, target='_self');
})
})个人中心——待收货
支付成功后，待付款的订单应该移入待收获栏中。
views:
def mine(request):
user_id = request.session.get('user_id')
data = {
'title': '我的',
'is_login': False, # 判断是否登录，默认为未登录
}
if user_id: # 如果登录，有user_id
user = peiqi1user.objects.get(pk=user_id)
data['is_login'] = True
data['username'] = user.u_usename # 用户名
data['icon'] = MEDIA_KEY_PREFIX+user.u_icon.url
# 未支付的商品条目数
data['order_not_pay'] = Order.objects.filter(o_user=user).filter(o_status=ORDER_STATUS_NOT_PAY).count
# 已付款但未收
data['order_not_receive'] = Order.objects.filter(o_user=user).filter(o_status__in=[ORDER_STATUS_NOT_RECEIVE, ORDER_STATUS_NOT_SEND]).count
return render(request, 'main/mine.html', context=data)mine.html:
<li id="not_pay">
{# 如果数量不是0就在图标右上角显示数量 #}
{% ifnotequal order_not_pay 0 %}
<span class="badge">
{{ order_not_pay }}
</span>
{% endifnotequal %}
<dl>
<dt>
<span class="glyphicon glyphicon-usd"></span>
</dt>
<dd>待付款</dd>
</dl>
</li>
<li>
{# 如果数量不是0就在图标右上角显示数量 #}
{% ifnotequal order_not_receive 0 %}
<span class="badge">
{{ order_not_receive }}
</span>
{% endifnotequal %}
<dl>
<dt>
<span class="glyphicon glyphicon-envelope"></span>
</dt>
<dd>待收货</dd>
</dl>
</li>点击支付按钮需要修改订单状态
order_detail.js:
$(function(){
$('#alipay').click(function(){
console.log('支付');
var orderid = $(this).attr('orderid');
$.getJSON('peiqi1/payed/', {'orderid': orderid}, function(data) {
console.log(data);
})
})
})接下来写Payed接口：
添加url:
url(r'^payed/', views.payed, name='payed'),views:
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,
'msg': 'payed success'
}
return JsonResponse(data)order_detail.js:
$(function(){
$('#alipay').click(function(){
console.log('支付');
var orderid = $(this).attr('orderid');
$.getJSON('/peiqi1/payed/', {'orderid': orderid}, function(data) {
console.log(data);
if(data['status']===200){
window.open('/peiqi1/mine/', target='_self');
}
})
})
})美化待付款界面
新建order_list_not_pay.css:(记得在html中导入)
/**************menu***************/
.menuList {
border-bottom: 0.04rem solid lightgrey;
height: 2.5rem;
position: relative;
}
.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;
}
.menuList > section {
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
height: 0.75rem;
border-radius: 1rem;
}
.menuList > section > span {
display: inline-block;
width: 0.5rem;
text-align: center;
line-height: 0.5rem;
font-size: 0.4rem;
}
.menuList > section >span:before{
content: 'x';
}
.presentPrice {
color: red;
}
.presentPrice:before {
content: "¥";
font-size: 0.33rem;
}
.total_price{
text-align: center;
}
#total_price{
margin: 0.3rem;
text-align: center;
color: red;
}
#total_price:before{
content:'￥';
}order_list_not_pay.html:
{% extends 'base_order.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'peiqi1/order/css/order_list_not_pay.css' %}">
{% endblock %}
{% block ext_js %}
{{ block.super }}
<script type="text/javascript" src="{% static 'peiqi1/order/js/oder_list_not_pay.js' %}"></script>
{% endblock %}
{% block content %}
<div id="order_list_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 class="menuList">
<a href="#">
<img src="{{ ordergoods.o_goods.productimg }}"
alt="{{ ordergoods.c_goods.productlongname }}">
<p>{{ ordergoods.o_goods.productlongname }}</p>
<p class="presentPrice">{{ ordergoods.o_goods.price }}</p>
</a>
<section>
<span>{{ ordergoods.o_goods_num }}</span>
</section>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ol>
</div>
{% endblock %}
价格格式化
def get_total_price():
# 找到被选中的商品
carts = Cart.objects.filter(c_is_select=True)
total = 0
for cart in carts:
total += cart.c_goods_num*cart.c_goods.price
round(total, 2)
return "{:.2f}".format(total)
此处评论已关闭