no message

package-lock.json

@@ -3046,6 +3046,44 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -3103,6 +3141,13 @@
             "pump": "^3.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "hash-sum": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -3115,6 +3160,13 @@
           "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
           "dev": true
         },
+        "json5": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.2.tgz",
+          "integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==",
+          "dev": true,
+          "optional": true
+        },
         "mini-css-extract-plugin": {
           "version": "0.9.0",
           "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -3205,6 +3257,42 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "2.0.4",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+              "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },
@@ -15151,6 +15239,11 @@
       "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
       "dev": true
     },
+    "uqrcodejs": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/uqrcodejs/-/uqrcodejs-4.0.6.tgz",
+      "integrity": "sha512-0W8EtXIyS8Nxr+4Libl1BBYlc1RaNOXhuPZmyRO9ncIRtEMdz5mOob33vIFTl+e08IKsV28i/rZPkbXLJh884A=="
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -15356,101 +15449,6 @@
         "vue-style-loader": "^4.1.0"
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "hash-sum": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
-          "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.2.tgz",
-          "integrity": "sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -67,6 +67,7 @@
     "flyio": "^0.6.2",
     "js-md5": "^0.7.3",
     "regenerator-runtime": "^0.12.1",
+    "uqrcodejs": "^4.0.6",
     "uview-ui": "^2.0.31",
     "vue": "^2.6.11",
     "vuex": "^3.2.0"

src/components/uqrcode/uqrcode.vue

@@ -0,0 +1,48 @@
+<template>
+  <canvas canvas-id="qrcode" :style="{width: size * 2 +'rpx', height: size * 2 + 'rpx'}"></canvas>
+</template>
+
+<script>
+import UQRCode from "uqrcodejs";
+var qr = new UQRCode();
+export default {
+  name: "",
+  props: {
+    size: {
+        type: Number,
+        default: 200
+    },
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {
+    createCode(va) {
+      // 获取uQRCode实例
+      var qr = new UQRCode();
+      // 设置二维码内容
+      qr.data = va;
+      // 设置二维码大小，必须与canvas设置的宽高一致
+      qr.size = this.size;
+      // 调用制作二维码方法
+      qr.make();
+      // 获取canvas上下文
+      var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
+      // 设置uQRCode实例的canvas上下文
+      qr.canvasContext = canvasContext;
+      // 调用绘制方法将二维码图案绘制到canvas上
+      qr.drawCanvas();
+    },
+  },
+  mounted() {
+    // this.createCode();
+  },
+  watch: {},
+  computed: {},
+  filters: {},
+};
+</script>
+
+<style scoped lang='scss'>
+</style>

src/pagesB/order/verificationCode.vue

@@ -3,7 +3,8 @@
     <view class="receiptCode-wrap">
       <view class="receiptCode-wrap-inner">
         <view class="code-bg">
-          <view style="margin:0rpx 40rpx">
+          <uqcode ref="uqcode" class="code-img"/>
+          <!-- <view style="margin:0rpx 40rpx">
             <ayQrcode
               ref="qrcode"
               :modal="modal_qr"
@@ -14,16 +15,11 @@
               class="code-bg-img"
               themeColor="#12B280"
             />
-          </view>
+          </view> -->
           <view class="msg">
-            <view class="code">
-              有效期:<uni-countdown
-                :second="second"
-                @timeup="getCode"
-              ></uni-countdown>
-            </view>
+            <view class="code">有效期：<uni-countdown :second="second" @timeup="getCode" class="num"/></view>
 
-            <view>核销码:{{ code }}</view>
+            <view>核销码：{{ code }}</view>
             <!-- <view>haha@qq.com</view> -->
           </view>
         </view>
@@ -38,7 +34,8 @@ var utils = require("@/utils/utils.js");
 import { get, post } from "@/request/api.js";
 var app = getApp();
 var appEv = app.$vm.$options;
-import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
+// import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
+import uqcode from "@/components/uqrcode/uqrcode.vue";
 export default {
   name: "verificationCode",
   data() {
@@ -52,7 +49,8 @@ export default {
     };
   },
   components: {
-    ayQrcode,
+    // ayQrcode,
+    uqcode
   },
   onLoad(e) {
     this.order_id = e.id;
@@ -67,22 +65,23 @@ export default {
           uni.hideLoading();
           if (res.code === 0) {
             this.code = res.data.data.code;
+            this.$refs.uqcode.createCode(this.code);
             this.second = res.data.data.end_time - new Date().getTime() / 1000;
-            this.showQrcode();
+            // this.showQrcode();
           }
         });
       }
     },
-    showQrcode() {
-      let _this = this;
-      this.modal_qr = true;
-      setTimeout(function () {
-        _this.$refs.qrcode.crtQrCode();
-      }, 50);
-    },
-    hideQrcode() {
-      this.modal_qr = false;
-    },
+    // showQrcode() {
+    //   let _this = this;
+    //   this.modal_qr = true;
+    //   setTimeout(function () {
+    //     _this.$refs.qrcode.crtQrCode();
+    //   }, 50);
+    // },
+    // hideQrcode() {
+    //   this.modal_qr = false;
+    // },
   },
 };
 </script>
@@ -100,19 +99,19 @@ export default {
 .receiptCode-wrap-inner {
   // background: #eee;
   border-radius: 48rpx;
-  // padding: 40rpx 44rpx;
+  padding: 40rpx;
 
   .code-bg {
     padding: 52rpx 0rpx;
     border-radius: 48rpx;
     background: #dad6d6;
 
-    .code-bg-img {
-      // width: 400rpx;
-      height: 498rpx;
-      display: block;
-      // margin-bottom: 30rpx;
-      border-radius: 32rpx;
+    .code-img {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      margin-bottom: 36rpx;
+      // border-radius: 32rpx;
     }
   }
 }
@@ -129,13 +128,11 @@ export default {
 
 .msg {
   text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
   .code {
-    display: flex;
-    flex-direction: row;
+    margin-bottom: 6rpx;
+    .num{
+      display: inline-block;
+    }
   }
 }
 </style>