feat(merchant): 商家端积分结算

packages/app/src/components/navbar-evo.vue

@@ -3,7 +3,7 @@ import { ConfigProviderThemeVars } from 'wot-design-uni'
 import { useRouter } from '../core/utils/router'
 import {computed} from 'vue'
 
-const props = defineProps<{ transparent?: boolean; title?: string; dark?: boolean }>()
+const props = defineProps<{ transparent?: boolean; title?: string; dark?: boolean; placeholder?: boolean }>()
 const router = useRouter()
 const themeVars = computed<ConfigProviderThemeVars>(() => ({
   navbarColor: props.dark ? 'white' : 'black',
@@ -20,5 +20,14 @@ const themeVars = computed<ConfigProviderThemeVars>(() => ({
       v-bind="{ title }"
       @click-left="router.back()"
     ></wd-navbar>
+    <template v-if="props.placeholder">
+      <wd-navbar
+      left-arrow
+      safe-area-inset-top
+      :bordered="false"
+      :custom-class="`${transparent ? 'bg-transparent!' : ''} `"
+      v-bind="{ title }"
+    ></wd-navbar>
+    </template>
   </wd-config-provider>
 </template>

packages/merchant/package.json

@@ -98,6 +98,7 @@
     "qrcode": "^1.5.4",
     "qs": "6.5.3",
     "radash": "^12.1.0",
+    "uqrcodejs": "^4.0.7",
     "vue": "3.4.21",
     "wot-design-uni": "^1.3.13",
     "z-paging": "^2.7.10"

packages/merchant/src/components/tabbar-evo.vue

@@ -51,15 +51,6 @@ onMounted(async () => {
 </script>
 <template>
   <div>
-    <!-- <wd-tabbar fixed shape="round" safeAreaInsetBottom>
-      <template v-for="it of items" :key="it.id">
-        <wd-tabbar-item :title="it.title" :icon="it.icon">
-          <template #icon v-if="it.iconPath">
-            <wd-img round height="40rpx" width="40rpx" :src="it.iconPath"></wd-img>
-          </template>
-        </wd-tabbar-item>
-      </template>
-    </wd-tabbar> -->
     <div>
       <div
         ref="tabbar"

packages/merchant/src/pages/home/index.vue

@@ -18,10 +18,12 @@ import { merchantPageHeaderBg, scanIcon, bookIcon } from '@designer-hub/assets/s
 import { useUserStore } from '../../store'
 import { storeToRefs } from 'pinia'
 import { requestToast } from '@designer-hub/app/src/core/utils/common'
+import { useRouter } from '@designer-hub/app/src/core/utils/router'
 
 defineOptions({
   name: 'Home',
 })
+const router = useRouter()
 const userStore = useUserStore()
 const { isLogined, userInfo } = storeToRefs(userStore)
 // 测试 uni API 自动引入
@@ -96,6 +98,8 @@ const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IRes
   },
 })
 const { data: circlesData, run } = useRequest(() => getCircles({}), { initialData: { list: [] } })
+const orderAmount = ref()
+const pointsAmount = computed(() => orderAmount.value * 10)
 console.log(data.value)
 const toDesigner = () => {
   uni.navigateTo({ url: '/pages/designer/index' })
@@ -246,30 +250,42 @@ onShareAppMessage(() => ({}))
         >
           <wd-img width="36px" height="36px" :src="bookIcon"></wd-img>
         </div>
-        <div class="w-full flex items-center mt-[40px]">
+        <div class="w-full flex items-center mt-[40px] gap-5">
           <div
-            class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed width-[96px]"
+            class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed w-[96px]"
           >
             输入订单金额
           </div>
-          <div class="bg-[#f5f7f9] rounded-lg flex items-center flex-1 ml-[16px]">
-            <wd-input type="number" no-border placeholder="请输金额" />
+          <div class="flex-1 bg-[#f5f7f9] rounded-lg flex items-center p-3.5">
+            <wd-input
+              custom-class="bg-transparent! flex-1"
+              type="number"
+              no-border
+              placeholder="请输金额"
+              v-model="orderAmount"
+            />
           </div>
         </div>
-        <div class="w-full flex items-center mt-[20px]">
+        <div class="w-full flex items-center mt-[20px] gap-5">
           <div
-            class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed width-[96px]"
+            class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed w-[96px]"
           >
             需支付积分
           </div>
-          <div
-            class="text-[#ff2d2d] text-base font-normal font-['PingFang_SC'] leading-relaxed ml-[20px]"
-          >
-            3400 积分
+          <div class="text-[#ff2d2d] text-base font-normal font-['PingFang_SC'] leading-relaxed">
+            {{ pointsAmount }} 积分
           </div>
         </div>
         <div class="w-full mt-[45px]">
-          <wd-button block :round="false" @click="toSettlement">
+          <wd-button
+            block
+            :round="false"
+            @click="
+              router.push(
+                `/pages/home/merchant/settlement?orderAmount=${orderAmount}&pointsAmount=${pointsAmount}`,
+              )
+            "
+          >
             <div
               class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-normal"
             >

packages/merchant/src/pages/home/merchant/settlement.vue

@@ -2,32 +2,49 @@
 { "style": { "navigationBarTitleText": "积分结账", "navigationBarBackgroundColor": "#fff" } }
 </route>
 <script lang="ts" setup>
-// import QRCode from 'qrcode'
 import { ref } from 'vue'
+import UQRCode from 'uqrcodejs'
+
 const codeImageSrc = ref('')
+const orderAmount = ref()
+const pointsAmount = ref()
 
 const generateQR = async (text) => {
-  // try {
-  //   codeImageSrc.value = await QRCode.toDataURL(text)
-  // } catch (err) {
-  //   console.error(err)
-  // }
+  // 获取uQRCode实例
+  const qr = new UQRCode()
+  // 设置二维码内容
+  qr.data = `${orderAmount.value}|${pointsAmount.value}`
+  // 设置二维码大小，必须与canvas设置的宽高一致
+  qr.size = 200
+  // 调用制作二维码方法
+  qr.make()
+  // 获取canvas上下文
+  const canvasContext = uni.createCanvasContext('qrcode', this) // 如果是组件，this必须传入
+  // 设置uQRCode实例的canvas上下文
+  qr.canvasContext = canvasContext
+  // 调用绘制方法将二维码图案绘制到canvas上
+  qr.drawCanvas()
 }
-generateQR('121')
+onLoad(async (query: { orderAmount?: string; pointsAmount?: string }) => {
+  orderAmount.value = query?.orderAmount || ''
+  pointsAmount.value = query?.pointsAmount || ''
+  await generateQR()
+})
 </script>
 
 <template>
   <view>
     <div class="bg-white pb-[17px]">
       <div class="flex items-center justify-center py-[30px]">
-        <img class="w-[199px] h-[199px]" :src="codeImageSrc" />
+        <!-- <img class="w-[199px] h-[199px]" :src="codeImageSrc" /> -->
+        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>
       </div>
       <div class="flex items-center justify-between px-[16px] mb-[15px]">
         <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-normal">
           订单金额
         </div>
         <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
-          ￥326
+          ￥{{ orderAmount }}
         </div>
       </div>
       <div class="flex items-center justify-between px-[16px]">
@@ -35,11 +52,11 @@ generateQR('121')
           积分
         </div>
         <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
-          1250
+          {{ pointsAmount }}
         </div>
       </div>
     </div>
-    <div class="bg-white mt-[15px]">
+    <!-- <div class="bg-white mt-[15px]">
       <div class="flex items-center justify-between px-[16px] py-[15px]">
         <div class="flex items-center">
           <img class="w-[29px] h-[29px] rounded-full" src="https://via.placeholder.com/29x29" />
@@ -55,7 +72,7 @@ generateQR('121')
           扫码支付中...
         </div>
       </div>
-    </div>
+    </div> -->
   </view>
 </template>
 

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

@@ -54,7 +54,7 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
 
 <template>
   <view>
-    <NavBarEvo title="我的" transparent dark></NavBarEvo>
+    <NavBarEvo title="我的" transparent dark placeholder></NavBarEvo>
     <template v-if="userInfo.appLoginType === 1">
       <div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
         <wd-img

pnpm-lock.yaml

@@ -326,6 +326,9 @@ importers:
       radash:
         specifier: ^12.1.0
         version: 12.1.0
+      uqrcodejs:
+        specifier: ^4.0.7
+        version: 4.0.7
       vue:
         specifier: 3.4.21
         version: 3.4.21(typescript@4.9.5)