powerjob_front/src/views/hlgpayment/modules/HlgPaymentRechargeModal.vue

<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    :footer="null"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row type="flex" align="middle" justify="space-between">
          <a-col :span="12">
            <a-form-item label=" " :colon="false" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <span style="font-weight: bold">请使用企业对公账户打款到以下账户：</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" v-for="(item,index) in subcontractor" :key="index">
            <a-form-item label=" " :colon="false" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <div class="ant-alert ant-alert-info" style="padding: 8px 15px 8px 15px;">
                <a-form-item label="公司名称" :colon="true" :labelCol="labelCol" :wrapperCol="wrapperCol"
                             style="margin-bottom: 10px">
                  {{model.subcontractorName}}
                </a-form-item>
                <a-form-item label="银行卡号" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom: 10px">
                  {{item.bankAccount}}
                </a-form-item>
                <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom: 10px">
                  {{item.bankName}}
                </a-form-item>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <a-spin :spinning="confirmLoading">
      <a-row type="flex" align="middle" justify="space-between">
        <a-col :span="12">
          <a-form-item label=" " :colon="false" :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-bottom: 0">
            <span style="font-weight: bold">立即打款：</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" align="middle" justify="center">
        <a-col :span="19">
          <a-row type="flex" align="middle" justify="space-between">
            <a-col :span="6" v-for="(item,index) in logo_list" :key="index" style="margin-top: 30px">
              <a-row type="flex" align="middle">
                <a-col>
                  <a :href="item.link" target="_blank" style="text-decoration: none">
                    <img class="logo-img"
                         :src="item.logo_link"
                         alt="">
                    {{item.name}}
                  </a>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>

  import { getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import JDate from '@/components/jeecg/JDate'

  export default {
    name: 'HlgPaymentRechargeModal',
    components: {
      JDate
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 1200,
        bodyStyle: {
          paddingTop: '20px',
          paddingBottom: '30px',
          maxHeight: (window.innerHeight * 0.62) + 'px',
          'overflow-y': 'auto'
        },
        visible: false,
        is_show: true,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        subcontractor: [],
        subcontractorName: '',
        confirmLoading: false,
        url: {
          detail: '/hlgaccount/hlgAccount/getSubcontractorBankInformation'
        },
        logo_list: [
          {
            name: '招商银行',
            link: 'http://www.cmbchina.com/',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/CMB.png'
          },
          {
            name: '中国银行',
            link: 'https://ebsnew.boc.cn/boccp/login.html?entryType=9',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/BOC.png'
          },
          {
            name: '中国工商银行',
            link: 'https://corporbank-simp.icbc.com.cn/icbc/normalbank/index.jsp',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/ICBC.png'
          },
          {
            name: '中国农业银行',
            link: 'http://www.abchina.com/cn/wydl/CCustomerLogin/',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/ABC.png'
          },
          {
            name: '中国建设银行',
            link: 'http://company1.ccb.com/cn/home/company_indexv3.html',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/CCB.png'
          },
          {
            name: '中国邮政储蓄银行',
            link: 'http://www.psbc.com/data/corpbank/index.html',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/PSBC.png'
          },
          {
            name: '江苏银行',
            link: 'https://cbank.jsbchina.cn/corporbank/',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/JSB.png'
          },
          {
            name: '中信银行',
            link: 'https://corp.bank.ecitic.com/cotb/login.html',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/CITICB.png'
          },
          {
            name: '光大银行',
            link: 'https://e.cebbank.com/cebent/prelogin.do?_locale=zh_CN',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/CEB.png'
          },
          {
            name: '兴业银行',
            link: 'https://corporatebank.cib.com.cn/firm/main/login.do',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/CIB.png'
          },
          {
            name: '华夏银行',
            link: 'https://dbank.hxb.com.cn/gluebanking/index.jsp',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/HX.png'
          },
          {
            name: '南京银行',
            link: 'https://ebank.njcb.com.cn/corporbank/login.jsp',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/NJCB.png'
          },
          {
            name: '平安银行',
            link: 'https://ebank.sdb.com.cn/corporbank/logon_basic.jsp',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/SDB.png'
          },
          {
            name: '浦发银行',
            link: 'https://ebank.spdb.com.cn/newent/gb/login/prof.jsp',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/SPDB.png'
          },
          {
            name: '广发银行',
            link: 'https://ebank.cgbchina.com.cn/corporbank/',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/CGB.png'
          },
          {
            name: '宁波银行',
            link: 'https://cb.nbcb.com.cn/',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/NBCB.png'
          },
          {
            name: '恒丰银行',
            link: 'https://co.hfbank.com.cn/',
            logo_link: window._CONFIG['imgDomainOssURL'] + '/uploadfiles/hlgjob/hlgbank/HF.png'
          }
        ]
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true
        this.getCompany(this.model)
      },
      close() {
        this.$emit('close')
        this.$destroyAll()
        this.visible = false
      },
      handleOk() {
        this.close()
      },
      handleCancel() {
        this.close()
      },
      getCompany(record) {
        getAction(this.url.detail, {
          subcontractorId: record.subcontractorId,
          cpType: record.cpType
        }).then(data => {
          this.subcontractor = data.result.bankList
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .logo-img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }
</style>