'银行卡识别结果'

src/pages/userBind/np/naturePerson.vue

@@ -46,18 +46,18 @@
         <div class="upload-id-card">
           <span>身份证照片上传</span>
           <div class="upload-box">
-            <div v-if="!idCardFront" @click="idCardshow('front')">
+            <div v-if="!idCardFront" @click="ocrShow('idCard', 'front')">
               <img src="@/assets/userBind/front.png" >
               <p>正面</p>
             </div>
-            <div v-if="idCardFront && !isApproved" @click="idCardshow('front')">
+            <div v-if="idCardFront && !isApproved" @click="ocrShow('idCard', 'front')">
               <img :src="idCardFront" style="width: 100%;height: 100%;margin: 0">
             </div>
-            <div v-if="!idCardBack" @click="idCardshow('back')">
+            <div v-if="!idCardBack" @click="ocrShow('idCard', 'back')">
               <img src="@/assets/userBind/back.png" >
               <p>反面</p>
             </div>
-            <div v-if="idCardBack && !isApproved" @click="idCardshow('back')">
+            <div v-if="idCardBack && !isApproved" @click="ocrShow('idCard', 'back')">
               <img :src="idCardBack" style="width: 100%;height: 100%;margin: 0">
             </div>
           </div>
@@ -180,11 +180,12 @@
             <span>添加银行卡</span>
             <img src="@/assets/userBind/close.png" @click="hideModal" >
           </div>
-          <img src="@/assets/userBind/addBack.png" class="addBack" >
+          <img v-if="!bankImg" src="@/assets/userBind/addBack.png" class="addBack" @click="ocrShow('bankCard', '')">
+          <img v-if="bankImg && !isApproved" :src="bankImg" class="addBack">
           <list-item :item-height="44" class="card-Info">
             <item>
               <div slot="name">银行卡卡号</div>
-              <input slot="content" v-model="bank.bank_account_num" placeholder="银行卡卡号自动填充" >
+              <input slot="content" v-model="bank.bank_account_num" readonly placeholder="识别银行卡自动填充" >
             </item>
             <item>
               <div slot="name">账户姓名</div>
@@ -192,7 +193,7 @@
             </item>
             <item>
               <div slot="name">银行名称</div>
-              <input slot="content" v-model="bank.bank_full_name" placeholder="请输入银行名称" >
+              <input slot="content" v-model="bank.bank_full_name" readonly placeholder="识别银行卡自动填充" >
             </item>
             <item>
               <div slot="name">支行名称</div>
@@ -239,7 +240,7 @@ export default {
       bank: {
         bank_account_num: '',
         bank_account_name: '',
-        bank_card_type: '信用卡',
+        bank_card_type: '',
         bank_full_name: '',
         bank_branch_name: '',
       },
@@ -270,6 +271,7 @@ export default {
       },
       idCardFront: '', // 身份证正面图片
       idCardBack: '', // 身份证反面图片
+      bankImg: '', // 银行卡图片
     }
   },
   watch: {
@@ -293,12 +295,12 @@ export default {
       }
     },
     tabNum: function (newVal, oldVal) {
-      if (
+      /* if (
         (newVal === 1 && !this.isSave) && !this.from
       ) {
         this.hlsPopup.showError('请先保存基本信息')
         this.tabNum = oldVal
-      }
+      } */
     },
     'baseInfo.marital_status_n': function (newVal, oldVal) {
       if (newVal === '已婚') {
@@ -426,21 +428,21 @@ export default {
         }
       })
     },
-    idCardshow (type) {
+    ocrShow (ocrType, type) {
       let vm = this
       hlsPopup.showActionSheet({
         titleText: '请选择照片',
         buttonArray: ['拍照', '从相册取'],
         callback: index => {
           if (index === 0) {
-            vm.openCamera(type)
+            vm.openCamera(ocrType, type)
           } else {
-            vm.takePicture(type)
+            vm.takePicture(ocrType, type)
           }
         },
       })
     },
-    openCamera (type) {
+    openCamera (ocrType, type) {
       let vm = this
       let cameraoptions = {
         quality: 60,
@@ -448,15 +450,20 @@ export default {
         height: 1382,
       }
       let success = function (imgdata) {
-        type === 'front' ? vm.idCardFront = imgdata : vm.idCardBack = imgdata
-        vm.idCardIdentify(imgdata)
+        if (ocrType === 'idCard') {
+          type === 'front' ? vm.idCardFront = imgdata : vm.idCardBack = imgdata
+          vm.idCardIdentify(imgdata)
+        } else if (ocrType === 'bankCard') {
+          vm.bankImg = imgdata
+          vm.bankCardIdentify(imgdata)
+        }
       }
       let error = function () {
         hlsPopup.showLongCenter(error)
       }
       hlsUtil.openCamera(cameraoptions, success, error)
     },
-    takePicture (type) {
+    takePicture (ocrType, type) {
       let vm = this
       var cameraoptions = {
         quality: 70,
@@ -465,8 +472,13 @@ export default {
         maxCount: 1,
       }
       let success = function (imgUrl) {
-        type === 'front' ? vm.idCardFront = imgUrl[0] : vm.idCardBack = imgUrl[0]
-        vm.idCardIdentify(imgUrl[0])
+        if (ocrType === 'idCard') {
+          type === 'front' ? vm.idCardFront = imgUrl[0] : vm.idCardBack = imgUrl[0]
+          vm.idCardIdentify(imgUrl[0])
+        } else if (ocrType === 'bankCard') {
+          vm.bankImg = imgUrl[0]
+          vm.bankCardIdentify(imgUrl[0])
+        }
       }
       let error = function () {
         hlsPopup.showLongCenter(error)
@@ -481,13 +493,24 @@ export default {
       hlsUtil.baiduOcr(fileUrl, url, function (res) {
         hlsPopup.hideLoading()
         let result = res.result.words_result
-        console.log('识别结果: ' + result)
-        console.log('姓名: '+ result.姓名.words)
         vm.baseInfo.bp_name = result.姓名.words
         vm.baseInfo.id_card_no = result.公民身份号码.words
         vm.baseInfo.address_on_resident_booklit = result.住址.words
       })
     },
+    // 银行卡识别
+    bankCardIdentify (fileUrl) {
+      let vm = this
+      hlsPopup.showLoading('正在识别')
+      let url = process.env.ocrPath + '/baidu/ocr/bankCard'
+      hlsUtil.baiduOcr(fileUrl, url, function (res) {
+        hlsPopup.hideLoading()
+        let result = res.result.result
+        vm.bank.bank_account_num = result.bank_card_number
+        vm.bank.bank_full_name = result.bank_name
+        vm.bank.bank_card_type = result.bank_card_type
+      })
+    },
     successCall () {
       this.hideModal()
       this.getBankInfo()