react_hsbc_teller 2.0.24 → 2.0.25

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

@@ -0,0 +1,180 @@
+.copyTwo{
+    font-size: 16px;
+    // padding: 14px 24px;
+    background-color:#F2F2F2 ;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    height: 100%;
+    overflow: hidden;
+    .thehead{
+        background-color: white;
+        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;
+            }
+
+        }
+        .btns{
+            width: 320px;
+            display: flex;
+            justify-content: flex-end;
+        }
+        .button{
+            width: 96px;
+            height: 2rem;
+            background: #F9F2F3;
+            border-radius: 2px;
+            border: 1px solid #E5B2B5;
+            font-size: 14px;
+            color: #DB0011;
+            line-height: 2rem;
+            text-align: center;    
+            margin-left: 10px;  
+            display: block; 
+            cursor: pointer;
+            &.gray{
+                color: #646464;
+                border: 1px solid #DCDCDC;
+                background-color: white;
+            }      
+        }
+    }
+
+    .contents{
+        font-size: 20px;
+        height: 250px;
+        background-color: white;
+        padding: 14px 24px;
+        flex: 1;
+    }
+
+    .copy-area{
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        margin-top: 20px;
+
+        .left{
+            flex: 1;
+            background-color: white;
+            width: 34vmin;
+            height: 34vmin;
+            overflow-y: hidden;
+            .pic{
+                // width: 50px;
+                // height: 50px;
+                object-fit: contain;
+            }
+            .imgLeft{
+                height: 28vmin;
+                overflow-y: overlay;
+            }
+            .imgLeft::-webkit-scrollbar {
+                width: 5px;
+                height: 5px;
+                -webkit-border-radius: 5px;
+                -moz-border-radius: 5px;
+                border-radius: 5px;
+              }
+              .imgLeft::-webkit-scrollbar-thumb {
+                background-color: rgba(191, 191, 191, 191);
+                background-clip: padding-box;
+                -webkit-border-radius: 5px;
+                -moz-border-radius: 5px;
+                border-radius: 5px;
+                min-height: 28px;
+              }
+              .imgLeft::-webkit-scrollbar-thumb:hover {
+                background-color: rgba(0, 0, 0, 0.5);
+                -webkit-border-radius: 5px;
+                -moz-border-radius: 5px;
+                border-radius: 5px;
+              }
+            .footTwo{
+                height: 2.9vmin;
+                text-align: -webkit-center;
+            }
+        }
+        .right{
+            margin-left: 20px;
+            background-color: white;
+            background-blend-mode: multiply;
+            width: 34vmin;
+            height: 34vmin;
+            position: relative;
+            .current-text{
+                z-index: -1;
+                font-size: 300px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: #F5F5F5;
+                -webkit-touch-callout: none; /* iOS Safari */
+                -webkit-user-select: none; /* Chrome/Safari/Opera */
+                -khtml-user-select: none; /* Konqueror */
+                -moz-user-select: none; /* Firefox */
+                -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; 
+            }
+            #canvasF{
+                z-index: 10;
+            }
+        }
+    }
+
+    .mask{
+        position: absolute;
+        z-index: 11;
+        background: #383838;
+        opacity: 0.3;
+        width: 100%;
+        height: 100%;
+    }
+}
+.modalEndTitle{
+    font-size: 20px;
+}
+.modalEnd{
+font-size: 15px;
+margin-left: 20px;
+margin-top: 15px;
+}
+
+  .footTwo{
+      .footThree{
+        display: inline-flex;
+      }
+    .button{
+        width: 96px;
+        height: 40px;
+        background: #F9F2F3;
+        border-radius: 2px;
+        border: 1px solid #E5B2B5;
+        font-size: 14px;
+        color: #DB0011;
+        line-height: 40px;
+        text-align: center;    
+        margin-left: 10px;  
+        display: block; 
+        cursor: pointer;
+        &.gray{
+            color: #646464;
+            border: 1px solid #DCDCDC;
+            background-color: white;
+        }      
+    }
+  }

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

