egg(107)--egg之提交订单收货地址判断、egg后端防止提交重复订单、去支付页面显示订单信息...

提交订单收货地址判断

没有地址,提示输入地址,才能提交订单

app/view/default/checkout.html
<form action="/buy/doOrder?_csrf=<%=csrf%>" method="POST" id="checkoutForm"></form>
            //提交数据监测是否有默认收货地址
            var flag = true;
            $("#checkoutForm").submit(function() {
                if (flag) {
                    flag = false;
                    var addressCount = $('#addressList .selected').length;
                    if (!addressCount) {
                        alert('请填写默认收货地址');
                        return false;
                    }
                    return true;

                } else {

                    return false;
                }
            })

效果图

clipboard.png

egg后端防止单个用户提交重复订单

传签名orderSigncheckout.html页面

app/controller/default/buy.js
async checkout() {
  //签名防止重复提交订单
        var orderSign = await this.service.tools.md5(await this.service.tools.getRandomNum());
        this.ctx.session.orderSign = orderSign;
        await this.ctx.render('default/checkout.html', {
           orderSign: orderSign
        });       
}

checkout.html页面接收签名orderSign

app/view/default/checkout.html
    <form action="/buy/doOrder?_csrf=<%=csrf%>" method="POST" id="checkoutForm">

        <input type="hidden" name="orderSign" value="<%=orderSign%>" />
    </form>

提交订单请求,接收签名orderSign和后台session的`orderSign对比

app/controller/default/buy.js
    async doOrder() {
                var orderSign = this.ctx.request.body.orderSign;
        if (orderSign != this.ctx.session.orderSign) {
            return false;
        }
        this.ctx.session.orderSign = null;
        //todo....
    }

效果

clipboard.png

去支付页面显示订单信息

controller

app/controller/default/buy.js
    async confirm() {
        var id = this.ctx.request.query.id;
        var orderResult = await this.ctx.model.Order.find({ "_id": id });
        if (orderResult && orderResult.length > 0) {
            //获取商品
            var orderItemResult = await this.ctx.model.OrderItem.find({ "order_id": id });
            await this.ctx.render('default/confirm.html', {
                orderResult: orderResult[0],
                orderItemResult: orderItemResult
            });
        } else {
            //错误
            this.ctx.redirect('/');
        }
    }

view

app/view/default/confirm.html
                    <ul>
                        <li class="clearfix">
                            <div class="label">订单号:</div>
                            <div class="content">
                                <span class="order-num">
                                <%=orderResult.order_id%>                                </span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="label">收货信息:</div>
                            <div class="content">
                                <%=orderResult.name%>
                                    <%=orderResult.phone%>&nbsp;&nbsp;
                                        <%=orderResult.address%>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="label">商品名称:</div>
                            <div class="content">
                                <%for(var i=0;i<orderItemResult.length;i++){%>
                                    <p>
                                        <%=orderItemResult[i].product_title%>
                                    </p>
                                    <%}%>
                            </div>
                        </li>
                      </ul>

效果

clipboard.png

clipboard.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值