assistant-todo/src/components/ShareOption.tsx

130 lines
5.4 KiB
TypeScript
Raw Normal View History

2025-07-28 06:53:32 -04:00
import React, {Fragment, useEffect, useState} from 'react';
2025-07-30 06:43:37 -04:00
import {Button, Image, Input, message, Modal, QRCode, Space} from 'antd';
2025-07-29 06:47:26 -04:00
import {v4 as uuidv4} from 'uuid';
import {copyToClipboard} from "@/lib/copyToClipboard";
2025-07-30 06:43:37 -04:00
import {addTaskPassAPI} from "@/components/service/Share";
2025-07-28 06:53:32 -04:00
2025-07-29 06:47:26 -04:00
const ShareOption = (props: { taskId: string }) => {
// const [loading, setLoading] = useState(false);
2025-07-28 06:53:32 -04:00
const [open, setOpen] = useState(false);
2025-07-29 06:47:26 -04:00
const [buttonIndex, setButtonIndex] = useState(1);
2025-07-28 06:53:32 -04:00
const [qrCodeValue, setQrCodeValue] = useState<string>("-");
2025-07-29 06:47:26 -04:00
const [qrCodeStatus, setQrCodeStatus] = useState<'active' | 'expired' | 'loading' | 'scanned'>("loading");
2025-07-30 06:43:37 -04:00
const [joinId,setJoinId] = useState("");
2025-07-29 06:47:26 -04:00
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 = () => {
2025-07-30 06:43:37 -04:00
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")
}
});
2025-07-28 06:53:32 -04:00
}
const showModal = () => {
setOpen(true);
};
const handleCancel = () => {
setOpen(false);
};
useEffect(() => {
2025-07-30 06:43:37 -04:00
generateQrcode()
2025-07-28 06:53:32 -04:00
}, []);
return (
<Fragment>
<Button type="primary" onClick={showModal}>
</Button>
<Modal
open={open}
2025-07-29 06:47:26 -04:00
title="分享好友"
// onOk={handleOk}
2025-07-28 06:53:32 -04:00
onCancel={handleCancel}
2025-07-29 06:47:26 -04:00
width={700}
2025-07-28 06:53:32 -04:00
footer={[
<Button key="back" onClick={handleCancel}>
</Button>,
2025-07-30 06:43:37 -04:00
// <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>,
2025-07-28 06:53:32 -04:00
]}
>
2025-07-29 06:47:26 -04:00
{buttonIndex == 1 && <div className="displayFlexRow">
<div className="displayFlexColumn">
2025-07-28 06:53:32 -04:00
<div className="title"></div>
<Image width={300} src="/static/pc-Web.png"/>
2025-07-29 06:47:26 -04:00
<Button
onClick={() => doDownload("/static/pc-Web.png", '微信小程序马上行计划管理.png')}></Button>
2025-07-28 06:53:32 -04:00
</div>
2025-07-29 06:47:26 -04:00
<div className="displayFlexColumn" id="myqrcode">
2025-07-28 06:53:32 -04:00
<div className="title">7</div>
2025-07-29 06:47:26 -04:00
<QRCode type="svg" value={qrCodeValue} size={300} status={qrCodeStatus}
onRefresh={generateQrcode}/>
<Button onClick={downloadSvgQRCode}></Button>
2025-07-28 06:53:32 -04:00
</div>
</div>}
2025-07-29 06:47:26 -04:00
{buttonIndex == 2 && <div>
<div className="title">7</div>
<Space.Compact style={{width: '100%'}}>
<Input defaultValue="https://www.huaruyu.com" readOnly/>
<Button loading={qrCodeStatus=="loading"}
2025-07-30 06:43:37 -04:00
onClick={()=>{copyToClipboard(`https://www.huaruyu.com/task/project?joinId=${joinId}`);
message.info("复制链接成功过")}}
2025-07-29 06:47:26 -04:00
type="primary"></Button>
</Space.Compact>
</div>}
2025-07-28 06:53:32 -04:00
</Modal>
</Fragment>
);
};
export default ShareOption;