微信支付
1、安装二维码插件
npm install vue-qr --save
2、使用
<template>
<vue-qr :text='codeValue' :correctLevel="2" :size="250" :margin="10" colorDark="black" colorLight="white"
backgroundColor="white" backgroundDimming="white" :logoSrc="icon"
:logoScale=".2" :logoMargin="5" logoBackgroundColor="white">
</vue-qr>
</template>
<script>
import vueQr from 'vue-qr';
export default {
components: {
vueQr
},
data() {
return {
codeValue: '后台返回的链接地址',
icon: '二维码中间图'
}
}
}
</script>
3、属性（是我从百度找的截的图。。。）
在这里插入图片描述
4、效果图
在这里插入图片描述
支付宝支付
1、使用
<template>
<div v-html="alipayWap" ref="alipayWap"></div>
</template>
<script>
export default {
data() {
return {
alipayWap: '',
}
},
methods:{
alipay(){
axios.post('pay/alipay', {
orderNo: '订单编号',
}).then(function (res) {
this.alipayWap = res.data.alipayHtml; //后台返回值
this.$nextTick(() => {
this.$refs.alipayWap.children[0].submit()
});
}).catch(function (error) {
console.log(error);
});
},
}
</script>
2、效果图
在这里插入图片描述
