react_hsbc_teller 2.0.23 → 2.0.25

package/packages/pages/multiModule/components/copy/risk.less

@@ -0,0 +1,123 @@
+.risk{
+    height: 100%;
+    background: #fff;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    .thehead{
+        display: flex;
+        justify-content: space-between;
+        padding: 14px 24px ;
+        .title{
+            display: flex;
+            .title-color{
+                width: 2px;
+                height: 1.5rem;
+                background: #00847F;
+                margin-top: 0.25rem;
+            }
+            .title-text{
+                font-size: 1.5rem;
+                color: #323232;
+                margin-left: 8px;
+                font-weight: 500;
+            }
+
+        }
+        .btns{
+            display: flex;
+        }
+        .qianshu{
+            width: 96px;
+            height: 2rem;
+            background: #F9F2F3;
+            border-radius: 2px;
+            border: 1px solid #E5B2B5;
+            font-size: 14px;
+            color: #DB0011;
+            line-height: 2rem;
+            text-align: center;            
+        }
+        .reset{
+            width: 96px;
+            height: 2rem;
+            background: white;
+            border-radius: 2px;
+            border: 1px solid #DCDCDC;
+            font-size: 14px;
+            color: #646464;
+            line-height: 2rem;
+            text-align: center;
+            margin-right: 8px;   
+        }
+    }
+
+    .content{
+        // min-height: 300px;
+        border-radius: 4px;
+        border:1.5px dashed  #646464;
+        margin: 24px;
+        position: relative;
+        width: fit-content;
+        height: fit-content;
+        box-sizing: border-box;
+        align-self: center;
+        // left: 50%;
+        // top: 35%;
+        // transform: translate(-50%,-50%);
+        // flex:1;
+    }
+    .signHere{
+        font-size: 30px;
+        font-weight: 500;
+        // white-space: nowrap;
+        color: #c0bcbc;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+        width: 90%;
+        max-height: 98%;
+    }
+
+}
+.modalEndTitle{
+font-size: 20px;
+}
+.modalEnd{
+font-size: 15px;
+margin-left: 20px;
+margin-top: 15px;
+}
+
+.footRisk{
+    margin: auto;
+    margin-bottom: 15px;
+    .btns{
+        display: flex;
+    }
+    .qianshu{
+        height: 2.5rem;
+        line-height: 2.5rem;
+        width: 6rem;
+        font-size: 1.1rem;
+        background: #F9F2F3;
+        border-radius: 2px;
+        border: 1px solid #E5B2B5;
+        color: #DB0011;
+        text-align: center;            
+    }
+    .reset{
+        height: 2.5rem;
+        line-height: 2.5rem;
+        width: 6rem;
+        font-size: 1.1rem;
+        background: white;
+        border-radius: 2px;
+        border: 1px solid #DCDCDC;
+        color: #646464;
+        text-align: center;
+        margin-right: 8px;   
+    }
+}

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

@@ -0,0 +1,306 @@
+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)=> {
+		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}
+							></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;

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

@@ -0,0 +1,128 @@
+.sign{
+    // min-height: 100%;
+    height: 100%;
+    background: #fff;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  
+    .thehead{
+        display: flex;
+        justify-content: space-between;
+        padding: 14px 24px ;
+        .title{
+            display: flex;
+            .title-color{
+                width: 2px;
+                height: 1.5rem;
+                background: #00847F;
+                margin-top: 0.25rem;
+            }
+            .title-text{
+                font-size: 1.5rem;
+                color: #323232;
+                margin-left: 8px;
+                font-weight: 500;
+            }
+
+        }
+        .btns{
+            display: flex;
+        }
+        .qianshu{
+            width: 96px;
+            height: 2rem;
+            background: #F9F2F3;
+            border-radius: 2px;
+            border: 1px solid #E5B2B5;
+            font-size: 14px;
+            color: #DB0011;
+            line-height: 2rem;
+            text-align: center;            
+        }
+        .reset{
+            width: 96px;
+            height: 2rem;
+            background: white;
+            border-radius: 2px;
+            border: 1px solid #DCDCDC;
+            font-size: 14px;
+            color: #646464;
+            line-height: 2rem;
+            text-align: center;
+            margin-right: 8px;   
+        }
+    }
+
+    .content{
+        // min-height: 300px;
+        border-radius: 4px;
+        border:1.5px dashed  #646464;
+        margin: auto;
+        position: relative;
+        // flex:1;
+
+        .canvasF{
+            z-index: 10;
+            position: absolute;
+            margin: auto;
+        }
+    }
+    .signHere{
+        font-size: 50px;
+        font-weight: 500;
+        color: #646464;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        -moz-user-select:none;/*火狐*/
+        -webkit-user-select:none;/*webkit浏览器*/
+        -ms-user-select:none;/*IE10*/
+        -khtml-user-select:none;/*早期浏览器*/
+        user-select:none;
+        opacity: 0.2;
+        pointer-events: none;
+    }
+
+}
+.modalEndTitle{
+    font-size: 20px;
+}
+.modalEnd{
+font-size: 15px;
+margin-left: 20px;
+margin-top: 15px;
+}
+
+
+  .footRisk{
+    margin: auto;
+    margin-top: 15px;
+    .btns{
+        display: flex;
+    }
+    .qianshu{
+        height: 2.5rem;
+        line-height: 2.5rem;
+        width: 6rem;
+        font-size: 1.1rem;
+        background: #F9F2F3;
+        border-radius: 2px;
+        border: 1px solid #E5B2B5;
+        color: #DB0011;
+        text-align: center;            
+    }
+    .reset{
+        height: 2.5rem;
+        line-height: 2.5rem;
+        width: 6rem;
+        font-size: 1.1rem;
+        background: white;
+        border-radius: 2px;
+        border: 1px solid #DCDCDC;
+        color: #646464;
+        text-align: center;
+        margin-right: 8px;   
+    }
+}

