vue功能之“微信支付“

一、安装并引用依赖

cnpm i qrcode --save

import QRCode from 'qrcode'//通过插件生成二维码

二、代码


<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>

三、效果展示

vue功能之“微信支付“相关推荐

vue前端实现微信支付-微信公众号JSSDK
最近在做支付功能,微信支付准备工作之类的请参考官方说明,注意个人申请的测试号不支持,要申请企业号,还要商户号,开通支付权限,配置域名,JSSDK的权限问题,尽可能都开通吧! 官方地址可参考这里:接入准 ...
在vue中获取微信支付code及code被占用问题的解决？
在vue中获取微信支付code及code被占用问题的解决? 参考文章: (1)在vue中获取微信支付code及code被占用问题的解决? (2)https://www.cnblogs.com/pana ...
GitHub开源的阿里支付宝支付功能和微信支付功能
GitHub开源的阿里支付宝支付功能和微信支付功能,包括:阿里沙箱环境支付宝测试Demo,支付宝支付整合到spring+ springmvc+mybatis环境和微信整合到如上环境,功能非常齐全,只需 ...
Day214.课程评论功能、微信支付实现课程支付模块前后端 -谷粒学院
谷粒学院课程评论功能一.数据库设计数据库 edu_comment 数据表 CREATE TABLE `edu_comment` (`id` char(19) NOT NULL COMMENT ' ...
网站如何接入微信支付功能？微信支付详细教程它来了（建议收藏）
2021/9/3/23:23 文章目录一.微信支付流程分析 1.创建订单接口 1.1.创建订单业务逻辑分析 1.2.创建订单业务逻辑核心代码 2.待支付页面数据回显接口 2.1.待支付页面数据逻辑分 ...
vue功能之“支付宝支付“
一.代码 <template><div class="order-pay"><order-header title="订单支付"& ...
vue Pc端微信支付和支付宝支付
1.支付宝支付 <template><div><el-dialogtop="7.5vh"title="支付":visible.sy ...
微信分账功能与微信支付企业付款相关内容详解(payjs版）
PAYJS开通微信分账功能以来,有很多同学咨询相关情况.很多同学关心有没有什么办法,可以让自己的商户号快速开通企业付款功能.这里就介绍下微信分账的具体相关内容,可以完美解决问题. 一.什么是微信分账? ...
laravel+php+支付功能,laravel+微信支付源码
业务流程时序图 image 仔细阅读并看懂 (不是看过,是看明白+看完 ) 微信官方文档微信开放平台文档: 1.下载微信支付php demo 放在自己的线上服务器上,配置好ngixn(或者apac ...

vue功能之“微信支付“

vue功能之“微信支付“相关推荐

最新文章

热门文章