react_hsbc_teller 2.0.58 → 2.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "2.0.58",
+  "version": "2.0.60",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/components/step/step.jsx

@@ -10,17 +10,11 @@ export default class step extends Component {
             <div style={{...this.props.style}}>
                 <div style={{marginBottom: '10px'}}>客户证件识别</div>
                 <Steps current={current} direction={this.props.direction} size="small" style={{width:'150px', height: '200px'}}>
-                    {/* step1 */}
-                    <Step status={current==0? '':'wait'} title="请选择客户" />
-
-                    {/* step2 */}
-                    <Step status={current==1? '':'wait'} title="确认客户证件类型" />
-
-                    {/* step3 */}
-                    <Step status={current==2? '':'wait'} title="证件信息核查" />
-
-                    {/* step4 */}
-                    { current==3 && <Step title="人脸识别" />}
+                    <Step status={current===0? '':'wait'} title="请选择客户类型" />
+                    <Step status={current===1? '':'wait'} title="请选择客户" />
+                    <Step status={current===2? '':'wait'} title="确认客户证件类型" />
+                    <Step status={current===3? '':'wait'} title="证件信息核查" />
+                    { current===4 && <Step title="人脸识别" />}
                 </Steps>
          </div>
         )

package/packages/pages/video/video.jsx

@@ -5,6 +5,24 @@ import React, { Component, useState } from 'react';
 import QRCode  from 'qrcode.react';
 import API from '../../api/api';
 import { BoardOperate } from '../../common/index.esm.js';
+
+import Modal from "antd/lib/modal";
+import 'antd/lib/modal/style'
+import message from "antd/lib/message";
+import 'antd/lib/message/style'
+import Spin from "antd/lib/spin";
+import 'antd/lib/spin/style'
+import Select from "antd/lib/select";
+import 'antd/lib/select/style'
+import Radio from "antd/lib/radio";
+import 'antd/lib/radio/style'
+import Space from "antd/lib/space";
+import 'antd/lib/space/style'
+import { Collapse } from 'antd';
+import 'antd/lib/collapse/style'
+const { Panel } = Collapse;
+import { Button } from '../../../node_modules/antd/lib/index';
+
 import './video.less'
 import { compressImage, isLight, saveBase64Image, combineBase64Images } from '../../utils/utils'
 import Recorder from "js-audio-recorder";
@@ -35,35 +53,15 @@ import networkWeakAudio from '../../assets/mp3/networkweak.mp3'
 import PIPictureClosedAudio from '../../assets/mp3/pip_close.mp3'
 import screenSharedIntervalAudio from '../../assets/mp3/share_stop_audio.mp3'
 import errorPng from '../../assets/img/tooltips2_fail.png'
-import Modal from "antd/lib/modal";
-import 'antd/lib/modal/style'
-import message from "antd/lib/message";
-import 'antd/lib/message/style'
-import Spin from "antd/lib/spin";
-import 'antd/lib/spin/style'
-import Select from "antd/lib/select";
-import 'antd/lib/select/style'
-
-import Radio from "antd/lib/radio";
-import 'antd/lib/radio/style'
-
-
-import Space from "antd/lib/space";
-import 'antd/lib/space/style'
-import { Collapse } from 'antd';
-import 'antd/lib/collapse/style'
-const { Panel } = Collapse;
-
-
 import styled from 'styled-components';
-import { Button } from '../../../node_modules/antd/lib/index';
+
 import SignMy from '../sign/signMy.jsx'
 import Step from '../components/step/step.jsx'
 import MultiModule from '../multiModule/multiModule'//签字、抄录
 import axios from 'axios';
 import CryptoJS from "crypto-js";
 
-const SDK_VERISON = '2.0.58'
+const SDK_VERISON = '2.0.60'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -318,10 +316,11 @@ class Video extends Component {
     },
     zIndexNum: -1,
     selectSpan: 'pen',
-    isModalVisibleCustomer: false,
-    customerSelect: '',
-    documentType: '',
-    isCustomerSelect: true,
+    isModalVisibleCustomer: false, // 证件识别弹窗
+    stepIndex: 0, // 证件识别步骤
+    customerSelectType: 1, // 选择客户类型
+    customerSelect: '', // 选择客户
+    documentType: '', // 选择证件类型
     documentError: '',
     customerTitleName: '客户证件识别',
     certificateType: 'ID_CARD',
