react_hsbc_teller 1.9.12 → 1.9.13

package/package.json

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

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

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import Steps from "antd/lib/steps";
+import 'antd/lib/steps/style'
+const { Step } = Steps;
+
+export default class step extends Component {
+    render() {
+        let current = this.props.current;
+        return (
+            <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="人脸识别" />}
+                </Steps>
+         </div>
+        )
+    }
+}
+step.defaultProps = {
+    current: 0,
+    direction: 'vertical',
+}

package/packages/pages/video/video.jsx

@@ -41,6 +41,7 @@ import 'antd/lib/space/style'
 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 axios from 'axios';
 import CryptoJS from "crypto-js";
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
@@ -191,6 +192,7 @@ class Video extends Component {
     isModalVisibleInvitation: false,
     linkData: '',
     roomCustomerList: [],
+    userIdCardResults: {},
     facialImg: '',
     isFaceImage: false,
     isModalVisibleFacial: false,
@@ -328,7 +330,7 @@ class Video extends Component {
     documentType: '',
     isCustomerSelect: true,
     documentError: '',
-    customerTitleName: '客户身份识别',
+    customerTitleName: '客户身份验证',
     certificateType: 'ID_CARD',
     customerName: '',
     IDtypeFrontOrBack: '',
@@ -355,7 +357,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.12&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.13&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -823,9 +825,15 @@ class Video extends Component {
   }
   contrastFaceVerify = async () => {
     try {
+      let userInfo = this.state.userIdCardResults[this.state.faceCustomerUid]
+      console.log(this.state.faceCustomerUid, userInfo)
+      if (!userInfo || !userInfo.idCardNumber) {
+        console.log('没有身份证ocr信息')
+        return
+      }
       let result = await API.contrastFaceVerify({
-        idCardNumber: this.state.idCardNumberFace,
-        idCardName: this.state.idCardNameFace,
+        idCardName: userInfo.idCardName, // idCardName: this.state.idCardNameFace,
+        idCardNumber: userInfo.idCardNumber, // idCardNumber: this.state.idCardNumberFace,
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         appAccount: this.state.faceCustomerUid,
@@ -839,7 +847,10 @@ class Video extends Component {
           loadingFace: false,
           faceResuly: 'success',
           isFaceImage: '',
-          faceFailReason: ''
+          faceFailReason: '',
+          idCardNameFace: userInfo.idCardName,
+          idCardNumberFace: userInfo.idCardNumber,
+          certificateValidityFace: userInfo.certificateValidity
         })
         // this.setState({
         //   isModalVisibleFacial: false
@@ -1025,7 +1036,7 @@ class Video extends Component {
           isCustomerSelect: true,
           customerSelect: list.length == 1 ? 1 : '',
 
-          customerTitleName: '客户身份识别'
+          customerTitleName: '客户身份验证'
         },()=>{
           console.log(this.state.customerSelect)
           this.setState({
@@ -3878,7 +3889,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.12')
+    console.log('hsbc_teller_sdk', '1.9.13')
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4248,6 +4259,56 @@ class Video extends Component {
       PasswordSFP: event.target.value
     })
   }
+  handleFinishOcr = async (type) => {
+    // 非身份证直接入库
+    if (type == 'noFace') {
+      await this.confirmCallback()
+      // this.setState({
+      //   idCardNameFace: this.state.idCardName,
+      //   idCardNumberFace: this.state.idCardNumber,
+      //   certificateValidityFace: this.state.certificateValidity
+      // },()=>{
+      this.setState({
+        isModalVisibleFacial: false,
+        cardResuly: '',
+        idCardNumber: '',
+        idCardName: '',
+        certificateValidity: '',
+      })
+    // })
+    } else {
+      console.log('身份证ocr')
+      // 身份证，进行人脸识别后再入库
+      this.state.userIdCardResults[this.state.faceCustomerUid] = {
+        idCardName: this.state.idCardName,
+        idCardNumber: this.state.idCardNumber,
+        customerName: this.state.customerName,
+        certificateValidity: this.state.certificateValidity,
+      }
+      console.log(this.state.userIdCardResults)
+      this.setState({
+        idCardNameFace: this.state.idCardName,
+        idCardNumberFace: this.state.idCardNumber,
+        certificateValidityFace: this.state.certificateValidity,
+        userIdCardResults: this.state.userIdCardResults
+      },()=>{
+      this.state.faceCustomerType = 1
+        this.setState({
+        cardResuly: '',
+        certificateValidity: '',
+        idCardNumber: '',
+        idCardName: '',
+        titleModal: '身份验证',
+        // clickedFacial: true,
+        facialImg: faceImage,
+        isFaceImage: false
+        })
+      })
+      setTimeout(() => {
+        this.publishVideoTwo()
+      }, 0);
+    }
+  }
   // ocr结果入库
   confirmCallback = async (data) => {
     try {
@@ -4265,44 +4326,7 @@ class Video extends Component {
       });
       console.log('confirmCallback', result)
       if (result.code == 200) {
-        console.log(data)
-        
-        if (data == 'noFace') {
-          this.setState({
-            idCardNameFace: this.state.idCardName,
-            idCardNumberFace: this.state.idCardNumber,
-            certificateValidityFace: this.state.certificateValidity
-          },()=>{
-          this.setState({
-            isModalVisibleFacial: false,
-            cardResuly: '',
-            idCardNumber: '',
-            idCardName: '',
-            certificateValidity: '',
-          })
-        })
-        } else {
-          console.log('data')
-          this.setState({
-            idCardNameFace: this.state.idCardName,
-            idCardNumberFace: this.state.idCardNumber,
-            certificateValidityFace: this.state.certificateValidity
-          },()=>{
-          this.state.faceCustomerType = 1
-            this.setState({
-            cardResuly: '',
-            certificateValidity: '',
-            idCardNumber: '',
-            idCardName: '',
-            titleModal: '身份验证',
-            // clickedFacial: true,
-            facialImg: faceImage,
-            isFaceImage: false
-            })
-          })
-          this.publishVideoTwo()
-        }
-      
+        // console.log(data)
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -4526,6 +4550,39 @@ class Video extends Component {
     }
 
   };
+  handleFinishFacial = async () => {
+    let userInfo = this.state.userIdCardResults[this.state.faceCustomerUid]
+    console.log(this.state.faceCustomerUid, userInfo)
+    if (!userInfo || !userInfo.idCardNumber) {
+      console.log('没有身份证ocr信息')
+      return
+    }
+    this.handleCancelFacial();
+    try {
+      let result = await API.confirmCallback({
+        idCardName: userInfo.idCardName,
+        staffId: this.props.tellerAccount,
+        activityId: this.props.businessNumber,
+        appAccount: this.state.faceCustomerUid,
+        idCardNumber: userInfo.idCardNumber,
+        sessionId: this.state.sessionId,
+        certificateType: 'ID_CARD',
+        customerName: userInfo.customerName,
+        startDate: userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[0] : '',
+        endDate: userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[1] : '',
+      });
+      console.log('confirmCallback', result)
+      if (result.code == 200) {
+        // console.log(data)
+      } else {
+        console.log('1')
+        this.messageClick('保持信息失败', 'error')
+      }
+    } catch (err) {
+      console.log('2',err)
+      this.messageClick('保持信息失败', 'error')
+    }
+  };
   handleCancelFacial = () => {
     callNimIM('sendCustomCmdMsg', {
       customId: this.state.imRoomId,
@@ -5621,7 +5678,7 @@ class Video extends Component {
       documentType: '',
       isCustomerSelect: true,
       customerSelect: this.state.customerList.length == 1 ? 1 : '',
-      customerTitleName: '客户身份识别'
+      customerTitleName: '客户身份验证'
     })
   }
   handleOkCustomer = () => {
@@ -5650,19 +5707,19 @@ class Video extends Component {
               "data": {
                 'sessionId': this.state.sessionId,
                 'userId': this.state.customerList[this.state.customerSelect - 1].customId,
-                'title': '为了有效确认客户身份，请您配合进行我行的身份识别和核验。请您阅读以下内容，若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；同时，我行会对您进行脸部拍照，采集您的脸部图像。',
+                'title': '为了有效确认客户身份，请您配合汇丰银行（中国）有限公司（”我行”）进行身份识别和核验。请您阅读以下内容。若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；同时，我行会对您进行脸部拍照，采集您的脸部图像。',
                 'title_en': 'In order to confirm client’s identify, please cooperate with HSBC (China) Co., Ltd. (“the bank”) for identity verification. Please read the following and provide your authorization to the bank to capture your ID image and information, take picture of your face and retain them for identification and verification purpose.',
                 'navBarTitle': '客户授权',
                 'navBarTitle_en': '客户授权(en)',
                 'list': [
                   {
                     'id': 1,
-                    'content': '您是否授权汇丰中国对您的证件以及脸部进行拍照，采集并留存您的证件信息以及脸部图像以便我行进行身份识别？',
+                    'content': '您是否授权我行对您的证件以及脸部进行拍照，采集并留存您的证件信息以及脸部图像以便我行进行身份识别？',
                     'content_en': 'Do you agree the bank to photograph your ID and face image, collect and retain ID information and face image for identification?'
                   },
                   {
                     'id': 2,
-                    'content': '为了通过人脸对比进行身份识别和核验，我行需要将您的姓名、身份证件号码和脸部图像发送给中国人民银行或全国公民身份证号码查询服务中心授权的第三方，并由第三方进一步发送至中国人民银行或全国公民身份证号码查询服务中心进行人脸对比或信息核对。',
+                    'content': '为了通过人脸对比进行身份识别和核验，我行需要将您的姓名、身份证件号码和脸部图像发送给中国公安系统（包括其所属机构及代理机构）进行人脸对比及信息核对。',
                     'content_en': 'For further identification and verification purpose, do you agree the bank to send your name, ID number and face image to the public security authority (including its affiliates or agencies) to perform the identification and information verification process？'
                   },
                   {
@@ -5682,19 +5739,19 @@ class Video extends Component {
               "data": {
                 'sessionId': this.state.sessionId,
                 'userId': this.state.customerList[this.state.customerSelect - 1].customId,
-                'title': '为了有效确认客户身份，请您配合进行我行的身份识别。请您阅读以下内容，若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；',
+                'title': '为了有效确认客户身份，请您配合汇丰银行（中国）有限公司（“我行”）进行身份识别。请您阅读以下内容，若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；',
                 'title_en': 'In order to confirm client’s identify, please cooperate with HSBC (China) Co., Ltd. (“the bank”) for identity verification. Please read the following and provide your authorization to the bank to capture your ID image and information and retain them for identification and verification purpose. ',
                 'navBarTitle': '客户授权',
                 'navBarTitle_en': '客户授权(en)',
                 'list': [
                   {
                     'id': 1,
-                    'content': '您是否授权汇丰中国对您的证件进行拍照，采集并留存您的证件信息以便我行进行身份确认？',
+                    'content': '您是否授权我行对您的证件进行拍照，采集并留存您的证件信息以便我行进行身份确认？',
                     'content_en': 'Do you agree the bank to photograph your ID ,collect and retain ID information and for identification?'
                   },
                   {
                     'id': 2,
-                    'content': '本人同意使用电子签名方式签署作为陪同者所需签署的文件，并授权汇丰银行（中国）有限公司（“汇丰中国”）通过电子签名服务供应商向第三方认证机构提供本人的姓名和身份证件号码，用以申请本人专属的数字证书，本人在电子设备上签署文件即表明本人指示汇丰中国使用本人专属电子证书对该等文件进行电子签名。本人知悉并同意，电子签名和手写签名具有同等法律效力。 \n说明：电子签名服务供应商和第三方认证机构的名称和联系方式如下:' + 
+                    'content': '对于陪同者所需签署的文件，您是否同意使用电子签名方式签署，并授权汇丰银行（中国）有限公司（“汇丰中国”）通过电子签名服务供应商向第三方认证机构提供您本人的姓名和身份证件号码，用以申请您本人专属的数字证书？您本人在电子设备上签署文件即表明您本人指示汇丰中国使用您本人专属电子证书对该等文件进行电子签名。您本人知悉并同意，电子签名和手写签名具有同等法律效力。 \n说明：电子签名服务供应商和第三方认证机构的名称和联系方式如下:' +
                                 '\n电子签名服务供应商：杭州尚尚签网络科技有限公司（联系电话：4009936665）\n第三方认证机构： \n北京天威诚信电子商务服务有限公司（联系电话：010-50947500）\n中金金融认证中心有限公司（联系电话：010-83526655）',
                     'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it?. And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
                                 '\nPlease be noted the names and contact information of the electronic signature service provider and the certificate authority are as follows:\nElectronic signature service provider: Hangzhou BestSign Network Technology Co. Ltd. (Contact: 4009936665) \nCertificate Authority: \nChina Financial Certification Authority (Contact: 010-83526655)\niTrusChina Co., Ltd (Contact: 010-50947500)'
@@ -6435,7 +6492,7 @@ class Video extends Component {
             <div className='endModal'>是否要结束并退出会议？</div>
           </Modal>
           {/* ocr及人脸 */}
-          <Modal title={this.state.titleModal} width={650} closable={true} maskClosable={false} onCancel={this.handleCancelFacial} centered={true} visible={this.state.isModalVisibleFacial} footer={[
+          <Modal title={this.state.titleModal} width={800} closable={true} maskClosable={false} onCancel={this.handleCancelFacial} centered={true} visible={this.state.isModalVisibleFacial} footer={[
             // ocr及人脸在截图界面的按钮
             this.state.cardResuly == '' && this.state.faceResuly == ''  &&<div key='facial'>
               <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>取消</Button>
@@ -6451,7 +6508,12 @@ class Video extends Component {
             </div>,
             // 人脸识别后的结果界面的按钮
             this.state.cardResuly == '' && this.state.faceResuly != ''  &&<div key='facial'>
-              <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>完成</Button>
+              {
+                this.state.faceResuly == 'success' && <Button className="modelButtonCancel" onClick={this.handleFinishFacial}>完成</Button>
+              }
+              {
+                this.state.faceResuly == 'fail' && <Button className="modelButtonNo" type="primary" danger>完成</Button>
+              }
               {
                 this.state.faceResuly == 'fail' && <Button className="modelButtonOk" type="primary" danger onClick={this.ReIdentification}>重新识别</Button>
               }
@@ -6466,14 +6528,15 @@ class Video extends Component {
               {
                 this.state.disabledIdCard && <Button className="modelButtonFaceOk" danger onClick={(e) => this.updateConfirm('noFace')}>修正证件信息</Button>
               }
+              <Button className="modelButtonCancel" danger onClick={this.newFaceClick}>返回重拍</Button>
               {
-                this.state.documentType == 'ID_CARD' && this.state.certificateValidityType && <Button className="modelButtonFaceOkColor" danger onClick={(e) => this.confirmCallback('face')}>确认信息并发起人脸识别</Button>
+                this.state.documentType == 'ID_CARD' && this.state.certificateValidityType && <Button className="modelButtonFaceOkColor" danger onClick={(e) => this.handleFinishOcr('face')}>确认信息并发起人脸识别</Button>
               }
               {
                 this.state.documentType == 'ID_CARD' && !this.state.certificateValidityType && <Button className="modelButtonFaceOkColorFile" danger >确认信息并发起人脸识别</Button>
               }
               {
-                this.state.documentType != 'ID_CARD' &&this.state.certificateValidityType && <Button className="modelButtonOk" type="primary" danger onClick={(e) => this.confirmCallback('noFace')}>完成</Button>
+                this.state.documentType != 'ID_CARD' &&this.state.certificateValidityType && <Button className="modelButtonOk" type="primary" danger onClick={(e) => this.handleFinishOcr('noFace')}>完成</Button>
               }
               {
                 this.state.documentType != 'ID_CARD' && !this.state.certificateValidityType && <Button className="modelButtonFaceOkColorFile" danger >完成</Button>
@@ -6487,6 +6550,8 @@ class Video extends Component {
             </div>
           ]}>
             <Spin spinning={this.state.loadingFace} tip="识别中...">
+              <div style={{display: 'flex', padding: '10px 20px'}}>
+              <Step style={{marginTop: '10px'}}  current={this.state.titleModal == '身份验证'?3:2} ></Step>
               <div className="faceBody">
                 {this.state.cardResuly == '' && <div className='faceCardImg'>
 
@@ -6565,6 +6630,7 @@ class Video extends Component {
                 }
 
               </div>
+              </div>
             </Spin>
           </Modal>
           <Modal title="经理人员授权" closable={false} centered={true} visible={this.state.isModalVisibleSFP} maskClosable={false}
@@ -6600,7 +6666,7 @@ class Video extends Component {
             </div>
             </Spin>
           </Modal>
-          <Modal title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer} maskClosable={false}
+          <Modal width={650} title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer} maskClosable={false}
             footer={[
               <div key='end'>
                 
@@ -6632,11 +6698,12 @@ class Video extends Component {
                 
               </div>
             ]}>
-            <div>
-              <div className='selectCustomer'>
+            <div style={{display: 'flex', padding: '10px 20px'}}>
+              <Step current={this.state.isCustomerSelect?0:1}></Step>
+              <div>
                 {
                   this.state.isCustomerSelect && <div>
-                    <div>
+                    <div className='CustomerSelectTitle'>
                       请选择进行身份识别的客户（陪同者)
                     </div>
                     <div>
@@ -6660,7 +6727,7 @@ class Video extends Component {
                       this.state.documentError != '' && <div className='errorClassFace'>
                       <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>{this.state.documentError}</div>
                     }
-                    <div>
+                    <div className='CustomerSelectTitle'>
                       请选择您的身份证件类型
                     </div>
                     <div>

package/packages/pages/video/video.less

@@ -157,6 +157,7 @@
 .faceBody{
   text-align: center;
   height: 100%;
+  width: ~"calc(100% - 150px)";
   .faceCardImg{
     // height: 100%;
   }
@@ -432,6 +433,9 @@
   font-size: 16px;
   margin: 20px 50px;
 }
+.CustomerSelectTitle{
+  margin-bottom: 10px;
+}
 .errorClassName{
     .ant-message-notice-content{
       min-width: 500px;