@@ -0,0 +1,365 @@
+import React, { Component } from 'react';
+import { FormattedMessage  } from 'react-intl';
+import './copy_en.less'
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import { Button } from '../../../../../node_modules/antd/lib/index';
+class Copy extends Component {
+	signCanvas = React.createRef();
+	state = {
+		finalImage: "",
+		pics: [],
+		isFinish: false,
+		canvasCtx: null,
+		stageInfo: '',
+		isDown: false,
+		startY: '',
+		startX: '',
+		isModalVisibleEnd: false,
+		isSignOk: false,
+		isModalVisibleSave: false
+	};
+
+	componentDidMount() {
+		const canvas = this.refs.canvasF;
+      	canvas.height = this.refs.canvasHW.offsetHeight - 0;
+      	canvas.width = this.refs.canvasHW.offsetWidth - 0;
+     	this.state.canvasCtx = canvas.getContext('2d');
+      	this.state.stageInfo = canvas.getBoundingClientRect();
+		this.state.canvasCtx.lineWidth = 6;
+		this.state.canvasCtx.lineCap = "round";
+		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 });
+	}
+	componentWillUnmount () {
+		const canvas = this.refs.canvasF;
+		canvas.removeEventListener('touchstart', this.touchStart);
+		canvas.removeEventListener('touchmove', this.touchMove);
+		canvas.removeEventListener('touchend', this.touchEnd);
+	}
+	// 清空画布
+	clearCanvas = () => {
+		this.state.isSignOk = false
+		const canvas = this.refs.canvasF;
+		// 清除画布
+		this.state.canvasCtx.clearRect(
+			0,
+			0,
+			canvas.width,
+			canvas.height,
+		  );
+	}
+	touchStart=(ev)=> {
+		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.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.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.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) {
+			this.save()
+		}
+		
+		const file = await this.getFinalImage()
+		const item = this.props.item;
+		this.props.next({
+			type: item.type,
+			file: file, //.replace('data:image/png;base64,',''),
+			sequence: item.sequence
+		})
+	}
+	// 合成最终图片
+	getFinalImage = () => {
+		return new Promise(resolve => {
+			let canvas = document.createElement('canvas');
+		let ctx = canvas.getContext('2d');
+		const rate = parseFloat(this.props.rate)
+		// console.log('rate',rate)
+		const num = this.state.pics.length
+		const blockWidth = 300; // 单字宽
+		const blockHeight = this.refs.canvasF.height * blockWidth / this.refs.canvasF.width; // 单字高
+		var wordsPerLine = this.props.item.cell || 8 // 每行图片数
+		// 计算每行个数 以适应整个图片比例
+		for (let n=1;n<20;n++){
+			let width = blockWidth * n;
+			let height = width/rate;
+			// console.log(n, width, height)
+			// console.log(Math.ceil(num/n) * blockHeight, (Math.ceil(num/n)+1) * blockHeight)
+			if(Math.ceil(num/n) * blockHeight <= height && (Math.ceil(num/n)+1) * blockHeight > height){
+				wordsPerLine = n;
+				break
+			} else if((Math.ceil(num/n)+1) * blockHeight <= height){
+				wordsPerLine = n;
+				break
+			}
+		}
+		const canvasWidth = blockWidth * wordsPerLine;
+		const canvasHeight = canvasWidth / rate
+		// console.log(canvasWidth, canvasHeight)
+		// const canvasHeight = this.props.item.row? this.props.item.row*blockHeight: (Math.ceil( this.state.pics.length / wordsPerLine) * blockHeight)
+
+		canvas.width = canvasWidth;
+		canvas.height = canvasHeight;
+		// 画背景
+		// ctx.fillStyle = 'white';
+		// ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+		// 拼接图片绘制
+		let pics = this.state.pics
+		for (let i = 0;i< pics.length; i++){
+
+			let rowIndex = Math.floor( i / wordsPerLine)
+			let colIndex = Math.floor( i % wordsPerLine)
+
+			// 画图
+			let img = new Image()
+			img.src = pics[i]
+			img.onload = () =>{
+				ctx.drawImage(img, colIndex*blockWidth,(rowIndex)*blockHeight, blockWidth, blockHeight);
+				if(i===pics.length-1) {
+					console.log(canvas.toDataURL())
+					resolve(canvas.toDataURL())
+				}
+			}
+
+		}
+		})
+	}
+	// 回退一个
+	back = () => {
+		this.state.pics.pop()
+		this.setState({
+			pics: this.state.pics
+		})
+		this.clearCanvas()
+	}
+
+	// 保存一屏
+	save = () => {
+		if(this.state.isSignOk) {
+		this.state.pics.push(this.refs.canvasF.toDataURL());
+		this.setState({
+			pics: this.state.pics
+		},()=>{
+			const $div = document.getElementById('scrollDiv');
+			$div.scrollTop = $div.scrollHeight;
+		})
+		
+		this.clearCanvas()
+	} else {
+		this.setState({
+			isModalVisibleSave: true
+		})
+	}
+	}
+	handleOkSave=()=>{
+		this.setState({
+			isModalVisibleSave: false
+		})
+	}
+	exit = () => {
+		this.setState({
+			isModalVisibleEnd: true
+		})
+	}
+	handleCancelEnd = () => {
+		this.setState({
+			isModalVisibleEnd: false
+		})
+	}
+	handleOkEnd = () => {
+		this.setState({
+			isModalVisibleEnd: false
+		})
+		this.props.exit()
+	}
+	render() {
+		const {item} = this.props;
+		return (
+			<div className="copy">
+				<div className="thehead">
+					<div className="title">
+						<div className="title-color"></div>
+						<div className="title-text">{this.props.title}</div>
+					</div>
+					
+					<div className="btnsEN">
+						<div className="buttonEN gray" onClick={this.exit}><FormattedMessage id="exit" /></div> 
+						{
+							this.state.pics.length > 0? <div className="buttonEN" onClick={this.commit}><FormattedMessage id="commit" /></div>: null
+						}
+					</div>
+				</div>
+				<div className="contents">
+					<div className='content-desc'>{item.subContent[0].desc}</div>
+					<div className='copy-desc' id="scrollDiv">
+					{
+							this.state.pics.map((pic,index)=>{
+								return (
+									<img  key={index} className="pic" src={pic}></img>
+								)
+							})
+						}
+					</div>
+				</div>
+			
+				<div className="copy-area">
+					<div className="right" ref="canvasHW">
+							<canvas
+							id="canvasF"
+							ref="canvasF"
+							onMouseDown={this.mouseDown}
+							onMouseMove={this.mouseMove}
+							onMouseUp={this.mouseUp}
+							></canvas>
+					</div>
+					<div className="btnsEN footEN">
+						<div className="buttonEN gray" onClick={this.back}><FormattedMessage id="back" /></div> 
+						<div className="buttonEN gray" onClick={this.clearCanvas}><FormattedMessage id="clearScreen" /></div>
+						<div className="buttonEN" onClick={this.save}><FormattedMessage id="ok" /></div> 
+						
+					</div>
+				</div>
+				
+				<Modal transitionName="" maskTransitionName="" getContainer={document.getElementById('multiModule')} destroyOnClose={true}  closable={false} centered={true} visible={this.state.isModalVisibleSave} footer={[<div key='end'>
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSave}><FormattedMessage id="ok" /></Button>
+          </div>
+          ]}>
+            <div className='endModal'>
+				<div className='modalEnd'>
+				<FormattedMessage id="noCopy" />
+				</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>
+		);
+	}
+
+}
+
+export default Copy;

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

