assistant-todo/src/components/ShareOption.tsx

import React, {Fragment, useEffect, useState} from 'react';
import {Button, Image, Input, Modal, QRCode, Space } from 'antd';
import {v4 as uuidv4} from 'uuid';
import {copyToClipboard} from "@/lib/copyToClipboard";

const ShareOption = (props: { taskId: string }) => {
    // const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);
    const [buttonIndex, setButtonIndex] = useState(1);
    const [qrCodeValue, setQrCodeValue] = useState<string>("-");
    const [qrCodeStatus, setQrCodeStatus] = useState<'active' | 'expired' | 'loading' | 'scanned'>("loading");

    function doDownload(url: string, fileName: string) {
        const a = document.createElement('a');
        a.download = fileName;
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    const downloadCanvasQRCode = () => {
        const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');
        if (canvas) {
            const url = canvas.toDataURL();
            doDownload(url, 'QRCode.png');
        }
    };

    const downloadSvgQRCode = () => {
        const svg = document.getElementById('myqrcode')?.querySelector<SVGElement>('svg');
        const svgData = new XMLSerializer().serializeToString(svg!);
        const blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
        const url = URL.createObjectURL(blob);
        console.log({url})
        doDownload(url, '微信小程序马上行计划管理扫码加入计划.svg');
    };

    const generateQrcode = () => {

    }
    const showModal = () => {
        setOpen(true);
    };

    const handleCancel = () => {
        setOpen(false);
    };
    useEffect(() => {
        // 分享人必须有权限
        // 生成分享信息同时适用链接和二维码
        const clientId: string = uuidv4();
        let qrCodeData = {
            taskId: props.taskId, pass: clientId, local: "马上行计划管理", opType: "SHARE_OPTION"
        }
        setQrCodeValue(JSON.stringify(qrCodeData))
        setQrCodeStatus("active")
    }, []);

    return (
        <Fragment>
            <Button type="primary" onClick={showModal}>
                分享
            </Button>
            <Modal
                open={open}
                title="分享好友"
                // onOk={handleOk}
                onCancel={handleCancel}
                width={700}
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        返回
                    </Button>,
                    <Button key="qrcode"
                            type={buttonIndex == 1 ? "primary" : "default"}
                        // loading={loading}
                            onClick={() => setButtonIndex(1)}>
                        使用二维码
                    </Button>,
                    <Button
                        key="link"
                        // href="https://google.com"
                        // target="_blank"
                        type={buttonIndex == 2 ? "primary" : "default"}
                        // loading={loading}
                        onClick={() => setButtonIndex(2)}
                    >
                        使用连接
                    </Button>,
                ]}
            >
                {buttonIndex == 1 && <div className="displayFlexRow">
                    <div className="displayFlexColumn">
                        <div className="title">微信小程序二维码</div>
                        <Image width={300} src="/static/pc-Web.png"/>
                        <Button
                            onClick={() => doDownload("/static/pc-Web.png", '微信小程序马上行计划管理.png')}>下载</Button>
                    </div>
                    <div className="displayFlexColumn" id="myqrcode">
                        <div className="title">小程序扫描二维码，有效期7天</div>
                        <QRCode type="svg" value={qrCodeValue} size={300} status={qrCodeStatus}
                                onRefresh={generateQrcode}/>
                        <Button onClick={downloadSvgQRCode}>下载</Button>
                    </div>
                </div>}
                {buttonIndex == 2 && <div>
                    <div className="title">分享链接7日内有效</div>
                    <Space.Compact style={{width: '100%'}}>
                        <Input defaultValue="https://www.huaruyu.com" readOnly/>
                        <Button loading={qrCodeStatus=="loading"}
                                onClick={()=>copyToClipboard("https://www.huaruyu.com")}
                                type="primary">复制链接</Button>
                    </Space.Compact>
                </div>}
            </Modal>
        </Fragment>
    );
};
export default ShareOption;