更新

package.json

@@ -18,7 +18,7 @@
     "loadsh": "0.0.4",
     "moment": "^2.26.0",
     "naf-core": "^0.1.2",
-    "qrcodejs2": "0.0.2",
+    "qrcode": "^1.4.4",
     "stomp": "^0.1.1",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.4",

src/views/userCenter/basicInfo/index.vue

@@ -5,7 +5,7 @@
         <el-col :span="24" class="leftTop"> <span>|</span> <span>基本信息</span> </el-col>
         <el-col :span="24" class="qrcode">
           <span>绑定微信</span>
-          <div class="qrcodeInfo" ref="qrCodeUrl"></div>
+          <img :src="qc" />
         </el-col>
         <el-col :span="24" class="info">
           <el-form ref="form" :model="form" :rules="rules" label-width="120px">
@@ -144,7 +144,7 @@ import upload from '@/components/uploadone.vue';
 const { mapActions: login } = createNamespacedHelpers('login');
 const { mapActions: market } = createNamespacedHelpers('market');
 const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
-import QRCode from 'qrcodejs2';
+import QRCode from 'qrcode';
 export default {
   name: 'index',
   props: {},
@@ -224,6 +224,7 @@ export default {
         remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
       },
       form: {},
+      qc: '',
     };
   },
   created() {
@@ -293,15 +294,10 @@ export default {
     uploadSuccess({ type, data }) {
       this.$set(this.form, `${type}`, data.uri);
     },
-    creatQrCode() {
-      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
-        text: `http://free.liaoningdoupo.com/api/auth/wxchat?redirect_uri=http://free.liaoningdoupo.com/platmobile/bind/&type=1&uid=${this.user.uid}`, // 需要转换为二维码的内容
-        width: 100,
-        height: 100,
-        colorDark: '#000000',
-        colorLight: '#ffffff',
-        correctLevel: QRCode.CorrectLevel.H,
-      });
+    async creatQrCode() {
+      let url = `http://free.liaoningdoupo.com/api/auth/wxchat?redirect_uri=http://free.liaoningdoupo.com/platmobile/bind/&type=1&uid=${this.user.uid}`; // 需要转换为二维码的内容
+      let el = document.getElementById('qrCodeUrl');
+      this.qc = await QRCode.toDataURL(url, { height: 100, width: 100 });
     },
   },
   mounted() {
@@ -344,11 +340,8 @@ export default {
     color: #606266;
     padding: 50px 0;
   }
-  .qrcodeInfo {
-    float: left;
-    width: 100px;
+  img {
     border: 1px solid #ccc;
-    padding: 10px;
   }
 }
 </style>