react_hsbc_teller 2.0.24 → 2.0.25

package/packages/pages/multiModule/components/copy/copylist.jsx

@@ -0,0 +1,291 @@
+import React, { Component } from 'react';
+import { message } from 'antd';
+import CopyTwo from './copyTwo'
+import CopyEn from './copy_en'
+import Risk from './risk'
+import Agree from './agree'
+import './copylist.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';
+@injectIntl
+class Copylist extends Component {
+	state = {
+		data: {
+			"sessionId":"SXbUX8GaE",
+			"callbackUrl":"http://47.102.126.132:8720/hsbc/callback",
+			"title":"抄录标题",
+			"copyNumber":"抄录批次号",
+			"username":"姓名",
+			length: "337",
+      		height: "177",
+			"list":[
+				{
+					"transactionNumber":"2021061762130001326",
+					"productName":[
+						"富达基金",
+						"汇丰代境外理财计划"
+					],
+					"file":[
+						{
+							"docId":"xxxxxxxxxx",
+							"docText":"ODII_ 汇丰代境外理财计划-开放式海外基金型产品认购书（含客户权益须知）"
+						},
+						{
+							"docId":"xxxxxxxxxx",
+							"docText":"海外基金型产品认购书"
+						}
+					]
+				},
+				{
+					"transactionNumber":"202106176213078758",
+					"productName":[
+						"产品名称3",
+						"汇丰代境外理财计划"
+					],
+					"file":[
+						{
+							"docId":"xxxxxxxxxx",
+							"docText":"ODII_ 汇丰代境外理财计划-开放式海外基金型产品认购书（含客户权益须知）"
+						},
+					]
+				}
+			],
+			"content":[
+				{
+					"type":"1",
+					"sequence":"2",
+					"subContent":[
+						{
+							"desc":"描述1",
+							"option":false
+						},
+						{
+							"desc":"描述2",
+							"option":false
+						}
+					]
+				},
+				{
+					"type":"2",
+					"sequence":"1",
+					"locale":"zh_CN", // en_US
+					"subContent": "汇丰代境外理财计划",
+					"row": 2,
+					"cell": 12
+				},
+				{
+					"type":"2",
+					"sequence":"1",
+					"locale":"en_US", // en_US
+					"subContent":"To see a world in a grain of sand. And a heaven in a wild flower.",
+					"row": 2,
+					"cell": 5
+				},
+				{
+					"type":"3",
+					"sequence":"3",
+					"subContent":"风险等级"
+				}
+			]
+		},
+		isStartCopy: false,
+		curIndex: 0,
+		resultContent: [],
+		isModalVisibleSubmitError: false
+	};
+	// 开始抄录
+	startCopy = () => {
+		this.setState({
+			isStartCopy: true,
+			curIndex: 0
+		})
+	}
+	base64toFile(data, fileName) {
+		const dataArr = data.split(",");
+		const byteString = atob(dataArr[1]);
+		const options = {
+		  type: "image/jpeg",
+		  endings: "native"
+		};
+		const u8Arr = new Uint8Array(byteString.length);
+		for (let i = 0; i < byteString.length; i++) {
+		  u8Arr[i] = byteString.charCodeAt(i);
+		}
+		return new File([u8Arr], fileName + ".jpg", options);//返回文件流
+  	}
+	nextCopy = async (resultData) => {
+		this.state.resultContent.push(resultData) // 将结果保存
+		if (resultData.type=='2' || resultData.type=='3') {
+			console.log(resultData)
+			const formData = new FormData();
+			formData.append('file', this.base64toFile(resultData.file, 'image'));
+			formData.append('sessionId', window.imRoom.sessionId);
+			formData.append('sequence', resultData.sequence);
+			formData.append('type', resultData.type);
+			formData.append('from', window.imRoom.userId);
+			formData.append('to', window.imRoom.userId);
+			let result = await API.uploadOss(formData);
+			console.log(result)
+			if(result.code == 500) {
+				this.setState({
+					isModalVisibleSubmitError: true
+				})
+			} else {
+				this.endFinish()
+			}
+      		// console.log(result);
+			// callNimIM('sendCustomCmdMsg', {
+			// 	customId: window.imRoom.imRoomId,
+			// 	content: JSON.stringify({
+			// 		'typeId': 1220,
+			// 		'data': resultData,
+			// 		'sessionId': window.imRoom.sessionId,
+			// 		'userId':  window.imRoom.userId
+			// 	})
+			// }, function (code, message, data) {
+			// });
+		}else if (resultData.type=='1'){
+			console.log(this.state.resultContent)
+			let result = await API.previewCopyCallback({
+				...this.props.data,
+				content: this.state.resultContent
+			});	
+			if(result.code == 500) {
+				this.setState({
+					isModalVisibleSubmitError: true
+				})
+			} else {
+				this.props.handleReceiveMsg({
+					'typeId': 1220,
+					'data': {
+						...resultData,
+						file: ''
+					},
+					'sessionId': window.imRoom.sessionId,
+					'userId':  window.imRoom.userId
+				})
+				this.endFinish()
+			}
+		}
+		// if (this.state.curIndex+1<this.state.data.content.length){
+		// 	this.setState({
+		// 		isStartCopy: true,
+		// 		curIndex: this.state.curIndex + 1
+		// 	})
+		// } else {
+		// 	// 结束抄录
+		// 	this.setState({
+		// 		isStartCopy: false,
+		// 		curIndex: 0
+		// 	})
+		// 	message.success(this.props.intl.formatMessage({id: 'copySuccess'}));
+		// 	this.props.finish()
+		// }
+	}
+	endFinish=()=>{
+					// 结束抄录
+			this.setState({
+				isStartCopy: false,
+				curIndex: 0
+			})
+			message.success(this.props.intl.formatMessage({id: 'copySuccess'}));
+			this.props.finish()
+	}
+	handleSubmit=()=>{
+		this.setState({
+			isModalVisibleSubmitError: false
+		})
+	}
+	componentWillMount() {
+		// 初始化排序
+		let data = this.props.data || this.state.data
+		data.content.sort(function (obj1, obj2) {
+			var val1 = Number(obj1.sequence);
+			var val2 = Number(obj2.sequence);
+			if (val1 < val2) {
+				return -1;
+			} else if (val1 > val2) {
+				return 1;
+			} else {
+				return 0;
+			}            
+		} )
+		this.setState({
+			data: data
+		})
+		this.startCopy()
+	}
+	exit  = () => {
+		this.props.handleReceiveMsg({
+			'typeId': 121405,
+			'sessionId': window.imRoom.sessionId,
+		})
+		this.props.finish();
+	};
+	render() {
+		let curItem = this.state.data.list[this.state.curIndex]
+		let curSubItem = this.state.data.content[this.state.curIndex]
+		console.log('curSubItem',curSubItem)
+		// const lang = window.localStorage.getItem("a_lang")
+		return (
+			<div style={{height:'100%'}}>
+				{this.state.isStartCopy && curSubItem.type==3 ? <Risk title={this.state.data.title} length={this.state.data.length} height={this.state.data.height} item={curSubItem} next={this.nextCopy} exit={this.exit}/> : null }
+				{/* {this.state.isStartCopy && curSubItem.type==2 ? <Copy item={curSubItem} next={this.nextCopy}/> : null } */}
+				{this.state.isStartCopy && curSubItem.type==2 && curSubItem.subContent[0].local.includes('en')? <CopyEn title={this.state.data.title} rate={this.state.data.length/this.state.data.height} item={curSubItem} next={this.nextCopy} exit={this.exit}/> : null }
+				{this.state.isStartCopy && curSubItem.type==2 && !curSubItem.subContent[0].local.includes('en')? <CopyTwo title={this.state.data.title} length={this.state.data.length} height={this.state.data.height} rate={this.state.data.length/this.state.data.height} item={curSubItem} next={this.nextCopy} exit={this.exit}/> : null }
+				{this.state.isStartCopy && curSubItem.type==1 ? <Agree title={this.state.data.title} item={curSubItem} next={this.nextCopy} exit={this.exit}/> : null }
+				{/* {this.state.isStartCopy? null : 
+				<div className="copylist">
+					<div className="thehead">
+						<div className="title">
+							<div className="title-color"></div>
+							<div className="title-text"><FormattedMessage id="copylist" /></div>
+						</div>
+						<div className="qianshu" onClick={this.startCopy}><FormattedMessage id="copy" /></div>
+					</div>
+					<div className="contents">
+						{
+							this.state.data.list.map((item,index) => {
+								return (
+									<div className="item-panel" key={index}>
+										<div className="item-header"> <FormattedMessage id="tradeNo" />： <strong>{item.transactionNumber}</strong></div>
+										<div className="item-info">
+											<div className="item-sub-title"><FormattedMessage id="productName" />：</div>
+											{
+												item.productName.map((name,index1)=> <div key={index1} className="content-text">{name}</div>)
+											}
+											<div className="item-sub-title"><FormattedMessage id="mergedCopyFiles" />：</div>
+											{
+												item.file.map((file,index2)=> <div key={index2} className="content-text">{file.docText}</div>)
+											}
+										</div>
+									</div>
+								)
+							})
+						}
+
+					</div>
+				</div>} */}
+				<Modal transitionName="" getContainer={document.getElementById('multiModule')} maskTransitionName="" destroyOnClose={true}  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 Copylist;

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

@@ -0,0 +1,83 @@
+.copylist{
+    // height: 750px;
+    min-height: 100%;
+    background: #fff;
+    .thehead{
+        display: flex;
+        justify-content: space-between;
+        padding: 14px 24px;
+        .title{
+            display: flex;          
+            .title-color{
+                width: 2px;
+                height: 1.5rem;
+                background: #00847F;
+                margin-top: 3px;
+            }
+            .title-text{
+                font-size: 1.5rem;
+                color: #323232;
+                margin-left: 8px;
+            }
+
+        }
+        .qianshu{
+            width: 96px;
+            height: 32px;
+            background: #F9F2F3;
+            border-radius: 2px;
+            border: 1px solid #E5B2B5;
+            font-size: 14px;
+            color: #DB0011;
+            line-height: 32px;
+            text-align: center;            
+        }
+    }
+    .contents{
+        display: flex; 
+        flex-direction: column;
+        flex-wrap: wrap;       
+        padding: 10px 24px;
+        .item-panel{
+            width: 100%;
+            min-height: 205px;
+            background: #FFFFFF;
+            border-radius: 4px;
+            border: 1px solid #E8E8E8;
+            overflow: hidden;
+            margin-top: 10px;
+            .item-header{
+                width: 100%;
+                height: 48px;
+                background: #FAFBFC;
+                border-radius: 4px 4px 0px 0px;
+                line-height: 48px;
+                font-size: 16px;
+                padding-left: 20px;
+            }
+            .item-info{
+                padding: 15px 22px;
+                .item-sub-title{
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: #969696;
+                    &:not(:first-child){
+                        margin-top: 20px;
+                    }
+                }
+                .content-text{
+                    font-size: 16px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #666666;
+                    line-height: 30px;
+                }
+            }
+            
+        }
+        
+    }
+
+
+
+}

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

@@ -0,0 +1,294 @@
+import React, { Component } from 'react';
+import { FormattedMessage  } from 'react-intl';
+import './risk.less'
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import { Button } from '../../../../../node_modules/antd/lib/index';
+class Risk extends Component {
+	signCanvas = React.createRef();
+	state = {
+		canvasCtx: null,
+		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 - 160){
+				canvasHeight = document.getElementById('multiModule').offsetHeight - 160
+				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.state.canvasCtx = canvas.getContext('2d');
+			this.state.stageInfo = canvas.getBoundingClientRect();
+			this.state.canvasCtx.lineWidth = 7;
+			this.state.canvasCtx.lineCap = "round";
+			this.setState({
+				isSignOk: false
+			})
+			// this.state.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
+		})
+		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) {
+		const item = this.props.item;
+		this.props.next({
+			type: item.type,
+			file: this.refs.canvasF.toDataURL(), //.replace('data:image/png;base64,',''),
+			sequence: item.sequence
+		})
+		console.log(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="risk">
+				<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">
+						<canvas
+							id="canvasF"
+							className='canvasF'
+							ref="canvasF"
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							></canvas>
+							{
+								// !this.state.isSignOk && <div className="signHere"><FormattedMessage id="spaceAccording" /></div>
+								!this.state.isSignOk && <div className="signHere">{this.props.item.subContent[0].desc}</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.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>
+		  <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>
+			</div>
+		);
+	}
+
+}
+
+export default Risk;