bank-info.vue

<template>
  <h-view id="np-bank-card">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>银行信息</span>
      </div>
    </h-header>
    <h-content>
      <div id="bank-card">
        <div class="info">
          <div class="info-icon">
            <img src="@/assets/userBind/info.png" >
            <span>温馨提示</span>
          </div>
          <p>推荐使用农行卡，农行卡支付免收手续费!</p>
        </div>
        <div class="my-card">
          <div class="top">
            <div class="left">
              <img src="@/assets/userBind/bankIcon.png" class="icon" >
              <span class="top-word">
                我的卡
                <span class="sum">(共{{ getBankList.length }}张)</span>
              </span>
            </div>
            <img src="@/assets/userBind/add.png" class="icon-right" @click="showModal" >
          </div>
          <div class="clear" />
          <div class="card-content">
            <ul>
              <li v-for="(item,index) in getBankList" :key="index" >
                <item-option class="slider">
                  <div
                    :style="'background-image: url('+ changeBgImg (item) +')'"
                    class="my-bank-card"
                    @click="showModalInfo(item)"
                  >
                    <div class="card-info">
                      <span class="name">{{ item.bank_full_name }}</span>
                      <span class="card-type">{{ selectType(item.bank_card_type) }}</span>
                      <span class="number">卡号</span>
                      <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
                    </div>
                  </div>
                  <div slot="buttons" class="button">
                    <option-button type="warn" @click.native="deleteFun(item.bank_account_num)" />
                  </div>
                </item-option>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="save" @click.native="saveBankInfo">提交</tab-button>
    </bottom-tab>
    <h-modal ref="modal" v-model="showModalValue" position="bottom">
      <h-view>
        <div class="modal-content">
          <div class="modal-content-add-top">
            <span>添加银行卡</span>
            <img src="@/assets/userBind/close.png" @click="hideModal" >
          </div>
          <img
            v-if="!bankImg && !isApproved"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="bankImg"
            :src="bankImg"
            class="addBack"
            style="height: 38%;"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="isClear && isApproved && !bankImg"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="!bankImg && isApproved && !isClear"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <list-item :item-height="44" class="card-Info">
            <item>
              <div slot="name">银行卡卡号</div>
              <input
                slot="content"
                v-model="bank.bank_account_num"
                readonly
                placeholder="识别银行卡自动填充"
              >
            </item>
            <item>
              <div slot="name">账户姓名</div>
              <input slot="content" v-model="bank.bank_account_name" readonly placeholder="请输入账户名称" >
            </item>
            <item>
              <div slot="name">银行名称</div>
              <input slot="content" v-model="bank.bank_full_name" readonly placeholder="识别银行卡自动填充" >
            </item>
            <item>
              <div slot="name">支行名称</div>
              <input slot="content" v-model="bank.bank_branch_name" placeholder="请输入支行名称" >
            </item>
          </list-item>
        </div>
      </h-view>
      <bottom-tab class="add-box">
        <!-- v-if="!isApproved || (isClear && isApproved)"-->
        <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button>
      </bottom-tab>
    </h-modal>
  </h-view>
