Django之爱鲜蜂项目开发 day06(三)

3.未支付订单模块

3.1 首先在views.py文件下写一下未支付订单的视图函数

取到未支付的订单,渲染到未支付页面

@check_login
def order_unpay(request):

	orders = Order.objects.filter(user_id=request.user.id, status=config.BILL_UNPAY)

	return render(request, 'order/orderunpay.html', {'orders':orders})

3.2 然后在app文件夹下的urls.py文件下添加一条path

path('order_unpay/',order_unpay,name='order_unpay'),#未支付订单

3.3 在mine.html文件下找到待付款,添加超链接

					<li>
                        <a href="{% url 'axf:order_unpay' %} ">  #跳转到order_unpay视图函数下
                            <dl>
                                <dt><span class="glyphicon glyphicon-usd"></span></dt>
                                <dd>待付款</dd>
                            </dl>
                        </a>
                    </li>

3.4 写一下未支付订单页面

在templates文件夹下新建一个order文件夹,然后在此文件夹下新建一个orderunpay.html文件
继承’base_main.html’这个基模板,链入相关的css,js样式
此页面下应有订单号,订单价格,商品的图片,还有此订单的支付按钮

{% extends 'base_main.html' %}

{% load static %}

{% block extcss %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'app/order/order_unpay.css' %}">
{% endblock %}

{% block extjs %}
    <script src="{% static 'app/order/order_unpay.js' %}"></script>
{% endblock %}

{% block header %}
    <header><div>未支付订单</div></header>
{% endblock %}

{% block content %}
    <div class="container">

        <ul class="orders">
            {% for order in orders %}
                <li>
                    <p>订单号：{{ order.order_id }}</p>
                    <p>订单价格:{{ order.price }}</p>
                    <ul class="order-goods">
                        {% for ordergoods in order.ordergoods_set.all %}
                            <li>
                                <img src="{{ ordergoods.goods.productimg }}" alt="">
                            </li>
                        {% endfor %}
                    </ul>

                    <button orderid="{{ order.id }}" class="btn btn-success pay_button">支付</button>
                </li>
            {% endfor %}


        </ul>
    </div>
{% endblock %}

当点击支付按钮的时候,去跳转到支付的链接,这里Ajax请求使用post提交
写一下js样式
order_unpay.js

$(function () {

    $('.pay_button').click(function () {
        //取到订单id
        let orderid = $(this).attr('orderid');

        console.log(orderid);
        $.post('/axf/pay_bill/', {orderid:orderid},function (data) {
            console.log(data);
         
        })
    })
})

3.5 在views.py文件下写一个视图函数,请求支付链接

@check_method('POST')
@check_login
def pay_bill(request):

	data = {
		'status':1,
		'msg':'request alipay'
	}

	orderid = request.POST.get('orderid')
	order = Order.objects.filter(user_id=request.user.id, id=orderid).first()


	#请求支付链接
	data['re_url'] = make_alipay_bill(order)

	return JsonResponse(data)

3.6 然后在app文件夹下的urls.py文件下添加一条path

	path('pay_bill/',pay_bill,name='pay_bill'),#支付订单

这时候修改一下js样式,取到链接然后跳转
order_unpay.js

$(function () {

    $('.pay_button').click(function () {
        //取到订单id
        let orderid = $(this).attr('orderid');

        console.log(orderid);
        $.post('/axf/pay_bill/', {orderid:orderid},function (data) {
            console.log(data);
            if (data.status === 1){
                window.location.href = data.re_url
            }
        })
    })
})

这里可能会遇到csrf_token的问题,直接在base.html文件下的js链入里加一串代码,这样继承这个基模版的页面就不会遇到这个问题了

   <script>
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:"{{ csrf_token }}"}
        })
    </script>

3.7 点击支付

点击支付,会跳转到支付宝的链接,和以前一样输入账号密码,支付成功后,可以去数据库查看,订单的状态已经改变,由0变成1

文件链接
链接：https://pan.baidu.com/s/14QuYu2OJlXtfnVbNS3hBJA
提取码：ib92