第20次:商品评价

分析

  1. 支付成功之后,订单页面的状态会由“待支付”变成“待评价”,点击“待评价”按钮,可对购买的商品进行评价。
  2. 用户提交评价之后,用户可以详情页看到用户对商品的评价信息,所以评价接口包括提交评价和查看评价,须在payment应用views.py中定义OrderCommentView视图类,其中分别定义对应Post和get方法来实现提交评价和查看评价

实现

payment应用views.py中定义OrderCommentView视图类

class OrderCommentView(LoginRequiredMixin, View):
    """对订单的评价"""

    def get(self, request):
        """查询未评价的商品"""
        order_id = request.GET.get('order_id')

        try:
            OrderInfo.objects.get(order_id=order_id, user=request.user)
        except OrderInfo.DoesNotExist:
            return HttpResponseNotFound('订单不存在')

        try:
            uncomment_goods = OrderGoods.objects.filter(order_id=order_id, is_commented=False)
        except Exception:
            return HttpResponseServerError('订单商品信息出错')
        uncomment_goods_list = []
        for goods in uncomment_goods:
            uncomment_goods_list.append({
                'order_id': goods.order_id,
                'sku_id': goods.sku.id,
                'name': goods.sku.name,
                'price': str(goods.price),
                'default_image_url': settings.STATIC_URL + 'images/goods/' + goods.sku.default_image.url + '.jpg',
                'comment': goods.comment,
                'score': goods.score,
                'is_anonymous': str(goods.is_anonymous)
            })

        context = {'uncomment_goods_list': uncomment_goods_list}
        return render(request, 'goods_judge.html', context)

    def post(self, request):
        json_dict = json.loads(request.body.decode())
        order_id = json_dict.get('order_id')
        sku_id = json_dict.get('sku_id')
        score = json_dict.get('score')
        comment = json_dict.get('comment')
        is_anonymous = json_dict.get('is_anonymous')

        # 校验参数
        if not all([order_id, sku_id, score, comment]):
            return HttpResponseForbidden("缺少必传参数")

        try:
            OrderInfo.objects.filter(order_id=order_id, user=request.user,
                                     status=OrderInfo.ORDER_STATUS_ENUM['UNCOMMENT'])
        except OrderInfo.DoesNotExist:
            return HttpResponseForbidden('参数order_id错误')
        try:
            sku = SKU.objects.get(id=sku_id)
        except SKU.DoesNotExist:
            return HttpResponseForbidden('参数sku_id错误')

        if is_anonymous:
            if not isinstance(is_anonymous, bool):
                return HttpResponseForbidden('参数is_anonymous错误')

        # 保存评价数据

        (OrderGoods.objects.filter(order_id=order_id, sku_id=sku_id, is_commented=False)
         .update(comment=comment,
                 score=score,
                 is_anonymous=is_anonymous,
                 is_commented=True))

        # 累加评论数据
        sku.comments += 1
        sku.save()

        sku.spu.comments += 1
        sku.spu.save()

        if OrderGoods.objects.filter(order_id=order_id, is_commented=False).count() == 0:
            OrderInfo.objects.filter(order_id=order_id).update(status=OrderInfo.ORDER_STATUS_ENUM['FINISHED'])
        return JsonResponse({'code': RETCODE.OK, 'errmsg': '评价成功'})

在payment应用urls.py新增子路由

path(route='orders/comment/', view=OrderCommentView.as_view()),

商品详情页展示评价,之前已经在goods应用下views.py中定义好了评价信息的get查询,此处只要在goods应用下新增对应的子路由即可。

path('comments/<int:sku_id>', views.GoodsCommentView.as_view()),

提交商品评价的模板goods_judge.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小鱼商城-订单商品评价</title>
	<link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
	<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
