Explorar el Código

feat: 添加个人码页面,整合二维码生成逻辑,优化个人主页导航

EvilDragon hace 3 meses
padre
commit
bd9c1d32e8

+ 8 - 0
packages/app/src/pages.json

@@ -484,6 +484,14 @@
       }
     },
     {
+      "path": "pages/mine/homepage/qr-code/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "个人码",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/mine/homepage/statistics/index",
       "type": "page",
       "style": {

+ 5 - 2
packages/app/src/pages/mine/homepage/index.vue

@@ -210,7 +210,10 @@ defineExpose({
                 <div class="text-white text-2xl font-normal font-['PingFang_SC'] leading-normal">
                   {{ memberInfo.name }}
                 </div>
-                <div class="flex items-center">
+                <div
+                  class="flex items-center"
+                  @click="router.push(`/pages/mine/homepage/qr-code/index`)"
+                >
                   <wd-img width="22" height="22" :src="qrCode"></wd-img>
                   <wd-icon name="chevron-right" color="white" size="16"></wd-icon>
                 </div>
@@ -388,7 +391,7 @@ defineExpose({
           <wd-button
             block
             :round="false"
-            @click="router.push(`/pages/mine/homepage/consult/index`)"
+            @click="router.push(`/pages/mine/homepage/consult/index?id=${id}`)"
           >
             预约咨询
           </wd-button>

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

@@ -0,0 +1,83 @@
+<route lang="json">
+{ "style": { "navigationBarTitleText": "个人码", "navigationBarBackgroundColor": "#fff" } }
+</route>
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import UQRCode from 'uqrcodejs'
+import { getPointsOrder } from '../../../../core/libs/requests'
+import { toQrCodeString } from '../../../../core/utils/common'
+import { QrCodeBusinessType } from '../../../../core/libs/enums'
+
+const id = ref()
+const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
+
+const generateCode = async () => {
+  // 获取uQRCode实例
+  const qr = new UQRCode()
+  // 设置二维码内容
+  // qr.data = data.value.orderNo
+  qr.data = toQrCodeString(QrCodeBusinessType.InStoreWriteOff, {
+    no: data.value?.orderNo || '',
+  })
+  // 设置二维码大小,必须与canvas设置的宽高一致
+  qr.size = 200
+  // 调用制作二维码方法
+  qr.make()
+  // 获取canvas上下文
+  const canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件,this必须传入
+  // 设置uQRCode实例的canvas上下文
+  qr.canvasContext = canvasContext
+  // 调用绘制方法将二维码图案绘制到canvas上
+  qr.drawCanvas()
+}
+
+onLoad(async (query: { id: string }) => {
+  id.value = query.id
+  await setData()
+  await generateCode()
+})
+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>
+        <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>
+      </div>
+    </div>
+  </div>
+</template>

+ 1 - 0
packages/app/src/types/uni-pages.d.ts

@@ -55,6 +55,7 @@ interface NavigateToOptions {
        "/pages/mine/homepage/channels/index" |
        "/pages/mine/homepage/consult/index" |
        "/pages/mine/homepage/edit/index" |
+       "/pages/mine/homepage/qr-code/index" |
        "/pages/mine/homepage/statistics/index" |
        "/pages/mine/honors/detail/index" |
        "/pages/mine/orders/code/index" |