支付、打包优化

支付功能

组件准备

• src/router/index.js

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

• src/views/course-info/index.vue

  // 支付
    handlePay () {
      // 检测是否登陆
      if (this.$store.state.user) {
        // 如果已登陆。跳转支付页
        this.$router.push({
          name: 'pay',
          params: {
            courseId: this.courseId
          }
        })
      } else {
        // 如果未登陆，跳转登陆，并记录本页面信息，登陆成功后跳回当前页
        this.$router.push({
          name: 'login',
          query: {
            redirect: this.$route.fullPath
          }
        })
      }
    },

布局处理与数据绑定

• src/views/pay/index.vue ```vue

<a name="DNP0W"></a>
### 接口封装
- src/servires/pay.js
```javascript
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 订单号必传
export const getPayResult = params => {
  return request({
    method: 'GET',
    url: '/front/pay/getPayResult',
    headers: { 'content-type': 'application/json' },
    params
  })
}

• src/views/pay/index.vue

  <script>
  import { createOrder, getPayInfo } from '@/services/pay'
  export default {
  name: 'Pay',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      // 课程信息
      course: {},
      // 支付方式
      radio: 1,
      // 订单号
      orderNo: null,
      // 支付方式信息
      payInfo: {}
    }
  },
  methods: {
    // 支付
    // 加载支付信息
    async loadOrder () {
      // 创建订单，获取订单号
      const { data } = await createOrder({
        goodsId: this.courseId
      })
      this.orderNo = data.content.orderNo
      // 获取支付方式
      const { data: payInfo } = await getPayInfo({
        shopOrderNo: this.orderNo
      })
      this.payInfo = payInfo.content.supportChannels
    },
    // 获取课程信息
    async loadCourse () {
      const { data } = await getCourseById({
        courseId: this.courseId
      })
      this.course = data.content
    }
  },
  created () {
    this.loadCourse()
    this.loadOrder()
  }
  }
  </script>

  支付请求

  <script>
  import { initPayment, getPayResult } from '@/services/pay'
  export default {
  methods: {
    // 支付
    async handlePay () {
      // 发起支付请求，获取地址与支付订单号
      const { data } = await initPayment({
        goodsOrderNo: this.orderNo,
        channel: this.radio === 1 ? 'weChat' : 'aliPay',
        returnUrl: 'http://edufront.lagou.com/'
      })
      console.log(data)
      // 接收响应地址，并进行跳转
      window.location.href = data.content.payUrl
      const timer = setInterval(async () => {
        // 发起查询支付结果请求
        const { data: payResult } = await getPayResult({
          orderNo: data.content.orderNo
        })
        // 如果支付结果成功，清除定时器，并提示购买成功，跳回学习页
        if (payResult.content && payResult.content.status === 2) {
          clearInterval(timer)
          this.$toast.success('购买成功')
          this.$router.push({
            name: 'learn'
          })
        }
      }, 1000)
    },
  }
  }
  </script>

  打包优化

  配置文件

• vue.config.js ```javascript module.exports = { // 生产环境不生成 .map productionSourceMap: false, // 不单独打包 css css: { extract: false },

}

<a name="fU4wn"></a>
### 图片压缩
安装插件：
```powershell
npm install image-webpack-loader

• vue.config.js

  module.exports = {
  chainWebpack: config => {
    // 图片压缩 loader 配置
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()
  }
  }

Vant 按需引入

安装插件：

npm install babel-plugin-import -D

配置文件：babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }]
  ]
}

CDN 引入

• public/index.html ```html <!DOCTYPE html>

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