用户下单

[TOC]

简要描述

• 用户下单

前端页面和服务端的交互过程

• 在购物车中点击 【选好了】 按钮，页面跳转到订单确认页面

• 在订单确认页面，发送ajax请求，获取当前登录用户的桌号

• 在订单确认页面，发送ajax请求，请求服务端获取当前登录用户的购物车数据

• 在订单确认页面点击 【去支付】 按钮，发送ajax请求，请求服务端完成下单操作

触发事件

//事件
@click="toAddOrderPage">选好了

//方法
//跳转到去结算界面
toAddOrderPage(){
    if(this.cartData.length > 0){
        window.requestAnimationFrame(()=>{
            window.location.href ='/front/page/add-order.html'
        })
    }
},

接口调用

//获取购物车数据
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:'餐桌号有误！请检查后重新输入'})
    }
},

请求URL

• /front/page/pay-success.html

接口API

//获取购物车内商品的集合  
function cartListApi(data) {  
    return $axios({  
        'url': '/shoppingCart/list',  
        'method': 'get',  
        params:{...data}  
    })  
}
//提交订单
function  addOrderApi(data){
    return $axios({
        'url': '/order/submit',
        'method': 'post',
        data
      })
}

请求载荷

payMethod: 1
remark: ""
tableNo: 5

请求参数说明

参数名	类型	说明
payMethod	int	支付方式 1微信,2支付宝
remark	VARCHAR（100）	备注信息
tableNo	int	桌号

后端接口请求参数

• @RequestBody 接收前端传递给后端的json字符串中的数据(请求体Orders中的数据)

后端代码

• 在OrderService添加submit方法用于用户下单

@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());

• 在OrderController的submit方法处理post请求实现上面的方法

//用户下单
@PostMapping("/submit")
public R<String> submit(@RequestBody Orders orders){
    log.info("订单数据:{}",orders);
    orderService.submit(orders);
    return R.success("下单成功");
}