【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>

去結算優化

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時，去結算按鈕不顯示，效果：

訂單頁面開發之前的準備

增加路由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>

最終效果如下：