vue 微信支付及支付宝支付

1.微信支付

页面代码

<div style="margin: 0 auto;" id="wechatcode" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"></div>

从后台获取二维码内容后，绘制支付二维码

因为我将二维码写在了element的dialog组件中 ，但是element组件dialog无法获取里面元素 

解决办法是，加this.$nextTick（在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进nextTick()的回调函数中）

这样就可以正常获取dialog中的元素

//微信支付
					wxPcPay(this.$qs.stringify(data)).then(res => {
						// console.log(res);
						if (res.code == 200) {
							this.showPay = true
							this.$nextTick(() => {
								let qrcode = new QRCode('wechatcode', {
									width: 400, // 宽
									height: 400, // 高
									text: res.data.param.code_url, // 二维码内容
								})
							})
							this.loading = false
						}
					})

2.支付宝支付

这个就比较简单了

支付宝返回的是个html，form文件，所以跳转一个新的页面就好

//支付宝支付
					zfbPcPay(this.$qs.stringify(data)).then(res => {
						if (res.code == 200) {
							// this.show = true
							const div = document.createElement('divform');
							div.innerHTML = res.data.orderInfo; //接口返回的form 表单字符串
							document.body.appendChild(div);
							document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
							document.forms[0].submit();
						}
					})