彈窗優(yōu)化
目前進入訂單頁面后玩裙，是直接彈窗，但實際使用效果是點擊“提交訂單”后再彈窗。
優(yōu)化如下：
src\views\orderConfirmation\Order.vue
<template>
<div class="order">
<div class="order__price">
實付金額 ¥<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' // 路由跳轉(zhuǎn)方法
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
去結算優(yōu)化
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>
當商品數(shù)量為0時，去結算按鈕不顯示市怎，效果：
GIF.gif
訂單頁面開發(fā)之前的準備
增加路由src\router\index.js
{
path: '/orderList',
name: 'OrderList',
component: () => import(/* webpackChunkName: "orderList" */ '../views/orderList/OrderList.vue')
},
修改src\views\cartList\CartList.vue
<template>
<!-- 主體內(nèi)容容器 -->
<div class="wrapper">
<!-- 主體商鋪展示內(nèi)容 -->
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>
<!-- 主體內(nèi)容容器 -->
<div class="wrapper">
<StaticPart />
<!-- 主體商鋪展示內(nèi)容 -->
<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>
調(diào)整src\views\orderConfirmation\Order.vue，將方法抽離封裝
......
<script>
import { ref } from 'vue'
import { useCommonCartEffect } from '@/effects/cartEffects'
import { useRoute, useRouter } from 'vue-router' // 路由跳轉(zhuǎn)方法
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) {
// 如果訂單提交成功区匠，需要清空購物車中的商品數(shù)據(jù)
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>
<!-- 主體內(nèi)容容器 -->
<div class="wrapper">
<!-- 主體商鋪展示內(nèi)容 -->
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
