feat(mine): 更新代理邀请海报功能

- 添加保存图片功能
- 更新海报样式和内容
- 增加邀请码图片
- 优化图像加载和错误处理

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

@@ -874,6 +874,7 @@ export interface Agent {
   yearOrders: any
   createTime: number
   inviteCode: string
+  inviteCodeUrl: string
   customer: any
   customerName: string
   points: number

packages/merchant/src/core/libs/actions.ts

@@ -36,3 +36,8 @@ export const toHomePage = (id: string) => {
     })
     .then()
 }
+export const toContentHtml = async (option: { title: string }) => {
+  await uni.navigateTo({
+    url: `/pages/common/content-html/index?title=${option.title}`,
+  })
+}

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

@@ -8,7 +8,7 @@ import { storeToRefs } from 'pinia'
 import { login } from '../../core/libs/requests'
 import { useUserStore } from '../../store'
 import { loginAccountIcon, loginPswIcon } from '@designer-hub/assets/src/svgs'
-import { toContentHtml } from '@designer-hub/app/src/core/libs/actions'
+import { toContentHtml } from '@/core/libs/actions'
 
 const userStore = useUserStore()
 const { isLogined } = storeToRefs(userStore)

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

@@ -24,32 +24,35 @@ const { data, run: setData } = useRequest(() =>
 onLoad(async () => {
   await setData()
   try {
-    const [bg, title, contentBg, icon1, icon2, icon3, icon4, icon5, avatar] = await Promise.all(
-      [
-        'https://image.zhuchaohui.com/zhucaohui/9352daa033edc343fd6cc983978857dd77386b573380871a4b7f9e9f3617f183.png',
-        'https://image.zhuchaohui.com/zhucaohui/f1f13041769ecdf462aa2ccc246fb7566bea6fe83aaf73717ee959629cfe0f8f.svg',
+    const [bg, title, contentBg, icon1, icon2, icon3, icon4, icon5, qrTitle, avatar, qrCode] =
+      await Promise.all(
+        [
+          'https://image.zhuchaohui.com/zhucaohui/9352daa033edc343fd6cc983978857dd77386b573380871a4b7f9e9f3617f183.png',
+          'https://image.zhuchaohui.com/zhucaohui/60c70b3e6387322beffff913bd39349dccbffa910f3ec867c59478fbec804be2.png',
 
-        'https://image.zhuchaohui.com/zhucaohui/08abd942d9f5635aa3cfd60376706bc948cdaf556417fb3396204f7cdec42e30.png',
+          'https://image.zhuchaohui.com/zhucaohui/08abd942d9f5635aa3cfd60376706bc948cdaf556417fb3396204f7cdec42e30.png',
 
-        'https://image.zhuchaohui.com/zhucaohui/fc22d1bee4e1737dc0d592a065f277bec4a790496faa292c869f781e9c67a700.svg',
-        'https://image.zhuchaohui.com/zhucaohui/85594fe5a8b12dc815b3ea062e826de086ed204f840931980cd1bf5417d8b814.svg',
-        'https://image.zhuchaohui.com/zhucaohui/7c3e518ff2dcd2d4d39001e3970c492195d518c7f0015c86c00b9ac5e788e4f4.svg',
-        'https://image.zhuchaohui.com/zhucaohui/11b8448cc06352f796a49fbbc67e1eacfa7f382cb2507d066cd32b6f88f164fe.svg',
-        'https://image.zhuchaohui.com/zhucaohui/d9dc32881076a752a7ab72701321538ff0e10fbc0482a3b4f9e95c1b8a132aec.svg',
-        data.value.headImgUrl || '',
-      ].map((it) =>
-        uni
-          .getImageInfo({ src: it })
-          .then(({ path }) => path)
-          .catch(() =>
-            uni
-              .getImageInfo({
-                src: 'https://image.zhuchaohui.com/zhucaohui/6f858f282ce597abd2dd2717264b0cdde1566c4f8d5f3baa20fb7cf4c2e11a2f.png',
-              })
-              .then(({ path }) => path),
-          ),
-      ),
-    )
+          'https://image.zhuchaohui.com/zhucaohui/775bea9feb767ff5dfcc2f5d6458806d683258fa67696ec2010795463ddae183.png',
+          'https://image.zhuchaohui.com/zhucaohui/a2830a1d21ec26bb92a6d70191ad0319821e98fba2d7b04a6cb36b3544a40231.png',
+          'https://image.zhuchaohui.com/zhucaohui/4b0aca4d46e443e9145173f6f89a024a3e9c9a2ef9e4015ee14cbc4227e6363c.png',
+          'https://image.zhuchaohui.com/zhucaohui/07881467c1ad5e700be6bb57cee6b46823ec94e3a3c2f6a521656ad34c9764a8.png',
+          'https://image.zhuchaohui.com/zhucaohui/83a5845b563aa73fd9fc374acfad85110d141f68e5c874ce410e177cf0d35dbd.png',
+          'https://image.zhuchaohui.com/zhucaohui/719cfe5efa705689cf924ca64fd9859d59102a8f75a3a93791b2acc34fa1af7f.png',
+          data.value.headImgUrl || '',
+          data.value.inviteCodeUrl || '',
+        ].map((it) =>
+          uni
+            .getImageInfo({ src: it })
+            .then(({ path }) => path)
+            .catch(() =>
+              uni
+                .getImageInfo({
+                  src: 'https://image.zhuchaohui.com/zhucaohui/6f858f282ce597abd2dd2717264b0cdde1566c4f8d5f3baa20fb7cf4c2e11a2f.png',
+                })
+                .then(({ path }) => path),
+            ),
+        ),
+      )
     const ctx = uni.createCanvasContext('qrcode', currentInstance)
     const { width, height } = await new Promise<any>((resolve) => {
       uni
@@ -86,14 +89,17 @@ onLoad(async () => {
     // canvas.FillText(data.value.brokerName, '#000000D9', 18, 149, 228, 'center')
     canvas.FillTexts(
       [{ text: data.value?.brokerName ?? '', font: '18px PingFang_SC', color: '#000000D9' }],
-      228,
+      232,
     )
 
     const textSegments = [
       { text: '邀请码：', font: '14px PingFang_SC', color: 'rgba(0,0,0,0.65)' },
       { text: data.value.inviteCode || '', font: '18px PingFang_SC', color: 'rgba(0,0,0,0.85)' },
     ]
-    canvas.FillTexts(textSegments, 240)
+    canvas.RoundRect('#F5F5F5', 26, 282, 300, 306, 20)
+    canvas.FillTexts(textSegments, 260)
+    canvas.Image(qrTitle, 88, 296, 169, 51)
+    canvas.Image(qrCode, 80, 360, 200, 200)
 
     // // Calculate total text width
     // let totalWidth = 0
@@ -120,6 +126,22 @@ onLoad(async () => {
     console.log(e)
   }
 })
+const savePoster = () => {
+  uni.canvasToTempFilePath({
+    canvasId: 'qrcode',
+    success: (res) => {
+      uni.saveImageToPhotosAlbum({
+        filePath: res.tempFilePath,
+        success: () => {
+          uni.showToast({ title: '保存成功' })
+        },
+        fail: () => {
+          uni.showToast({ title: '保存失败' })
+        },
+      })
+    },
+  })
+}
 </script>
 <template>
   <!--  bg-[url(https://image.zhuchaohui.com/zhucaohui/a7694a131a9119b055cff320aa9c363ad2012e77229038a011110e64d1cf4da8.png)-->
@@ -130,7 +152,7 @@ onLoad(async () => {
     </div>
     <div class="px-6 flex justify-between">
       <div class="flex-1">
-        <wd-button plain custom-class="bg-[#4B6DEA]! border-white! text-white!">保存图片</wd-button>
+        <wd-button plain custom-class="bg-[#4B6DEA]! border-white! text-white!" @click="savePoster">保存图片</wd-button>
       </div>
       <!--     <div> <wd-button custom-class="bg-white!"></wd-button></div>-->
     </div>