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

弹窗优化

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

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

<template>
  <div class="order">
    <div class="order__price">
      实付金额 &yen;<b>{{ calculations.totalPrice }}</b>
    </div>
    <div class="order__btn" @click="handleSubmitClick(true)">提交订单</div>
  </div>
  <div class="mask" v-show="showConfirm" @click="handleSubmitClick(false)">
    <div class="mask__content" @click.stop>
      <div class="mask__content__title">确认离开收银台</div>
      <p>请尽快完成支付，否则将被取消</p>
      <div class="mask__content__btns">
        <div class="mask__content__btn mask__content__btn--first" @click="handleConfirmOrder(true)">
          取消订单
        </div>
        <div
          class="mask__content__btn mask__content__btn--second"
          @click="handleConfirmOrder(false)"
        >
          确认支付
        </div>
      </div>
    </div>
    <Toast v-if="show" :message="message" />
  </div>
</template>
<script>
  import { ref } from 'vue'
  import { useCommonCartEffect } from '@/effects/cartEffects'
  import { useRoute, useRouter } from 'vue-router' // 路由跳转方法
  import { useStore } from 'vuex'
  import { post } from '@/utils/request'
  import Toast, { useToastEffect } from '@/components/Toast/Toast'
  export default {
    name: 'Order',
    components: {
      Toast
    },
    setup() {
      const route = useRoute()
      // 获取路由实例
      const router = useRouter()
      const store = useStore()

      const showConfirm = ref(false)

      const handleSubmitClick = status => {
        showConfirm.value = status
      }

      const shopId = route.params.shopId // 店铺id
      const { shopName, calculations, productList } = useCommonCartEffect(shopId)

      const { show, message, toastMsg } = useToastEffect()
      const handleConfirmOrder = async isCanceled => {
......
      }
      return {
        show,
        message,
        showConfirm,
        handleSubmitClick,
        calculations,
        handleConfirmOrder
      }
    }
  }
</script>

GIF.gif

去结算优化

src\views\shop\Cart.vue

<template>
  <!-- 蒙层 -->
  <div class="mask" v-if="showCart && calculations.total > 0" @click="handleCartShowChange"></div>
  <div class="cart">
    <div class="product" v-show="showCart && calculations.total > 0">
   ......
    </div>
    <div class="check">
   ......
      <div class="check__btn" v-show="calculations.totalPrice > 0">
        <router-link :to="{ path: `/orderConfirmation/${shopId}` }"> 去结算 </router-link>
      </div>
    </div>
  </div>
</template>

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

GIF.gif

订单页面开发之前的准备

增加路由src\router\index.js

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

修改src\views\cartList\CartList.vue

<template>
  <!-- 主体内容容器 -->
  <div class="wrapper">
    <!-- 主体商铺展示内容 -->
    CartList
  </div>
  <!-- 底部主菜单容器 -->
  <Docker :current-index="1" />
  <router-view />
</template>

<script>
  import Docker from '@/components/Docker/Docker'
  export default {
    name: 'CartList',
    components: { Docker }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    right: 0;
    padding: 0 0.18rem 0.1rem 0.18rem;
  }
</style>

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

<template>
  <!-- 底部主菜单容器 -->
  <div class="docker">
    <span
      :class="{ docker__item: true, 'docker__item--active': index === currentIndex }"
      v-for="(item, index) in dockerList"
      :key="index"
    >
      <router-link :to="item.to">
        <div class="docker__item_icon">
          <i :class="item.icon"></i>
        </div>
        <div class="docker__item__title">{{ item.title }}</div>
      </router-link>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'Docker',
    props: {
      currentIndex: {
        type: Number,
        required: true
      }
    },
    setup() {
      const dockerList = [
        {
          active: true,
          icon: 'custom-icon custom-icon-home',
          title: '首页',
          to: '/'
        },
        {
          icon: 'custom-icon custom-icon-shopping',
          title: '购物车',
          to: '/cartList'
        },
        {
          icon: 'custom-icon custom-icon-order',
          title: '订单',
          to: '/orderList'
        },
        {
          icon: 'custom-icon custom-icon-my',
          title: '我的',
          to: '/'
        }
      ]

      return { dockerList }
    }
  }
</script>

<style lang="scss" scoped>
......
</style>

修改src\views\home\Home.vue

<template>
  <!-- 主体内容容器 -->
  <div class="wrapper">
    <StaticPart />
    <!-- 主体商铺展示内容 -->
    <Nearby />
  </div>
  <!-- 底部主菜单容器 -->
  <Docker />
  <router-view />
</template>

<script>
  import StaticPart from '@/views/home/StaticPart'
  import Nearby from '@/views/home/Nearby'
  import Docker from '@/views/home/Docker'
......
  </script>

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

......
<script>
  import { ref } from 'vue'
  import { useCommonCartEffect } from '@/effects/cartEffects'
  import { useRoute, useRouter } from 'vue-router' // 路由跳转方法
  import { useStore } from 'vuex'
  import { post } from '@/utils/request'
  import Toast, { useToastEffect } from '@/components/Toast/Toast'

  const useMakeOrderEffect = (shopName, productList, toastMsg) => {
    // 获取路由实例
    const router = useRouter()
    const store = useStore()

    /**
     * 下单交易逻辑：提交订单或订单取消
     */
    const handleConfirmOrder = async isCanceled => {
      try {
        debugger
        console.log('productList:')
        console.log(productList)
        const products = []
        for (const i in productList.value) {
          const product = productList.value[i]
          products.push({ id: product._id, num: product.count })
        }
        console.log('products:')
        console.log(products)
        const resultData = await post('/api/createOrder', {
          addressId: 'xxx', // 收货地址 id
          shopId: shopId, // 商店id
          shopName: shopName.value,
          isCanceled: isCanceled, // 订单是否被取消了
          products: products
        })
        console.log('post /api/createOrder：')
        console.log(resultData)
        if (resultData?.code === 200) {
          // 如果订单提交成功，需要清空购物车中的商品数据
          store.commit('clearCartData', { shopId })
          router.push({ name: 'OrderList' })
        } else {
          toastMsg('订单提交失败！')
        }
      } catch (e) {
        toastMsg('请求失败！')
      }
    }
    return { handleConfirmOrder }
  }
  /**
   * 确认订单弹窗控制
   */
  const useShowMakeEffect = () => {
    const showConfirm = ref(false)

    const handleSubmitClick = status => {
      showConfirm.value = status
    }

    return {
      showConfirm,
      handleSubmitClick
    }
  }
  export default {
    name: 'Order',
    components: {
      Toast
    },
    setup() {
      const route = useRoute()
      const shopId = route.params.shopId // 店铺id

      const { shopName, calculations, productList } = useCommonCartEffect(shopId)
      const { show, message, toastMsg } = useToastEffect()
      const { handleConfirmOrder } = useMakeOrderEffect(shopName, productList, toastMsg)
      const { handleSubmitClick, showConfirm } = useShowMakeEffect()

      return {
        show,
        message,
        showConfirm,
        handleSubmitClick,
        calculations,
        handleConfirmOrder
      }
    }
  }
</script>
......

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

<template>
  <!-- 主体内容容器 -->
  <div class="wrapper">
    <!-- 主体商铺展示内容 -->
    OrderList
  </div>
  <!-- 底部主菜单容器 -->
  <Docker :current-index="2" />
  <router-view />
</template>

<script>
  import Docker from '@/components/Docker/Docker'
  export default {
    name: 'OrderList',
    components: { Docker }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    right: 0;
    padding: 0 0.18rem 0.1rem 0.18rem;
  }
</style>

最终效果如下：

GIF.gif