vue项目实现用户扫二维码实现支付功能

最新推荐文章于 2024-08-18 10:23:44 发布

笑一个吧66

最新推荐文章于 2024-08-18 10:23:44 发布

阅读量5.1k

点赞数 4

分类专栏： vue 微信支付 vscode设置文章标签： vue es6 npm

本文链接：https://blog.csdn.net/weixin_45132984/article/details/106857717

版权

本文介绍了在Vue项目中如何实现用户扫二维码支付的功能。首先通过npm安装qrcodejs2插件，然后封装一个组件，并将依赖引入并实例化。支付后端返回的链接可以用来显示二维码，例如支付宝支付。

摘要由CSDN通过智能技术生成

首先第一步是需要在命令行里面下载安装一个生成二维码的插件qrcodejs2,代码如下:

npm install qrcodejs2 -S

第二步封装一个组件:
模板如下代码:

<!-- 微信二维码 -->
<template>
<div class=''>
  <el-dialog
      title="微信扫码支付"
      :visible.sync="dialogData.dialogVisible"
      width="20%"
      v-dialogDrag
      center
      @close="close">
      <div id="qrcode" ref="qrcode" style="display:flex;justify-content:center">
      </div>
      <p style="text-align:center;margin:5px"><el-button type="primary" size="mini" @click="refresh">刷新二维码</el-button></p>
      <p style="text-align:center"><b>订单名称:{
   {
   dialogData.xxxx}}</b></p>
      <p style="text-align:center"><b>订单价格:{
   {
   dialogData.xxxx}}元</b></p>
      <p style="text-align:center"><b>数量:{
   {
   dialogData.xxx}