import { Button, ActivityIndicator, TextareaItem } from 'antd-mobile';
import React, { useState, useEffect, FC } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import styles from './index.less';
import { noop } from 'lodash';
type WritePageType = {
onClick?: (v: string) => void;
};
import { useBaseUpload } from '@/api/services/card';
import styled from 'styled-components';
import { FG } from './fn';
const Btn = styled(Button)`
a:hover {
color: #fff !important;
}
`;
const WritePage: FC<WritePageType> = ({ onClick = noop }) => {
const {
upload: [loading, data, onBase],
} = useBaseUpload();
const [signImg, setSignImg] = useState('');
const [urls, setUrls] = useState<any[]>([]);
const [strIndex, setStrIndex] = useState(0);
const [signTip, setSignTip] = useState(
'本人已阅读保险条款、产品说明书和投保提示书,了解本产品的特点和保单利益的不确定性。',
);
let sigCanvas: any;
const clearSign = () => {
sigCanvas.clear();
};
const dataURItoBlob = (base64Data: string) => {
let byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else byteString = unescape(base64Data.split(',')[1]);
const mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
const ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
};
const base64ToFile = (urlData: any, fileName: string) => {
const arr = urlData.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bytes = atob(arr[1]);
let n = bytes.length;
const ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
};
const handleSign = () => {
const base64Data = sigCanvas.toDataURL('image/png');
const list = urls;
list.push(base64Data);
setUrls(list);
clearSign();
const c = document.getElementById('mycanvas');
if (!c) return;
const ctx = c.getContext('2d');
ctx.beginPath();
urls.forEach((element: string, index: number) => {
const img = new Image();
img.src = element;
img.onload = function () {
ctx.drawImage(
this,
index < 6
? 50 * index
: 50 * index - (Math.ceil((index + 1) / 6) - 1) * 300,
50 * Math.ceil((index + 1) / 6),
50,
50,
);
};
});
setStrIndex(list.length);
if (sigCanvas) {
const canvas = sigCanvas.getCanvas();
const context = canvas.getContext('2d');
if (!context) return;
context.font = 'normal 130pt "楷体"';
context.fillStyle = '#ccc';
context.fillText(signTip.charAt(list.length), 90, 150);
}
setSignImg(c.toDataURL('image/png'));
};
useEffect(() => {
if (data) {
onClick(signImg);
}
}, [data]);
return (
<>
<ActivityIndicator
toast
animating={loading}
size="large"
text="上传中..."
/>
<div className={styles.signContainer}>
<div className={styles.signContent}>
<SignatureCanvas
penColor="#000"
maxWidth={3}
minWidth={1}
canvasProps={{
width: 350,
height: 200,
className: styles.canvasContainer,
}}
ref={(ref) => {
sigCanvas = ref;
if (ref) {
const canvas = ref.getCanvas();
const context = canvas.getContext('2d');
if (!context) return;
context.font = 'normal 130pt "楷体"';
context.fillStyle = '#ccc';
context.fillText(signTip.charAt(strIndex), 90, 150);
}
}}
/>
{}
</div>
<div className={styles.buttonContainer}>
{}
{}
{}
</div>
<br />
{urls.length !== signTip.length && (
<Button
loading={loading}
onClick={handleSign}
type="primary"
>
签字确认
</Button>
)}
<br />
{urls.length === signTip.length && (
<Button
loading={loading}
onClick={() => {
console.log(signImg);
onClick(signImg);
}}
type="primary"
>
上传签名
</Button>
)}
{}
</div>
<br />
<div>
<canvas id="mycanvas" width="300" height="500"></canvas>
</div>
</>
);
};
export default WritePage;