vue element el-dialog支付小弹窗

需要先npm install qrcodejs2

老规矩先看样子

到components里面建一个pay.vue文件

<template>
	<el-dialog title="扫码支付" width="300px" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
		<div v-if="!status">
			<p style="text-align: center;line-height: 20px;">{{payType}}扫一扫付款（元）</p>
			<p style="text-align: center;font-size: 24px;color: #fa920e;padding: 5px 0px;font-weight: bold;">{{money}}</p>
			<div class="codeBox">
				<div id="qrcode"></div>
				<div class="clearfix" style="margin: 0 auto; width: 130px;font-size: 12px;">
					<div style="float: left;">
						<svg t="1561615212373" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="976" data-spm-anchor-id="a313x.7781069.0.i3" width="40" height="40"><path d="M295.7312 111.52384h-83.95776c-56.80128 0-103.00416 46.20288-103.00416 103.00416v83.968c0 10.496 8.54016 19.0464 19.0464 19.0464h0.01024c10.50624 0 19.0464-8.5504 19.0464-19.0464v-83.968a64.9728 64.9728 0 0 1 64.91136-64.91136h83.95776c10.50624 0 19.0464-8.5504 19.0464-19.0464s-8.5504-19.0464-19.05664-19.0464zM812.22656 108.99456H728.2688a21.6064 21.6064 0 0 0-21.57568 21.57568 21.6064 21.6064 0 0 0 21.57568 21.58592h83.95776a62.464 62.464 0 0 1 62.38208 62.38208v83.968a21.6064 21.6064 0 0 0 21.58592 21.57568 21.6064 21.6064 0 0 0 21.57568-21.57568v-83.968c0-58.19392-47.34976-105.53344-105.54368-105.54368zM896.19456 703.93856a21.6064 21.6064 0 0 0-21.57568 21.57568v83.95776a62.464 62.464 0 0 1-62.38208 62.38208h-83.968a21.6064 21.6064 0 0 0-21.57568 21.58592 21.6064 21.6064 0 0 0 21.57568 21.57568h83.95776c58.19392 0 105.53344-47.33952 105.53344-105.53344v-83.95776a21.58592 21.58592 0 0 0-21.56544-21.58592z" fill="#fa920e" p-id="977" data-spm-anchor-id="a313x.7781069.0.i4" class="selected"></path><path d="M295.7312 108.99456h-83.95776c-58.19392 0-105.53344 47.34976-105.53344 105.53344v83.968a21.6064 21.6064 0 0 0 21.58592 21.57568 21.6064 21.6064 0 0 0 21.57568-21.57568v-83.968a62.464 62.464 0 0 1 62.38208-62.38208h83.95776a21.6064 21.6064 0 0 0 21.57568-21.58592 21.61664 21.61664 0 0 0-21.58592-21.56544zM295.7312 871.84384h-83.95776a62.464 62.464 0 0 1-62.38208-62.38208V725.504a21.6064 21.6064 0 0 0-21.58592-21.57568 21.6064 21.6064 0 0 0-21.57568 21.57568v83.95776c0 58.19392 47.34976 105.53344 105.53344 105.53344h83.95776a21.6064 21.6064 0 0 0 21.58592-21.57568 21.6064 21.6064 0 0 0-21.57568-21.57568zM812.22656 111.52384H728.2688c-10.50624 0-19.0464 8.54016-19.0464 19.0464s8.54016 19.0464 19.0464 19.0464h83.95776a64.9728 64.9728 0 0 1 64.91136 64.91136v83.968c0 10.50624 8.5504 19.0464 19.0464 19.0464 10.50624 0 19.0464-8.54016 19.0464-19.0464v-83.968c0-56.79104-46.20288-102.99392-103.00416-103.00416z" fill="#fa920e" p-id="978" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path><path d="M265.19552 297.13408h64.95232v208.39424h-64.95232zM369.11104 297.13408h38.97344v208.39424h-38.97344zM447.04768 297.13408H512v208.39424h-64.95232zM550.97344 297.13408h103.91552v208.39424H550.97344zM693.85216 297.13408h64.95232v208.39424h-64.95232zM265.19552 614.7584h64.95232v112.10752h-64.95232zM369.11104 614.7584h38.97344v112.10752h-38.97344zM447.04768 614.7584H512v112.10752h-64.95232zM550.97344 614.7584h103.91552v112.10752H550.97344zM693.85216 614.7584h64.95232v112.10752h-64.95232zM852.20352 538.79808H171.79648c-11.04896 0-20.00896 10.0352-20.00896 22.40512 0 12.36992 8.96 22.40512 20.00896 22.40512h680.3968c11.04896 0 20.00896-10.0352 20.00896-22.40512 0.01024-12.38016-8.94976-22.40512-19.99872-22.40512z" fill="#fa920e" p-id="979" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path></svg>
					</div>
					<div><!--            style="float: left;line-height: 20px;margin-left: 5px;"-->
						<p>打开手机{{payType}}</p>
						<p>扫一扫继续付款</p>
					</div>
				</div>
			</div>
		</div>
		<div id="alipay" v-if="status" v-html="url"
			v-loading="loading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)"
		>

		</div>
	</el-dialog>
