查詢微信的支付狀態

一 查詢支付狀態

1 業務層

接口

boolean queryPayStatus(String orderNo);

實現

/**
* 查詢支付結果
*
* @param orderNo 訂單號
* @return true 已支付  false 未支付
*/
@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 web層

@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

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

2 axios響應攔截

else if (res.code === 25000) { // 支付中
  return response.data // 不顯示錯誤信息
}

3 支付頁面

// 導入依賴
import orderApi from '~/api/order'
  data() {
    return {
      timer: null // 定時器
    }
  },

  // 用戶看到二維碼之後開始輪詢調用後端接口
  mounted() {
    this.timer = setInterval(() => {
      this.queryPayStatus()
    }, 3000)
  },

  methods: {
    // 查詢訂單狀態
    queryPayStatus() {
      orderApi.queryPayStatus(this.payObj.out_trade_no).then(response => {
        console.log('queryPayStatus......' + 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)
        }
      })
    }
  }