博客目录：

......

十、基于Django+mysql的点餐系统设计第十篇(H5手机移动端点餐：登录)

十一、基于Django+mysql的点餐系统设计-第十一篇(H5手机移动端点餐：购物车操作)

十二、基于Django+mysql点餐系统设计-第十二篇(移动端：会员下单处理)

十二、基于Django+mysql的点餐系统设计-第十二篇(H5：下单操作)重写

本章源码下载地址：

　　前段时间忙其他事断更了两个多月，现在终于有精力继续写博客了。另外，电脑坏了，换了块主板后，做了系统重置，python、mysql、pychram、github、sourcetree等工具又重新进行了环境配置、设置，好麻烦。遇到了一些问题，还好都解决了。

　　言归正传，现在开始讲下单操作。当用户将选好的餐品置于购物车，在购物车点击"去结算"，页面跳转到"提交订单"页面。"提交订单"页面显示餐品信息、价格、数量和总价。正常情况下，可以调支付方式的接口，进行支付宝支付或者微信支付。但是，为了方便，这里点击"提交订单"，直接进行数据插入数据库的处理，同时，前端页面跳转到"订单处理"页面，订单处理页面提示"下单成功！"，并展示订单号、消费金额。点击"继续购物"，跳转到餐品选择首页。

　　首先说加载移动端订单页，在首页点击"去结算"，页面跳到提交订单页。在mobile/urls.py中添加加载移动端订单页的路由：

    # 订单处理    path('orders/add', index.addOrders, name="mobile_addorders"), # 加载移动端订单页

　　按照顺序，页面的请求会从路由跳转到具体的实现方法。加载订单的方法路径为mobile/views/index.py/addOrders()

def addOrders(request):    '''移动端下单表单页'''    # 尝试从session中获取名字为cartlist的购物车信息，若没有返回{}    cartlist = request.session.get('cartlist', {})    total_money = 0 # 初始化一个总金额    # 遍历购物车中的菜品并累加总金额    for vo in cartlist.values():        total_money += vo['num']*vo['price']    request.session['total_money'] = total_money # 放进session    return render(request,"mobile/addOrders.html")

　　解释下上面的代码逻辑：页面在点击去结算时触发了orders/add路由，路由将代码逻辑处理抛给了addOrders函数。addOrders函数是怎么处理的呢？

在缓存中获取购物车信息cartlist，如果cartlist不在缓存中，返回空；若缓存中存在cartlist，则for循环遍历cartlist，将每一个餐品的数目和价格相乘，并累加得出的总额放到total_money变量中，然后将total_money放到缓存中。每个餐品的数目和价格以及餐品总额都得到了，那么就将后端的处理逻辑传给前端吧。

　　在templates/mobile/addOrders.html中进行后端代码逻辑的接收。在addOrders.html中首选将每个餐品的图片名称、价格、数目显示出来。怎么显示呢？大家思考两分钟。

　　显示的逻辑是获取购物车(cartlist)的信息,然后对cartlist进行遍历，将每个餐品的图片名称、价格、数目遍历出来，如下图：

<div class="list-content cartlist order-Pro">

<ul>

{% for vo in request.session.cartlist.values %}

<li class="line">

<a href="#"><div class="pro-img"><img src="{% static 'uploads/product/' %}{{ vo.cover_pic }}" alt=""></div></a>

<div class="pro-con"><h3>{{ vo.name }}</h3><b>￥{{ vo.price }}</b>×{{ vo.num }}</div>

</li>

{% endfor %}

</ul>

</div>

　　至于支付方式，理想状态肯定是支持支付宝支付和微信支付了，但是由于本次没有接入支付宝支付和微信支付的接口，所以就先把这两个支付方式放到前端页面，后期有机会了可以再完善支付接口。

<!--支付方式-->

<div class="order-Delivery line" id="orderPays">

<p>支付方式</p>

<ol class="FilterContentList">

</ol>

<div class="list">

<ul class="line">

<li class="select" bank="4"><i class="icon-alipay"></i>支付宝支付<em class="icon-correct"></em></li>

<li bank="1"><i class="icon-weixinpay"></i>微信支付<em class="icon-correct"></em></li>

</ul>

</div>

</div>

　　接下来，完善总额和提交订单的逻辑。

<footer>

<div class="button"><button onclick="doSubmit()">提交订单</button></div>

<h4>实付款：￥{{ request.session.total_money }}</h4>

</footer>

　　通过在缓存中获取total_money来展现付款总额，提交订单的操作通过ajax触发doSubmit()方法。doSubmit逻辑如下：

