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>
微信支付页面用到的图片如下，放到对应的文件夹下即可：
