项目第四天,一直在调bug,不是正在修改bug,就是走在制造bug的路上。
今天的任务是将用户在闪购页面中选择的商品添加到购物车中,用户可点击加减对数量进行修改,底部的全选按钮和上面的货品进行关联,用户点击下单时,自动跳转到支付页面,支付页面包括一个唯一的订单编号和付款按钮。
所以又是两大部分:购物车商品选中和订单模块。
一、购物车商品选中:
前端:1-选中按钮,添加点击事件。
还是在cart.js中添加加减的点击事件:
$(function () {
$(".add").click(function () {
var $current_btn = $(this);
var c_id = $(this).parents("li").attr("c_id");
};
2-用户在闪购中添加商品的时候获得相应的货物id。
data: {
'c_id': c_id,
'operate_type': 'add'
}
3-发送请求给后端。
$.ajax({
url: "/axf/api/v1/cart_item",
data: {
'c_id': c_id,
'operate_type': 'add'
},
method: "post",
success: function (res) {
// console.log(res);
if (res.code == 1) {
var current_num = res.data.current_num;
var money = res.data.money;
//修改显示的数量
$current_btn.prev().html(current_num);
// 修改 总价
$("#money_id").html(money);
//补充:修改全选按钮的状态
if (res.data.is_un_all_select){
$(".all_select>span>span").html();
}else {
$(".all_select>span>span").html("√");
}
} else if (res.code == 3) {
window.open(url = res.data, target = "_self")
} else {
alert(res.msg);
}
}
});
4-保持一致性(用户在加购了商品后,购物车中也要得到更新)
//更新商品状态,和上面的全选保持一致,若全选则全部选中,反之,全选不打√。
if (current_item_status) {
$current_btn.find("span").find("span").html("√");
} else {
$current_btn.find("span").find("span").html("√");
}
}
后端:1-保证用户处于登陆状态,获取用户id。
def put(self, req):
params = QueryDict(req.body)
c_id = int(params.get("c_id"))
# 获取用户
user = req.user
if not isinstance(user, MyUser):
DATA['code'] = NOT_LOGIN
DATA['msg'] = "未登录"
DATA['data'] = '/axf/login'
return JsonResponse(DATA)
2-获取购物车数据(利用c_id查询,看看是否被选择了-计算总价钱)。
cart_data = Cart.objects.get(pk=c_id)
cart_data.is_select = not cart_data.is_select
cart_data.save()
# 算钱
sum_money = get_cart_sum_money(user)
在这里,计算价钱的的时候点用了之前的方法,在my_utils.py中有过介绍。
3-将对应的购物数据,状态取反(还是判断是否需要quan全选)。
4-计算总价,判断全选按钮的状态。
is_all_select = not Cart.objects.filter(
user=user,
is_select=False
).exists()
DATA['code'] = SUCCESS
DATA['msg'] = 'OK55'
DATA['data'] = {
'is_all_select': is_all_select,
'sum_money': sum_money,
'current_item_status': cart_data.is_select
}
return JsonResponse(DATA)
备注:关于全选按钮:
前端:1-状态判断,是否全选。
2-发送请求给后端。
3-根据后端反馈,进行页面更新。
后端:1-确定用户
2-确定操作所选状态(全选还是不选)。
3-购物车的状态也进行更新,并计算总价。
4-将结果返回前端,“全选”按钮的状态。
二、订单模块
前端:创建一个html文件,单独作为支付页面。在支付页面需要随机生成一个订单号。
后端:1-获取用户id,查询购物车数据。
def order_api(req):
user=req.user
cart_items=Cart.objects.filter(
user=user,
is_select=True
)
2-创建订单(并计算价钱)。
#创建订单
order=Order.objects.create(
user=user,
status=0,
)
sum_money=0
# order.save()
#创建订单详情
for i in cart_items:
#计算总价
tem_money=i.goods.price * i.num
sum_money+=tem_money
order_item=OrderItem.objects.create(
order=order,
item=i.goods,
num=i.num,
item_sum_money=tem_money
)
order.order_money=sum_money
order.save()
3-支付完成后删除购物车里的商品数据。
cart_items.delete()
return render(req,'order/order.html',{"order":order})
附加:添加微信支付:
参考链接:
https://pay.weixin.qq.com/wiki/doc/api/img/chapter15_3_1.jpg
流程:1-用户确认订单并使用微信付款。
2-商户后台向微信支付发出下单请求(要调用统一下单节口,交易类型为:trade_type=MWEB)
3-之前的接口开始返回支付的相关参数给商户后台(eg:支付跳转)。
4-中间页进行H5校验,如果支付成功,接收消息通知,还可以定制其他功能,如取消支付或申请退款等。
5-商户在展示页面,提供用户支付结果的查询。并接收消息提醒,如果没有,则后台需要调用我们的订单查询接口来q确认订单状态。
6-最终展示支付结果给用户。