boluo-app-main/src/components/partner-intro/index.tsx

import { Button, Canvas } from '@tarojs/components';
import Taro from '@tarojs/taro';

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');
  }, []);
  return (
    <div className={PREFIX}>
      <div className={`${PREFIX}__banner`}>
        邀请朋友加入播络，高达<span className={`${PREFIX}__highlight`}>75%</span>分成
      </div>
      <div className={`${PREFIX}__main`}>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__h1`}>收益一</div>
            <div className={`${PREFIX}__body`}>
              直接获得被邀请人付款金额的<span className={`${PREFIX}__highlight`}>20%</span>
            </div>
            <div className={`${PREFIX}__h1`}>收益二</div>
            <div className={`${PREFIX}__body`}>
              邀请的主播创建模卡，被企业开聊，每日可获得收益，分成比例高达
              <span className={`${PREFIX}__highlight`}>50%</span>
            </div>
            <div className={`${PREFIX}__h1`}>收益三</div>
            <div className={`${PREFIX}__body`}>
              邀请朋友加入合伙人，可额外获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
            </div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__title`}>分享方法</div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__body`}>分享小程序任意页面到群、朋友圈、好友即可</div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
          <div className={`${PREFIX}__title`}>合伙人交流群</div>
          <div className={`${PREFIX}__card  ${PREFIX}__special`}>
            <div className={`${PREFIX}__h1`}>加入播络合伙人交流群</div>
            <div className={`${PREFIX}__body grey`}>学习分享邀请经验，一起赚钱</div>
            <Button className={`${PREFIX}__service`} onClick={handleOpenService}>
              点击加入
            </Button>
          </div>
          <div className={`${PREFIX}__tip`}>注：收益不设时限，可重复享有，播络保留活动最终解释权</div>
        </div>
      </div>
      <Canvas id="posterCanvas" canvas-id="posterCanvas" type="2d" style="width: 750px; height: 1334px;" />

      <div className={`${PREFIX}__footer`}>
        <Button className={`${PREFIX}__download-button`} onClick={savePoster}>
          下载海报
        </Button>
        <Button className={`${PREFIX}__share-button`} openType="share">
          分享邀请
        </Button>
      </div>
    </div>
  );
}