微信扫码支付5-支付状态查询

一、查询支付状态

1、service层

接口：OrderService

boolean queryPayStatus(String orderNo);

实现：OrderServiceImpl

@Override
public boolean queryPayStatus(String orderNo) {
    QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("order_no", orderNo);
    Order order = baseMapper.selectOne(queryWrapper);
    return order.getStatus() == 1;
}

2、controller层

ApiOrderController：queryPayStatus

@GetMapping("/query-pay-status/{orderNo}")
public R queryPayStatus(@PathVariable String orderNo) {
    boolean result = orderService.queryPayStatus(orderNo);
    if (result) {//支付成功
        return R.ok().message("支付成功");
    }
    return R.setResult(ResultCodeEnum.PAY_RUN);//支付中
}

二、前端整合

1、api

api/order.js

queryPayStatus(orderNo) {
    return request({
        baseURL: 'http://localhost:8170',
        url: `/api/trade/order/query-pay-status/${orderNo}`,
        method: 'get'
    })
}

2、axios响应拦截

utils/request.js中的response响应拦截器

else if (res.code === 25000) { // 支付中
  return response.data // 不显示错误信息
}

3、支付页面

pages/pay/_id.vue

import orderApi from '~/api/order'

data() {
    return {
      timer: null // 定时器
    }
},

// created的时候就查询支付状态，没有必要，因为二维码页面尚未渲染，不可能支付成功
mounted() {
    // 启动定时器
    this.timer = setInterval(() => {
      this.queryPayStatus()
    }, 3000)
},

methods: {
    // 查询订单状态
    queryPayStatus() {
      orderApi.queryPayStatus(this.payObj.out_trade_no).then(response => {
        console.log('查询订单状态：' + response.code)
    
        // 支付成功后的页面跳转
        if (response.success) {
          this.$message.success(response.message)
          console.log('清除定时器')
          clearInterval(this.timer)
          // 三秒后跳转到课程详情页面观看视频
          setTimeout(() => {
            this.$router.push({ path: '/course/' + this.payObj.course_id })
          }, 3000)
        }
      })
    }
}