用户下单
<p>[TOC]</p>
<h5>简要描述</h5>
<ul>
<li>用户下单</li>
</ul>
<h5>前端页面和服务端的交互过程</h5>
<ul>
<li>
<p>在购物车中点击 【选好了】 按钮,页面跳转到订单确认页面</p>
</li>
<li>
<p>在订单确认页面,发送ajax请求,获取当前登录用户的桌号</p>
</li>
<li>
<p>在订单确认页面,发送ajax请求,请求服务端获取当前登录用户的购物车数据</p>
</li>
<li>在订单确认页面点击 【去支付】 按钮,发送ajax请求,请求服务端完成下单操作</li>
</ul>
<h5>触发事件</h5>
<pre><code>//事件
@click="toAddOrderPage">选好了
//方法
//跳转到去结算界面
toAddOrderPage(){
if(this.cartData.length > 0){
window.requestAnimationFrame(()=>{
window.location.href ='/front/page/add-order.html'
})
}
},</code></pre>
<h5>接口调用</h5>
<pre><code>//获取购物车数据
async getCartData(){
const res = await cartListApi({})
if(res.code === 1){
this.cartData = res.data
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
async goToPaySuccess(){
const t_no = Number(this.tableNo)
if(t_no<31 && t_no>0){ //有效餐桌号1-30
const params = {
remark:this.note,
tableNo:Number(this.tableNo),
payMethod:1,
}
const res = await addOrderApi(params)
if(res.code === 1){
window.requestAnimationFrame(()=>{
window.location.replace('/front/page/pay-success.html')
})
}else{
this.$notify({ type:'warning', message:res.msg});
}
}
else{
this.$notify({type:'warning', message:'餐桌号有误!请检查后重新输入'})
}
},</code></pre>
<h5>请求URL</h5>
<ul>
<li><code>/front/page/pay-success.html</code></li>
</ul>
<h5>接口API</h5>
<pre><code>//获取购物车内商品的集合
function cartListApi(data) {
return $axios({
'url': '/shoppingCart/list',
'method': 'get',
params:{...data}
})
}
//提交订单
function addOrderApi(data){
return $axios({
'url': '/order/submit',
'method': 'post',
data
})
}</code></pre>
<h5>请求载荷</h5>
<pre><code>payMethod: 1
remark: ""
tableNo: 5</code></pre>
<h5>请求参数说明</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">payMethod</td>
<td style="text-align: left;">int</td>
<td>支付方式 1微信,2支付宝</td>
</tr>
<tr>
<td style="text-align: left;">remark</td>
<td style="text-align: left;">VARCHAR(100)</td>
<td>备注信息</td>
</tr>
<tr>
<td style="text-align: left;">tableNo</td>
<td style="text-align: left;">int</td>
<td>桌号</td>
</tr>
</tbody>
</table>
<h5>后端接口请求参数</h5>
<ul>
<li>@RequestBody 接收前端传递给后端的json字符串中的数据(请求体Orders中的数据)</li>
</ul>
<h5>后端代码</h5>
<ul>
<li>在OrderService添加submit方法用于用户下单</li>
</ul>
<pre><code>@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Orders> implements OrderService {
@Autowired
private ShoppingcartService shoppingcartService;
@Autowired
private UserService userService;
@Autowired
private AddressBookService addressBookService;
@Autowired
private OrderDetailService orderDetailService;
@Override
@Transactional
public void submit(Orders orders) {
//获得当前用户id
Long userId = BaseContext.getCurrentId();
//查询当前用户的购物车数据
LambdaQueryWrapper<ShoppingCart> wrapper = new LambdaQueryWrapper<>();
wrapper.eq(ShoppingCart::getUserId,userId);
List<ShoppingCart> shoppingCarts = shoppingCartService.list(wrapper);
if(shoppingCarts == null || shoppingCarts.size() == 0){
throw new CustomException("购物车为空,不能下单");
}
//查询用户数据
User user = userService.getById(userId);
long orderId = IdWorker.getId();//订单号
AtomicInteger amount = new AtomicInteger(0);
List<OrderDetail> orderDetails = shoppingCarts.stream().map((item) -> {
OrderDetail orderDetail = new OrderDetail();
orderDetail.setOrderId(orderId);
orderDetail.setNumber(item.getNumber());
orderDetail.setDishFlavor(item.getDishFlavor());
orderDetail.setDishId(item.getDishId());
orderDetail.setSetmealId(item.getSetmealId());
orderDetail.setName(item.getName());
orderDetail.setImage(item.getImage());
orderDetail.setAmount(item.getAmount());
amount.addAndGet(item.getAmount().multiply(new BigDecimal(item.getNumber())).intValue());
return orderDetail;
}).collect(Collectors.toList());
orders.setId(orderId);
orders.setOrderTime(LocalDateTime.now());
orders.setCheckoutTime(LocalDateTime.now());
orders.setStatus(2);
orders.setAmount(new BigDecimal(amount.get()));//总金额
orders.setUserId(userId);
orders.setNumber(String.valueOf(orderId));
orders.setPhone(user.getPhone());
</code></pre>
<ul>
<li>在OrderController的submit方法处理post请求实现上面的方法</li>
</ul>
<pre><code>//用户下单
@PostMapping("/submit")
public R<String> submit(@RequestBody Orders orders){
log.info("订单数据:{}",orders);
orderService.submit(orders);
return R.success("下单成功");
}</code></pre>