（五）支付完之后：在跳转的页面完成判断 交易状态 ：请用无痕浏览器测试

请用无痕浏览器测试

状态参考：www.cnblogs.com/suiyisuixin…

开始对接支付宝：返回支付链接（PC 支付接口 参考） www.yuque.com/chenqiu/ali…

前端代码：Payment.vue

<template>
  <div class="Payment">
    <div v-if="showPay">成功支付</div>
    <div v-else>失败支付</div>
  </div>
</template>

<script>
import qs from "qs";
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      showPay: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      // 获取到跳转页面的url参数 out_trade_no  trade_no
      let data = {
        out_trade_no: this.$route.query.out_trade_no,
        trade_no: this.$route.query.trade_no,
      };
      // 发送请求
      let res = await http.$axios({
        url: "/api/successPay",
        method: "POST",
        headers: {
          token: true,
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify(data),
      });
      // console.log(res);
      if (res.code == 2) {
        // 页面展示支付成功
        this.showPay = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>

后端代码： 状态参考：www.cnblogs.com/suiyisuixin…

  // 支付成功 或 失败 
router.post('/api/successPay', function (req, res, next) {
  // 接收前端传递过来参数
  let {
    out_trade_no,
    trade_no
  } = req.body;

  // 前端传递过来的token,解析token
  let tokens = req.headers.token;
  let tokenObj = jwt.decode(tokens) //结果 { tel: '18666554444', iat: 1628506659 }

  console.log(out_trade_no,
    trade_no);

  // 对接支付宝
  //开始对接支付宝：返回支付链接（PC 支付接口） https://www.yuque.com/chenqiu/alipay-node-sdk/page_api
  const formData = new AlipayFormData();
  // 调用 setMethod 并传入 get，会返回可以跳转到支付页面的 url
  formData.setMethod('get');
  // 支付时信息
  formData.addField('bizContent', {
    out_trade_no,
    trade_no
  });

  // 返回promise
  const result = alipaySdk.exec(
    'alipay.trade.query', {}, {
      formData: formData
    },
  );
  // 后端请求支付宝，安装并要引入axios   npm install axios -S
  result.then(resData => {
    axios({
      method: 'GET',
      url: resData,
    }).then(data => {
      // console.log(data,'data');
      let response = data.data.alipay_trade_query_response
      if (response.code == "10000") {
        switch (response.trade_status) {
          // 状态参考：https://www.cnblogs.com/suiyisuixing/p/7467123.html
          case 'WAIT_BUYER_PAY':
            res.send({
              code: 1,
              data: {
                msg: '支付宝有交易记录，没付款'
              }
            })
            break;

          case 'TRADE_FINISHED':
            // 根据手机号查询用户表 保存id作为uid
            connection.query(`select * from user where tel = "${tokenObj.tel}"`, function (e, r) {
              if (r) {
                let uid = r[0].id
                // 根据uid 询订单表
                connection.query(`select * from order_pay where uid = ${uid} and order_id = "${out_trade_no}"`, function (e, r) {
                  if (r) {
                    let id = r[0].id
                    // 根据查出来的id 修改 订单状态
                    connection.query(`update order_pay set order_status = replace(order_status,"2","3") where id = ${id} `, function (e, rseults) {
                      res.send({

                        data: {
                          code: 2,
                          msg: '交易完成,不可退款'
                        }
                      })
                    })
                  }
                })
              }
            })
            break;
          case 'TRADE_SUCCESS':
            // 根据手机号查询用户表 保存id作为uid
            connection.query(`select * from user where tel = "${tokenObj.tel}"`, function (e, r) {
              if (r) {
                let uid = r[0].id
                // 根据uid 询订单表
                connection.query(`select * from order_pay where uid = ${uid} and order_id = "${out_trade_no}"`, function (e, r) {
                  if (r) {
                    let id = r[0].id
                    // 根据查出来的id 修改 订单状态 从 2 改到 3
                    connection.query(`update order_pay set order_status = replace(order_status,"2","3") where id = ${id} `, function (e, rseults) {
                      res.send({

                        data: {
                          code: 2,
                          msg: '交易完成'
                        }
                      })
                    })
                  }
                })
              }
            })
            break;

          case 'TRADE_CLOSED':
            res.send({
              data: {
                code: 3,
                msg: '交易关闭'
              }
            })
            break;

        }
      } else if (response.code == "40004") {
        res.send({
          data: {
            code: 4,
            msg: '交易不存在'
          }
        })
      }

    }).catch(err => {
      res.send({
        code: 500,
        data: {
          msg: '交易失败',
          err
        }
      })
    })
  })
})