85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
|
import React, {Fragment, useEffect, useState} from 'react';
|
|||
|
|
import {Button, Image, Modal, QRCode} from 'antd';
|
|||
|
|
import { v4 as uuidv4 } from 'uuid';
|
|||
|
|
|
|||
|
|
const ShareOption = (props:{taskId:string} ) => {
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [open, setOpen] = useState(false);
|
|||
|
|
const [buttonIndex, setButtonIndex] = useState(0);
|
|||
|
|
const [qrCodeValue, setQrCodeValue] = useState<string>("-");
|
|||
|
|
const [qrCodeStatus, setQrCodeStatus]=useState<'active' | 'expired' | 'loading' | 'scanned'>("active");
|
|||
|
|
|
|||
|
|
const generateQrcode =()=>{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
const showModal = () => {
|
|||
|
|
setOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleOk = () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
setLoading(false);
|
|||
|
|
setOpen(false);
|
|||
|
|
}, 3000);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
setOpen(false);
|
|||
|
|
};
|
|||
|
|
useEffect(() => {
|
|||
|
|
// 分享人必须有权限
|
|||
|
|
const clientId: string = uuidv4();
|
|||
|
|
let qrCodeData={
|
|||
|
|
taskId:props.taskId,pass:clientId,local:"马上行计划管理",opType:"SHARE_OPTION"
|
|||
|
|
}
|
|||
|
|
setQrCodeValue(JSON.stringify(qrCodeData))
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Fragment>
|
|||
|
|
<Button type="primary" onClick={showModal}>
|
|||
|
|
分享
|
|||
|
|
</Button>
|
|||
|
|
<Modal
|
|||
|
|
open={open}
|
|||
|
|
title="Title"
|
|||
|
|
onOk={handleOk}
|
|||
|
|
onCancel={handleCancel}
|
|||
|
|
footer={[
|
|||
|
|
<Button key="back" onClick={handleCancel}>
|
|||
|
|
返回
|
|||
|
|
</Button>,
|
|||
|
|
<Button key="submit" type="primary" loading={loading} onClick={handleOk}>
|
|||
|
|
使用二维码
|
|||
|
|
</Button>,
|
|||
|
|
<Button
|
|||
|
|
key="link"
|
|||
|
|
href="https://google.com"
|
|||
|
|
target="_blank"
|
|||
|
|
type="primary"
|
|||
|
|
loading={loading}
|
|||
|
|
onClick={handleOk}
|
|||
|
|
>
|
|||
|
|
使用连接
|
|||
|
|
</Button>,
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
{buttonIndex==1&& <div>
|
|||
|
|
<div>
|
|||
|
|
<div className="title">微信小程序二维码</div>
|
|||
|
|
<Image width={300} src="/static/pc-Web.png"/>
|
|||
|
|
<Button>下载</Button>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="title">小程序扫描二维码，有效期7天</div>
|
|||
|
|
<QRCode value={qrCodeValue} size={300} status={qrCodeStatus} onRefresh={generateQrcode}/>
|
|||
|
|
<Button>下载</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>}
|
|||
|
|
|
|||
|
|
</Modal>
|
|||
|
|
</Fragment>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
export default ShareOption;
|