【vue3.0】22.0 某东到家（ 廿二）——订单商品列表代码拆分和确认订单弹窗

目前src\views\orderConfirmation\OrderConfirmation.vue已有超过250行代码。这里将此组件进行拆分。
src\views\orderConfirmation\TopArea.vue

新建src\views\orderConfirmation\ProductList.vue

新增src\views\orderConfirmation\Order.vue

修改src\views\orderConfirmation\OrderConfirmation.vue

最终效果一致。

增加一个确认支付的弹窗

修改src\views\orderConfirmation\Order.vue

image.png

进一步完善样式：

image.png

完善按钮逻辑，进入fastmock增加一个post接口/api/createOrder

    /**
     * 输入
     * conten-type：json
     * body:{
       addressId：“xxx”//收货地址 id
       shopId：""//商店id
       shopName:"某什么码1",
       isCanceled:false,//订单是否被取消了
       products:[
       {
         id:"xxx",//商品id
         num:6//商品数量
       }, 
       {
         id:"xxx",//商品id
         num:6//商品数量
       },
       ]
     }
     **/
    {
      "code": 200,
      "data": {   _id: '1',},
      "desc": "成功"
    }

修改src\views\orderConfirmation\Order.vue