package/packages/pages/multiModule/components/subscribe/subscribe.jsx

@@ -0,0 +1,113 @@
+import React, { Component } from "react";
+import Sign from "../sign/signMy"; //签字
+import "./subscribe.less";
+import API from "@/api/api";
+import { FormattedMessage, injectIntl } from "react-intl";
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import { Button } from '../../../../../node_modules/antd/lib/index';
+import { message } from 'antd';
+@injectIntl
+class subscribe extends Component {
+  state = {
+    data: {
+      sessionId: "r7Sjf5Afj",
+      appAccount: "ts002",
+      transactionId: "20220221 - Q0001063343",
+      appointmentId: "100219197",
+      step: "ssq-customer",
+      title:
+        "[0xe5][0x94][0xa4][0xe9][0x86][0x92][0xe5][0xae][0xa2][0xe6][0x88][0xb7][0xe7][0xad][0xbe]",
+      length: "337",
+      height: "177",
+      list: [
+        {
+          productName: [],
+          file: [
+            {
+              docId: "6b381985-1c9a-4859-92a2-a63e8c315b8a",
+              docType: "GEN-RPQ",
+              docText:
+                "[0xe9][0xa3][0x8e][0xe9][0x99][0xa9][0xe8][0xaf][0x84][0xe4][0xbc][0xb0][0xe9][0x97][0xae][0xe5][0x8d][0xb7]",
+              transactionNumber: "20220221 - Q0001063343",
+              appointmentId: "100219197",
+            },
+          ],
+        },
+      ],
+      callbackUrl: "http://47.102.126.132:8720/hsbc/callback",
+    },
+    showSign: true,
+    isModalVisibleSubmitError: false
+  };
+  sign = () => {
+    this.setState({
+      showSign: true,
+    });
+  };
+  exit  = () => {
+    this.props.handleReceiveMsg({
+      'typeId': 121305,
+      'sessionId': window.imRoom.sessionId,
+    })
+    this.props.finish();
+  };
+  finish = async (fileBase64) => {
+    // console.log({ ...this.props.data, file: fileBase64 })
+    let result = await API.signFileCallback({
+        ...this.props.data,
+        fileBase64: fileBase64.replace('data:image/png;base64,',''),
+    });
+			if(result.code == 500) {
+				this.setState({
+					isModalVisibleSubmitError: true
+				})
+			} else{
+        message.success(this.props.intl.formatMessage({id: 'signSuccess'}),);
+        this.props.handleReceiveMsg({
+              'typeId': 1216,
+              'sessionId': window.imRoom.sessionId,
+              'userId':  window.imRoom.userId
+        })
+        this.setState({
+          showSign: false,
+        });
+        this.props.finish();
+      }
+    
+  };
+  handleSubmit=()=>{
+		this.setState({
+			isModalVisibleSubmitError: false
+		})
+	}
+  componentWillMount() {
+    // 初始化数据
+    let data = this.props.data || this.state.data;
+    this.setState({
+      data: data,
+    });
+  }
+  render() {
+    return (
+    <div style={{height: '99%'}}>
+    <Sign title={this.state.data.title} length={this.state.data.length} height={this.state.data.height} exit={this.exit} finish={this.finish} />
+    <Modal destroyOnClose={true} getContainer={document.getElementById('multiModule')} closable={false} centered={true} visible={this.state.isModalVisibleSubmitError} 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="submission" />
+				</div>
+			</div>
+          </Modal>
+    </div>
+    )
+  }
+}
+
+export default subscribe;