支付之后的操作与前端整合

1、 扫码支付后接口实现（上小节已完成）

2、整合前端

（1）实现api接口方法 在api/order.js中添加查询支付状态的接口方法。

import request from '@/utils/request'

export default {
  // 生成课程支付订单
  createOrder(courseId) {
    return request({
      url: `/orderservice/order/createOrder/${courseId}`,
      method: 'get'
    })
  },
  // 获取订单信息
  getOrderInfo(orderNo) {
    return request({
      url: `/orderservice/order/getOrderInfo/${orderNo}`,
      method: 'get'
    })
  },
  // 根据订单号生成支付二维码
  createNative(orderNo) {
    return request({
      url: `/orderservice/paylog/createNative/${orderNo}`,
      method: 'get'
    })
  },
  // 查询支付状态
  queryOrderStatus(orderNo) {
    return request({
      url: `/orderservice/paylog/queryOrderStatus/${orderNo}`,
      method: 'get'
    })
  }

}

（2）在pay/_pid.vue页面实现js方法

<script>
import order from '@/api/order'
export default {
  // 异步请求操作
  asyncData({ params, error }) {
    // 调用接口
    return order.createNative(params.pid).then(response => {
      // 得到返回的两个结果
      return {
        payObj: response.data.data
      }
    })
  },
  // 每隔一段时间，调用一次查询订单状态接口，看是否支付成功
  // 在js里使用定时器方法实现，setInterval(()=>{},5000)
  data() {
    return {
      time1: '' // 定时器返回值
    }
  },
  mounted() {
    // 每5秒钟调用一次查询
    this.time1 = setInterval(() => {
      this.queryOrderStatusInfo()
    }, 5000)
  },
  methods: {
    queryOrderStatusInfo() {
      order.queryOrderStatus(this.payObj.out_trade_no).then(response => {
        // 判断是否成功
        if (response.data.success) {
          // 支付成功
          // 清除定时器
          clearInterval(this.time1)
          // 提示成功
          this.$message({
            type: 'success',
            message: '支付成功!'
          })
          // 跳转详情页面
          this.$router.push({ path: '/course/' + this.payObj.course_id })
        }
      })
    }
  }
}
</script>