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


     编辑用户订单页面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 }}等等。

     

    提交评论调用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}))
  • 相关阅读:
    16.小程序request请求
    15.小程序接入百度地图获取地理位置
    14. 微信小程序之wxss
    13.小程序视图层的模板
    es6字符串几个方法的理解
    记一次仿京东首页的轮播图效果
    ES6中Promise使用方法
    关于新版VS编辑环境下提示fopen不安全的问题报C4996错误的解决办法
    css布局拓展
    HTML的表单元素
  • 原文地址:https://www.cnblogs.com/gcxblogs/p/12903929.html
Copyright © 2020-2023  润新知