vue功能之“支付宝支付“

一、代码

<template><div class="order-pay"><order-header title="订单支付"><template v-slot:tip><span>请谨防钓鱼链接或诈骗电话，了解更多</span></template></order-header><div class="wrapper"><div class="container"><div class="item-pay"><h3>选择以下支付方式付款</h3><div class="pay-way"><p>支付平台</p><div class="pay pay-ali" :class="{'checked':payType==1}" @click="paySubmit(1)"></div><div class="pay pay-wechat" :class="{'checked':payType==2}" @click="paySubmit(2)"></div></div></div></div></div></div>
</template>
<script>
import QRCode from 'qrcode'//通过插件生成二维码export default{name:'order-pay',data(){return {orderNo:this.$route.query.orderNo,addressInfo:'',//收货人地址orderDetail:[],//订单详情，包含详情列表showDetail:false,//是否显示订单详情payType:'',//1选中支付宝 2微信 状态showPay:false,//是否显示微信支付弹窗payImg:'',//微信支付的二维码地址showPayModal:false,//是否显示二次支持确认弹窗T:'',//定时器的IDpayment:0,//订单总金额}},methods:{paySubmit(payType){this.payType = payTypeif(this.payType == 1){window.open('/#/order/alipay?orderId='+this.orderNo,'_blank')//新窗口打开的字符串拼接}else{this.$axios.post('/pay',{orderId:this.orderNo,orderName:'Vue高仿小米商城',//扫码支付时订单名称amount:0.01, //单位元payType:2, //1支付宝，2微信}).then((res)=>{QRCode.toDataURL(res.content).then(url => {this.showPay = true//this.payImg = url//this.loopOrderState()}).catch(err => {// console.error(err)this.$message.error('二维码转换失败')})})}},}
}
</script>

2.alipay组件

<template><div class="ali-pay"><loading v-if="loading"></loading><div class="form" v-html="content"></div></div>
</template>
<script>import Loading from './../components/Loading'export default{name:'alipay',//alipay当前的支付页面-到支付宝页面有个中转页面--信息components:{Loading},data(){return {orderNo:this.$route.query.orderId,content:'',loading:true,}},mounted(){this.paySubmit()},methods:{paySubmit(){this.$axios.post('/pay',{orderId:this.orderNo,orderName:'Vue高仿小米商城',//扫码支付时订单名称amount:0.01, //单位元payType:1, //1支付宝，2微信}).then((res)=>{this.content = res.contentsetTimeout(()=>{document.forms[0].submit()//通过submit()传递给服务器，进行响应},100)})}}}
</script>

三、效果展示

vue功能之“支付宝支付“相关推荐

订单支付功能对接支付宝支付接口
求助:这张GIF的效果动图整了一个多小时,没找到好的编辑软件,都太难用了.如果恰巧看到这篇文章有好的GIF编辑或者录制软件,请推荐一个!万谢订单支付功能是购物的最后一个环节,本文将通过对接支付宝的 ...
vue 跳转支付宝支付页面
//payType==2为支付宝支付if(payType==2){//获取支付页面toAlipay(res.data.data).then(result=>{if(result.data.cod ...
vue功能之“微信支付“
一.安装并引用依赖 cnpm i qrcode --save import QRCode from 'qrcode'//通过插件生成二维码二.代码 <template><div c ...
alipay.trade.page.pay 解决vue项目下支付宝支付不能在新窗口打开收银台的问题
由于PC端扫码支付,返回的是个form表单形式,需要在新窗口打开支付宝收银台如下 1.提前创建一个dom 2.将获取到的form表单放入进去,再通过js触发from里面的input type='sub ...
Javaweb支付宝支付
pay.ftl <span style="white-space:pre"> </span><div class="orderMes&quo ...
一条语句完成微信、支付宝支付，生成支付二维码
PayApiFun.dll这个动态库中包含了:微信付款码支付.生成微信支付二维码扫码支付.按商户单号查询微信支付状态.关闭未支付的微信订单.支付宝付款码支付.生成支付宝支付二维码扫码支付.按商户单号查 ...
微擎支付返回商户单号_微信、支付宝支付动态库PayApiFun.dll说明
微信.支付宝支付动态库PayApiFun.dll说明 PayApiFun.dll这个动态库中包含了:微信付款码支付.生成微信支付二维码扫码支付.按商户单号查询微信支付状态.关闭未支付的微信订单.支付宝 ...
vue支付宝html,Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
vue - 【超详细】网站接入使用支付宝支付功能，点击支付跳转新页面后生成订单及支付二维码，实现支付宝在线付款详细的教程（整个支付的完整配置及支付流程，一键复制源码开箱即用）！
效果图在vue网站网页项目中,实现跳转新页面生成订单,进行 "支付宝" 支付详细教程,包括详细的配置及示例完整源代码, 你可以直接复制示例的完整源码(保证可用),改个参数就能用了 ...

vue功能之“支付宝支付“

vue功能之“支付宝支付“相关推荐

最新文章

热门文章