react_hsbc_teller 1.4.9 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react_hsbc_teller",
3
- "version": "1.4.9",
3
+ "version": "1.5.2",
4
4
  "description": "React",
5
5
  "private": false,
6
6
  "main": "lib/hsbc.js",
@@ -92,6 +92,7 @@
92
92
  "react-canvas-draw": "^1.1.1",
93
93
  "react-dom": "^17.0.1",
94
94
  "react-intl": "^5.21.2",
95
+ "react-signature-canvas": "^1.0.5",
95
96
  "url-loader": "^4.1.1"
96
97
  },
97
98
  "peerDependencies": {
@@ -0,0 +1,221 @@
1
+ import React, { Component } from 'react';
2
+ import { message } from 'antd';
3
+ import './signMy.less'
4
+ import { Button } from '../../../node_modules/antd/lib/index';
5
+ class Sign extends Component {
6
+ signCanvas = React.createRef();
7
+ state = {
8
+ canvasCtx: null,
9
+ heightOne: '0px',
10
+ widthOne: '0px',
11
+ isModalVisibleEnd: false,
12
+ isModalVisibleSubmit: false,
13
+ isSignOk: false
14
+ };
15
+
16
+ componentDidMount() {
17
+ setTimeout(() => {
18
+
19
+ const canvas = this.refs.canvasF;
20
+ canvas.width = document.getElementById('multiModule').offsetWidth
21
+ canvas.height = document.getElementById('multiModule').offsetHeight
22
+ this.state.canvasCtx = canvas.getContext('2d');
23
+ this.state.stageInfo = canvas.getBoundingClientRect();
24
+ this.state.canvasCtx.lineWidth = 7;
25
+ this.state.canvasCtx.lineCap = "round";
26
+ this.setState({
27
+ isSignOk: false
28
+ })
29
+
30
+ canvas.addEventListener('touchstart', this.touchStart, { passive: false });
31
+ canvas.addEventListener('touchmove', this.touchMove, { passive: false });
32
+ canvas.addEventListener('touchend', this.touchEnd, { passive: false });
33
+ }, 10);
34
+
35
+
36
+ }
37
+ componentWillUnmount () {
38
+ const canvas = this.refs.canvasF;
39
+ canvas.removeEventListener('touchstart', this.touchStart);
40
+ canvas.removeEventListener('touchmove', this.touchMove);
41
+ canvas.removeEventListener('touchend', this.touchEnd);
42
+ }
43
+
44
+ // 清空画布
45
+ clearSign = async () => {
46
+ this.setState({
47
+ isSignOk: false
48
+ })
49
+ const canvas = this.refs.canvasF;
50
+ // 清除画布
51
+ this.state.canvasCtx.clearRect(
52
+ 0,
53
+ 0,
54
+ canvas.width,
55
+ canvas.height,
56
+ );
57
+ };
58
+ touchStart=(ev)=> {
59
+ this.setState({
60
+ isSignOk: true
61
+ })
62
+ ev = ev || event
63
+ ev.preventDefault()
64
+ if (ev.touches.length == 1) {
65
+ let obj = {
66
+ x: ev.targetTouches[0].clientX,
67
+ y: ev.targetTouches[0].clientY,
68
+ }
69
+ this.state.startX = obj.x
70
+ this.state.startY = obj.y
71
+ this.state.canvasCtx.beginPath()
72
+ const canvas = this.refs.canvasF;
73
+ this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
74
+ this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
75
+ this.state.canvasCtx.stroke()
76
+ this.state.canvasCtx.closePath()
77
+ // this.points.push(obj)
78
+
79
+ }
80
+ }
81
+ touchMove=(ev)=>{
82
+ ev = ev || event
83
+ ev.preventDefault()
84
+ if (ev.touches.length == 1) {
85
+ let obj = {
86
+ x: ev.targetTouches[0].clientX,
87
+ y: ev.targetTouches[0].clientY
88
+ }
89
+ this.state.moveY = obj.y
90
+ this.state.moveX = obj.x
91
+ this.state.canvasCtx.beginPath()
92
+ // strokeStyle = 'blue';
93
+ const canvas = this.refs.canvasF;
94
+ this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
95
+ this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
96
+ this.state.canvasCtx.stroke()
97
+ this.state.canvasCtx.closePath()
98
+ this.state.startY = obj.y
99
+ this.state.startX = obj.x
100
+ // this.points.push(obj)
101
+ }
102
+ }
103
+ touchEnd=(ev)=> {
104
+ ev = ev || event
105
+ ev.preventDefault()
106
+
107
+ if (ev.touches.length == 1) {
108
+ let obj = {
109
+ x: ev.targetTouches[0].clientX ,
110
+ y: ev.targetTouches[0].clientY
111
+ }
112
+ this.state.canvasCtx.beginPath()
113
+ const canvas = this.refs.canvasF;
114
+ this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
115
+ this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
116
+ this.state.canvasCtx.stroke()
117
+ this.state.canvasCtx.closePath()
118
+ // this.points.push(obj)
119
+ }
120
+ }
121
+ // pc
122
+ mouseDown=(ev) =>{
123
+ this.setState({
124
+ isSignOk: true
125
+ })
126
+ ev.preventDefault();
127
+ const obj = {
128
+ x: ev.pageX,
129
+ y: ev.pageY,
130
+ };
131
+ const canvas = this.refs.canvasF;
132
+ this.state.startX = obj.x;
133
+ this.state.startY = obj.y;
134
+ this.state.canvasCtx.beginPath();
135
+ this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
136
+ this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
137
+ this.state.canvasCtx.stroke();
138
+ this.state.canvasCtx.closePath();
139
+ this.state.isDown = true;
140
+
141
+ }
142
+ mouseMove=(ev)=> {
143
+ ev.preventDefault();
144
+ if (this.state.isDown) {
145
+ const obj = {
146
+ x: ev.pageX,
147
+ y: ev.pageY,
148
+ };
149
+ const canvas = this.refs.canvasF;
150
+ 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) {
151
+ this.state.isDown = false;
152
+ }
153
+ this.state.moveY = obj.y;
154
+ this.state.moveX = obj.x;
155
+ this.state.canvasCtx.beginPath();
156
+
157
+ this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
158
+ this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
159
+ this.state.canvasCtx.stroke();
160
+ this.state.canvasCtx.closePath();
161
+ this.state.startY = obj.y;
162
+ this.state.startX = obj.x;
163
+ }
164
+ }
165
+ mouseUp=(ev)=> {
166
+ ev.preventDefault();
167
+ const obj = {
168
+ x: ev.pageX,
169
+ y: ev.pageY,
170
+ };
171
+ const canvas = this.refs.canvasF;
172
+ this.state.canvasCtx.beginPath();
173
+ this.state.canvasCtx.moveTo(this.state.startX - canvas.getBoundingClientRect().left, this.state.startY - canvas.getBoundingClientRect().top);
174
+ this.state.canvasCtx.lineTo(obj.x - canvas.getBoundingClientRect().left, obj.y - canvas.getBoundingClientRect().top);
175
+ this.state.canvasCtx.stroke();
176
+ this.state.canvasCtx.closePath();
177
+ this.state.isDown = false;
178
+
179
+ }
180
+ handleOkSign = async () => {
181
+ if(this.state.isSignOk) {
182
+ console.log(this.refs.canvasF.toDataURL())
183
+
184
+ this.props.handleOkSign(this.refs.canvasF.toDataURL())
185
+ }
186
+ }
187
+
188
+ render() {
189
+ return (
190
+ <div className="sign" id="multiModule">
191
+ <canvas
192
+ id="canvasF"
193
+ className='canvasF'
194
+ ref="canvasF"
195
+ onMouseDown={this.mouseDown}
196
+ onMouseMove={this.mouseMove}
197
+ onMouseUp={this.mouseUp}
198
+ ></canvas>
199
+ <div className='signButton'>
200
+ {
201
+ !this.state.isSignOk && <Button className="modelButtonCancelNo">清除</Button>
202
+ }
203
+ {
204
+ this.state.isSignOk && <Button className="modelButtonCancel" onClick={this.clearSign}>清除</Button>
205
+ }
206
+ {
207
+ this.state.isSignOk && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确定</Button>
208
+ }
209
+ {
210
+ !this.state.isSignOk && <Button className="modelButtonCancelNo" type="primary" danger >确定</Button>
211
+ }
212
+ </div>
213
+ </div>
214
+ );
215
+ }
216
+
217
+ }
218
+ Sign.defaultProps = {
219
+ }
220
+
221
+ export default Sign;
@@ -0,0 +1,130 @@
1
+ .sign{
2
+ // min-height: 100%;
3
+ height: 100%;
4
+ background: #fff;
5
+ position: relative;
6
+ display: flex;
7
+ flex-direction: column;
8
+
9
+ .thehead{
10
+ display: flex;
11
+ justify-content: space-between;
12
+ padding: 14px 24px ;
13
+ .title{
14
+ display: flex;
15
+ .title-color{
16
+ width: 2px;
17
+ height: 14px;
18
+ background: #00847F;
19
+ margin-top: 3px;
20
+ }
21
+ .title-text{
22
+ font-size: 14px;
23
+ color: #323232;
24
+ margin-left: 8px;
25
+ font-weight: 500;
26
+ }
27
+
28
+ }
29
+ .btns{
30
+ display: flex;
31
+ }
32
+ .qianshu{
33
+ width: 96px;
34
+ height: 32px;
35
+ background: #F9F2F3;
36
+ border-radius: 2px;
37
+ border: 1px solid #E5B2B5;
38
+ font-size: 14px;
39
+ color: #DB0011;
40
+ line-height: 32px;
41
+ text-align: center;
42
+ }
43
+ .reset{
44
+ width: 96px;
45
+ height: 32px;
46
+ background: white;
47
+ border-radius: 2px;
48
+ border: 1px solid #DCDCDC;
49
+ font-size: 14px;
50
+ color: #646464;
51
+ line-height: 32px;
52
+ text-align: center;
53
+ margin-right: 8px;
54
+ }
55
+ }
56
+
57
+ .content{
58
+ // min-height: 300px;
59
+ border-radius: 4px;
60
+ border:1px dashed #DDDDDD;
61
+ margin: auto;
62
+ position: relative;
63
+ // flex:1;
64
+
65
+ .canvasF{
66
+ }
67
+ }
68
+ .signHere{
69
+ font-size: 50px;
70
+ font-weight: 500;
71
+ color: #d6d6d6;
72
+ position: absolute;
73
+ top: 50%;
74
+ left: 50%;
75
+ transform: translate(-50%, -50%);
76
+ -moz-user-select:none;/*火狐*/
77
+ -webkit-user-select:none;/*webkit浏览器*/
78
+ -ms-user-select:none;/*IE10*/
79
+ -khtml-user-select:none;/*早期浏览器*/
80
+ user-select:none;
81
+ opacity: 0.2;
82
+ }
83
+
84
+ }
85
+ .modalEndTitle{
86
+ font-size: 20px;
87
+ }
88
+ .modalEnd{
89
+ font-size: 15px;
90
+ margin-left: 20px;
91
+ margin-top: 15px;
92
+ }
93
+ .endModal{
94
+ font-size: 16px;
95
+ padding: 56px 30px 0px 30px;
96
+ color: #333333;
97
+ }
98
+ .modelButtonCancelNo{
99
+ width: 100px!important;
100
+ height: 40px!important;
101
+ font-size: 16px!important;
102
+ color: #5C5C5C!important;
103
+ border: 1px #5C5C5C solid!important;
104
+ background: #d9d9d9!important;
105
+ border-spacing: 20px!important;
106
+ margin-left: 20px;
107
+ }
108
+ .modelButtonCancel{
109
+ width: 100px!important;
110
+ height: 40px!important;
111
+ font-size: 16px!important;
112
+ color: #333!important;
113
+ border: 1px #333 solid!important;
114
+ background: #fff!important;
115
+ border-spacing: 20px!important;
116
+ }
117
+ .modelButtonOk{
118
+ width: 100px!important;
119
+ height: 40px!important;
120
+ font-size: 16px!important;
121
+ color: #ffffff!important;
122
+ border: 1px #DB0011 solid!important;
123
+ background: #DB0011!important;
124
+ border-spacing: 20px!important;
125
+ margin-left: 20px;
126
+ }
127
+ .signButton{
128
+ text-align: end;
129
+ margin: 20px 0;
130
+ }
@@ -23,8 +23,7 @@ import Select from "antd/lib/select";
23
23
  import 'antd/lib/select/style'
