Skip to content

W
WebPublic
提交 f51f0bd1 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

签名组件优化

上级 c107150f
显示空白字符变更
内嵌 并排
正在显示 包含 138 行增加 和 100 行删除
one_stop_public/Signature/Split.js 0 → 100644
浏览文件 @ f51f0bd1
// 保存签名 到用户基础信息上
import { getUserInfo } from '@/webPublic/one_stop_public/utils/token';
import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
import { getOneStopMyInfo } from '@/webPublic/one_stop_public/utils/utils';
export function saveSign(url) {
if (typeof url !== 'string' || url.length < 15) {
return true;
}
const userInfo = getUserInfo();
uaaRequest('/UserApi/saveMySysBackgroundImage', {
username: userInfo.stuNo,
backgroundImageUrl: userInfo.backgroundImageUrl || 'fakeBackgroundImageUrl', // 假数据
isUseBackImage: userInfo.isUseBackImage || false,
userSign: url,
}).then((g) => {
getOneStopMyInfo();
return true;
});
}
export function dataURLtoBlob(toDataURL) {
var arr = toDataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
export function blobToFile(Blob, fileName) {
Blob.lastModifiedDate = new Date();
Blob.name = fileName;
return Blob;
}
one_stop_public/Signature/index.jsx
浏览文件 @ f51f0bd1
......@@ -2,52 +2,17 @@
* 徐立
* 2019年12月6日
* 电子签章多功能封装
* 2022年8月17日
* 从个人基本信息中拿默认签名.
*/
import React, { Component } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import { message, Button, Modal } from 'antd';
import { message, Button, Modal, Icon } from 'antd';
import config from '@/webPublic/one_stop_public/config';
import reqwest from 'reqwest';
import { getToken, getUserInfo } from '@/webPublic/one_stop_public/utils/token';
import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
import { getOneStopMyInfo } from '@/webPublic/one_stop_public/utils/utils';
import styles from './mobileSign.less';
// 保存签名 到用户基础信息上
function saveSign(url) {
if (typeof url !== 'string' || url.length < 15) {
return true;
}
const userInfo = getUserInfo();
uaaRequest('/UserApi/saveMySysBackgroundImage', {
username: userInfo.stuNo,
backgroundImageUrl: userInfo.backgroundImageUrl || 'fakeBackgroundImageUrl', // 假数据
isUseBackImage: userInfo.isUseBackImage || false,
userSign: url,
})
.then((g) => {
getOneStopMyInfo();
return true;
});
}
function dataURLtoBlob(toDataURL) {
var arr = toDataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function blobToFile(Blob, fileName) {
Blob.lastModifiedDate = new Date();
Blob.name = fileName;
return Blob;
}
import { saveSign, dataURLtoBlob, blobToFile } from './Split';
export default class Signature extends Component {
constructor(props) {
......@@ -77,8 +42,7 @@ export default class Signature extends Component {
}
sigCanvas = {
clear: () => {
},
clear: () => {},
toDataURL: (param) => {
return '';
},
......@@ -93,6 +57,7 @@ export default class Signature extends Component {
}
this.triggerChange(null);
};
trim = () => {
message.info('正在保存签名，请等待');
const formData = new FormData();
......@@ -112,13 +77,6 @@ export default class Signature extends Component {
/**
* 这里的成功 是走的下面的 error
* */
// console.log('22334455');
// if (!('value' in this.props)) {
// this.setState({ url: url });
// }
// this.triggerChange(url);
//
message.success('保存成功');
},
error: (e) => {
......@@ -152,26 +110,46 @@ export default class Signature extends Component {
});
};
showSignImage = () => {
const { url } = this.state;
Modal.info({
title: '查看签名',
content: <div className={styles.showDiv}>
<img src={config.httpServer + url}/>
</div>,
footer: null,
});
};
EditIcon = () => {
return <Icon type="edit" onClick={this.changeShowModal} className={styles.editIcon}/>
}
// 移动端签名组件
MobileSign = () => {
const { url } = this.state;
if (url) {
return <div className={styles.mobileSign}>
<Button type={'primary'}
return (
<div className={styles.mobileSign}>
<this.EditIcon />
{/* <Button
type={'primary'}
onClick={this.changeShowModal}
className={styles.reSign}
>
className={styles.reSign}>
重新签名
</Button>
<img src={config.httpServer + url} style={{}}
/>
</div>;
</Button>*/}
<img src={config.httpServer + url} className={styles.littleSign} onClick={this.showSignImage}/>
</div>
);
} else {
return <div className={styles.mobileSign2}>
<Button type={'primary'} onClick={this.changeShowModal}>
return (
<div className={styles.mobileSign2}>
<this.EditIcon />
{/*<Button type={'primary'} onClick={this.changeShowModal}>
点击开始签名
</Button>
</div>;
</Button>*/}
</div>
);
}
};
......@@ -180,7 +158,9 @@ export default class Signature extends Component {
const height = 300;
const width = window.screen.width - 50;
return (
showModal && <Modal className={styles.mobileModal}
showModal && (
<Modal
className={styles.mobileModal}
width={'100vw'}
onCancel={this.changeShowModal}
visible={true}
......@@ -189,8 +169,7 @@ export default class Signature extends Component {
bodyStyle={{
minHeight: '350px',
padding: '24px 12px',
}}
>
}}>
<div className={styles.borderDiv}>
<SignatureCanvas
penColor="black"
......@@ -204,7 +183,9 @@ export default class Signature extends Component {
}}
/>
</div>
</Modal>);
</Modal>
)
);
};
WebModal = () => {
......@@ -212,7 +193,9 @@ export default class Signature extends Component {
const height = 300;
const width = 600;
return (
showModal && <Modal className={styles.mobileModal}
showModal && (
<Modal
className={styles.mobileModal}
width={700}
onCancel={this.changeShowModal}
visible={true}
......@@ -221,8 +204,7 @@ export default class Signature extends Component {
bodyStyle={{
minHeight: '350px',
padding: '24px 12px',
}}
>
}}>
<div className={styles.borderDiv}>
<SignatureCanvas
penColor="black"
......@@ -236,62 +218,60 @@ export default class Signature extends Component {
}}
/>
</div>
</Modal>);
</Modal>
)
);
};
WebSign = () => {
const {
width,
height,
} = this.props;
const { width, height } = this.props;
// console.log(this.props);
const { url } = this.state;
if (url) {
return <div className={styles.webSign}>
<Button type={'primary'}
onClick={this.changeShowModal}
>
重新签名
</Button>
<img src={config.httpServer + url} style={{
return (
<div className={styles.webSign}>
<this.EditIcon />
<img
onClick={this.showSignImage}
src={config.httpServer + url}
style={{
height,
width,
}}
/>
</div>;
</div>
);
} else {
return <div className={styles.mobileSign2}>
<Button type={'primary'} onClick={this.changeShowModal}>
点击开始签名
</Button>
</div>;
return (
<div className={styles.mobileSign2}>
<this.EditIcon />
</div>
);
}
return null;
};
render() {
// console.log('签名组件');
const {
width,
height,
get,
} = this.props;
const { width, height, get } = this.props;
const { url } = this.state;
if (get === 'mobile') {
// const MobileSign = this.MobileSign;
// const MobileModal = this.MobileModal;
return <>
<this.MobileSign/>
<this.MobileModal/>
</>;
return (
<>
<this.MobileSign />
<this.MobileModal />
</>
);
} else {
return <>
<this.WebSign/>
<this.WebModal/>
</>;
return (
<>
<this.WebSign />
<this.WebModal />
</>
);
}
}
}
one_stop_public/Signature/mobileSign.less
浏览文件 @ f51f0bd1
......@@ -29,3 +29,23 @@
border: 1px solid #f2f2f2;
}
}
.showDiv{
max-width: 300px;
height: auto;
img{
//width: 100%;
height: auto;
max-width: 100%;
}
}
.editIcon{
cursor: pointer;
font-size: 20px;
color: #0c81e0;
margin-right: 10px;
}
.littleSign{
cursor: pointer;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论