feat: 添加二维码页面路径逻辑，优化二维码生成和展示功能

packages/app/src/core/libs/enums.ts

@@ -25,6 +25,10 @@ export enum QrCodeBusinessType {
    * 到店打卡
    */
   InStoreClockIn = 'ISCI',
+  /**
+   * 页面路径
+   */
+  PagePath = 'PP',
 }
 export enum PointStatus {
   // 状态(待确认1，已完成2，已驳回3，已撤销4)

packages/app/src/pages/mine/homepage/qr-code/index.vue

@@ -7,76 +7,110 @@ import UQRCode from 'uqrcodejs'
 import { getPointsOrder } from '../../../../core/libs/requests'
 import { toQrCodeString } from '../../../../core/utils/common'
 import { QrCodeBusinessType } from '../../../../core/libs/enums'
+import { useUserStore } from '../../../../store'
+import { storeToRefs } from 'pinia'
 
 const id = ref()
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
 const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
 
-const generateCode = async () => {
-  // 获取uQRCode实例
+const a = (canvasContext: UniApp.CanvasContext) => {
   const qr = new UQRCode()
   // 设置二维码内容
   // qr.data = data.value.orderNo
-  qr.data = toQrCodeString(QrCodeBusinessType.InStoreWriteOff, {
-    no: data.value?.orderNo || '',
+  //   qr.data = toQrCodeString('', {
+  //     no: '',
+  //   })
+  //   qr.data = '12324'
+  qr.data = toQrCodeString(QrCodeBusinessType.PagePath, {
+    path: `/pages/mine/homepage/index?id=${userInfo.value?.userId}`,
   })
   // 设置二维码大小，必须与canvas设置的宽高一致
   qr.size = 200
+  qr.foregroundImageSrc = userInfo.value?.avatar
   // 调用制作二维码方法
   qr.make()
-  // 获取canvas上下文
-  const canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
-  // 设置uQRCode实例的canvas上下文
   qr.canvasContext = canvasContext
   // 调用绘制方法将二维码图案绘制到canvas上
   qr.drawCanvas()
 }
+const generateCode = async () => {
+  nextTick(async () => {
+    const currentInstance = getCurrentInstance()
+    const canvasContext = uni.createCanvasContext('qrcode', currentInstance) // 如果是组件，this必须传入
+    a(canvasContext)
+  })
+}
+const generateCodeMp = async () => {
+  const currentInstance = getCurrentInstance()
+  nextTick(() => {
+    uni
+      .createSelectorQuery()
+      .in(currentInstance)
+      .select('#qrcode')
+      .fields({ node: true, size: true }, (res) => {
+        console.log(res)
+      })
+      .exec((res) => {
+        const canvas = res[0].node
+        canvas.width = 200
+        canvas.height = 200
+        const ctx = canvas.getContext('2d')
+        a(ctx)
+      })
+  })
+}
 
 onLoad(async (query: { id: string }) => {
   id.value = query.id
-  await setData()
+  //   await setData()
+  // #ifdef MP-WEIXIN
+  await generateCodeMp()
+  // #endif
+  // #ifdef H5
   await generateCode()
+  // #endif
 })
 onReady(() => {})
 </script>
 <template>
-  <div class="flex-grow flex flex-col items-center">
-    <div
-      class="w-[345px] h-1.5 bg-black rounded-[20px] border-2 border-[#b5b5b5] border-solid mt-14"
-    ></div>
-    <div class="relative top--2 w-[316px] bg-white rounded-bl-2xl rounded-br-2xl p-8.5 box-border">
-      <div class="flex gap-5.5 pb-7.5 border-b-1 border-b-[#b5b5b5] border-b-dashed">
-        <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-[10px] overflow-hidden">
-          <wd-img width="100%" height="100%" :src="data?.orderImgUrl"></wd-img>
-        </div>
-        <div class="flex-1">
-          <div class="text-black text-lg font-normal font-['PingFang_SC'] leading-normal">
-            {{ data?.projectName }}
-          </div>
-          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
-            {{ data?.orderQuantity }}张/共{{ data?.points }}积分
-          </div>
-          <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal">
-            {{ dayjs(data?.createTime).format('YYYY/MM/DD') }}
-          </div>
-        </div>
-      </div>
+  <div class="flex-grow flex flex-col items-center bg-white">
+    <div class="flex-grow flex flex-col justify-center">
       <div>
-        <div class="relative flex items-center justify-center p-6 my-7.5">
-          <div
-            class="absolute top-0 left-0 w-6 h-6 border-l-1 border-t-1 border-l-solid border-t-solid border-black rounded-tl-lg"
-          ></div>
-          <div
-            class="absolute top-0 right-0 w-6 h-6 border-r-1 border-t-1 border-r-solid border-t-solid border-black rounded-tr-lg"
-          />
-          <div
-            class="absolute bottom-0 left-0 w-6 h-6 border-l-1 border-b-1 border-l-solid border-b-solid border-black rounded-bl-lg"
-          />
-          <div
-            class="absolute bottom-0 right-0 w-6 h-6 border-r-1 border-b-1 border-r-solid border-b-solid border-black rounded-br-lg"
-          />
-
-          <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
-        </div>
+        <!-- #ifdef MP-WEIXIN -->
+        <canvas
+          type="2d"
+          id="qrcode"
+          canvas-id="qrcode"
+          style="width: 200px; height: 200px"
+        ></canvas>
+        <!-- #endif -->
+        <!-- #ifdef H5 -->
+        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
+        <!-- #endif-->
+      </div>
+      <div
+        class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal my-3.5"
+      >
+        扫一扫上面的二维码，可查看我的主页
+      </div>
+    </div>
+    <div class="w-full flex items-center justify-around my-10">
+      <div
+        class="text-center text-[#3f588f] text-base font-normal font-['PingFang SC'] leading-normal"
+      >
+        扫一扫
+      </div>
+      <div
+        class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
+      >
+        |
+      </div>
+      <div
+        class="text-center text-[#3f588f] text-base font-normal font-['PingFang SC'] leading-normal"
+      >
+        保存图片
       </div>
     </div>
   </div>

packages/app/src/pages/mine/index.vue

@@ -191,6 +191,10 @@ const handleClickScan = async () => {
     }
     return
   }
+  if (type === QrCodeBusinessType.PagePath) {
+    router.push(options.path)
+    return
+  }
   router.push(`/pages/mine/scan/result/index?result=${result}`)
 }
 const navBarProps = ref({ customClass: 'bg-transparent!' })