弹窗优化
目前进入订单页面后，是直接弹窗，但实际使用效果是点击“提交订单”后再弹窗。
优化如下：
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' // 路由跳转方法
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
