bankInfo.vue

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-24 21:29:35
 * @LastEditTime : 2019-12-24 16:25:09
 * @LastEditors  : Please set LastEditors
 -->
<template>
  <h-view id="bankInfo" class="public-style">
    <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>
    <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="sendFlag" >
      </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="sendList(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 text @click.native="deleteFun(item.bank_account_num)" />
              </div>
            </item-option>
          </li>
        </ul>
      </div>
    </div>
    <bottom-tab class="footer-button">
      <tab-button class="save" @click.native="handSubmit">提交</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"
            src="@/assets/userBind/addBack.png"
            class="addBack"
            @click="ocrShow('bankCard', '')"
          >
          <img
            v-if="bankImg"
            :src="bankImg"
            class="addBack"
            style="height: 38%;"
            @click="ocrShow('bankCard', '')"
          >
          <list-item :item-height="44" class="card-Info">
            <item>
              <div slot="name">银行卡卡号</div>
              <input
                slot="content"
                v-model="bank_lists.bank_account_num"
                readonly
                placeholder="识别银行卡自动填充"
              >
            </item>
            <item>
              <div slot="name">账户姓名</div>
              <input slot="content" v-model="bank_lists.bank_account_name" placeholder="请输入账户名称">
            </item>
            <item>
              <div slot="name">银行名称</div>
              <input
                slot="content"
                v-model="bank_lists.bank_full_name"
                readonly
                placeholder="识别银行卡自动填充"
              >
            </item>
            <item>
              <div slot="name">支行名称</div>
              <input slot="content" v-model="bank_lists.bank_branch_name" placeholder="请输入支行名称">
            </item>
          </list-item>
        </div>
      </h-view>
      <bottom-tab class="add-box">
        <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 {
      from: false,
      authUrl: '', // 电子签url
      errorMsg: '',
      bp_id: '',
      bankImg: '', // 银行卡图片
      isApproved: false,
      backImg: null,
      getBankList: [],
      bank_lists: {
        bank_account_num: '', // 卡号
        bank_account_name: '', // 账户姓名
        bank_card_type: '', // 类型（信用卡/借记卡/未知）
        bank_full_name: '', // 银行名称
        bank_branch_name: '', // 支行
      },
      showModalValue: false,
      bank_card_flag: false, // 银行卡信息是否完整
      certification_status: '', // 电子签认证状态值Y/N
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'Enclosure') {
        vm.getBankList = []
        vm.bank_lists = {
          bank_account_num: '', // 卡号
          bank_account_name: '', // 账户姓名
          bank_card_type: '', // 类型（信用卡/借记卡/未知）
          bank_full_name: '', // 银行名称
          bank_branch_name: '', // 支行
        }
        vm.bankImg = '' // 银行卡图片
        vm.authUrl = ''
        vm.errorMsg = ''
        vm.showModalValue = false
        vm.bank_card_flag = false
        vm.certification_status = ''
        vm.getBankInfo()
        vm.electQuery()
        /* if (window.localStorage.bp_identity === 'ORG_NO') {
          vm.getOrgCertificationUrl() // 获取企业认证url
        } else {
          vm.getNpCertificationUrl()
        } */
      }
    })
  },
  methods: {
    // 银行卡查询
    getBankInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_bank_query'
      let param = {
        bp_id: vm.$route.params.bp_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.getBankList = res.lists
        }
      })
    },
    // 电子签认证状态查询
    electQuery () {
      let vm = this
      let url = process.env.basePath + 'bp_elec_check'
      let param = {
        bp_id: vm.$route.params.bp_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.certification_status = res.info.certification_status
        }
      })
    },
    hideModal () {
      this.showModalValue = false
    },
    selectType (e) {
      if (e === '0') {
        return '未知类型'
      } else if (e === '1') {
        return '借记卡'
      } else if (e === '2') {
        return '信用卡'
      }
    },
    sendFlag () {
      this.showModalValue = true
    },
    sendList (a) {
      this.sendFlag()
      this.bank_lists = a
    },
    changeBgImg (item) {
      if (item.bank_full_name.indexOf('农业银行') !== -1) {
        return backImg1
      } else {
        return backImg2
      }
    },
    selectLast (item) {
      console.log('item', 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': this.$route.params.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)
              }
            })
          }
        },
      })
    },
    throttle (func, wait) { // 节流
      let previous = 0
      return function () {
        let now = +new Date()
        let remain = wait - (now - previous)

        if (remain < 0) {
          previous = now
          func.call(this, arguments)
        }
      }
    },
    putData () {
      this.throttle(this.handSubmit(), 3000)
    },
    // 提交
    async handSubmit () {
      let vm = this
      // if (window.localStorage.bp_identity === 'ORG_NO') {
      //   var urlTemp = await vm.getOrgCertificationUrl() // 获取企业认证url
      // } else {
      var urlTemp = await vm.getNpCertificationUrl()
      // }
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认提交吗？',
        onConfirm: data => {
          if (data) {
            let url = $config.basePath + 'bp_bind_submit'
            let param = {
              master: {
                bp_id: this.$route.params.bp_id,
                company_id: '2145',
                bp_class: 'ORG',
                bp_type: window.localStorage.getItem('bp_type'),
                business_num: window.localStorage.getItem('business_num'),
              },
            }
            let vm = this
            vm.hlsPopup.showLoading('请稍候')
            vm.hlsHttp.post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                vm.hlsPopup.showSuccess('提交成功')
                if (urlTemp) {
                  if (vm.certification_status === 'Y') {
                    vm.$router.push({
                      name: 'MyInfo',
                    })
                  } else {
                    if (vm.authUrl) {
                      // vm.$router.push({
                      //   name: 'Certification',
                      //   params: {
                      //     authUrl: vm.authUrl,
                      //   },
                      // })
                      const u = navigator.userAgent
                      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
                      if (isiOS) {
                        cordova.InAppBrowser.open(vm.authUrl, '_blank', 'location=yes')
                        console.log('ios')
                      } else {
                        vm.$router.push({
                          name: 'Certification',
                          params: {
                            authUrl: vm.authUrl,
                          },
                        })
                        console.log('android')
                      }
                    } else {
                      vm.$router.push({
                        name: 'MyInfo',
                      })
                    }
                  }
                } else {
                  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,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if ((res.info.code === 0) && (res.info.data.authUrl)) {
        vm.authUrl = res.info.data.authUrl
        return vm.authUrl
      } else if ((res.info.code === 0) && (res.info.data.openId)) {
        vm.authUrl = res.info.data.openId
        return vm.authUrl
      } else {
        // hlsPopup.showError(res.info.msg)
        // vm.errorMsg = res.info.msg
        return ''
      }
    },
    // 获取企业认证url
    // async getOrgCertificationUrl () {
    //   let vm = this
    //   let url = $config.basePath + 'auth_company_sign'
    //   let param = {
    //     phone: window.localStorage.user_phone,
    //   }
    //   hlsPopup.showLoading('请稍候')
    //   let res = await vm.$post(url, param)
    //   hlsPopup.hideLoading()
    //   if ((res.info.code === 0) && (res.info.data.authUrl)) {
    //     vm.authUrl = res.info.data.authUrl
    //     return vm.authUrl
    //   } else if((res.info.code === 0) && (res.info.data.openId)){
    //     vm.authUrl = res.info.data.openId
    //     return vm.authUrl
    //   } else {
    //     hlsPopup.showError(res.info.msg)
    //     return ''
    //     //vm.errorMsg = res.info.msg
    //   }
    // },
    // ocr识别入口
    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 {
          vm.bankImg = 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 {
          vm.bankImg = 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_lists.bank_account_num = result.bank_card_number.replace(/\s*/g, '')
        vm.bank_lists.bank_full_name = result.bank_name
        vm.bank_lists.bank_card_type = result.bank_card_type
      })
    },
    addBankInfo () {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认添加吗？',
        onConfirm: data => {
          if (data === 1) {
            if (!this.bank_lists.bank_account_num || !this.bank_lists.bank_account_name || !this.bank_lists.bank_full_name) {
              this.bank_card_flag = false
              this.hlsPopup.showLongCenter('银行信息不完整！')
            } else {
              this.bank_card_flag = true
            }
            // 银行卡验证this.hlsUtil.isBankAccount(this.bank.bank_account_num)
            if (this.hlsUtil.isBankAccount(this.bank_lists.bank_account_num)) {
              this.bank_card_flag = false
              this.hlsPopup.showLongCenter('请输入正确银行卡号！')
            }
            if (this.bank_card_flag) {
              this.hlsPopup.showLoading('请稍后')
              let url = $config.basePath + 'bp_bank_save'
              let param = {
                master: {
                  bp_id: this.$route.params.bp_id,
                  bank_lists: [this.bank_lists],
                },
              }
              let vm = this
              vm.hlsHttp.post(url, param).then(function (res) {
                if (res.result === 'S') {
                  vm.hlsPopup.hideLoading()
                  vm.showModalValue = false
                  vm.hlsPopup.showSuccess('添加成功')
                  vm.bankImg = ''
                  vm.bank_card_flag = false
                  vm.bank_lists = {
                    bank_account_num: '', // 卡号
                    bank_account_name: '', // 账户姓名
                    bank_card_type: '', // 类型（信用卡/借记卡/未知）
                    bank_full_name: '', // 银行名称
                    bank_branch_name: '', // 支行
                  }
                  vm.getBankInfo()
                }
              })
            }
          }
        },
      })
    },
  },
}
</script>
<style lang="less">
#bankInfo {
    .footer-button {
      padding-top: 15px;
      padding-bottom: 15px;
    }
    .save {
      width: 100%;
      height: 45px;
      color: #fff;
      border-radius: 4px;
      background-color: @headerColor;
    }
    .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;
    }
    .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;
      }
}
</style>