@@ -1023,13 +1022,13 @@ class Video extends Component {
       customerList: list
     })
     if (list.length > 0) {
-      if (val == 'ocr') {
+      if (val === 'ocr') {
         console.log('this.state.customerList.length',list.length)
         this.setState({
+          stepIndex: 0,
           documentType: '',
-          isCustomerSelect: true,
-          customerSelect: list.length == 1 ? 1 : '',
-
+          customerSelectType: '',
+          customerSelect: list.length === 1 ? 1 : '',
           customerTitleName: '客户证件识别'
         },()=>{
           console.log(this.state.customerSelect)
@@ -1037,7 +1036,7 @@ class Video extends Component {
             isModalVisibleCustomer: true,
           })
         })
-      } else if (val == 'facial') {
+      } else if (val === 'facial') {
         this.setState({
           clickedFacial: true
         })
@@ -5136,7 +5135,22 @@ class Video extends Component {
   handleOkFacial = () => {
     if (this.state.faceCustomerType == 2) {
       if (this.state.IDtypeFrontOrBack == IDtypeFront) {
-        if(this.state.documentType == 'PASSPORT_CARD' || this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
+        if (this.state.documentType === 'OTHER_CARD') {
+          // 证件类型为其他时不需要OCR，直接截图保存本地
+           saveBase64Image(this.state.facialImgFront, `其他证件-${new Date().getTime()}`)
+            this.setState({
+              isModalVisibleFacial: false,
+              facialImg: '',
+              isFaceImage: false,
+              facialImgFront: '',
+            })
+            this.sendMessage({
+              'typeId': 1020,
+              'sessionId': this.state.sessionId,
+              'cameraState': 1,
+              "userId": this.state.faceCustomerUid
+            })
+        } else if(this.state.documentType == 'PASSPORT_CARD' || this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
           this.setState({
             loadingFace: true
           })
@@ -5425,14 +5439,14 @@ class Video extends Component {
         videoName = 'video12'
       }
       console.log('sid-videoName', sid, videoName)
-      this.state.customOcrSid = sid
-      this.state.faceCustomerUid = item.customId,
-        this.state.customerName = item.name
+      this.state.customOcrSid = sid;
+      this.state.faceCustomerUid = item.customId;
+      this.state.customerName = item.name;
       this.setState({
         clickedFacial: false,
         clickedOcr: false,
         isFaceImage: false,
-        facialImg: this.state.titleModal=='身份验证'? faceImage : ocrImage,
+        facialImg: this.state.titleModal === '身份验证' ? faceImage : ocrImage,
         disabledIdCard: true,
         IDtypeFrontOrBack: IDtypeFront,
         facialImgFront: '',
@@ -6164,6 +6178,11 @@ class Video extends Component {
     this.setState({
       isModalVisibleEnvironment: false,
     })
+    const cMicrophone = this.state.microphoneList.find((item)=> item.actionid === this.state.microphoneValue);
+    const cSpeaker = this.state.speakerList[0];
+    console.log(`当前麦克风设备: ${cMicrophone?.actionname ||''}, 当前扬声器设备: ${cSpeaker?.actionname || ''}`);
+    this.saveLog(`当前麦克风设备: ${cMicrophone?.actionname ||''}, 当前扬声器设备: ${cSpeaker?.actionname || ''}`);
+    // 开启画中画
     if (!this.state.isPictureInPicture) {
       this.pictureInPicture()
     }
@@ -6484,46 +6503,70 @@ class Video extends Component {
       this.changePdfRendering()
     }
   }
+  onChangeOCRCustomerType = (e) => {
+    this.setState({
+      customerSelectType: e.target.value
+    })
+  }
   onChangeOCRCustomer = (e) => {
     console.log(e)
     this.setState({
       customerSelect: e.target.value
     })
   }
+
+  // 证件识别取消
   handleCancelCustomer = () => {
     this.setState({
       isModalVisibleCustomer: false
     })
   }
+  // 证件识别上一步(客户选择、证件类型)
   goBackSelectCustomer=()=>{
-    this.setState({
-      documentType: '',
-      isCustomerSelect: true,
-      customerSelect: this.state.customerList.length == 1 ? 1 : '',
-      customerTitleName: '客户证件识别'
-    })
+    if (this.state.stepIndex === 2) {
+      this.setState((preState)=> ({
+        stepIndex: preState.stepIndex - 1,
+        customerSelect: this.state.customerList.length === 1 ? 1 : '',
+        customerTitleName: '客户证件识别'
+      }))
+    } else {
+      this.setState((preState)=> ({
+        stepIndex: preState.stepIndex - 1,
+        customerSelectType: '',
+      }))
+    }
   }
+  // 证件识别下一步
   handleOkCustomer = () => {
-    if (this.state.isCustomerSelect) {
+    if (this.state.stepIndex === 0) {
+      // 选择客户类型
+      this.setState((preState)=> ({
+        stepIndex: preState.stepIndex + 1,
+        customerSelect: this.state.customerList.length === 1 ? 1 : '',
+      }))
+    } else if (this.state.stepIndex === 1) {
+      // 选择客户
       if (this.state.customerList[this.state.customerSelect - 1].tourist) {
         this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
       } else {
-        this.setState({
-          isCustomerSelect: false,
-          documentError: '',
-          customerTitleName: this.state.customerList[this.state.customerSelect - 1].name
-        })
-      }
-
-    } else {
+         this.setState((preState)=> ({
+           stepIndex: preState.stepIndex + 1,
+           documentError: '',
+           documentType: '',
+           customerTitleName: this.state.customerList[this.state.customerSelect - 1].name
+         }))
+      }
+    } else if (this.state.stepIndex === 2) {
+      // 选择证件类型
       this.getAuthorizeResult(this.state.customerList[this.state.customerSelect - 1].customId).then((res) => {
-        if (res) {
+        if (res || this.state.customerSelectType === 1 || this.state.documentType === 'OTHER_CARD') {
+          // 客户类型为保险、或者证件类型为其他时不需要授权
           this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
           this.setState({
             isModalVisibleCustomer: false,
           })
         } else {
-          if (this.state.documentType == 'ID_CARD') {
+          if (this.state.documentType === 'ID_CARD') {
             this.test_controller.SendTextMsg(JSON.stringify({
               'typeId': 3300,
               "data": {
@@ -6553,7 +6596,6 @@ class Video extends Component {
                   }
                 ]
               }
-
             }))
           } else {
             this.test_controller.SendTextMsg(JSON.stringify({
@@ -6580,7 +6622,6 @@ class Video extends Component {
                   }
                 ]
               }
-
             }))
           }
           this.setState({
@@ -6589,10 +6630,9 @@ class Video extends Component {
           })
         }
       })
-      // this.customerFaceClick(this.state.customerList[this.state.customerSelect])
     }
-
   }
+
   onChangeDocumentType = (e) => {
     this.setState({
       documentType: e.target.value,
@@ -7230,13 +7270,14 @@ class Video extends Component {
               <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>取消</Button>
               <Button className="modelButtonCancel" onClick={this.sgsinImage}>拍照</Button>
               {/* 再截图后按钮高亮 */}
-              {
-                this.state.isFaceImage && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>下一步</Button>
-              }
-              {
-                !this.state.isFaceImage && <Button className="modelButtonNo" type="primary" danger>下一步</Button>
-              }
-
+              <Button
+                  className={this.state.isFaceImage ? 'modelButtonOk' : 'modelButtonNo'}
+                  type="primary"
+                  danger
+                  onClick={this.handleOkFacial}
+              >
+                 {this.state.documentType === 'OTHER_CARD' ? '确认' : '下一步'}
+              </Button>
             </div>,
             // 人脸识别后的结果界面的按钮
             this.state.cardResuly == '' && this.state.faceResuly != ''  &&<div key='facial'>
@@ -7283,7 +7324,7 @@ class Video extends Component {
           ]}>
             <Spin spinning={this.state.loadingFace} tip="识别中...">
               <div style={{display: 'flex', padding: '10px 20px'}}>
-              <Step style={{marginTop: '10px'}}  current={this.state.titleModal == '身份验证'?3:2} ></Step>
+              <Step style={{marginTop: '10px'}}  current={this.state.titleModal === '身份验证'? 4 : 3} />
               <div className="faceBody">
                 {this.state.cardResuly == '' && <div className='faceCardImg'>
 
@@ -7398,44 +7439,49 @@ class Video extends Component {
             </div>
             </Spin>
           </Modal>
+          {/*证件识别弹窗*/}
           <Modal width={650} title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer} maskClosable={false}
             footer={[
               <div key='end'>
-                
-                
                 {
-                  !this.state.isCustomerSelect && <Button className="modelButtonCancel" onClick={this.goBackSelectCustomer}>上一步</Button>
+                  this.state.stepIndex !== 0 && <Button className="modelButtonCancel" onClick={this.goBackSelectCustomer}>上一步</Button>
                 }
                 <Button className="modelButtonCancel" onClick={this.handleCancelCustomer}>取消</Button>
-                {
-                  this.state.isCustomerSelect && <span>
-                    {
-                      this.state.customerSelect == '' && <Button className="modelButtonNo modelNoButton" type="primary" danger>下一步</Button>
+                <Button
+                    className={
+                      (this.state.stepIndex === 0 && this.state.customerSelectType) ||
+                      (this.state.stepIndex === 1 && this.state.customerSelect) ||
+                      (this.state.stepIndex === 2 && this.state.documentType) ? 'modelButtonOk' : 'modelButtonNo modelNoButton'
                     }
-                    {
-                      this.state.customerSelect != '' && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkCustomer}>下一步</Button>
-                    }
-                  </span>
-                }
-                {
-                  !this.state.isCustomerSelect&& <span>
-                    {
-                  this.state.documentType == '' && <Button className="modelButtonNo modelNoButton" type="primary" danger>下一步</Button>
-                }
-                {
-                  this.state.documentType != '' &&<Button className="modelButtonOk" type="primary" danger onClick={this.handleOkCustomer}>下一步</Button>
-                }
-                  </span>
-                }
-                
+                    type="primary"
+                    danger
+                    onClick={this.handleOkCustomer}
+                >
+                  下一步
+                </Button>
               </div>
             ]}>
             <div style={{display: 'flex', padding: '10px 20px'}}>
-              <Step current={this.state.isCustomerSelect?0:1} ocr={true} />
+              <Step current={this.state.stepIndex}  />
               <div>
                 {
-                  this.state.isCustomerSelect && <div>
+                  this.state.stepIndex === 0 && <div>
                     <div className='CustomerSelectTitle'>
+                      请选择客户类型
+                    </div>
+                    <div>
+                      <Radio.Group onChange={this.onChangeOCRCustomerType} value={this.state.customerSelectType}>
+                        <Space direction="vertical">
+                            <Radio value={1}>保险客户</Radio>
+                            <Radio value={2}>ECN陪同者</Radio>
+                        </Space>
+                      </Radio.Group>
+                    </div>
+                  </div>
+                }
+                {
+                  this.state.stepIndex === 1 && <div>
+                   <div className='CustomerSelectTitle'>
                       请选择客户
                     </div>
                     <div>
@@ -7443,9 +7489,7 @@ class Video extends Component {
                         <Space direction="vertical">
                           {
                             this.state.customerList.map((item, index) => {
-                              // if(item.name.indexOf("访客") != -1) {
-                                return <Radio value={index + 1}>{item.name}</Radio>
-                              // }
+                              return <Radio value={index + 1}>{item.name}</Radio>
                             })
                           }
                         </Space>
@@ -7455,9 +7499,9 @@ class Video extends Component {
                   </div>
                 }
                 {
-                  !this.state.isCustomerSelect && <div>
+                  this.state.stepIndex === 2 && <div>
                     {
-                      this.state.documentError != '' && <div className='errorClassFace'>
+                      this.state.documentError !== '' && <div className='errorClassFace'>
                       <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>{this.state.documentError}</div>
                     }
                     <div className='CustomerSelectTitle'>
@@ -7472,6 +7516,7 @@ class Video extends Component {
                           <Radio value={'HK_MO_PASS_CARD'}>港澳来往大陆通行证</Radio>
                           <Radio value={'HK_MO_RESIDENCE_CARD'}>港澳居民居住证</Radio>
                           <Radio value={'TW_RESIDENCE_CARD'}>台湾居民居住证</Radio>
+                          <Radio value={'OTHER_CARD'}>其他证件</Radio>
                           {/* <Radio value={'FOREIGNER_RESIDENCE_CARD'}>外国人永久居住证</Radio> */}
                         </Space>
                       </Radio.Group>

package/packages/pages/video/video.less

@@ -713,3 +713,6 @@ display: inline-flex;
     }
   }
 }
+body {
+  font-size: 100%;
+}