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;
                }
            })

效果圖

egg後端防止單個用戶提交重複訂單

傳簽名orderSign給checkout.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....
    }

效果

去支付頁面顯示訂單信息

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>

效果