react_hsbc_teller 2.0.54 → 2.0.55

package/packages/pages/multiModule/components/sign/signMy.jsx

@@ -1,308 +1,308 @@
-import React, { Component } from 'react';
-import { message } from 'antd';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import './signMy.less'
-import Modal from "antd/lib/modal";
-import 'antd/lib/modal/style'
-import { Button } from '../../../../../node_modules/antd/lib/index';
-@injectIntl
-class Sign extends Component {
-	signCanvas = React.createRef();
-	state = {
-		canvasCtx: null,
-		heightOne: '0px',
-		widthOne: '0px',
-		isModalVisibleEnd: false,
-		isModalVisibleSubmit: false,
-		isSignOk: false
-	};
-
-	componentDidMount() {
-		setTimeout(() => {
-			// console.log(document.getElementById('multiModule').offsetWidth)
-			let canvasWidth = document.getElementById('multiModule').offsetWidth - 40
-			let canvasHeight = canvasWidth * (Number(this.props.height)) / (Number(this.props.length))
-
-			// 适应竖长图
-			if(canvasHeight > document.getElementById('multiModule').offsetHeight - 120){
-				canvasHeight = document.getElementById('multiModule').offsetHeight - 120
-				canvasWidth = canvasHeight * (Number(this.props.length)) / (Number(this.props.height))
-			}
-			
-			const canvas = this.refs.canvasF;
-			canvas.height =canvasHeight || this.refs.canvasHW.offsetHeight;
-			canvas.width = canvasWidth || this.refs.canvasHW.offsetWidth;
-			this.setState({
-				heightOne: canvas.height + 'px',
-				widthOne: canvas.width + 'px'
-			})
-			this.state.canvasCtx = canvas.getContext('2d');
-			this.state.stageInfo = canvas.getBoundingClientRect();
-			this.state.canvasCtx.lineWidth = 7;
-			this.state.canvasCtx.lineCap = "round";
-			// this.state.isSignOk = false
-			this.setState({
-				isSignOk: false
-			})
-
-			canvas.addEventListener('touchstart', this.touchStart, { passive: false });
-			canvas.addEventListener('touchmove', this.touchMove, { passive: false });
-			canvas.addEventListener('touchend', this.touchEnd, { passive: false });
-		}, 10);
-
-	
-	}
-	componentWillUnmount () {
-		const canvas = this.refs.canvasF;
-		canvas.removeEventListener('touchstart', this.touchStart);
-		canvas.removeEventListener('touchmove', this.touchMove);
-		canvas.removeEventListener('touchend', this.touchEnd);
-	}
-	
-	// 清空画布
-	clearSign = async () => {
-		this.setState({
-			isSignOk: false
-		})
-		// this.state.isSignOk = false
-		const canvas = this.refs.canvasF;
-		// 清除画布
-		this.state.canvasCtx.clearRect(
-			0,
-			0,
-			canvas.width,
-			canvas.height,
-		  );
-	};
-	touchStart=(ev)=> {
-		this.setState({
-			isSignOk: true
-		})
-	    // this.state.isSignOk = true
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX,
-            y: ev.targetTouches[0].clientY,
-          }
-          this.state.startX = obj.x
-          this.state.startY = obj.y
-          this.state.canvasCtx.beginPath()
-		  const canvas = this.refs.canvasF;
-		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-          this.state.canvasCtx.stroke()
-          this.state.canvasCtx.closePath()
-        //   this.points.push(obj)
-		  
-        }
-      }
-      touchMove=(ev)=>{
-        ev = ev || event
-        ev.preventDefault()
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX,
-            y: ev.targetTouches[0].clientY 
-          }
-          this.state.moveY = obj.y
-          this.state.moveX = obj.x
-          this.state.canvasCtx.beginPath()
-        //   strokeStyle = 'blue';
-		const canvas = this.refs.canvasF;
-		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-          this.state.canvasCtx.stroke()
-          this.state.canvasCtx.closePath()
-          this.state.startY = obj.y
-          this.state.startX = obj.x
-        //   this.points.push(obj)
-        }
-      }
-      touchEnd=(ev)=> {
-        ev = ev || event
-        ev.preventDefault()
-
-        if (ev.touches.length == 1) {
-          let obj = {
-            x: ev.targetTouches[0].clientX ,
-            y: ev.targetTouches[0].clientY
-          }
-          this.state.canvasCtx.beginPath()
-          const canvas = this.refs.canvasF;
-		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-          this.state.canvasCtx.stroke()
-          this.state.canvasCtx.closePath()
-        //   this.points.push(obj)
-        }
-    }
-	// pc
-    mouseDown=(ev) =>{
-		this.setState({
-			isSignOk: true
-		})
-		// this.state.isSignOk = true
-		ev.preventDefault();
-		const obj = {
-		  x: ev.pageX,
-		  y: ev.pageY,
-		};
-		const canvas = this.refs.canvasF;
-		this.state.startX = obj.x;
-		this.state.startY = obj.y;
-		this.state.canvasCtx.beginPath();
-		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.stroke();
-		this.state.canvasCtx.closePath();
-		this.state.isDown = true;
-
-	  }
-	  mouseMove=(ev)=> {
-		ev.preventDefault();
-		if (this.state.isDown) {
-		  const obj = {
-			x: ev.pageX,
-		  y: ev.pageY,
-		  };
-		  const canvas = this.refs.canvasF;
-		  if(obj.x - canvas.getBoundingClientRect().left<0 || obj.x - canvas.getBoundingClientRect().left> canvas.width || obj.y - canvas.getBoundingClientRect().top< 0 || obj.y - canvas.getBoundingClientRect().top> canvas.height) {
-			this.state.isDown = false;
-		  }
-		  this.state.moveY = obj.y;
-		  this.state.moveX = obj.x;
-		  this.state.canvasCtx.beginPath();
-
-		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		  this.state.canvasCtx.stroke();
-		  this.state.canvasCtx.closePath();
-		  this.state.startY = obj.y;
-		  this.state.startX = obj.x;
-		}
-	  }
-	  mouseUp=(ev)=> {
-			if (!this.state.isDown) return;
-		ev.preventDefault();
-		const obj = {
-			x: ev.pageX,
-		  y: ev.pageY,
-		};
-		const canvas = this.refs.canvasF;
-		this.state.canvasCtx.beginPath();
-		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
-		this.state.canvasCtx.stroke();
-		this.state.canvasCtx.closePath();
-		this.state.isDown = false;
-
-	  }	
-	commit = async () => {
-		if(this.state.isSignOk) {
-			console.log(this.refs.canvasF.toDataURL())
-
-			this.props.finish(this.refs.canvasF.toDataURL())
-	
-		} else {
-			this.setState({
-				isModalVisibleSubmit: true
-			})		}
-	}
-	exit = () => {
-		this.setState({
-			isModalVisibleEnd: true
-		})
-	}
-	handleCancelEnd = () => {
-		this.setState({
-			isModalVisibleEnd: false
-		})
-	}
-	handleOkEnd = () => {
-		this.setState({
-			isModalVisibleEnd: false
-		})
-		this.props.exit()
-	}
-	handleSubmit=()=>{
-		this.setState({
-			isModalVisibleSubmit: false
-		})
-	}
-	render() {
-		return (
-			<div className="sign">
-				<div className="thehead">
-					<div className="title">
-						<div className="title-color"></div>
-						<div className="title-text">{this.props.title}</div>
-					</div>
-					<div className='btns'>
-					<div className="reset" onClick={this.exit}><FormattedMessage id="exit" /></div>
-					</div>
-				</div>
-				<div className="content" ref="canvasHW" style={{height: this.state.heightOne,width: this.state.widthOne}}>
-						<canvas
-							id="canvasF"
-							className='canvasF'
-							ref="canvasF"
-							// onTouchStart={this.touchStart}
-							// onTouchMove={this.touchMove}
-							// onTouchEnd={this.touchEnd}
-							onMouseDown={this.mouseDown}
-							onMouseMove={this.mouseMove}
-							onMouseUp={this.mouseUp}
-							onMouseLeave={() => { this.state.isDown = false }}
-							></canvas>
-							{
-					!this.state.isSignOk && <div className="signHere"><FormattedMessage id="plzSign" /></div>
-
-							}
-				</div>
-				<div className='footRisk'>
-					<div className='btns'>
-					<div className="reset" onClick={this.clearSign}><FormattedMessage id="clearScreen" /></div>
-					<div className="qianshu" onClick={this.commit}><FormattedMessage id="commit" /></div>
-
-					</div>
-				</div>
-				<Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSubmit} footer={[<div key='end'>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleSubmit}><FormattedMessage id="ok" /></Button>
-          </div>
-          ]}>
-            <div className='endModal'>
-				<div className='modalEndTitle'>
-				<FormattedMessage id="message" />
-				</div>
-				<div className='modalEnd'>
-				<FormattedMessage id="signatureNot" />
-				</div>
-			</div>
-          </Modal>
-		  <Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[<div key='end'>
-          <Button className="modelButtonCancel" onClick={this.handleCancelEnd}><FormattedMessage id="cancel" /></Button>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}><FormattedMessage id="ok" /></Button>
-          </div>
-          ]}>
-            <div className='endModal'>
-				<div className='modalEndTitle'>
-				<FormattedMessage id="whether" />
-				</div>
-				<div className='modalEnd'>
-				<FormattedMessage id="progress" />
-				</div>
-			</div>
-          </Modal>
-			</div>
-		);
-	}
-
-}
-Sign.defaultProps = {
-	length: '100%',
-	height: '100%'
-  }
-  
-export default Sign;
+import React, { Component } from 'react';
+import { message } from 'antd';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import './signMy.less'
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import { Button } from '../../../../../node_modules/antd/lib/index';
+@injectIntl
+class Sign extends Component {
+	signCanvas = React.createRef();
+	state = {
+		canvasCtx: null,
+		heightOne: '0px',
+		widthOne: '0px',
+		isModalVisibleEnd: false,
+		isModalVisibleSubmit: false,
+		isSignOk: false
+	};
+
+	componentDidMount() {
+		setTimeout(() => {
+			// console.log(document.getElementById('multiModule').offsetWidth)
+			let canvasWidth = document.getElementById('multiModule').offsetWidth - 40
+			let canvasHeight = canvasWidth * (Number(this.props.height)) / (Number(this.props.length))
+
+			// 适应竖长图
+			if(canvasHeight > document.getElementById('multiModule').offsetHeight - 120){
+				canvasHeight = document.getElementById('multiModule').offsetHeight - 120
+				canvasWidth = canvasHeight * (Number(this.props.length)) / (Number(this.props.height))
+			}
+			
+			const canvas = this.refs.canvasF;
+			canvas.height =canvasHeight || this.refs.canvasHW.offsetHeight;
+			canvas.width = canvasWidth || this.refs.canvasHW.offsetWidth;
+			this.setState({
+				heightOne: canvas.height + 'px',
+				widthOne: canvas.width + 'px'
+			})
+			this.state.canvasCtx = canvas.getContext('2d');
+			this.state.stageInfo = canvas.getBoundingClientRect();
+			this.state.canvasCtx.lineWidth = 7;
+			this.state.canvasCtx.lineCap = "round";
+			// this.state.isSignOk = false
+			this.setState({
+				isSignOk: false
+			})
+
+			canvas.addEventListener('touchstart', this.touchStart, { passive: false });
+			canvas.addEventListener('touchmove', this.touchMove, { passive: false });
+			canvas.addEventListener('touchend', this.touchEnd, { passive: false });
+		}, 10);
+
+	
+	}
+	componentWillUnmount () {
+		const canvas = this.refs.canvasF;
+		canvas.removeEventListener('touchstart', this.touchStart);
+		canvas.removeEventListener('touchmove', this.touchMove);
+		canvas.removeEventListener('touchend', this.touchEnd);
+	}
+	
+	// 清空画布
+	clearSign = async () => {
+		this.setState({
+			isSignOk: false
+		})
+		// this.state.isSignOk = false
+		const canvas = this.refs.canvasF;
+		// 清除画布
+		this.state.canvasCtx.clearRect(
+			0,
+			0,
+			canvas.width,
+			canvas.height,
+		  );
+	};
+	touchStart=(ev)=> {
+		this.setState({
+			isSignOk: true
+		})
+	    // this.state.isSignOk = true
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX,
+            y: ev.targetTouches[0].clientY,
+          }
+          this.state.startX = obj.x
+          this.state.startY = obj.y
+          this.state.canvasCtx.beginPath()
+		  const canvas = this.refs.canvasF;
+		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+          this.state.canvasCtx.stroke()
+          this.state.canvasCtx.closePath()
+        //   this.points.push(obj)
+		  
+        }
+      }
+      touchMove=(ev)=>{
+        ev = ev || event
+        ev.preventDefault()
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX,
+            y: ev.targetTouches[0].clientY 
+          }
+          this.state.moveY = obj.y
+          this.state.moveX = obj.x
+          this.state.canvasCtx.beginPath()
+        //   strokeStyle = 'blue';
+		const canvas = this.refs.canvasF;
+		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+          this.state.canvasCtx.stroke()
+          this.state.canvasCtx.closePath()
+          this.state.startY = obj.y
+          this.state.startX = obj.x
+        //   this.points.push(obj)
+        }
+      }
+      touchEnd=(ev)=> {
+        ev = ev || event
+        ev.preventDefault()
+
+        if (ev.touches.length == 1) {
+          let obj = {
+            x: ev.targetTouches[0].clientX ,
+            y: ev.targetTouches[0].clientY
+          }
+          this.state.canvasCtx.beginPath()
+          const canvas = this.refs.canvasF;
+		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+          this.state.canvasCtx.stroke()
+          this.state.canvasCtx.closePath()
+        //   this.points.push(obj)
+        }
+    }
+	// pc
+    mouseDown=(ev) =>{
+		this.setState({
+			isSignOk: true
+		})
+		// this.state.isSignOk = true
+		ev.preventDefault();
+		const obj = {
+		  x: ev.pageX,
+		  y: ev.pageY,
+		};
+		const canvas = this.refs.canvasF;
+		this.state.startX = obj.x;
+		this.state.startY = obj.y;
+		this.state.canvasCtx.beginPath();
+		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.stroke();
+		this.state.canvasCtx.closePath();
+		this.state.isDown = true;
+
+	  }
+	  mouseMove=(ev)=> {
+		ev.preventDefault();
+		if (this.state.isDown) {
+		  const obj = {
+			x: ev.pageX,
+		  y: ev.pageY,
+		  };
+		  const canvas = this.refs.canvasF;
+		  if(obj.x - canvas.getBoundingClientRect().left<0 || obj.x - canvas.getBoundingClientRect().left> canvas.width || obj.y - canvas.getBoundingClientRect().top< 0 || obj.y - canvas.getBoundingClientRect().top> canvas.height) {
+			this.state.isDown = false;
+		  }
+		  this.state.moveY = obj.y;
+		  this.state.moveX = obj.x;
+		  this.state.canvasCtx.beginPath();
+
+		  this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		  this.state.canvasCtx.stroke();
+		  this.state.canvasCtx.closePath();
+		  this.state.startY = obj.y;
+		  this.state.startX = obj.x;
+		}
+	  }
+	  mouseUp=(ev)=> {
+			if (!this.state.isDown) return;
+		ev.preventDefault();
+		const obj = {
+			x: ev.pageX,
+		  y: ev.pageY,
+		};
+		const canvas = this.refs.canvasF;
+		this.state.canvasCtx.beginPath();
+		this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
+		this.state.canvasCtx.stroke();
+		this.state.canvasCtx.closePath();
+		this.state.isDown = false;
+
+	  }	
+	commit = async () => {
+		if(this.state.isSignOk) {
+			console.log(this.refs.canvasF.toDataURL())
+
+			this.props.finish(this.refs.canvasF.toDataURL())
+	
+		} else {
+			this.setState({
+				isModalVisibleSubmit: true
+			})		}
+	}
+	exit = () => {
+		this.setState({
+			isModalVisibleEnd: true
+		})
+	}
+	handleCancelEnd = () => {
+		this.setState({
+			isModalVisibleEnd: false
+		})
+	}
+	handleOkEnd = () => {
+		this.setState({
+			isModalVisibleEnd: false
+		})
+		this.props.exit()
+	}
+	handleSubmit=()=>{
+		this.setState({
+			isModalVisibleSubmit: false
+		})
+	}
+	render() {
+		return (
+			<div className="sign">
+				<div className="thehead">
+					<div className="title">
+						<div className="title-color"></div>
+						<div className="title-text">{this.props.title}</div>
+					</div>
+					<div className='btns'>
+					<div className="reset" onClick={this.exit}><FormattedMessage id="exit" /></div>
+					</div>
+				</div>
+				<div className="content" ref="canvasHW" style={{height: this.state.heightOne,width: this.state.widthOne}}>
+						<canvas
+							id="canvasF"
+							className='canvasF'
+							ref="canvasF"
+							// onTouchStart={this.touchStart}
+							// onTouchMove={this.touchMove}
+							// onTouchEnd={this.touchEnd}
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							onMouseLeave={() => { this.state.isDown = false }}
+							></canvas>
+							{
+					!this.state.isSignOk && <div className="signHere"><FormattedMessage id="plzSign" /></div>
+
+							}
+				</div>
+				<div className='footRisk'>
+					<div className='btns'>
+					<div className="reset" onClick={this.clearSign}><FormattedMessage id="clearScreen" /></div>
+					<div className="qianshu" onClick={this.commit}><FormattedMessage id="commit" /></div>
+
+					</div>
+				</div>
+				<Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSubmit} footer={[<div key='end'>
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleSubmit}><FormattedMessage id="ok" /></Button>
+          </div>
+          ]}>
+            <div className='endModal'>
+				<div className='modalEndTitle'>
+				<FormattedMessage id="message" />
+				</div>
+				<div className='modalEnd'>
+				<FormattedMessage id="signatureNot" />
+				</div>
+			</div>
+          </Modal>
+		  <Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[<div key='end'>
+          <Button className="modelButtonCancel" onClick={this.handleCancelEnd}><FormattedMessage id="cancel" /></Button>
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}><FormattedMessage id="ok" /></Button>
+          </div>
+          ]}>
+            <div className='endModal'>
+				<div className='modalEndTitle'>
+				<FormattedMessage id="whether" />
+				</div>
+				<div className='modalEnd'>
+				<FormattedMessage id="progress" />
+				</div>
+			</div>
+          </Modal>
+			</div>
+		);
+	}
+
+}
+Sign.defaultProps = {
+	length: '100%',
+	height: '100%'
+  }
+  
+export default Sign;