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