</template>
<script>
import backImg1 from '@/assets/userBind/nong.png'
import backImg2 from '@/assets/userBind/unNong.png'
export default {
  data () {
    return {
      backImg: null,
      showModalValue: false,
      bp_identity: JSON.parse(window.localStorage.getItem('handleUser')).bp_identity,
      bankList: [],
      isClear: false,
      certification_status: '',
      authUrl: '',
      bank: {
        bank_account_num: '',
        bank_account_name: '',
        bank_card_type: '',
        bank_full_name: '',
        bank_branch_name: '',
      },
      bankImg: '', // 银行卡图片
      getBankList: [],
      mysetTimeout: null,
    }
  },
  computed: {
    isApproved () {
      return JSON.parse(window.localStorage.getItem('handleUser')).bp_status === 'APPROVED'
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getBankInfo()
      vm.checkElectonic()
    })
  },
  methods: {
    successCall () {
      this.hideModal()
      this.getBankInfo()
      this.bank.bank_account_num = ''
      this.bank.bank_account_name = ''
      this.bank.bank_full_name = ''
      this.bank.bank_branch_name = ''
    },
    hideModal () {
      this.showModalValue = false
      this.isClear = true
      this.bank.bank_account_num = ''
      this.bank.bank_account_name = ''
      this.bank.bank_card_type = ''
      this.bank.bank_full_name = ''
      this.bank.bank_branch_name = ''
    },
    showModal () {
      this.showModalValue = true
      this.bankImg = ''
      this.bank.bank_account_name = JSON.parse(window.localStorage.getItem('handleUser')).bp_name
    },
    async checkElectonic () {
      let vm = this
      let id = JSON.parse(window.localStorage.getItem('handleUser')).bp_id
      let url = process.env.basePath + 'bp_elec_check'
      let param = {
        bp_id: id,
      }
      vm.hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      vm.hlsPopup.hideLoading()
      if (res.result === 'S') {
        vm.certification_status = res.info.certification_status
      } else {
        vm.hlsPopup.showLongCenter(res.message)
      }
    },
    saveBankInfo () {
      if (this.mysetTimeout !== null) {
        clearTimeout(this.mysetTimeout)
        this.mysetTimeout = setTimeout(() => {
          this.putData()
        }, 1000)
      } else {
        this.mysetTimeout = setTimeout(() => {
          this.putData()
        }, 1000)
      }
    },
    // 提交
    async putData () {
      let vm = this
      // 个人或授权人
      vm.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认提交吗？',
        onConfirm: d => {
          if (d) {
            if (vm.bp_identity === 'NP_NO' || vm.bp_identity === 'ORG_L_NO' || vm.bp_identity === 'ORG_AUTH_NO' || !vm.bp_identity) {
              vm.hlsPopup.showConfirm({
                title: '提示',
                content: '当前用户尚未认证，是否需要认证',
                cancelText: '直接提交',
                confirmText: '先去认证',
                onConfirm: c => {
                  if (c) {
                    // 只有自然人需要认证
                    let url = process.env.basePath + 'bp_query'
                    let param = {
                      bp_id: JSON.parse(window.localStorage.getItem('handleUser')).bp_id,
                    }
                    hlsPopup.showLoading('请稍候')
                    vm.hlsHttp.post(url, param).then((result) => {
                      hlsPopup.hideLoading()
                      if (result.result === 'S') {
                        let data = result.lists[0]

                        cordova.plugins.IdCardPlugin.registerNotary(
                          async function (suc) {
                            console.log(suc)
                            let success = JSON.parse(suc)
                            let successString = JSON.stringify(suc)
                            console.log(success)
                            console.log(successString)
                            // 成功后需要回调hls bp master 表，更新字段 是否签署码设置
                            vm.updateSigningCode(JSON.parse(window.localStorage.getItem('handleUser')).bp_id, 'Y', '')
                            vm.getNpCertificationUrl()
                          },
                          function (reason) {
                            console.log(reason)
                            let error = JSON.parse(reason)
                            let errorString = JSON.stringify(reason)
                            console.log(error)
                            console.log(errorString)
                          },
                          data.id_card_no,
                          data.bp_name,
                          true
                        )
                        /* cordova.plugins.IdCardPlugin.idCardIdentify(
                          {
                            idNum: data.id_card_no,
                            idName: data.bp_name,
                            phoneNum: window.localStorage.user_phone,
                          },
                          function (suc) {
                            let success = JSON.parse(suc)
                            if (success.code === 1) {
                              vm.getNpCertificationUrl()
                            }
                          },
                          function (reason) {
                            let error = JSON.parse(reason)
                            vm.hlsPopup.showLongCenter('认证失败: ' + error.message)
                          }
                        ) */
                      } else {
                        vm.hlsPopup.showLongCenter(result.message)
                      }
                    })
                  } else {
                    // 不校验的也直接提交
                    vm.submitBind()
                  }
                },
              })
            } else {
              // 已认证过的用户直接提交
              vm.submitBind()
            }
          }
        },
      })
    },
    async submitBind () {
      let vm = this
      let url = $config.basePath + 'bp_bind_submit'
      let param = {
        master: {
          bp_id: JSON.parse(window.localStorage.getItem('handleUser')).bp_id,
          bp_class: 'ORG',
          bp_type: JSON.parse(window.localStorage.getItem('handleUser')).bp_type,
          business_num: window.localStorage.getItem('business_num'),
        },
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('提交成功')
          vm.$router.push({
            name: 'MyInfo',
          })
        } else if (res.result === 'P') {
          vm.hlsPopup.showLongCenter(res.message)
          vm.$router.push({
            name: 'MyInfo',
          })
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 获取个人认证url
    async getNpCertificationUrl () {
      let vm = this
      let url = $config.basePath + 'auth_user_sign'
      let param = {
        phone: window.localStorage.user_phone,
        bp_id: JSON.parse(window.localStorage.getItem('handleUser')).bp_id,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if (res.info.code === 0 && res.info.data.authUrl) {
        hlsPopup.showLongCenter('绑定失败！')
      } else if (res.info.code === 0 && res.info.data.openId) {
        hlsPopup.showLongCenter('绑定成功！')
        vm.submitBind()
      } else {
        hlsPopup.showLongCenter(res.info.msg)
      }
    },
    addBankInfo () {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认添加吗？',
        onConfirm: data => {
          if (data === 1) {
            let bpName = JSON.parse(window.localStorage.getItem('handleUser')).bp_name
            if (
              this.bank.bank_account_num === '' ||
              this.bank.bank_account_name === '' ||
              this.bank.bank_full_name === ''
            ) {
              this.hlsPopup.showLongCenter('请输入完整字段')
            } else if (this.hlsUtil.isBankAccount(this.bank.bank_account_num)) {
              this.hlsPopup.showLongCenter('银行卡号有误')
            } else if (this.bank.bank_account_name !== bpName) {
              this.hlsPopup.showLongCenter('请输入本人银行卡')
            } else {
              let list = JSON.parse(JSON.stringify(this.bank))
              this.bankList.push(list)
              let vm = this
              let url = process.env.basePath + 'bp_bank_save'
              let param = {
                master: {
                  bp_id: JSON.parse(window.localStorage.getItem('handleUser')).bp_id,
                  bank_lists: this.bankList,
                },
              }
              vm.hlsPopup.showLoading('请稍候')
              vm.hlsHttp.post(url, param).then(function (res) {
                vm.hlsPopup.hideLoading()
                if (res.result === 'S') {
                  vm.successCall()
                  vm.hlsPopup.showLongCenter('保存成功')
                  setTimeout(vm.successCall, 2000)
                }
              })
            }
          }
        },
      })
    },
    updateSigningCode (bp_id, flag, code) {
      let vm = this
      let url = $config.basePath + 'update_signing_code'
      let param = {
        bp_id: bp_id,
        signing_code_flag: flag,
        signing_code: code,
      }
      let res = vm.$post(url, param)
      if (res.result === 'S') {

      } else {
        hlsPopup.showLongCenter(res.info.msg)
      }
    },
    selectType (e) {
      if (e === '0') {
        return '未知类型'
      } else if (e === '1') {
        return '借记卡'
      } else if (e === '2') {
        return '信用卡'
      }
    },
    showModalInfo (item) {
      Object.assign(this.bank, item)
      this.showModalValue = true
    },
    getBankInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_bank_query'
      let param = {
        bp_id: JSON.parse(window.localStorage.getItem('handleUser')).bp_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp
        .post(url, param)
        .then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.getBankList = res.lists
          }
        })
        .catch(() => {
          this.hlsPopup.showLongCenter('传入参数异常')
        })
    },
    changeBgImg (item) {
      if (item.bank_full_name.indexOf('农业银行') !== -1) {
        return backImg1
      } else {
        return backImg2
      }
    },
    selectLast (item) {
      let num = item.bank_account_num
      return num.substring(num.length - 4)
    },
    deleteFun (e) {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认删除吗？',
        onConfirm: data => {
          if (data === 1) {
            let index = this.getBankList.findIndex(item => {
              if (item.bank_account_num === e) {
                return true
              }
            })
            this.getBankList.splice(index, 1)
            let vm = this
            let url = process.env.basePath + 'bp_bank_delete'
            let param = {
              'master': {
                'bp_id': JSON.parse(window.localStorage.getItem('handleUser')).bp_id,
                'bank_account_num': e,
              },
            }
            vm.hlsPopup.showLoading('请稍候')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                vm.hlsPopup.showSuccess('删除成功')
              } else {
                vm.hlsPopup.showLongCenter(res.message)
              }
            })
          }
        },
      })
    },
    ocrShow (ocrType, type) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera(ocrType, type)
          } else {
            vm.takePicture(ocrType, type)
          }
        },
      })
    },
    openCamera (ocrType, type) {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          if (ocrType === 'idCard') {
            type === 'front'
              ? ((vm.idCardFront = hlsUtil.convertImageUrl(imgdata)),
              vm.idCardIdentify(imgdata, 'idCard'),
              (vm.idCardFrontEditFlag = true))
              : ((vm.idCardBack = hlsUtil.convertImageUrl(imgdata)),
              vm.idCardBackIdentify(imgdata, 'idCard'),
              (vm.idCardBackEditFlag = true))
          } else if (ocrType === 'idCardSp') {
            // 配偶身份证识别
            type === 'front'
              ? ((vm.idCardFrontSp = hlsUtil.convertImageUrl(imgdata)),
              vm.idCardIdentify(imgdata, 'idCardSp'),
              (vm.idCardFrontSpEditFlag = true))
              : ((vm.idCardBackSp = hlsUtil.convertImageUrl(imgdata)),
              vm.idCardBackIdentify(imgdata, 'idCardSp'),
              (vm.idCardBackSpEditFlag = true))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = hlsUtil.convertImageUrl(imgdata)
            vm.bankCardIdentify(imgdata)
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture (ocrType, type) {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          if (ocrType === 'idCard') {
            type === 'front'
              ? ((vm.idCardFront = hlsUtil.convertImageUrl(imgUrl[0])),
              vm.idCardIdentify(imgUrl[0], 'idCard'),
              (vm.idCardFrontEditFlag = true))
              : ((vm.idCardBack = hlsUtil.convertImageUrl(imgUrl[0])),
              vm.idCardBackIdentify(imgUrl[0], 'idCard'),
              (vm.idCardBackEditFlag = true))
          } else if (ocrType === 'idCardSp') {
            // 配偶身份证识别
            type === 'front'
              ? ((vm.idCardFrontSp = hlsUtil.convertImageUrl(imgUrl[0])),
              vm.idCardIdentify(imgUrl[0], 'idCardSp'),
              (vm.idCardFrontSpEditFlag = true))
              : ((vm.idCardBackSp = hlsUtil.convertImageUrl(imgUrl[0])),
              vm.idCardBackIdentify(imgUrl[0], 'idCardSp'),
              (vm.idCardBackSpEditFlag = true))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.bankCardIdentify(imgUrl[0])
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 银行卡识别
    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.replace(/\s*/g, '')
        vm.bank.bank_full_name = result.bank_name
        vm.bank.bank_card_type = result.bank_card_type
      })
    },
  },
}
</script>
<style lang="less">
  #np-bank-card {
      .info {
        height: 70px;
        background-color: rgba(142, 195, 30, 0.1);
        .info-icon {
          height: 20px;
          padding-top: 20px;
          display: flex;
          align-items: center;
          img {
            width: 15.8px;
            height: 15.8px;
            margin-left: 17.1px;
          }
          span {
            font-family: PingFangSC-Semibold;
            font-size: 14px;
            color: #8ec31e;
            margin-left: 9px;
            letter-spacing: 0.5px;
            line-height: 20px;
          }
        }
        p {
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #656464;
          width: 310px;
          margin-left: 42px;
          letter-spacing: 0.4px;
          line-height: 18px;
          margin-top: 8px;
        }
      }
      .my-card {
        .top {
          width: 320px;
          margin: 0 auto;
          margin-top: 13px;
          .left {
            height: 32px;
            display: flex;
            align-items: center;
            float: left;
            .icon {
              width: 18px;
              height: 20px;
              margin-right: 4px;
            }
            .top-word {
              font-family: PingFangSC-Semibold;
              font-size: 15px;
              color: @headerColor;
              letter-spacing: 0.46px;
              .sum {
                font-family: PingFangSC-Semibold;
                font-size: 15px;
                color: #4d5d6c;
                letter-spacing: 0.46px;
              }
            }
          }
          .icon-right {
            width: 34px;
            height: 34px;
            float: right;
          }
        }
        .clear {
          clear: both;
        }
        .card-content {
          width: 350px;
          padding-left: 28px;
          overflow: hidden;
          margin-top: 16px;
          li {
            margin-bottom: 10px;
            .slider {
              height: 100%;
              margin-left: -14px;
            }
          }
          .my-bank-card {
            width: 320px;
            height: 190px;
            box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
            border-radius: 6px;
            background-size: 370px 240px;
            background-position: -20px;
            .card-info {
              font-family: PingFangSC-Medium;
              color: #ffffff;
              margin-left: 18px;
              padding-top: 15px;
              .name,
              .card-type {
                font-size: 16px;
                letter-spacing: 5.5px;
                line-height: 24px;
              }
              .card-type {
                display: block;
                margin-top: 9px;
              }
              .number {
                font-size: 12px;
                letter-spacing: 0;
                line-height: 16px;
                margin-top: 33px;
                display: block;
                margin-top: 33px;
              }
              .card-number {
                display: block;
                font-family: Avenir-Heavy;
                font-size: 16px;
                color: #ffffff;
                letter-spacing: 6px;
                line-height: 24px;
              }
            }
          }
        }
      }
      .swipeout-list .item .function {
        left: 330px;
        border-radius: 6px;
        width: 54px;
        height: 190px;
        background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8
        no-repeat;
        background-size: 20px 20px;
      }
    .save {
    color: #fdb62f;
    border-radius: 4px;
    border: 1px solid #fdb62f;
    background-color: #fafafa;
  }
       .modal-content {
    width: 100%;
    height: 75%;
    position: absolute;
    top: 25%;
    background-color: #fff;
    overflow-y: scroll;
    .modal-content-add-top {
      width: 320px;
      height: 34px;
      line-height: 34px;
      padding-top: 10px;
      background-color: #fff;
      padding-bottom: 40px;
      position: fixed;
      left: 28px;
      span {
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: @headerColor;
        letter-spacing: 0.47px;
      }
      img {
        width: 34px;
        height: 34px;
        float: right;
      }
    }
    .addBack {
      display: block;
      width: 320px;
      margin: 0 auto;
      margin-top: 50px;
      border-radius: 6px;
      margin-bottom: 17px;
    }

    .card-Info {
      margin-bottom: 220px;
    }

  }
     .add-card {
    width: 358px;
    height: 40px;
    background: @headerColor;
    border-radius: 4px;
    color: #fff;
  }
    }
    .modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>