• 售前

  • 售后

热门帖子
入门百科

vue项目中的付出功能实现(微信付出和付出宝付出)

[复制链接]
待该州伙 显示全部楼层 发表于 2022-1-8 05:19:14 |阅读模式 打印 上一主题 下一主题
目次


  • 项目中常见的支付方式   
  • 支付宝支付
  • 微信支付

项目中常见的支付方式   


  • 支付宝支付   
  • 微信支付   
  • 余额支付(也需要支付宝或微信充值)
注意:本文仅从前端角度睁开教学

支付宝支付

项目难点:
页面是h5网页,用支付宝支付必须得到支付宝授权,调用支付宝的api。
(怎样授权请参照:调用支付宝api)
支付宝支付的一样平常过程是:
    调用订单接口,获得订单号,支付金额等。
    传递订单号,金额 至预支付接口
    背景会返回来一个form,然后提交form主动跳转到支付宝支付页面
支付过程:
    下图为为接口文档,支付接口


    当我们选中支付宝,radio=1;
    当我们点击支付按钮,pay()方法执行
    此时我们调用后端支付接口,传入接口文档要求字段,订单号,金额等。
    背景回传给我们一个{code:201,data:""};
    此时我们把form注入到我们页面中,让form表单提交,跳转到支付宝页面
  1.   topay(){
  2.       switch(this.radio){
  3.         case '3':
  4.         this.yuer();
  5.         break;
  6.         case '1':
  7.         this.zhifubao();
  8.         case '0':
  9.         this.getWechatCode();
  10.       }
  11.     },
  12.    zhifubao(){
  13.      payByZhifubao(
  14.        {
  15.          OutTradeNo:'Oct20200909095646265303127',//商户订单号,商户网站订单系统中唯一订单号,必填 。需要保证商户端唯一。
  16.           Subject: "手机网站支付测试",//主题
  17.           ProductCode: "QUICK_WAP_WAY",
  18.           body: "手机网站支付描述信息",//商品描述,可空
  19.           TotalAmount: 20 //付款金额,必填        }
  20.      ).then(res=>{
  21.        console.log(res);
  22.         if (res.code === 201) {
  23.             //将数据存到vuex中
  24.             // this.$store.dispatch('addAliFrom', res.data.data)
  25.             this.html = res.data;
  26.             var form = res.data;
  27.             const div = document.createElement("div");
  28.             div.innerHTML = form; //此处form就是后台返回接收到的数据
  29.             document.body.appendChild(div);
  30.             document.forms[0].submit();
  31.             //return this.$router.push('/aliPay')
  32.           } else {
  33.             return alert(res.data.msg);
  34.           }
  35.      })
  36.     },
复制代码
微信支付

步调:
微信支付背景步伐员会给你返一个地点,起首我们需要安装qrcodejs2将地点转换成二维码,需要先npm install qrcodejs2
然后需要一个div来存放这个微信二维码,宽高样式各位本身可以去css里写,我在这里还加了一个loading,有需要的也可以本身加
  1. <div id="wechatcode" v-loading="loading"
  2. element-loading-text="拼命加载中"
  3. element-loading-spinner="el-icon-loading"
  4. element-loading-background="rgba(0, 0, 0, 0.8)">
  5. </div>
复制代码
导入模块
  1. import QRCode from 'qrcodejs2' // 引入qrcode
复制代码
下面是接口数据获取然后操纵二维码
  1. getWechatCode() {
  2.                 Models
  3.                     .getModel("wechatpay")
  4.                     .get({
  5.                         orderId:this.orderId
  6.                     })
  7.                     .then(res => {
  8.                         if(res.data.code == 200){
  9.                             this.wechatPayUrl = res.data.resultData
  10.                             if(!this.flag){
  11.                             //重点是这里,其余的是为了我的切换业务逻辑和接口
  12.                                 let wechatcode = new QRCode('wechatcode', {
  13.                                     width: 200,
  14.                                     height: 200,
  15.                                     text: this.wechatPayUrl, // 二维码地址
  16.                                     colorDark: "#000",
  17.                                     colorLight: "#fff",
  18.                                 })
  19.                             }
  20.                             this.flag = true
  21.                             this.loading = false
  22.                             this.isWechatCodeShow = true
  23.                         }
  24.                     })
  25.         },
复制代码
在微信扫描支付完之后,背景职员可以拿到支付乐成结果,返给前台职员,那么前端职员只能不断去调接口查询是否已支付,在这里我们可以用生命周期来做轮询,在跳出之后需要烧毁
  1. mounted() {
  2.         this.getWechatCode()
  3.         //实现轮询
  4.         this.interval = window.setInterval(() => {
  5.         setTimeout(this.getOrderStatus(), 0);
  6.         }, 3000);
  7.         
  8.     },
  9.     beforeDestroy() {
  10.         //清除轮询   
  11.         clearInterval(this.interval)
  12.         this.interval = null
  13.     },
复制代码
这里的`getOrderStatus()方法是为了查询背景支付状态的,如果乐成跳转到支付页面,做个If else判定即可
到此这篇关于vue项目中的支付功能实现(微信支付和支付宝支付)的文章就介绍到这了,更多干系vue项目支付内容请搜索草根技能分享以前的文章或继承欣赏下面的干系文章希望各人以后多多支持草根技能分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作