pc商城 vue----------支付功能

api接口

//提交订单
const submitOrder = (tradeNo, data) => {
  return axios.post(`/api/order/auth/submitOrder?tradeNo=${tradeNo}`, data)
}

// 获取支付信息
const createNative = (orderId) => {
  return axios.get(`/api/payment/weixin/createNative/${orderId}`)
}
//获取支付状态
const queryPayStatus = (orderId) => {
  return axios.get(`/api/payment/weixin/queryPayStatus/${orderId}`)
}

提交订单

点击提交按钮的时候，还需要向服务器发一次请求【把支付信息传递给服务器】获取订单号

  //提交订单
    async submitOrder() {
      //交易编码
      let { tradeNo } = this.OrderInfo;
      let data = {
        //收件人的名字 电话 地址 支付方式 留言 商品清单
        consignee: this.userDefaultAddress.consignee,
        consigneeTel: this.userDefaultAddress.phoneNum,
        deliveryAddress: this.userDefaultAddress.fullAddress,
        paymentWay: "ONLINE",
        orderComment: this.msg,
        orderDetailList: this.OrderInfo.detailArrayList,
      };
      //获取订单号
      let result = await this.$api.submitOrder(tradeNo, data);
      if (result.code == 200) {
        this.orderId = result.data;
        this.$router.push("/Pay?orderId=" + this.orderId);
      } else {
        console.log(result.data);
      }
    },

获取支付信息

订单号换取支付信息  支付价格  二维码

  computed: {
    orderId() {
      return this.$route.query.orderId;
    },
  },
  mounted() {
    this.GetpayInfo();
  },
  methods: {
    async GetpayInfo() {
      let { data, code } = await this.$api.createNative(this.orderId);
      if (code != 200) return;
      console.log(data);
      this.payinfo = data;
    },
  }

qrcode生成二维码 支付判断

npm i  qrcode

QRCode.toDataURL生成二维码地址

开启定时器轮训请求支付状态接口，支付成功关闭定时器 

    import QRCode from "qrcode";
    async open() {
      //生成二维码地址
      let url = await QRCode.toDataURL(this.payinfo.codeUrl);
      this.$alert(`<img src=${url} />`, {
        dangerouslyUseHTMLString: true,
        center: true,
        showClose: false,
        showCancelButton: true,
        cancelButtonText: "支付遇见问题",
        confirmButtonText: "已支付成功",
        // 关闭弹出层
        beforeClose: (type, instance, done) => {
          // type:区分取消确认
          // instance 组件实例
          // done关闭弹出框的方法
          if (type == "cancel") {
            alert("请联系管理员");
            clearInterval(this.timer);
            this.timer = null;
            done();
          } else {
            //判断是否真的支付了
            // if (this.code == 200) {
            clearInterval(this.timer);
            this.timer = null;
            done();
            this.$router.push("/PaySuccess");
            // }
          }
        },
      });
      //支付成功跳转页面或者失败，提示信息
      //如果没有定时器开启一个新的定时器
      if (!this.timer)
        [
          (this.timer = setInterval(async () => {
            //获取用户支付状态
            let result = await this.$api.queryPayStatus(this.orderId);
            console.log(result);
            // 成功
            if (result.code == 200) {
              // 清除定时器
              clearInterval(timer);
              this.timer = null;
              //报存支付成功后的code
              this.code = result.code;
              //关闭弹出层
              this.$msgbox.close();
              this.$router.push("/PaySuccess");
            }
          }, 1000)),
        ];
    },

elementui按需导入

npm i element-ui -S

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

 三种方式

import { Button, Select } from 'element-ui';
Vue.use(Dialog);
Vue.prototype.$prompt = MessageBox.prompt;