react_hsbc_teller 1.9.4 → 1.9.6

package/package.json

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

package/packages/demo/demo.js

@@ -5,26 +5,34 @@ import Pdf from './pdf.js'
 class Demo extends Component {
   state = {
     shareMask: false,
-    mtoken: "3c1b4badb7d7",
-    roomId: "661841296389119",
-    imRoomId: "iax56tSCD@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
-sessionId: "iax56tSCD",
+    imRoomId
+    : 
+    "IZLZMoTxj@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
+    sessionId
+    : 
+    "IZLZMoTxj",
+    mtoken
+: 
+"bc084d8a922f",
+roomId
+: 
+"663912632731275",
     // roomId: '',
     // mtoken: '',
     // imRoomId: '',
     // sessionId: '',
     isVideo: false,
     tellerAccount: 'wmzTeller',
-    callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
-    // callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
+    // callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
+    callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
     businessNumber: '123',
     lang: 'zh',
-    roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
-    baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
-    resourcePath: 'https://counter-web.leimondata.cn:7199',
-    // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws',
-    // baseURL:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
-    // resourcePath:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
+    // roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+    // baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
+    // resourcePath: 'https://counter-web.leimondata.cn:7199',
+    roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws',
+    baseURL:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
+    resourcePath:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
     prohibitPrompt: '无客户',
   titleBackground: '#40a9ff',
   titleColor: '#faad14',

package/packages/pages/video/video.jsx

@@ -343,7 +343,8 @@ class Video extends Component {
     faceFailReason: '',
     cardResuly: '',
     cardFailReason: '',
-    videoType: ''
+    videoType: '',
+    certificateValidityType: true,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -351,7 +352,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.4&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.6&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -774,28 +775,52 @@ class Video extends Component {
       })
     }
   };
