Vue项目实战：订单确认页面实现

目录

• 订单父组件结构封装
• 地址和商品数据加载
• 地址删除功能实现
• 新增地址交互实现
• 地址编辑和订单提交

订单确认页面 如下：

（1）订单父组件结构封装

• 回顾路由文件router.js中关于order的路由:

       {
   
            path: '/order',
            name: 'order',
            component: Order,
            children: [
                {
   
                    path: 'list',
                    name: 'order-list',
                    component: OrderList
                },
                {
   
                    path: 'confirm',
                    name: 'order-confirm',
                    component: OrderConfirm
                },
                {
   
                    path: 'pay',
                    name: 'order-pay',
                    component: OrderPay
                },
                {
   
                    path: 'alipay',
                    name: 'alipay',
                    component: AliPay
                }
            ]
        }

上面那样子定义路由是因为订单列表、支付、确认页面的页面结构相似。所以把他们封装在order路由下。

• order.vue文件如下：

<template>
    <div>
        <order-header></order-header>
        <router-view></router-view>
        <ServiceBar></ServiceBar>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
import OrderHeader from './../components/OrderHeader';
import ServiceBar from './../components/ServiceBar';
import NavFooter from './../components/NavFooter';
export default {
    
    name: 'order',
    components: {
    
        OrderHeader,
        NavFooter，
        ServiceBar
    }
}
</script>

订单确定、列表、支付页面的<order-header></order-header>组件中的文字内容不一样。

我们可以通过在各个页面中去单独引入<order-header></order-header>同时绑定不同的文字内容，添加展示内容。或者像上面order.vue文件一样，在order.vue中引入，然后通过路由判断当前页面属于哪个，并展示不同内容。

下面是第二种方式：

        <order-header v-bind:title="title">
            <template v-slot:tip>
                <span>{
  {tip}}</span>
            </template>
        </order-header>
<script>
export default {
    
    data() {
    
        return {
    
            title: '',
            tip: ''
        }
    },
    mounted() {
    
       let path = this.$route.path;
       if (path == '/order/confirm') {
    
           this.title = '订单确认';
           this.tip = '请认真填写收货地址';
       }  else if (path == '/order/list') {
    
           this.title = '订单列表';
           this.tip = '请谨防钓鱼链接或咋骗电话，了解更多';           
       } else if (path == '/order/pay') {
    
           this.title = '订单支付';
           this.tip = '请谨防钓鱼链接或咋骗电话，了解更多';           
       }
    }
}
</script>