//执行订单提交操作函数

function doSubmit(){

window.location.href = "{% url 'mobile_doaddorders' %}";

}

　　通过doSubmit()方法的执行，页面就可以进行订单的处理了。doSubmit()方法中要跳转的链接"mobile_doaddorders"引出了订单处理的逻辑。

首先，通过"mobile_doaddorders"找到orders/doadd路由，该路由的处理逻辑在哪呢？它在mobile/views/index.py下，具体实现逻辑如下：

    path('orders/doadd', index.doAddOrders, name="mobile_doaddorders"), #执行移动端下单操作

　　通过路由跳转到处理订单处理操作的后端方法index.doAddOrders中，由于没有对接支付宝支付和微信支付的接口，在这里doAddOrders函数只需要将包括价格、数量等在内的餐品信息导入到数据库就可以了。

def doAddOrders(request):    '''执行移动端下单操作'''    try:        #执行订单信息的添加        od = Orders()        od.shop_id = request.session['shopinfo']['id']        od.member_id = request.session['mobileuser']['id']        od.user_id = 0        od.money = request.session['total_money']        od.status = 1 #订单状态：1进行中/2无效/3已完成        od.payment_status = 2 #支付状态：1未支付/2已支付/3已退款        od.create_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")        od.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")        od.save()        # 执行支付信息添加        op = Payment()        op.order_id = od.id #订单id号        op.member_id = request.session['mobileuser']['id']        op.type = 2 #1会员付款/2收银收款        op.bank = request.GET.get("bank", 3) # 收款银行渠道：1微信/2余额/3现金/4支付宝        op.money = request.session['total_money']        op.status = 2 # 支付状态：1未支付/2已支付/3已退款        op.create_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")        op.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")        op.save()        # 执行订单详情的添加        cartlist = request.session.get("cartlist", {}) # 获取购物车中的菜品信息        # 遍历购物车中的菜品并添加到订单详情中        for item in cartlist.values():            ov = OrderDetail()            ov.order_id = od.id # 订单id            ov.product_id = item['id'] # 菜品id            ov.product_name = item['name'] # 菜品名称            ov.price = item['price'] # 单价            ov.quantity = item['num']  #数量            ov.status = 1 # 状态：1正常/9删除            ov.save()        del request.session['cartlist']        del request.session['total_money']    except Exception as err:        print(err)    return render(request,"mobile/orderinfo.html", {"order": od})

　　通过看上面doAddOrders函数处理逻辑可知，订单信息、支付信息、订单详情三个数据库中插入的数据，大部分来源于缓存。当将缓存中的数据插入到数据库中后，将缓存中的cartlist、total_money。至此，订单处理的逻辑处理完了。

后端将订单处理完后，前端页面该怎么显示呢？后端逻辑处理完后，将处理结果渲染到mobile/orderinfo.html页面，并且带上订单信息也就是Orders数据库的数据。看下面mobile/orderinfo.html页面的代码逻辑：

{% extends 'mobile/base.html' %}

{% block mainbody %}

<!--头部-->

<header>

<div class="header">

<h1>订单处理</h1>

<a href="javascript:window.history.back();" class="return"><i></i></a>

</div>

</header>

<!--内容区-->

<article class="main-container loginContent">

<h3>下单成功！</h3>

<h4>订单号：{{ order.id }} 消费金额：{{ order.money }} </h4>

<div class="button"><button onclick="location.href='{% url 'mobile_index' %}'">继续购物</button></div>

</article>

{% endblock %}

　　分析一下mobile/orderinfo.html页面的代码：1、返回到上一步调用了现成的方法 javascript:window.history.back(); 2、将订单号和消费金额显示出来，因为后端已经将订单信息赋予给order传给前端了，所以直接获取订单信息的id号和金额就可以了 <h4>订单号：{{ order.id }} 消费金额：{{ order.money }} </h4> ；

3、如果在页面点击继续购物的话，会跳转到餐品首页。怎么实现的逻辑呢？当用户点击"继续购物"按钮时，触发了跳转链接，‘mobile_index’将页面引导到路由页面，MTV一整套循环后，跳转到了移动端餐品首页 <div class="button"><button onclick="location.href='{% url 'mobile_index' %}'">继续购物</button></div>

到这里，H5手机移动端点餐：下单操作讲完了。在下单操作快讲完的时候，发现移动端下单操作讲过，时隔两个多月再继续讲，忘了之前的进度了，下一篇要将大堂点餐的下单操作了。

#头条创作挑战赛#