-  // contrastFaceVerify=()=>{
-  //   axios({
-  //     method: 'post',
-  //     url: 'http://182.92.184.31:8868/verify/face',
-  //     data: { // 这⾥data中的参数为requestBody参数，服务端需要使⽤@RequestBody注解进⾏获取
-  //       "username":"王明珍",
-  //       "num":"410425199510201037",
-  //       "fileBase64":this.state.facialImg.replace(/^data:image\/\w+;base64,/,"")
-  //     }
-  //   }).then((response) =>{
-  //     console.log(response.data);
-  //     if(response.data.code == 200){
-  //       this.messageClick('人脸识别成功','success')
-  //       this.setState({
-  //         isModalVisibleFacial: false
-  //       }) 
-  //     } else {
-  //       this.messageClick('人脸识别失败','error')
-  //     }
-  //   }).catch(function (error) {
-  //   })
-  // }
+  errorCodeClick=(type,value)=>{
+    if(type == 'ocr'){
+      if(value == 100701 || value == 100702 || value == 200001 || value == 300901 || value == 300902 || value == 400001) {
+        this.setState({
+          cardFailReason: '证件图片不清晰，请重试。返回重拍时，请检查并确保身份证件图片信息完整清晰后再提交核查。[#'+value+'#]'
+        })
+      }
+      if(value == 100803 || value == 100804 || value == 100805) {
+        this.setState({
+          cardFailReason: '证件信息核查失败，请重试。返回重拍时，请检查并确保身份证件图片信息完整清晰后再提交核查。[#'+value+'#]'
+        })
+      }
+      if(value == 100801 || value == 100802) {
+        this.setState({
+          cardFailReason: '系统或网络连接异常，请重试。若仍有问题，请联系Support同事。[#'+value+'#]'
+        })
+      }
+      if(value == 30002) {
+        this.setState({
+          cardFailReason: '识别成功-证件已过期。[#'+value+'#]'
+        })
+      }
+    } else if(type == 'face') {
+      if(value == 201 || value == 202 || value == 203 || value == 401 || value == 428) {
+        this.setState({
+          faceFailReason: '用户信息有误。请再次检查客户提交的证件信息是否正确后，返回重试。若仍有问题，请联系Support同事解决。[#'+ value + '#]'
+        })
+      }else if(value == 204) {
+        this.setState({
+          faceFailReason: '用户信息核查未通过。请返回重试。返回重拍时，请检查并确保客户照片完整清晰后再提交核查。[#'+ value + '#]'
+        })
+      }else if(value == 209) {
+        this.setState({
+          faceFailReason: '用户信息核查未通过。请确认客户与其提供的证件信息一致后，再提交核查。[#'+ value + '#]'
+        })
+      } else {
+        this.setState({
+          faceFailReason: '用户信息核查无法处理，请重试。若仍有问题，请联系Support同事。[#'+ value + '#]'
+        })
+      }
+      
+      
+      
+      
+    }
+  }
   contrastFaceVerify = async () => {
     try {
       let result = await API.contrastFaceVerify({
@@ -808,7 +833,7 @@ class Video extends Component {
         fileBase64: this.state.facialImg.replace(/^data:image\/\w+;base64,/, "")
       });
       console.log(result);
-      if (result.code == 200) {
+      if (result.code == 200 || result.code == 201) {
         // this.messageClick('人脸识别成功','success')
         this.setState({
           loadingFace: false,
@@ -825,8 +850,9 @@ class Video extends Component {
           loadingFace: false,
           faceResuly: 'fail',
           isFaceImage: '',
-          faceFailReason: result.message
+          // faceFailReason: result.message
         })
+        this.errorCodeClick('face',result.code)
       }
 
 
@@ -839,8 +865,9 @@ class Video extends Component {
         loadingFace: false,
         faceResuly: 'fail',
         isFaceImage: '',
-        faceFailReason: err.message
+        // faceFailReason: err.message
       })
+      this.errorCodeClick('face',result.code)
       console.error('err', err);
     }
   };
@@ -3851,7 +3878,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.4')
+    console.log('hsbc_teller_sdk', '1.9.6')
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4232,8 +4259,8 @@ class Video extends Component {
         sessionId: this.state.sessionId,
         certificateType: this.state.certificateType,
         customerName: this.state.customerName,
-        startDate: this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '',
-        endDate: this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '',
+        startDate: this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '',
+        endDate: this.state.documentType == 'PASSPORT_CARD' ? this.state.certificateValidity ? this.state.certificateValidity.split('-')[0]: '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '',
       });
       console.log('confirmCallback', result)
       if (result.code == 200) {
@@ -4309,17 +4336,82 @@ class Video extends Component {
           })
         });
         if(this.state.documentType == 'ID_CARD') {
+          if (result.data.side == 'front') {
+            if(this.state.certificateValidity) {
+              this.setState({
+                idCardNumber: result.data.idCardNumber,
+                idCardName: result.data.idCardName,
+                loadingFace: false,
+                cardFailReason: '',
+                cardResuly: 'success',
+              })
+            } else {
+              this.setState({
+                // isModalVisibleFacial: false
+                idCardNumber: result.data.idCardNumber,
+                idCardName: result.data.idCardName
+              })
+              this.ocrCallback(2)
+            }
+          } else if (result.data.side == 'back') {
+            console.log(result.data.startDate, result.data.endDate)
+            if(this.state.idCardName && this.dateNewTime(result.data.endDate.split('-')[1])) {
+              this.setState({
+                certificateValidity: result.data.startDate + '-' + result.data.endDate,
+                loadingFace: false,
+                cardFailReason: '',
+                cardResuly: 'success',
+                certificateValidityType: true,
+              })
+            } else if(this.state.idCardName && !this.dateNewTime(result.data.endDate.split('-')[1])) {
+              this.setState({
+                certificateValidity: result.data.startDate + '-' + result.data.endDate,
+                loadingFace: false,
+                certificateValidityType: false,
+                cardFailReason: '证件不在有效期内',
+                cardResuly: 'fail',
+              })
+            } else if(!this.state.idCardName && this.dateNewTime(result.data.endDate.split('-')[1])) {
+              this.setState({
+                certificateValidity: result.data.startDate + '-' + result.data.endDate,
+              })
+              this.ocrCallback(2)
+            } else if(!this.state.idCardName && !this.dateNewTime(result.data.endDate.split('-')[1])) {
+              this.setState({
+                certificateValidity: result.data.startDate + '-' + result.data.endDate,
+                loadingFace: false,
+                certificateValidityType: false,
+                cardFailReason: '证件不在有效期内',
+                cardResuly: 'fail',
+              })
+            }
+            // if(this.state.idCardName) {
+            //   this.setState({
+            //     certificateValidity: result.data.startDate + '-' + result.data.endDate,
+            //     loadingFace: false,
+            //     cardFailReason: '',
+            //     cardResuly: 'success',
+            //   })
+            // } else {
+            //   this.setState({
+            //     certificateValidity: result.data.startDate + '-' + result.data.endDate,
+            //   })
+            //   this.ocrCallback(2)
+            // }
+          }
+        }
+        if(this.state.documentType == 'HK_MO_RESIDENCE_CARD' || this.state.documentType == 'TW_RESIDENCE_CARD') {
           if (result.data.side == 'front') {
             this.setState({
               // isModalVisibleFacial: false
-              idCardNumber: result.data.idCardNumber,
-              idCardName: result.data.idCardName
+              idCardNumber: result.data.resident.idNum,
+              idCardName: result.data.resident.name
             })
             this.ocrCallback(2)
           } else if (result.data.side == 'back') {
-            console.log(result.data.startDate, result.data.endDate)
+            console.log(result.data.resident.startDate, result.data.resident.endDate)
             this.setState({
-              certificateValidity: result.data.startDate + '-' + result.data.endDate,
+              certificateValidity: result.data.resident.startDate + '-' + result.data.resident.endDate,
               loadingFace: false,
               cardFailReason: '',
               cardResuly: 'success',
@@ -4328,9 +4420,20 @@ class Video extends Component {
         }
         if(this.state.documentType == 'PASSPORT_CARD') {
           this.setState({
-            idCardNumber: result.data.idCardNumber,
-            idCardName: result.data.idCardName,
-            certificateValidity: result.data.startDate + '-' + result.data.endDate,
+            idCardNumber: result.data.passport.passportCode,
+            idCardName: result.data.passport.nameEN,
+            certificateValidity: result.data.passport.expiryDate,
+            loadingFace: false,
+            cardFailReason: '',
+            cardResuly: 'success',
+          })
+        }
+
+        if(this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
+          this.setState({
+            idCardNumber: result.data.permission.cardNum,
+            idCardName: result.data.permission.nameEN,
+            certificateValidity: result.data.permission.validDate,
             loadingFace: false,
             cardFailReason: '',
             cardResuly: 'success',
@@ -4340,24 +4443,27 @@ class Video extends Component {
       } else {
         this.setState({
           loadingFace: false,
-          cardFailReason: result.message,
+          // cardFailReason: result.message,
           cardResuly: 'fail',
         })
-        this.messageClick('识别失败', 'error')
+        // this.messageClick('识别失败', 'error')
+        this.errorCodeClick('ocr',result.code)
       }
     } catch (err) {
       this.setState({
         loadingFace: false,
-        cardFailReason: err.response.message,
+        // cardFailReason: err.response.message,
         cardResuly: 'fail',
       })
+      this.errorCodeClick('ocr',err.response.code)
+      
       // this.messageClick('识别失败', 'error')
     }
   }
   handleOkFacial = () => {
     if (this.state.faceCustomerType == 2) {
       if (this.state.IDtypeFrontOrBack == '请截取证件头像面') {
-        if(this.state.documentType == 'PASSPORT_CARD') {
+        if(this.state.documentType == 'PASSPORT_CARD' || this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
           this.setState({
             loadingFace: true
           })
@@ -4609,6 +4715,7 @@ class Video extends Component {
         idCardName: '',
         cardFailReason: '',
         cardResuly: '',
+        certificateValidityType: true
       }, () => {
 
 
@@ -5418,8 +5525,43 @@ class Video extends Component {
   handleChangeIdCardNumber = (event) => {
     this.setState({ idCardNumber: event.target.value });
   }
+  dateNewTime=(value)=>{
+    var myDate = new Date();
+    var year = myDate.getFullYear();
+    var month = myDate.getMonth() + 1;
+    var dates = myDate.getDate();
+    var value1 = year + '.' + month + '.' + dates
+    var now = new Date(value1).valueOf();
+    var time = new Date(value).valueOf();
+    console.log(now,time)
+    if(now<time || now == time){
+      return true;
+    }else{
+      return false;
+    }
+  }
   handleChangeCertificateValidity = (event) => {
-    this.setState({ certificateValidity: event.target.value });
+    if(this.state.documentType == 'ID_CARD' && event.target.value.split('-').length >1 && event.target.value.split('-')[1].split('.').length >2) {
+      if(this.dateNewTime(event.target.value.split('-')[1])) {
+        this.setState({ 
+          certificateValidity: event.target.value,
+          certificateValidityType: true
+        });
+        
+      } else {
+        this.setState({ 
+          certificateValidity: event.target.value,
+          certificateValidityType: false
+        });
+      }
+    } else{
+      this.setState({ 
+        certificateValidity: event.target.value,
+      });
+    }
+    
+    
+
   }
   componentDidUpdate(prevProps) {
     console.log('componentDidUpdate', prevProps, prevProps.shareMask, this.props.shareMask)
@@ -5763,7 +5905,9 @@ class Video extends Component {
                               {otherAttendeesList}
                             </li>
                           }
-
+                          <li>
+                            请注意，若会议中需要客户出示证件，请客户使用手机的后置摄像头展示证件，由客户经理拍摄证件照片以完成客户身份核实。客户可点击会议主页面上的”切换摄像头“按钮切换手机摄像头
+                          </li>
 
                         </ul>
                       </div>
@@ -6245,7 +6389,10 @@ class Video extends Component {
                 this.state.disabledIdCard && <Button className="modelButtonFaceOk" danger onClick={(e) => this.updateConfirm('noFace')}>修改</Button>
               }
               {
-                this.state.documentType == 'ID_CARD' && <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.confirmCallback('face')}>完成并发起人脸识别</Button>
+              }
+              {
+                this.state.documentType == 'ID_CARD' && !this.state.certificateValidityType && <Button className="modelButtonFaceOkColorFile" danger >完成并发起人脸识别</Button>
               }
               {
                 this.state.documentType != 'ID_CARD' && <Button className="modelButtonOk" type="primary" danger onClick={(e) => this.confirmCallback('noFace')}>完成</Button>
@@ -6259,12 +6406,6 @@ class Video extends Component {
           ]}>
             <Spin spinning={this.state.loadingFace} tip="识别中...">
               <div className="faceBody">
-                {/* {this.state.faceCustomerType == 2 && 
-            <Select defaultValue={this.state.defaultValue} style={{ width: 120,marginBottom: '20px' }} onChange={this.handleChangeOcr}>
-            <Option value="1">正面</Option>
-            <Option value="2">反面</Option>
-          </Select>
-            } */}
                 {this.state.cardResuly == '' && <div className='faceCardImg'>
 
                   {
@@ -6275,10 +6416,12 @@ class Video extends Component {
                     this.state.faceResuly == '' && <span>
                       <div>
                         {
-                          this.state.videoType == 'error' && <div className='errorClassFace'>
-                          <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>客户视频异常，请重试</div>
+                          this.state.videoType == 'error' && <div className='errorClassFace videoErrorClass'>
+                          <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>
+                          请点击“截图”拍摄客户人像的照片。若界面无客户头像显示，请检查网络并保持网络稳定后，点击“截图”重试
+                          </div>
                         }
-                        <video className="faceImg" id="publish_video_2" autoPlay muted={true}></video>
+                        <video disablePictureInPicture className="faceImg" id="publish_video_2" autoPlay muted={true}></video>
                       </div>
                       <img className="faceImg" src={this.state.facialImg} alt=""></img>
                     </span>
@@ -6302,7 +6445,7 @@ class Video extends Component {
                     <div className='imgDIV'>
                       <img className="faceImgCard" src={this.state.facialImgFront} alt=""></img>
                       {
-                        this.state.documentType != 'PASSPORT_CARD' && <img className="faceImgCard faceImgCardTwo" src={this.state.facialImgBack} alt=""></img>
+                        this.state.documentType != 'PASSPORT_CARD' && this.state.documentType != 'TW_PASS_CARD' && this.state.documentType != 'HK_MO_PASS_CARD' && <img className="faceImgCard faceImgCardTwo" src={this.state.facialImgBack} alt=""></img>
                       }
                       
                     </div>
@@ -6438,7 +6581,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={'FOREIGNER_RESIDENCE_CARD'}>外国人永久居住证</Radio>
+                          {/* <Radio value={'FOREIGNER_RESIDENCE_CARD'}>外国人永久居住证</Radio> */}
                         </Space>
                       </Radio.Group>
                     </div>

package/packages/pages/video/video.less

@@ -186,6 +186,7 @@
   border-radius: 4px;
   border:1px dashed  #DDDDDD;
   margin: 24px;
+  margin-bottom: 3rem;
   flex:1;
   
 }
@@ -267,7 +268,7 @@
   bottom: 0;
   margin: auto;
   width: 500px;
-  height: 150px;
+  height: 300px;
   font-size: 22px;
     color: #222222;
     font-weight: 600;
@@ -413,6 +414,15 @@
   background: #DB0011!important;
   border-spacing: 20px!important;
 }
+.modelButtonFaceOkColorFile{
+  width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #5C5C5C!important;
+  border: 1px #5C5C5C solid!important;
+  background: #d9d9d9!important;
+  border-spacing: 20px!important;
+}
 .endModal{
   font-size: 16px;
     padding: 56px 30px 0px 30px;
@@ -425,7 +435,7 @@
 .errorClassName{
     .ant-message-notice-content{
       min-width: 500px;
-      height: 44px;
+      min-height: 44px;
       background: #F9F2F3;
       border: 1px #E5B2B5 solid;
       font-size: 16px;
@@ -464,7 +474,7 @@
 }
 .errorClassFace{
   min-width: 350px;
-      height: 44px;
+      min-height: 44px;
       background: #F9F2F3;
       border: 1px #E5B2B5 solid;
       font-size: 16px;
@@ -479,6 +489,10 @@
       margin-bottom: 3px;
     }
 }
+.videoErrorClass{
+  height: 60px;
+  margin: 15px;
+}
 .successClassFace{
     min-width: 350px;
     height: 44px;