react_hsbc_teller 1.9.11 → 1.9.13

package/packages/pages/video/video.jsx

@@ -14,6 +14,7 @@ import cameraImgOpen from '../../assets/img/icon_camera.png'
 import cameraImgCloe from '../../assets/img/icon_cameraOne.png'
 import beautyImg from '../../assets/img/whiteningLut.jpg'
 import ocrImage from '../../assets/img/jietu.png'
+import faceImage from '../../assets/img/jietu_face.png'
 import autod from '../../assets/mp3/joinmeeting.mp3'
 import internalJoin from '../../assets/mp3/internalJoin.mp3'
 import internalLeft from '../../assets/mp3/internalLeft.mp3'
@@ -40,8 +41,11 @@ 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 = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
+const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
@@ -179,7 +183,7 @@ class Video extends Component {
     isWhiteboard: false,
     isSelect: '',
     loading: false,
-    titleModal: '人脸识别',
+    titleModal: '身份验证',
     faceCustomerType: 1, // 1无感人脸，2ocr
     faceCustomerUid: '',
     customerList: [],
@@ -188,6 +192,7 @@ class Video extends Component {
     isModalVisibleInvitation: false,
     linkData: '',
     roomCustomerList: [],
+    userIdCardResults: {},
     facialImg: '',
     isFaceImage: false,
     isModalVisibleFacial: false,
@@ -325,7 +330,7 @@ class Video extends Component {
     documentType: '',
     isCustomerSelect: true,
     documentError: '',
-    customerTitleName: '客户身份识别',
+    customerTitleName: '客户身份验证',
     certificateType: 'ID_CARD',
     customerName: '',
     IDtypeFrontOrBack: '',
@@ -352,7 +357,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.11&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 => {
 
@@ -780,7 +785,7 @@ class Video extends Component {
         this.setState({
           cardFailReason: '证件图片不清晰，请重试。返回重拍时，请检查并确保身份证件图片信息完整清晰后再提交核查。[#'+value+'#]'
         })
-      } else if(value == -1001 || value == -1002|| value == -1003||value == -1004||value == -1005||value==-1006) {
+      } else if(value == -1001 || value == -1002|| value == -1003||value == -1004||value == -1005||value==-100801||value==-100802) {
         this.setState({
           cardFailReason: '系统或网络连接异常，请重试。若仍有问题，请联系Support同事。[#'+value+'#]'
         })
@@ -799,7 +804,11 @@ class Video extends Component {
         this.setState({
           faceFailReason: '用户信息核查未通过。请返回重试。返回重拍时，请检查并确保客户照片完整清晰后再提交核查。[#'+ value + '#]'
         })
-      }else if(value == 209) {
+      }else if(value == 206) {
+        this.setState({
+          faceFailReason: '用户信息核查无法处理，请重试。若仍有问题，请联系Support同事。[#'+ value + '#]'
+        })
+      } else if(value == 209) {
         this.setState({
           faceFailReason: '用户信息核查未通过。请确认客户与其提供的证件信息一致后，再提交核查。[#'+ value + '#]'
         })
@@ -816,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,
@@ -832,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
@@ -1018,7 +1036,7 @@ class Video extends Component {
           isCustomerSelect: true,
           customerSelect: list.length == 1 ? 1 : '',
 
-          customerTitleName: '客户身份识别'
+          customerTitleName: '客户身份验证'
         },()=>{
           console.log(this.state.customerSelect)
           this.setState({
@@ -1083,7 +1101,7 @@ class Video extends Component {
     if (this.isFileSuccuse()) {
       this.state.faceCustomerType = 1
       this.setState({
-        titleModal: '人脸识别'
+        titleModal: '身份验证'
       })
       this.selectCustomer('facial')
     }
@@ -1092,7 +1110,7 @@ class Video extends Component {
     if (this.isFileSuccuse()) {
       this.state.faceCustomerType = 2
       this.setState({
-        titleModal: 'OCR识别'
+        titleModal: '拍摄证件照片'
       })
       this.selectCustomer('ocr')
     }
@@ -3871,7 +3889,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.11')
+    console.log('hsbc_teller_sdk', '1.9.13')
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4241,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 {
@@ -4258,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: ocrImage,
-            isFaceImage: false
-            })
-          })
-          this.publishVideoTwo()
-        }
-      
+        // console.log(data)
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -4485,7 +4516,7 @@ class Video extends Component {
   }
   handleOkFacial = () => {
     if (this.state.faceCustomerType == 2) {
-      if (this.state.IDtypeFrontOrBack == '请截取证件头像面') {
+      if (this.state.IDtypeFrontOrBack == IDtypeFront) {
         if(this.state.documentType == 'PASSPORT_CARD' || this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
           this.setState({
             loadingFace: true
@@ -4494,12 +4525,12 @@ class Video extends Component {
         } else {
           this.setState({
             facialImg: ocrImage,
-            IDtypeFrontOrBack: '请截取证件国徽面',
+            IDtypeFrontOrBack: IDtypeBack,
             isFaceImage: false,
           })
         }
         
-      } else if (this.state.IDtypeFrontOrBack == '请截取证件国徽面') {
+      } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
         this.setState({
           loadingFace: true
         })
@@ -4519,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,
@@ -4568,7 +4632,7 @@ class Video extends Component {
       isFaceImage: false,
       facialImg: ocrImage,
       disabledIdCard: true,
-      IDtypeFrontOrBack: '请截取证件头像面',
+      IDtypeFrontOrBack: IDtypeFront,
       facialImgFront: '',
       facialImgBack: '',
       faceResuly: '',
@@ -4728,9 +4792,9 @@ class Video extends Component {
         clickedFacial: false,
         clickedOcr: false,
         isFaceImage: false,
-        facialImg: ocrImage,
+        facialImg: this.state.titleModal=='身份验证'? faceImage : ocrImage,
         disabledIdCard: true,
-        IDtypeFrontOrBack: '请截取证件头像面',
+        IDtypeFrontOrBack: IDtypeFront,
         facialImgFront: '',
         facialImgBack: '',
         faceResuly: '',
@@ -4751,13 +4815,13 @@ class Video extends Component {
     }
   }
   sgsinImage = () => {
-    if (this.state.IDtypeFrontOrBack == '请截取证件头像面') {
+    if (this.state.IDtypeFrontOrBack == IDtypeFront) {
       this.setState({
         facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
         isFaceImage: true,
         facialImgFront: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
       })
-    } else if (this.state.IDtypeFrontOrBack == '请截取证件国徽面') {
+    } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
       this.setState({
         facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
         isFaceImage: true,
@@ -5614,7 +5678,7 @@ class Video extends Component {
       documentType: '',
       isCustomerSelect: true,
       customerSelect: this.state.customerList.length == 1 ? 1 : '',
-      customerTitleName: '客户身份识别'
+      customerTitleName: '客户身份验证'
     })
   }
   handleOkCustomer = () => {
@@ -5643,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？'
                   },
                   {
@@ -5675,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)'
@@ -6409,7 +6473,7 @@ class Video extends Component {
             virtualization={this.virtualization}
           ></Foot>
           {/* 暂停恢复会话 */}
-          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
+          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} maskClosable={false} onOk={this.handleOk}
             onCancel={this.handleCancel}>
             {
               this.state.isSuspend && <span>确定是否恢复会话？</span>
@@ -6419,7 +6483,7 @@ class Video extends Component {
             }
           </Modal>
           {/* 是否退出会议*/}
-          <Modal closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[
+          <Modal closable={false} centered={true} visible={this.state.isModalVisibleEnd} maskClosable={false} footer={[
             <div key='end'>
               <Button className="modelButtonCancel" onClick={this.handleCancelEnd}>取消</Button>
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}>确定</Button>
@@ -6428,11 +6492,11 @@ class Video extends Component {
             <div className='endModal'>是否要结束并退出会议？</div>
           </Modal>
           {/* ocr及人脸 */}
-          <Modal title={this.state.titleModal} width={650} closable={true} 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>
-              <Button className="modelButtonCancel" onClick={this.sgsinImage}>截图</Button>
+              <Button className="modelButtonCancel" onClick={this.sgsinImage}>拍照</Button>
               {/* 再截图后按钮高亮 */}
               {
                 this.state.isFaceImage && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>下一步</Button>
@@ -6444,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>
               }
@@ -6457,16 +6526,17 @@ class Video extends Component {
           // ocr成功
             this.state.cardResuly == 'success' && <div key='facial'>
               {
-                this.state.disabledIdCard && <Button className="modelButtonFaceOk" danger onClick={(e) => this.updateConfirm('noFace')}>修改</Button>
+                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="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>
@@ -6480,11 +6550,16 @@ 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'>
 
                   {
-                    this.state.titleModal == 'OCR识别' && <div className='titleDiv'>{this.state.IDtypeFrontOrBack}</div>
+                    this.state.titleModal == '拍摄证件照片' && <div className='titleDiv'>{this.state.IDtypeFrontOrBack}</div>
+                  }
+                  {
+                    this.state.titleModal == '身份验证' && this.state.faceResuly == '' && <div className='titleDiv'>请确保陪同者头像清楚显示在前置镜头前</div>
                   }
 
                   {
@@ -6493,7 +6568,7 @@ class Video extends Component {
                         {
                           this.state.videoType == 'error' && <div className='errorClassFace videoErrorClass'>
                           <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>
-                          请点击“截图”拍摄客户人像的照片。若界面无客户头像显示，请检查网络并保持网络稳定后，点击“截图”重试
+                          请点击“拍照”拍摄客户人像的照片。若界面无客户头像显示，请检查网络并保持网络稳定后，点击“拍照”重试
                           </div>
                         }
                         <video disablePictureInPicture className="faceImg" id="publish_video_2" autoPlay muted={true}></video>
@@ -6514,14 +6589,14 @@ class Video extends Component {
                           this.state.cardFailReason && <span>{this.state.cardFailReason}</span>
                         }
                         {
-                          !this.state.cardFailReason && <span>识别成功</span>
+                          !this.state.cardFailReason && <span>识别证件信息成功</span>
                         }
                         
                         </div>
                     }
                     {
                       this.state.cardResuly == 'fail' && <div className='errorClassFace'>
-                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>识别失败--{this.state.cardFailReason}</div>
+                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>识别证件信息失败--{this.state.cardFailReason}</div>
                     }
                     <div className='imgDIV'>
                       <img className="faceImgCard" src={this.state.facialImgFront} alt=""></img>
@@ -6537,16 +6612,16 @@ class Video extends Component {
                   </div>
                 }
                 {
-                  this.state.titleModal == '人脸识别' && this.state.faceResuly != '' && <div className='resuleCard'>
+                  this.state.titleModal == '身份验证' && this.state.faceResuly != '' && <div className='resuleCard'>
                     {
                       this.state.faceResuly == 'success' && <div className='successClassFace'>
                         <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>
           
-                        人脸识别成功</div>
+                        认证通过</div>
                     }
                     {
                       this.state.faceResuly == 'fail' && <div className='errorClassFace'>
-                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>人脸识别失败--{this.state.faceFailReason}</div>
+                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>{this.state.faceFailReason}</div>
                     }
                     <div><span>客户姓名</span>  <input disabled type="text" value={this.state.idCardNameFace}/></div>
                     <div><span>身份证号</span>  <input disabled type="text" value={this.state.idCardNumberFace}/></div>
@@ -6555,9 +6630,10 @@ class Video extends Component {
                 }
 
               </div>
+              </div>
             </Spin>
           </Modal>
-          <Modal title="经理人员授权" closable={false} centered={true} visible={this.state.isModalVisibleSFP}
+          <Modal title="经理人员授权" closable={false} centered={true} visible={this.state.isModalVisibleSFP} maskClosable={false}
             footer={[
               <div key='end'>
                 <Button className="modelButtonCancel" onClick={this.handleCancelSFP}>取消</Button>
@@ -6590,7 +6666,7 @@ class Video extends Component {
             </div>
             </Spin>
           </Modal>
-          <Modal title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer}
+          <Modal width={650} title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer} maskClosable={false}
             footer={[
               <div key='end'>
                 
@@ -6622,12 +6698,13 @@ 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>
                       <Radio.Group onChange={this.onChangeOCRCustomer} value={this.state.customerSelect}>
@@ -6650,8 +6727,8 @@ 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>
                       <Radio.Group onChange={this.onChangeDocumentType} value={this.state.documentType}>
@@ -6673,7 +6750,7 @@ class Video extends Component {
 
           </Modal>
 
-          <Modal className="modelClass" title="邀请参会人员" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
+          <Modal className="modelClass" maskClosable={false} title="邀请参会人员" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
             <div key='invitation'>
               <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
               {
@@ -6729,7 +6806,7 @@ class Video extends Component {
               ></CanvasDraw> */}
             </div>
           </Modal>
-          <Modal title="设置视频设备" width={650} closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
+          <Modal title="设置视频设备" maskClosable={false} width={650} closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
             <div key='inspection'>
               <Button className="modelButtonCancel" onClick={this.handleCancelInspection}>取消</Button>
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInspection}>确定</Button>

package/packages/pages/video/video.less

@@ -157,6 +157,7 @@
 .faceBody{
   text-align: center;
   height: 100%;
+  width: ~"calc(100% - 150px)";
   .faceCardImg{
     // height: 100%;
   }
@@ -406,7 +407,7 @@
   border-spacing: 20px!important;
 }
 .modelButtonFaceOkColor{
-  width: 170px!important;
+  min-width: 170px!important;
   height: 40px!important;
   font-size: 16px!important;
   color: #ffffff!important;
@@ -432,6 +433,9 @@
   font-size: 16px;
   margin: 20px 50px;
 }
+.CustomerSelectTitle{
+  margin-bottom: 10px;
+}
 .errorClassName{
     .ant-message-notice-content{
       min-width: 500px;
@@ -598,7 +602,8 @@ margin: 20Px 40px;
   margin-bottom: 0px !important;
 }
 .titleDiv{
-  font-size: 1.4rem;
+  font-size: 1.2rem;
+  margin: 10px 0;
 }
 .videoListClass{
   align-content: flex-start;