支付、打包优化

支付页

组件准备

创建支付组件文件

// views/pay/index.vue

添加路由，注意，支付页要登录才能显示

// router/index.js
...
  // 支付页
  {
    path: '/pay/:courseId/',
    name: 'pay',
    component: () => import(/* webpackChunkName: 'pay' */'@/views/pay/index'),
    meta: { requiresAuth: true },
    props: true
  },
...

课程详细页中点击购买后跳转，并且传递课程ID

• 检测用户是否登录，登录时跳转支付，未登录时跳转登录页并且记录当前页信息

// course-info/index.vue
...
立即购买
...

...

支付结构

使用Vant的[Radio单选框]组件与cell一并使用
设置到页面中

• 添加左侧支付宝与微信图标
• 进行布局样式设置

// pay/index.vue
      ...
      
      
        

          
支付方式
          
            
              
                
                
                
              
              
                
                
              
            
          
        
        ￥{{ course.discounts }} 立即支付
      
    
  

逻辑处理

支付功能需要有以下的步骤：

• 支付页面打开后，需要根据商品ID（课程ID）创建商品订单
• 用户操作选择支付方式（微信，支付宝）
• 跳转到支付页，支付页会自动唤起对应的APP
• 支付，并且跳转成功，跳转Learn组件

需要使用到的接口

• 订单接口：
  • 创建商品订单接口：地址
• 支付接口
  • 获取支付方式：地址
  • 创建订单（发起支付）：地址
• 查询订单（支付结果）：地址

封装接口

新建src/services/pay.js

// services/pay.js
import request from '@/utils/request'

// 创建商品订单接口
//  - goodsId 商品（课程）ID 必传
export const createOrder = data => {
  return request({
    method: 'POST',
    url: '/front/order/saveOrder',
    data
  })
}

// 获取支付方式接口
//  - shopOrderNo 订单号必传
export const getPayInfo = params => {
  return request({
    method: 'GET',
    url: '/front/pay/getPayInfo',
    params
  })
}

// 创建订单（发起支付）
//  - goodsOrderNo, channel, returnUrl 必传
export const initPayment = data => {
  return request({
    method: 'POST',
    url: '/front/pay/saveOrder',
    data
  })
}

// 查询订单（查询支付结果）
//  - orderNo 订单号必传
//  - 由于接口要求传递 JSON，所以进行 headers 设置
export const getPayResult = params => {
  return request({
    method: 'GET',
    url: '/front/pay/getPayResult',
    headers: { 'content-type': 'application/json' },
    params
  })
}

创建订单与获取支付方式

引入并调用接口

• 调用创建商品订单接口获取订单号
• 调用获取支付方式接口
• 根据支付方式接口设置支付区域的radio数据

// pay/index.vue
...

...

  
    
      ...
      
    
    
      ...
      
    
  

支付请求

点击支付按钮时，发送请求

// pay/index.vue
...
...
...

    
    
    ...
  

// vue.config.js
module.exports = {
  ...
  configureWebpack: {
    // 通过 CDN 引入
    externals: {
      'vue': 'Vue',
      'vant': 'vant'
    }
  }
}

比较一下：
npm 安装方式打包结果

CDN安装方式

显而易见，打包体积有了明显的变化

这里演示的仅为 Vue 与 Vant 的 CDN 引入方式，其他工具也可以如此操作，但通常我们只会将体积比较大的第三方文件进行 CDN 引入，而不会将所有包都设置为这种方式（文件数多，首次的请求数也会变多）。

完毕