@@ -0,0 +1,145 @@
+.copy{
+    font-size: 16px;
+    // padding: 14px 24px;
+    background-color:#F2F2F2 ;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    height: 100%;
+    .copy-desc{
+        height: ~"calc(100% - 80px)";
+        overflow-y: overlay;
+    }
+    .copy-desc::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+      }
+      .copy-desc::-webkit-scrollbar-thumb {
+        background-color: rgba(191, 191, 191, 191);
+        background-clip: padding-box;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+        min-height: 28px;
+      }
+      .copy-desc::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+      }
+    .content-desc{
+        height: 80px;
+        overflow-y: overlay;
+    }
+    .thehead{
+        background-color: white;
+        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;
+            }
+
+        }
+
+    }
+
+    .contents{
+        font-size: 18px;
+        height: 250px;
+        background-color: white;
+        padding: 14px 24px;
+        flex: 1;
+    }
+    .pic{
+        width: 100px;
+        height: auto;
+    }
+    .copy-area{
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        margin-top: 20px;
+        background-color: white;
+        padding: 20px;
+        flex: 1;
+
+        .right{
+            width: 100%;
+            height: 100%;
+            border: 1.5px dashed #646464;
+            border-radius: 4px;
+            .current-text{
+                z-index: -1;
+                font-size: 300px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: #F5F5F5;
+                -webkit-touch-callout: none; /* iOS Safari */
+                -webkit-user-select: none; /* Chrome/Safari/Opera */
+                -khtml-user-select: none; /* Konqueror */
+                -moz-user-select: none; /* Firefox */
+                -ms-user-select: none; /* Internet Explorer/Edge */
+                user-select: none; 
+            }
+            #canvasF{
+                z-index: 10;
+            }
+        }
+    }
+}
+.modalEndTitle{
+    font-size: 20px;
+}
+.modalEnd{
+font-size: 15px;
+margin-left: 20px;
+margin-top: 15px;
+}
+
+  .btnsEN{
+    // width: 320px;
+    display: flex;
+    justify-content: flex-end;
+    &.footEN{
+        justify-content: center;
+        background: #fff;
+        width: 100%;
+        padding-top: 14px;
+    }
+}
+.buttonEN{
+    width: 96px;
+    height: 2rem;
+    background: #F9F2F3;
+    border-radius: 2px;
+    border: 1px solid #E5B2B5;
+    font-size: 14px;
+    color: #DB0011;
+    line-height: 2rem;
+    text-align: center;    
+    margin-left: 10px; 
+    display: block; 
+    cursor: pointer;
+    &.gray{
+        color: #646464;
+        border: 1px solid #DCDCDC;
+        background-color: white;
+    }      
+}