feat(app): 兑换码

packages/app/package.json

@@ -111,6 +111,7 @@
     "qs": "6.5.3",
     "radash": "^12.1.0",
     "sentry-uniapp": "^1.0.12",
+    "uqrcodejs": "^4.0.7",
     "vue": "^3.4.21",
     "vue-component-type-helpers": "^2.1.8",
     "vue-i18n": "^9.1.9",

packages/app/src/pages.json

@@ -438,6 +438,14 @@
       }
     },
     {
+      "path": "pages/mine/orders/code/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "兑换码",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/mine/orders/detail/index",
       "type": "page",
       "style": {

packages/app/src/pages/home/mall/confirm-order/index.vue

@@ -32,7 +32,7 @@ const handlePay = async () => {
   const { code } = await requestToast(
     () =>
       orderPay({
-        ...data.value,
+        ...data?.value,
       }),
     { success: true, successTitle: '兑换成功' },
   )
@@ -73,13 +73,13 @@ onLoad(async (query: { data: string }) => {
     </Card>
     <Card>
       <div class="flex flex-col gap-8">
-        <SectionHeading title="总积分" :end-text="data.totalsPoints" size="sm"></SectionHeading>
+        <SectionHeading title="总积分" :end-text="data?.totalsPoints" size="sm"></SectionHeading>
         <!-- <div @click="show = true">
           <SectionHeading title="优惠券" end-text="已选2张" end-arrow size="sm"></SectionHeading>
         </div> -->
         <SectionHeading
           title="实付积分"
-          :end-text="data.totalsCurrPoints"
+          :end-text="data?.totalsCurrPoints"
           size="sm"
         ></SectionHeading>
       </div>
@@ -88,7 +88,7 @@ onLoad(async (query: { data: string }) => {
       <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
         <div class="flex">
           <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
-            {{ data.totalsCurrPoints || data.totalsPoints - data.totalsCouponPoints }}
+            {{ data?.totalsCurrPoints || data?.totalsPoints - data?.totalsCouponPoints }}
           </div>
           <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
             积分

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

@@ -0,0 +1,75 @@
+<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'
+
+const id = ref()
+const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
+
+onLoad(async (query: { id: string }) => {
+  id.value = query.id
+  await setData()
+})
+onReady(() => {
+  // 获取uQRCode实例
+  const qr = new UQRCode()
+  // 设置二维码内容
+  qr.data = id.value
+  // 设置二维码大小，必须与canvas设置的宽高一致
+  qr.size = 200
+  // 调用制作二维码方法
+  qr.make()
+  // 获取canvas上下文
+  const canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
+  // 设置uQRCode实例的canvas上下文
+  qr.canvasContext = canvasContext
+  // 调用绘制方法将二维码图案绘制到canvas上
+  qr.drawCanvas()
+})
+</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>

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

@@ -43,7 +43,7 @@ const handleClick = (order: PointsOrder) => {
                     <div
                       class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
                     >
-                      x{{ it.nums || 1 }}
+                      x{{ it.orderQuantity || 1 }}
                     </div>
                     <div class="flex-1"></div>
                     <div
@@ -59,6 +59,16 @@ const handleClick = (order: PointsOrder) => {
                       <!-- 已完成 -->
                       {{ status[it.orderStatus] }}
                     </div>
+                    <div
+                      class="w-[58px] h-[26px] bg-[#020202] rounded-[20px] backdrop-blur-[10px] flex items-center justify-center"
+                      @click.stop="router.push(`/pages/mine/orders/code/index?id=${it.id}`)"
+                    >
+                      <div
+                        class="text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed"
+                      >
+                        兑换码
+                      </div>
+                    </div>
                   </div>
                 </div>
               </Card>

packages/app/src/types/uni-pages.d.ts

@@ -50,6 +50,7 @@ interface NavigateToOptions {
        "/pages/home/spread/wx-agent-operation/index" |
        "/pages/mine/homepage/consult/index" |
        "/pages/mine/homepage/edit/index" |
+       "/pages/mine/orders/code/index" |
        "/pages/mine/orders/detail/index" |
        "/pages/home/mall/purchased/success/index" |
        "/pages/home/spread/case-shooting/photographer/index" |

pnpm-lock.yaml

@@ -91,6 +91,9 @@ importers:
       sentry-uniapp:
         specifier: ^1.0.12
         version: 1.0.12
+      uqrcodejs:
+        specifier: ^4.0.7
+        version: 4.0.7
       vue:
         specifier: ^3.4.21
         version: 3.4.21(typescript@4.9.5)
@@ -8472,6 +8475,9 @@ packages:
   upper-case@1.1.3:
     resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
 
+  uqrcodejs@4.0.7:
+    resolution: {integrity: sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -19674,6 +19680,8 @@ snapshots:
 
   upper-case@1.1.3: {}
 
+  uqrcodejs@4.0.7: {}
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1