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;
|