【vue3.0】23.0 某东到家( 廿三)——下单流程优化

弹窗优化

目前进入订单页面后,是直接弹窗,但实际使用效果是点击“提交订单”后再弹窗。

优化如下:
src\views\orderConfirmation\Order.vue



GIF.gif
去结算优化

src\views\shop\Cart.vue


当商品数量为0时,去结算按钮不显示,效果:


GIF.gif
订单页面开发之前的准备

增加路由src\router\index.js

  {
    path: '/orderList',
    name: 'OrderList',
    component: () => import(/* webpackChunkName: "orderList" */ '../views/orderList/OrderList.vue')
  },

修改src\views\cartList\CartList.vue






将src\views\home\Docker.vue移动到src\components\Docker\Docker.vue,公共的组件抽离出来







修改src\views\home\Home.vue




调整src\views\orderConfirmation\Order.vue,将方法抽离封装

......

......

新增页面src\views\orderList\OrderList.vue







最终效果如下:


GIF.gif

你可能感兴趣的:(【vue3.0】23.0 某东到家( 廿三)——下单流程优化)