海上捞火锅

海上捞火锅


用户下单

<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"&gt;选好了 //方法 //跳转到去结算界面 toAddOrderPage(){ if(this.cartData.length &gt; 0){ window.requestAnimationFrame(()=&gt;{ 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&lt;31 &amp;&amp; t_no&gt;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(()=&gt;{ 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&lt;OrderMapper, Orders&gt; 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&lt;ShoppingCart&gt; wrapper = new LambdaQueryWrapper&lt;&gt;(); wrapper.eq(ShoppingCart::getUserId,userId); List&lt;ShoppingCart&gt; 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&lt;OrderDetail&gt; orderDetails = shoppingCarts.stream().map((item) -&gt; { 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&lt;String&gt; submit(@RequestBody Orders orders){ log.info("订单数据:{}",orders); orderService.submit(orders); return R.success("下单成功"); }</code></pre>

页面列表

ITEM_HTML