文章目录

• • 01-结算-页面布局
  • 02-结算-渲染页面

01-结算-页面布局

落的代码：

1.定义组件基础解构和配置路由
src/views/member/pay/checkout.vue 定义组件

src/router/index.js 配置路由

const PayCheckout = () => import('@/views/member/pay/checkout')

      { path: '/cart', component: Cart },
+     { path: '/member/checkout', component: PayCheckout }

2.完成页面布局效果

02-结算-渲染页面

目的：分离收货地址组件，渲染页面默认内容。

大致步骤：

• 分离收货地址组件
• 定义获结算信息API接口
• 页面组件获取数据，传入地址组件，渲染剩余内容
• 渲染地址组件

落的代码：

1.分离收货地址组件
src/member/pay/components/checkout-address.vue 定义组件

src/views/member/pay/checkout.vue 使用组件

+import CheckoutAddress from './components/checkout-address'
export default {name: 'XtxPayCheckoutPage',
+  components: { CheckoutAddress }
}

        
收货地址

+          

原有结构和样式代码需要删除。

2.定义获结算信息API接口
src/api/order.js 定义接口

import request from '@/utils/request'/*** 获取结算信息*/
export const findCheckoutInfo = () => {return request('/member/order/pre', 'get')
}

3.页面组件获取数据，传入地址组件，渲染剩余内容
src/views/member/pay/checkout.vue 获取数据

+import { findCheckoutInfo } from '@/api/order'
export default {name: 'XtxPayCheckoutPage',components: { CheckoutAddress },setup () {
+    const checkoutInfo = ref(null)
+    findCheckoutInfo().then(data => {
+      checkoutInfo.value = data.result
+    })
+    return { checkoutInfo }}
}

src/views/member/pay/checkout.vue 传入地址组件，地址列表

+      
收货地址

+          

src/views/member/pay/checkout.vue 渲染剩余内容

            
{{item.name}}
{{item.attrsText}}¥{{item.payPrice}}{{item.count}}¥{{item.totalPrice}}¥{{item.totalPayPrice}}

          
商品件数：
{{checkoutInfo.summary.goodsCount}}件
商品总价：
¥{{checkoutInfo.summary.totalPrice}}
运费：
¥{{checkoutInfo.summary.postFee}}
应付总额：
¥{{checkoutInfo.summary.totalPayPrice}}

4.渲染地址组件
src/member/pay/components/checkout-address.vue

• 接收数据

  props: {list: {type: Array,default: () => []}},

• 得到默认显示地址

  setup (props) {// 显示的地址const showAddress = ref(null)if (props.list.length) {const defaultAddress = props.list.find(item => item.isDefault === 1)if (defaultAddress) {showAddress.value = defaultAddress} else {// eslint-disable-next-line vue/no-setup-props-destructureshowAddress.value = props.list[0]}}return { showAddress }}

• 渲染组件

    
您需要先添加收货地址才可提交订单。
收货人：{{showAddress.receiver}}
联系方式：{{showAddress.contact}}
收货地址：{{showAddress.fullLocation.replace(/ /g,'')+showAddress.address}}
修改地址