assistant-todo/src/components/ShareOption.tsx

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

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");
    const [joinId,setJoinId] = useState("");
    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 clientId: string = uuidv4().substring(0,32);
        // 分享人必须有权限
        // 生成分享信息同时适用链接和二维码
        addTaskPassAPI({taskId:props.taskId,pass:clientId,joinCheck:'1'}).then(res=>{
            if (res.data.status.success){
                let qrCodeData = {
                    taskId: props.taskId, pass: clientId,
                    passId: res.data.data.id,
                    local: "马上行计划管理",
                    opType: "SHARE_OPTION"
                }
                setJoinId(res.data.data.id!)
                setQrCodeValue(JSON.stringify(qrCodeData))
                setQrCodeStatus("active")
            }
        });
    }
    const showModal = () => {
        setOpen(true);
    };

    const handleCancel = () => {
        setOpen(false);
    };
    useEffect(() => {
        generateQrcode()
    }, []);

    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/task/project?joinId=${joinId}`);
                                    message.info("复制链接成功过")}}
                                type="primary">复制链接</Button>
                    </Space.Compact>
                </div>}
            </Modal>
        </Fragment>
    );
};
export default ShareOption;