feat: update of partner

src/components/partner-intro/index.tsx

@@ -1,12 +1,120 @@
-import { Button } from '@tarojs/components';
+import { Button, Canvas } from '@tarojs/components';
+import Taro from '@tarojs/taro';
 
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { openCustomerServiceChat } from '@/utils/common';
+import { getPartnerQrcode } from '@/utils/partner';
 import './index.less';
 
 const PREFIX = 'partner-intro';
+
 export default function PartnerIntro() {
+  const [posterPath, setPosterPath] = useState('');
+  const getQrcode = async () => {
+    try {
+      const data = await getPartnerQrcode(); // 假设 getPartnerQrcode 返回 ArrayBuffer
+      const base64 = Taro.arrayBufferToBase64(data);
+      return `data:image/png;base64,${base64}`;
+    } catch (error) {
+      console.error('获取二维码失败', error);
+      Taro.showToast({ title: '获取二维码失败', icon: 'none' });
+      throw error;
+    }
+  };
+  const saveCanvasToTempFile = (): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      try {
+        const query = Taro.createSelectorQuery().select('#posterCanvas');
+        query.fields({ node: true }).exec(async res => {
+          const canvas = res[0].node;
+          const tempFilePath = await Taro.canvasToTempFilePath({
+            canvas,
+            x: 0,
+            y: 0,
+            width: 1500, // 实际绘制宽度
+            height: 2668, // 实际绘制高度
+            destWidth: 750, // 目标显示宽度
+            destHeight: 1334, // 目标显示高度
+            fileType: 'jpg',
+          });
+
+          setPosterPath(tempFilePath.tempFilePath);
+
+          resolve(tempFilePath.tempFilePath);
+        });
+      } catch (error) {
+        console.error('保存 Canvas 到临时文件失败', error);
+        Taro.showToast({ title: '保存 Canvas 失败', icon: 'none' });
+        reject(error);
+      }
+    });
+  };
+  const drawCanvas = (qrCode: string): Promise<string> => {
+    const query = Taro.createSelectorQuery().select('#posterCanvas');
+    return new Promise(resolve => {
+      query.fields({ node: true, size: true }).exec(async res => {
+        const canvas = res[0].node;
+        const ctx = canvas.getContext('2d');
+
+        canvas.width = 1500;
+        canvas.height = 2668;
+        ctx.scale(2, 2);
+
+        // 绘制背景图片
+        const bgImage = canvas.createImage();
+        const poster = 'https://publiccdn.neighbourhood.com.cn/img/poster.png'
+        bgImage.src = poster;
+        bgImage.onload = () => {
+          ctx.drawImage(bgImage, 0, 0, 750, 1334);
+
+          const qrCodeImage = canvas.createImage();
+          qrCodeImage.src = qrCode; // 假设 getQrcode() 返回的是二维码图片的路径
+          qrCodeImage.onload = () => {
+            ctx.drawImage(qrCodeImage, 235, 894, 280, 280); // 绘制二维码，位置和大小
+            saveCanvasToTempFile().then(tempPath => {
+              resolve(tempPath);
+            });
+          };
+        };
+        bgImage.onerror = err => {
+          console.error(err);
+        };
+      });
+    });
+  };
+  const savePoster = async () => {
+    let filePath = posterPath;
+    if (!filePath) {
+      Taro.showLoading({ title: '正在生成海报' });
+      const qrCode = await getQrcode();
+      filePath = await drawCanvas(qrCode);
+      Taro.hideLoading();
+    }
+
+    const res = await Taro.getSetting();
+    const hasPermission = res.authSetting['scope.writePhotosAlbum'];
+    if (hasPermission === false) {
+      Taro.showModal({
+        title: '提示',
+        content: '需要访问相册权限才能保存图片，请前往设置开启权限',
+        showCancel: false,
+        success() {
+          Taro.openSetting();
+        },
+      });
+    } else {
+      try {
+        await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
+        await Taro.saveImageToPhotosAlbum({ filePath });
+        Taro.showToast({ title: '保存成功', icon: 'success' });
+      } catch (error) {
+        console.error(error);
+        Taro.showToast({ title: '保存失败', icon: 'none' });
+      }
+    }
+  };
+
   const handleOpenService = useCallback(() => {
     openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
   }, []);
@@ -45,17 +153,16 @@ export default function PartnerIntro() {
           <div className={`${PREFIX}__tip`}>注：收益不设时限，可重复享有，播络保留活动最终解释权</div>
         </div>
       </div>
-    </div>
-  );
-}
+      <Canvas id="posterCanvas" canvas-id="posterCanvas" type="2d" style="width: 750px; height: 1334px;" />
 
-export function PartnerIntroFooter() {
-  return (
-    <div className={`${PREFIX}__footer`}>
-      <Button className={`${PREFIX}__download-button`}>下载海报</Button>
-      <Button className={`${PREFIX}__share-button`} openType="share">
-        分享邀请
-      </Button>
+      <div className={`${PREFIX}__footer`}>
+        <Button className={`${PREFIX}__download-button`} onClick={savePoster}>
+          下载海报
+        </Button>
+        <Button className={`${PREFIX}__share-button`} openType="share">
+          分享邀请
+        </Button>
+      </div>
     </div>
   );
 }