DJANGO-天天生鲜项目从0到1-014-订单-订单评论

本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习

https://www.bilibili.com/video/BV1vt41147K8?p=1

 编辑用户订单页面JS

根据订单状态显示下一步操作是什么,若用户点击‘去评价’,则通过 location.href= '/order/comment/'+order_id 访问订单评价url

    //根据订单状态显示下一步操作
    $('.oper_btn').each(function(){
        status = $(this).attr('order_status')
        if (status == '1'){
            oper_show = '去支付'
        }
        else if (status =='4'){
            oper_show = '去评价'
        }
        else{
            oper_show = $(this).attr('status_name')
        }
        $(this).text(oper_show)
    })
    //去支付按钮
    $('.oper_btn').click(function(){
        //获取订单ID
        order_id = $(this).attr('order_id')
        //若状态为待支付,则发送ajax支付请求
        if ($(this).attr('order_status') =='1'){
            pay_method = $(this).attr('pay_method')
            send_pay_ajax(order_id, pay_method)
        }
        //若状态为待评价,则跳转到评价界面
        else if($(this).attr('order_status') == '4'){
            //跳转到评价页面
            location.href = '/order/comment/'+order_id
        }
    })

添加评价URL和视图类

在apps/order/url.py中配置评价url

from order.views import OrderCommentView

urlpatterns = [
    ...
    path('comment/<int:order_id>/', OrderCommentView.as_view(), name='comment')
    ...
]

编辑apps/order/view.py,新增OrderCommentView

使用reverse反向解析时,若url中带有参数,则在reverse中的第二个参数加上kwargs参数,key为url参数名

class OrderCommentView(LoginRequiredMixin, View):
    '''订单评价视图'''
    template_name = 'order/order_comment.html'
    def get(self, request, order_id):
        '''显示评价页面'''
        user = request.user
        # 校验数据
        if not order_id:
            return redirect(reverse('user:order', kwargs={'page_num': 1}))
        try:
            order = OrderInfo.objects.get(id=order_id, user=user)
        except OrderInfo.DoesNotExist:
            return redirect(reverse('user:order', kwargs={'page_num': 1}))
        # 获取订单商品
        order_goods_list = OrderGoods.objects.filter(order=order)
        for order_goods in order_goods_list:
            order_goods.amount = order_goods.count * order_goods.price
        # 动态赋值属性
        order.status_name = OrderInfo.ORDER_STATUS_DIC[order.order_status]
        order.order_goods_list = order_goods_list
        return render(request, self.template_name, {'order': order})

编辑模板文件

{% extends 'base_user_center.html' %}
{% load static %}
{% block title %}天天生鲜-用户中心{% endblock %}
{% block page_title %}用户中心{% endblock page_title %}
{% block right %}
        <div class="right_content clearfix">
            <h3 class="common_title2">订单评价</h3>
                <ul class="order_list_th w978 clearfix">
                    <li class="col01">{{ order.create_time }}</li>
                    <li class="col02">订单号:{{order.order_num}}</li>
                    <li class="col02 stress">{{order.status_name}}</li>
                </ul>
            <form method="post">
                {% csrf_token %}
                {# 订单id #}
                <input type="hidden" name="order_id" value="{{order.order_id}}">
                {# 订单中有几个商品 #}
                <input type="hidden" name="total_count" value="{{order.order_goods_list|length}}">
                {% for order_goods in order.order_goods_list %}
                <table class="order_list_table w980">
                    <tbody>
                        <tr>
                            <td width="80%">
                                <ul class="order_goods_list clearfix">
                                    <li class="col01"><img src="{{order_goods.goods.image.url }}"></li>
                                    <li class="col02">{{order_goods.goods.name}}<em>{{order_goods.price}}/{{order_goods.goods.unite}}</em></li>
                                    <li class="col03">{{order_goods.count}}</li>
                                </ul>
                            </td>
                            <td width="20%">{{order_goods.amount}}元</td>
                        </tr>
                    </tbody>
                </table>
                <div class="site_con">
                    <input type="hidden" name="goods_{{forloop.counter}}" value="{{order_goods.goods.id}}">
                    <div class="form_group form_group2">
                        <label>评价内容:</label>
                        <textarea class="site_area" name="content_{{forloop.counter}}"></textarea>
                    </div>
                </div>
                {% endfor %}
                <input type="submit" name="" value="提交" class="info_submit">
            </form>
        </div>
{% endblock right %}

评价页面是该订单中每个商品下面都可以进行评价,因此在提交时,需要将输入框与对应的商品绑定,才能知道这个评价是哪个商品的。这里在每个评论框前面,新增了一个隐藏的input框,name为goods_{{forloop.counter}},value为{{order_goods.goods.id}},同时将评论框textarea的name也写成content_{{ forloop.counter }},input和textarea的name都使用了同一个“forloop.counter”来进行绑定,同时在循环商品前,也新增一个隐藏的input框将商品总数也传给了POST,这里的value="{{order.order_goods_list|length}}",使用了django模板的过滤器|length,还有其他的过滤器如:{{ value|add:"2" }}、{{ value|date:"D d M Y" }} {{ value|time:"H:i" }}、{{ value|lower }}等等。

DJANGO-天天生鲜项目从0到1-014-订单-订单评论 

提交评论调用post请求

继续编辑OrderCommitView,添加post方法

循环商品,通过循环计数i获取当前商品的id和评论

    def post(self, request, order_id):
        '''评价提交'''
        user = request.user
        # 获取数据
        total_count = int(request.POST.get('total_count'))
        # 校验数据
        if not order_id:
            return redirect(reverse('user:order', kwargs={'page_num': 1}))
        try:
            order = OrderInfo.objects.get(id=order_id, user=user)
        except OrderInfo.DoesNotExist:
            redirect(reverse('user:order', kwargs={'page_num': 1}))

        for i in range(1, total_count+1):
            # 获取评论
            comment = request.POST.get('content_%d' % i, '')
            # 获取商品ID
            goods_id = int(request.POST.get('goods_%d' % i))
            try:
                goods = OrderGoods.objects.get(order=order, goods_id=goods_id)
            except Goods.DoesNotExist:
                continue
            goods.comment = comment
            goods.save()

        order.order_status = 5  # 已完成
        order.save()

        return redirect(reverse('user:order', kwargs={'page_num': 1}))
上一篇:C++学习日常——little tips


下一篇:C++ DLUT 上机作业(三)