fix(custom): 修复二维码失效

package.json

@@ -80,6 +80,7 @@
     "@tarojs/taro": "3.6.34",
     "dayjs": "^1.11.10",
     "pinia": "^2.1.7",
+    "uqrcodejs": "^4.0.7",
     "vue": "^3.3.9"
   },
   "devDependencies": {

src/pages/users/order_list/index.vue

@@ -5,6 +5,7 @@ import Pay from '@/components/Pay.vue';
 import {getActiveOrderList, deleteActiveOrder} from '@/api/goods';
 import {getOrderStatistics} from '@/api/order';
 import {getUserPoint} from '@/api/admin';
+import UQRCode from 'uqrcodejs';
 
 const tabValue = ref(0);
 
@@ -201,7 +202,21 @@ const t_id = ref();
 
 const openCode = item => {
   if (item.status === 2) return;
-  url.value = `https://api.pwmqr.com/qrcode/create?url=${item.oid}`;
+  // url.value = `https://api.pwmqr.com/qrcode/create?url=${item.oid}`;
+  // 获取uQRCode实例
+  const qr = new UQRCode();
+  // 设置二维码内容
+  qr.data = item.oid;
+  // 设置二维码大小，必须与canvas设置的宽高一致
+  qr.size = 200;
+  // 调用制作二维码方法
+  qr.make();
+  // 获取canvas元素
+  const ctx = Taro.createCanvasContext('qrcode');
+  // 设置uQRCode实例的canvas上下文
+  qr.canvasContext = ctx;
+  // 调用绘制方法将二维码图案绘制到canvas上
+  qr.drawCanvas();
   isShowCode.value = true;
   t_id.value = setInterval(() => {
     checkStatus(item);
@@ -371,7 +386,14 @@ const closed = () => {
       @closed="closed">
       <view class="code-box">
         <view>核销码</view>
-        <image class="qrcode" :src="url"></image>
+        <!-- <image class="qrcode" :src="url"></image> -->
+        <view class="qrcode">
+          <canvas
+            ref="qrcode"
+            id="qrcode"
+            class="qrcode"
+            canvas-id="qrcode"></canvas>
+        </view>
       </view>
     </nut-popup>
     <pay
@@ -501,7 +523,8 @@ page {
 }
 
 .qrcode {
-  width: 300px;
-  height: 300px;
+  width: 370px;
+  height: 370px;
+  padding: 10px;
 }
 </style>

src/pages/users/order_list_detail/index.vue

@@ -204,7 +204,14 @@
       @closed="closed">
       <view class="code-box">
         <view>核销码</view>
-        <image class="qrcode" :src="url"></image>
+        <!-- <image class="qrcode" :src="url"></image> -->
+        <view class="qrcode">
+          <canvas
+            ref="qrcode"
+            id="qrcode"
+            class="qrcode"
+            canvas-id="qrcode"></canvas>
+        </view>
       </view>
     </nut-popup>
     <pay
@@ -228,6 +235,7 @@ import {getUserPoint} from '@/api/admin';
 import {calculateDistance} from '@/utils';
 import {IconFont} from '@nutui/icons-vue-taro';
 import {getActiveOrderDetail} from '@/api/goods';
+import UQRCode from 'uqrcodejs';
 
 dayjs.extend(duration);
 
@@ -242,6 +250,8 @@ const isShowCode = ref(false);
 const isShowPay = ref(false);
 const jfInfo = ref<any>({});
 
+const qrcode = ref();
+
 const type = ref('');
 
 const url = ref('');
@@ -347,7 +357,21 @@ const t_id = ref();
 
 const openCode = () => {
   if (goodInfo.value.status === 2) return;
-  url.value = `https://api.pwmqr.com/qrcode/create?url=${goodInfo.value.oid}`;
+  // 获取uQRCode实例
+  const qr = new UQRCode();
+  // 设置二维码内容
+  qr.data = goodInfo.value.oid;
+  // 设置二维码大小，必须与canvas设置的宽高一致
+  qr.size = 200;
+  // 调用制作二维码方法
+  qr.make();
+  // 获取canvas元素
+  const ctx = Taro.createCanvasContext('qrcode');
+  // 设置uQRCode实例的canvas上下文
+  qr.canvasContext = ctx;
+  // 调用绘制方法将二维码图案绘制到canvas上
+  qr.drawCanvas();
+  // url.value = `https://api.pwmqr.com/qrcode/create?url=${goodInfo.value.oid}`;
   isShowCode.value = true;
   t_id.value = setInterval(() => {
     getOrderDetail();
@@ -540,8 +564,14 @@ page {
 }
 
 .qrcode {
-  width: 300px;
-  height: 300px;
+  width: 370px;
+  height: 370px;
+  padding: 10px;
+
+  // canvas {
+  //   width: calc(100% - 20px);
+  //   height: calc(100% - 20px);
+  // }
 }
 
 .nut-button {