共计 2000 个字符，预计需要花费 5 分钟才能阅读完成。
提交订单收货地址判断
没有地址，提示输入地址，才能提交订单
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%>
<%=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>
效果
