手机端调整

rc-busness/pages/personal/userpay.vue

@@ -51,7 +51,7 @@
     </div>
 
     <div class="paycord">
-      <div id="qrcode" ref="qrcode" class="qrcode"></div>
+      <div class="qrcode"><vue-qr  :text="qrtext" :size="260"></vue-qr></div>
       <span>{{ paytype }}扫一扫立即支付</span>
     </div>
 
@@ -64,12 +64,7 @@
         <p>您的商品我们正在抓紧打包，请耐心等候！</p>
         <div class="line_dashed"></div>
         <div class="userer">
-          <img
-            width="210"
-            height="210"
-            src="../../assets/image/rc-discount.png"
-            alt=""
-          />
+           <div class="qrcode"><vue-qr  :text="qrtext" :size="260"></vue-qr></div>
           <p>微信扫一扫，识别二维码</p>
           <p class="tips">加入社群0元试用商品随单发放</p>
         </div>
@@ -90,7 +85,7 @@
 <script>
 import Myheader from "~/components/header.vue";
 import tabs from "@/components/tabs.vue";
-// import QRCode from "qrcodejs2";
+import vueQr from 'vue-qr'
 
 import { generateOrderAlipay, updateOrderWX } from "../../ajax/getData";
 export default {
@@ -112,33 +107,28 @@ export default {
       dialogSuccess: true,
       dialogFail: false,
       userPayData: {},
+      qrtext:'',
     };
   },
   computed: {},
   mounted() {
     this.userPayData = JSON.parse(this.$route.query.userPayData);
-    // this.qrcode(this.userPayData.wxPay);
+    this.qrtext=this.userPayData.wxPay
   },
   methods: {
     closeDialogSuccess() {
-      this.qrcode = null;
+      this.qrtext = '';
       // this.$router.push({
       //   path: "/index",
       // });
     },
     closeDialogFail() {
-      this.qrcode = null;
+      this.qrtext = '';
       // this.$router.push({
       //   path: "/personal/useraddress",
       // });
     },
-    qrcode(e) {
-      let qrcode = new QRCode("qrcode", {
-        width: 260, // 设置宽度，单位像素
-        height: 260, // 设置高度，单位像素
-        text: e, // 设置二维码内容或跳转地址
-      });
-    },
+
     async selectGoods(item, index) {
       this.activeIndex = index;
       this.paytype = item.paytype;
@@ -146,7 +136,7 @@ export default {
         //支付宝
         let res = await generateOrderAlipay(this.userPayData.orderId);
         if (res.success) {
-          this.qrcode(res.data);
+          this.qrtext=res.data
         }
       }
     },
@@ -154,6 +144,7 @@ export default {
     async updateOrderWX() {
       let res = await updateOrderWX();
       if (res.success) {
+        this.qrtext = '成功加入群的二维码';
         this.dialogSuccess = true;
         clearInterval(this.time);
       } else {
@@ -165,6 +156,7 @@ export default {
   components: {
     Myheader,
     tabs,
+    vueQr,
   },
 };
 </script>