</head>
<body>
	<div id="app">
	<div class="header_con">
		<div class="header" v-cloak>
			<div class="welcome fl">欢迎来到小鱼商城!</div>
			<div class="fr">
                <div v-if="username" class="login_btn fl">
                    欢迎您:<em>[[ username ]]</em>
                    <span>|</span>
                    <a href="{{ url('users:logout') }}">退出</a>
                </div>
                <div v-else class="login_btn fl">
                    <a href="{{ url('users:login') }}">登录</a>
                    <span>|</span>
                    <a href="{{ url('users:register') }}">注册</a>
                </div>
				<div class="user_link fl">
					<span>|</span>
					<a href="{{ url('users:info') }}">用户中心</a>
					<span>|</span>
					<a href="{{ url('carts:info') }}">我的购物车</a>
					<span>|</span>
					<a href="{{ url('users:myorderinfo',args=(1,)) }}">我的订单</a>
				</div>
			</div>
		</div>		
	</div>
	<div class="search_bar clearfix">
		<a href="{{ url('contents:index') }}" class="logo fl"><img src="{{ static('images/logo.png') }}"></a>
		<div class="search_wrap fl">
			<form method="get" action="/search/" class="search_con">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" name="" value="搜索">
            </form>
			<ul class="search_suggest fl">
				<li><a href="#">索尼微单</a></li>
				<li><a href="#">优惠15元</a></li>
				<li><a href="#">美妆个护</a></li>
				<li><a href="#">买2免1</a></li>
			</ul>
		</div>
	</div>
    <div class="judge_con" v-for="(sku,index) in skus">
        <div class="judge_goods fl">
            <ul>
                <li>
                    <a :href="sku.url"><img :src="sku.default_image_url"></a>
                    <h4><a :href="sku.url">[[ sku.name ]]</a></h4>
                    <div class="price">¥[[ sku.price ]]</div>
                </li>
            </ul>
        </div>
        <div class="judge_goods_input fr">
            <div class="judge_item">
                <label>商品满意度</label>
                <div class="stars fl">
                    <a @mouseover="on_stars_mouseover(index, 1)" @mouseout="on_stars_mouseout(index)" @click="on_stars_click(index, 1)" class="star_off" :class="sku.score>=1?'light':''"></a>
					<a @mouseover="on_stars_mouseover(index, 2)" @mouseout="on_stars_mouseout(index)" @click="on_stars_click(index, 2)" class="star_off" :class="sku.score>=2?'light':''"></a>
					<a @mouseover="on_stars_mouseover(index, 3)" @mouseout="on_stars_mouseout(index)" @click="on_stars_click(index, 3)" class="star_off" :class="sku.score>=3?'light':''"></a>
					<a @mouseover="on_stars_mouseover(index, 4)" @mouseout="on_stars_mouseout(index)" @click="on_stars_click(index, 4)" class="star_off" :class="sku.score>=4?'light':''"></a>
					<a @mouseover="on_stars_mouseover(index, 5)" @mouseout="on_stars_mouseout(index)" @click="on_stars_click(index, 5)" class="star_off" :class="sku.score>=5?'light':''"></a>
                </div>
                <div class="score">[[ sku.display_score ]]分</div>
            </div>
            <div class="judge_item">
                <label>发表评价</label>
                <textarea class="judge_area" v-model="sku.comment"></textarea>
            </div>
            <div class="judge_item">
                <input type="input" @click="save_comment(index)" value="提 交" class="judge_sub">
                <input type="checkbox" v-model="sku.is_anonymous" class="no_name"> 匿名评价
            </div>
        </div>
    </div>
	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京小鱼商业股份有限公司 All Rights Reserved</p>
		<p>电话:010-****888    京ICP备*******8号</p>
	</div>
    {{ csrf_input }}
	</div>
	<script type="text/javascript">
    	let skus = {{ uncomment_goods_list | safe }};
    </script>
    <script type="text/javascript" src="{{ static('js/common.js') }}"></script>
	<script type="text/javascript" src="{{ static('js/goods_judge.js') }}"></script>
</body>
</html>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值