</template>

<script>
	import QRCode from 'qrcodejs2' // 引入qrcode
	export default {
		data() {
			return {
				dialogFormVisible: false,
				data: [],
				money:0,
				payType:'微信',
				url:'',
				status:false,
				loading: true
			}
		},
		methods: {
			getData(data) {
				this.dialogFormVisible = true;
				this.money = data.money.toFixed(2);
				this.url = data.href;
				if(data.payEntryType == 3){
					this.payType = '微信';
					let _this = this;
					setTimeout(function() {
						_this.qrcode();
					}, 200);
				}
				if(data.payEntryType == 4){
					this.payType = '支付宝';
					this.status = true;
					$('#alipay').html(this.url);
					this.$nextTick(function(){
						document.forms[0].submit()
					})
				}
				console.log(data);

			},
			qrcode() {
				document.getElementById("qrcode").innerHTML
				let qrcode = new QRCode('qrcode', {
					width: 150,
					height: 150,
					text: this.url, // 二维码地址
					colorDark: "#000",
					colorLight: "#fff",
				})
			},
		},
		created() {
			// this.token = sessionStorage.getItem('token');
			// if (!this.token) {
			// 	this.$router.push('/Login');
			// }
		},
		// 钩子函数
		mounted() {

		},
	}
</script>

<style>
	#qrcode {
		height: 150px;
		width: 150px;
		margin: 10px auto;
	}
	.codeBox{
		width: 90%;
		margin: 0 auto;
	}
	.el-dialog__body{
		padding: 20px;
	}
</style>

使用的时候只需要引入，然后用refs使用组件函数，把{money//金额，payEntryType//支付类型，href//支付地址}传过去就行了

    <div class="flex mt20" v-for="list in basePayPlatforms" :key="list.payType">
      <div class="payType" @click="affirm(list.payType)">
        <img :src="list.imgUrl" alt="">
      </div>
    </div>
    <payment ref="payData"></payment >

import payment from "../../company/wallet/pay";

components:{payment },
      affirm(payType){
        this.payType = payType
        switch (payType) {
          case 1://钱包
            this.dialogVisible = true
            return
          case 4://支付宝
            return
          case 3://微信
            this.wx_native(payType)
            return
          default:
            return
        }

//微信扫码支付，id是支付方式3是微信4是支付宝，res.data是支付网址
            wx_native(id){
                let data={};
                data.money = Number(this.money);
                data.payEntryType = id;
                //this.payment(id)是我获取支付地址的方法
                this.payment(id).then(res =>{
                    // this.QRCodeMsg = res.data;
                    console.log(res)
                    if(res.head.status == 1){
                        data.href = res.data;//支付地址或from
                        this.$refs.payData.getData(data);
                    }else{
                        this.$message.error(res.data.head.message);
                        return;
                    }
                })
            },

      //这个可以重写，主要是用来做Promise
      payment(){
        return new Promise((resolve, reject) =>{
          let data={
            orderId:this.orderId,
            payType:this.payType
          }
          putAjax(this.global.base.orderPay,data).then(response => {
            resolve(response)
          }).catch(err => {
            reject(err)
          })
        })
      }

//支付宝支付
            alipay_qr(id){
                this.payment(id).then(res =>{
                  console.log(res)
                    const div = document.createElement('div') // 创建div
                    div.innerHTML = res.data // 将返回的form 放入div
                    document.body.appendChild(div) // 将上面创建的元素加入到BODY的尾部
                    document.forms[0].submit() // 表示获取当前页面的第一个表单
                })
            },