vue Pc端微信支付和支付宝支付

1、支付宝支付

<template><div><el-dialogtop="7.5vh"title="支付":visible.sync="payDialogVisible"width="30%":show-close="false":close-on-click-modal="false"center><div class="qrcode"><div style="border-radius:2px;" class="payForm"><el-form ref="form" label-width="80px"><el-form-item label="商品名称:"><el-input v-model="name" readonly></el-input></el-form-item><el-form-item label="支付金额:"><el-input v-model="amount" readonly></el-input></el-form-item></el-form></div></div><span slot="footer" class="dialog-footer"><el-row><el-col :span="8"><div style="line-height: 2.1rem">请选择支付方式：</div></el-col><el-col :span="8"><span class="iconfont icon-zhifubao" style="font-size: 50px;color: #02A9F1;margin-right: 5%;cursor: pointer"@click="alipayPay"></span><span class="iconfont icon-weixin1" style="font-size:50px;color: #28C445;cursor: pointer"@click="wxPay"></span></el-col></el-row></span></el-dialog></div>
</template>
<script>import {order, alipay} from '../../../src/http/api.js'export default {data() {return {amount: '',name: '',payDialogVisible: false}},methods: {//跳转到微信支付页面wxPay() {this.$router.push('/wxPay/index')},//支付宝支付alipayPay() {this.fetchVideoPay()},//调用后台接口fetchVideoPay() {alipay().then(res => {document.querySelector('body').innerHTML = res.form // 查找到当前页面的body，将后台返回的form替换掉他的内容document.forms[0].submit()  // 执行submit表单提交，让页面重定向，跳转到支付宝页面})},init() {//获取订单详细信息order().then(res => {this.amount = res.amount + '元'this.name = res.name})}},created() {this.payDialogVisible = truethis.init()}}
</script>
<style scoped>.payForm {padding: 5%;}
</style>

2、微信支付
先安装：cnpm i qrcodejs2 -S
然后引入：import QRCode from “qrcodejs2”;
选择微信支付后跳转到支付页面（自己重构的），pages新建文件夹新建wxPay文件夹，再新建vue文件index.vue，index.vue中的写入以下代码：

<template><div><div class="title">微信扫码支付</div><div class="boxBg"><div class="mainbox"><div class="wxzfbox"><div class="timg"><img src="../../assets/img/wxPay/wxzf.png" alt="" height="45"></div><div class="wrap" id="qrcode" ref="qrcode"></div><div class="wxinfo"><ul><li><span>产品名称：</span><span>{{ this.name }}</span></li><li><span>订单金额：</span><span>{{ this.amount }}</span></li><li><span>实付金额：</span><span>{{ this.amount }}</span></li></ul></div></div></div></div></div>
</template>
<script>import {order, wxPay} from "../../http/api";import QRCode from "qrcodejs2";export default {data() {return {amount: '',name: '',qrcode: ''}},created() {this.getWxPays()this.getOrder()},methods: {//获取订单信息getOrder() {order().then(res => {this.amount = res.amount + '元'this.name = res.name})},//获取微信支付后台返回的urlgetWxPays() {//调用后台接口wxPay().then(res => {this.qrcode = res.resp.code_urlthis.$nextTick(() => {this.crateQrcode()})})},// 生成二维码crateQrcode() {new QRCode("qrcode", {width: 210,height: 210, // 高度text: this.qrcode,// 二维码内容background: "#f0f"})}}}
</script>
<style scoped>.title {height: 50px;background: #0ae;color: #FFF;text-align: center;font-size: 18px;line-height: 50px;}.boxBg {width: 100%;height: 630px;border-bottom: 1px solid #eee;background: #eee url('../../assets/img/wxPay/wxBg.jpg') no-repeat 35% -100px;}.mainbox {width: 1190px;margin: 0 auto;}.wxzfbox {width: 241px;float: right;margin-top: 55px;margin-right: 160px;background: #fff;border-top: 1px solid #e9e9e9;border: 1px solid #e5e5e5;box-shadow: 0px 1px 10px #e5e9ed;padding: 20px 30px;border-radius: 10px;}.wrap {width: 210px;height: 210px;display: block;margin: 30px auto;z-index: 99999;background: url('../../assets/img/wxPay/loading.gif') no-repeat center center;}.wxinfo {margin-top: 30px;font-weight: bold;}.wxzfbox .wxinfo ul {height: 155px;overflow: auto;}.wxzfbox .wxinfo ul li {font-size: 14px;padding: 5px 0 5px 10px;line-height: 20px;position: relative;}li {list-style-type: none;text-align: left;}
</style>

微信支付页面用到的图片如下，放到对应的文件夹下即可：

vue Pc端微信支付和支付宝支付相关推荐

vue PC端微信扫码登录
我用的element,要是在弹窗里面使用,还是用自定义弹窗比较好,据说用官方的el-dialog会出不来.上代码: 在index.html页面里面引入对应的脚本 <script src=&quo ...
vue pc端web页面微信支付和支付宝支付
业务场景介绍: pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ] 订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成 ...
vue玩转移动端H5微信支付和支付宝支付
业务场景介绍: H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] && 支付宝支付 [手机网站支付转 APP 支付官 ...
Java PC端微信、支付宝扫码支付（二）
Java PC端微信.支付宝扫码支付(二) 前几天写了微信支付,附上链接 https://blog.csdn.net/qq_43494610/article/details/90411391 ,今天抽 ...
Vue app安卓端移动端实现微信支付和支付宝支付
当前项目借助调用安卓和ios方法跳转第三方支付平台实现微信支付和支付宝支付涉及到的安卓方法: window.AndroidFunction.wxpay('传递的参数') // 点击确认支付hand ...
腾腾流氓，云云更流氓（问微信怎样接入支付宝支付），手贱的赶紧点，你会感谢我的...
草原上的两匹马! 打从当年微信开始布局公众号之初时,估计就已经想到了与支付宝正面冲突的场面,所以微信先来个瞒天过海,在春晚搞了个微信红包,那叫一个火呀,此时的云云隐隐感觉到些许不安. 早期的微信开发者 ...
微信支付和支付宝支付整合（含设计模式1）
微信支付和支付宝支付整合(含设计模式1) 1.说明: 设计模式:单例+策略模式+抽象在开发中经常对接微信支付和支付宝支付,相对来说,阿里的文档比微信的接口文档清晰一点,这里用的第三方库(com.gi ...
微信支付，支付宝支付，银联支付——三大支付总结
银联支付,支付宝支付,微信支付的三大总结,之前也有写过两篇. 微信支付,支付宝支付,银联支付--三大支付总结: http://blog.csdn.net/androidstarjack/article ...
java实现微信支付与支付宝支付接口
因为公司要求需要写支付宝支付与微信支付现在写完了,总结一下: 支付宝支付: 支付宝支付比较简单首先我说一下支付宝支付与微信支付大概的流程,就拿支付宝支付来说(微信同理) 首先去蚂蚁金服注册一下App ...

vue Pc端微信支付和支付宝支付

vue Pc端微信支付和支付宝支付相关推荐

最新文章

热门文章