react_hsbc_teller 1.9.7 → 1.9.81

package/packages/pages/sign/signMy.jsx

@@ -1,221 +1,221 @@
-import React, { Component } from 'react';
-import { message } from 'antd';
-import './signMy.less'
-import { Button } from '../../../node_modules/antd/lib/index';
-class Sign extends Component {
-	signCanvas = React.createRef();
-	state = {
-		canvasCtx: null,
-		heightOne: '0px',
-		widthOne: '0px',
-		isModalVisibleEnd: false,
-		isModalVisibleSubmit: false,
-		isSignOk: false
-	};
-
-	componentDidMount() {
-		setTimeout(() => {
-			
-			const canvas = this.refs.canvasF;
-			canvas.width = document.getElementById('multiModule').offsetWidth
-			canvas.height = document.getElementById('multiModule').offsetHeight
-			this.state.canvasCtx = canvas.getContext('2d');
-			this.state.stageInfo = canvas.getBoundingClientRect();
-			this.state.canvasCtx.lineWidth = 7;
-			this.state.canvasCtx.lineCap = "round";
-			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
-		})
-		const canvas = this.refs.canvasF;
-		// 清除画布
-		this.state.canvasCtx.clearRect(
-			0,
-			0,
-			canvas.width,
-			canvas.height,
-		  );
-	};
-	touchStart=(ev)=> {
-	    this.setState({
-			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
-		})
-		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)=> {
-		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;
-
-	  }	
-	  handleOkSign = async () => {
-		if(this.state.isSignOk) {
-			console.log(this.refs.canvasF.toDataURL())
-
-			this.props.handleOkSign(this.refs.canvasF.toDataURL())
-		}
-	}
-
-	render() {
-		return (
-			<div className="sign" id="multiModule">
-						<canvas
-							id="canvasF"
-							className='canvasF'
-							ref="canvasF"
-							onMouseDown={this.mouseDown}
-							onMouseMove={this.mouseMove}
-							onMouseUp={this.mouseUp}
-							></canvas>
-							              <div className='signButton'>
-                {
-                  !this.state.isSignOk && <Button className="modelButtonCancelNo">清除修改</Button>
-                }
-                {
-                  this.state.isSignOk && <Button className="modelButtonCancel" onClick={this.clearSign}>清除修改</Button>
-                }
-                {
-                  this.state.isSignOk && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确认提交</Button>
-                }
-              {
-                !this.state.isSignOk && <Button className="modelButtonCancelNo" type="primary" danger >确认提交</Button>
-              }
-              </div>
-			</div>
-		);
-	}
-
-}
-Sign.defaultProps = {
-  }
-  
-export default Sign;
+import React, { Component } from 'react';
+import { message } from 'antd';
+import './signMy.less'
+import { Button } from '../../../node_modules/antd/lib/index';
+class Sign extends Component {
+	signCanvas = React.createRef();
+	state = {
+		canvasCtx: null,
+		heightOne: '0px',
+		widthOne: '0px',
+		isModalVisibleEnd: false,
+		isModalVisibleSubmit: false,
+		isSignOk: false
+	};
+
+	componentDidMount() {
+		setTimeout(() => {
+			
+			const canvas = this.refs.canvasF;
+			canvas.width = document.getElementById('multiModule').offsetWidth
+			canvas.height = document.getElementById('multiModule').offsetHeight
+			this.state.canvasCtx = canvas.getContext('2d');
+			this.state.stageInfo = canvas.getBoundingClientRect();
+			this.state.canvasCtx.lineWidth = 7;
+			this.state.canvasCtx.lineCap = "round";
+			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
+		})
+		const canvas = this.refs.canvasF;
+		// 清除画布
+		this.state.canvasCtx.clearRect(
+			0,
+			0,
+			canvas.width,
+			canvas.height,
+		  );
+	};
+	touchStart=(ev)=> {
+	    this.setState({
+			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
+		})
+		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)=> {
+		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;
+
+	  }	
+	  handleOkSign = async () => {
+		if(this.state.isSignOk) {
+			console.log(this.refs.canvasF.toDataURL())
+
+			this.props.handleOkSign(this.refs.canvasF.toDataURL())
+		}
+	}
+
+	render() {
+		return (
+			<div className="sign" id="multiModule">
+						<canvas
+							id="canvasF"
+							className='canvasF'
+							ref="canvasF"
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							></canvas>
+							              <div className='signButton'>
+                {
+                  !this.state.isSignOk && <Button className="modelButtonCancelNo">清除修改</Button>
+                }
+                {
+                  this.state.isSignOk && <Button className="modelButtonCancel" onClick={this.clearSign}>清除修改</Button>
+                }
+                {
+                  this.state.isSignOk && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确认提交</Button>
+                }
+              {
+                !this.state.isSignOk && <Button className="modelButtonCancelNo" type="primary" danger >确认提交</Button>
+              }
+              </div>
+			</div>
+		);
+	}
+
+}
+Sign.defaultProps = {
+  }
+  
+export default Sign;