24
24
 
25
25
  import { Button } from '../../../node_modules/antd/lib/index';
26
- import CanvasDraw from "react-canvas-draw";
27
- import { FormattedMessage, injectIntl } from 'react-intl';
26
+ import SignMy from '../sign/signMy.jsx'
28
27
  import axios from 'axios';
29
28
  const { Option } = Select;
30
29
  const LEAVE_TYPE = {
@@ -59,7 +58,6 @@ var os = function() {
59
58
  message.config({
60
59
  getContainer: ()=>document.getElementById('allHSBC')
61
60
  })
62
- @injectIntl
63
61
 
64
62
  class Video extends Component {
65
63
  constructor(props) {
@@ -67,7 +65,7 @@ class Video extends Component {
67
65
  // this.cancel = axios.CancelToken.source()
68
66
  }
69
67
  cancel = axios.CancelToken.source()
70
- signCanvas = React.createRef();
68
+ // signCanvas = React.createRef();
71
69
  state = {
72
70
  signNoClick: false,
73
71
  listVideoPicture: [],
@@ -4090,16 +4088,13 @@ class Video extends Component {
4090
4088
  })
4091
4089
  }
4092
4090
  }
4093
- handleOkSign = () => {
4094
- console.log(this.signCanvas.current.canvas.drawing.toDataURL('image/png'))
4091
+ handleOkSign = (val) => {
4092
+ console.log(val)
4095
4093
  this.props.imgRMCallback(
4096
- this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
4094
+ val.replace(/data.+?;base64,/, "")
4097
4095
  )
4098
4096
  }
4099
4097
  onCancelSign=()=>{
4100
- this.setState({
4101
- signNoClick: false
4102
- })
4103
4098
  this.props.onCancelSign()
4104
4099
  }
4105
4100
  signImage=()=>{
@@ -4109,15 +4104,6 @@ class Video extends Component {
4109
4104
  })
4110
4105
  }
4111
4106
  }
4112
- handleCancelSign=()=>{
4113
- if(this.state.signNoClick) {
4114
- this.setState({
4115
- signNoClick: false
4116
- })
4117
- }
4118
- this.signCanvas.current.clear()
4119
- }
4120
-
4121
4107
  navigatorClick=()=>{
4122
4108
  if(os.isAndroid || os.isPhone) {
4123
4109
  console.log("手机")
@@ -4140,10 +4126,10 @@ class Video extends Component {
4140
4126
  let x = 0
4141
4127
  let y = 0
4142
4128
  // if(os.isTablet){
4143
- width = ((right - left)* window.screen.width / document.body.clientWidth) - 5
4144
- height = ((bottom - top)* window.screen.width / document.body.clientWidth) - 50
4145
- x = left * window.screen.width / document.body.clientWidth + 5
4146
- y = top* window.screen.width / document.body.clientWidth
4129
+ width = ((right - left)* window.screen.width / document.body.clientWidth) - 13
4130
+ height = ((bottom - top)* window.screen.width / document.body.clientWidth) - 30
4131
+ x = (left * window.screen.width / document.body.clientWidth)
4132
+ y = (top* window.screen.width / document.body.clientWidth) + 8
4147
4133
  // }
4148
4134
  // if(os.isPc) {
4149
4135
  // width = right - left
@@ -4439,14 +4425,17 @@ class Video extends Component {
4439
4425
  sendNotification = () =>{
4440
4426
  console.log(this.props.shareMask,this.state.shareMaskState)
4441
4427
  this.state.shareMaskState = this.props.shareMask
4442
- callNimIM('sendCustomCmdMsg', {
4443
- customId: this.state.imRoomId,
4444
- content: JSON.stringify({
4445
- 'typeId': 1230,
4446
- 'sessionId': this.state.sessionId,
4447
- 'type': this.state.shareMaskState ? 1 : 2
4448
- })
4449
- });
4428
+ setTimeout(() => {
4429
+ callNimIM('sendCustomCmdMsg', {
4430
+ customId: this.state.imRoomId,
4431
+ content: JSON.stringify({
4432
+ 'typeId': 1230,
4433
+ 'sessionId': this.state.sessionId,
4434
+ 'type': this.state.shareMaskState ? 1 : 2
4435
+ })
4436
+ });
4437
+ },100)
4438
+
4450
4439
  }
4451
4440
  componentDidUpdate(prevProps){
4452
4441
  console.log('componentDidUpdate',prevProps,prevProps.shareMask,this.props.shareMask)
@@ -5164,26 +5153,14 @@ class Video extends Component {
5164
5153
 
5165
5154
 
5166
5155
  </Modal>
5167
- <Modal title="签字白板" width={600} destroyOnClose={true} centered={true} visible={isTranscribing} onCancel={this.onCancelSign} footer={
5168
- [
5169
- <div key='okSign'>
5170
- {
5171
- !this.state.signNoClick && <Button className="modelButtonCancelNo">清除</Button>
5172
- }
5173
- {
5174
- this.state.signNoClick && <Button className="modelButtonCancel" onClick={this.handleCancelSign}>清除</Button>
5175
- }
5176
- {
5177
- this.state.signNoClick && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkSign}>确定</Button>
5178
- }
5179
- {
5180
- !this.state.signNoClick && <Button className="modelButtonCancelNo" type="primary" danger >确定</Button>
5181
- }
5182
- </div>
5183
- ]
5184
- }>
5185
- <div className="content" onClick={this.signImage}>
5186
- <CanvasDraw
5156
+ <Modal title="签字白板" width={600} destroyOnClose={true} centered={true} visible={isTranscribing} onCancel={this.onCancelSign} footer={[]}>
5157
+ <div className="content">
5158
+ <SignMy
5159
+ handleOkSign={this.handleOkSign}
5160
+ ></SignMy>
5161
+ {/* <SignatureCanvas ref={this.signCanvas} canvasProps={{className: 'canvasDrawName'}} /> */}
5162
+ {/* <CanvasDraw
5163
+ className="canvasDrawName"
5187
5164
  ref={this.signCanvas}
5188
5165
  brushColor="#000"
5189
5166
  brushRadius={3}
@@ -5191,8 +5168,10 @@ class Video extends Component {
5191
5168
  canvasWidth="100%"
5192
5169
  canvasHeight="100%"
5193
5170
  hideGrid={true}
5194
-
5195
- ></CanvasDraw>
5171
+ hideInterface
5172
+ onChange={() => this.signImage(true)}
5173
+
5174
+ ></CanvasDraw> */}
5196
5175
  </div>
5197
5176
  </Modal>
5198
5177
  <Modal title="设置视频设备" width={650} closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
@@ -162,6 +162,7 @@
162
162
  border:1px dashed #DDDDDD;
163
163
  margin: 24px;
164
164
  flex:1;
165
+
165
166
  }
166
167
  .ant-spin-nested-loading,.ant-spin-container{
167
168
  height: 100%;
@@ -320,15 +321,7 @@
320
321
  margin-top: 50px!important;
321
322
  padding: 20px 30px 30px!important;
322
323
  }
323
- .modelButtonCancelNo{
324
- width: 100px!important;
325
- height: 40px!important;
326
- font-size: 16px!important;
327
- color: #5C5C5C!important;
328
- border: 1px #5C5C5C solid!important;
329
- background: #d9d9d9!important;
330
- border-spacing: 20px!important;
331
- }
324
+
332
325
  .modelButtonCancel{
333
326
  width: 100px!important;
334
327
  height: 40px!important;