支付源代码

puzhiren819

已于 2023-03-14 20:01:32 修改

阅读量688

点赞数

分类专栏： js vue 文章标签： vue.js 前端 javascript

于 2022-05-18 16:57:40 首次发布

本文链接：https://blog.csdn.net/qq_60163657/article/details/124539462

版权

vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

18 篇文章

订阅专栏

本文介绍如何在Vue.js应用中统一管理接口导入，并演示了提交订单及后续支付过程。通过在main.js中全局引入API，创建一个提交订单的方法，处理订单数据并调用接口。在Vue组件中，监听提交订单操作，成功后进行路由跳转到支付页面，展示订单号和应付金额。支付组件中，从路由参数获取订单号，调用接口获取支付信息。整个流程涉及Vue的生命周期、异步操作和接口调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在mian.js 中统一引入接口

//统一引入

import * as API from '@/api';

new Vue({

render: (h) => h(App),

//全局事件总线$bus配置

beforeCreate() {

Vue.prototype.$bus = this;

Vue.prototype.$API =API

= },

接口

//提交订单的接口
//URL:/api/order/auth/submitOrder?tradeNo={tradeNo}  method:post

export const reqSubmitOrder = (tradeNo, data) =>
  requests({
    url: `/order/auth/submitOrder?tradeNo=${tradeNo}`,
    data,
    method: "post",
  });

vue 文件中

    <div class="sub clearFix">
      <a class="subBtn" @click="submitOrder">提交订单</a>
    </div>


<script>
export default {
    data() {
    return {
      //订单号
      orderId: "",
    };
  },
  methods: {
    //提交订单
    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, //商品清单
      };
      //需要带参数的：tradeNo
      let result = await this.$API.reqSubmitOrder(tradeNo, data);
      //提交订单成功
      if (result.code == 200) {
        this.orderId = result.data;
        //路由跳转 + 路由传递参数
        this.$router.push('/pay?orderId='+this.orderId);
       //提交的订单失败
      } else {
        alert(result.data);
      }
    },
}


}
</script>

支付组件里

<span class="fl">请您在提交订单<em class="orange time">4小时</em
>之内完成支付，超时订单会自动取消。订单号：<em>{{orderId}}</em></span
<span class="fr"><em class="lead">应付金额：</em>
<em class="orange money">￥{{ payInfo.totalFee }}</em></span>
<div class="submit">
    <a class="btn" @click="open">立即支付</a>
</div>



data() {
  return {
      payInfo: {},
   };}

computed: {
    orderId() {
//计算订单号 
      return this.$route.query.orderId;
    },
  //工作的时候：尽量别再生命周期函数中async|await
  mounted() {
    this.getPayInfo();
  },
  methods: {
    //获取支付信息
    async getPayInfo() {
      let result = await this.$API.reqPayInfo(this.orderId);
      //如果成功：组件当中存储支付信息
      if (result.code == 200) {
        this.payInfo = result.data;
      }
    }

获取支付信息接口

//获取支付信息
//URL:/api/payment/weixin/createNative/{orderId}  GET
export const reqPayInfo = (orderId) =>
  requests({ url: `/payment/weixin/createNative/${orderId}`, method: "get" });