lc-bank

银行卡列表，集成常用银行的图标，生成银行列表，一般配合popup使用或在独立页上显示。

效果

使用方法

<template>
  <div class="wxc-demo">
    <lc-title title="lc-bank"></lc-title>
    <category title="使用案例"></category>

    <div class="btn" @click="openPopup">
        <text class="btn-txt">点击选择银行卡</text>
    </div>

    <lc-popup 
            :show="isPopShow"
            pos="bottom"
            height="800"
            @LcPopupOverlayClicked="isPopShow=false">
      <lc-bank
        :list="cardList"
        @bankSelected="selectHandler"
      ></lc-bank>
    </lc-popup>

  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }
  .btn {
    width: 600px;
    height: 80px;
    margin-top: 150px;
    margin-left: 75px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #399de2;
    border-color: #399de2;
  }
  .btn-txt{
    color: #ffffff;
    font-size: 26px;
  }
</style>

<script>
  import LcPopup from 'lighting-ui/packages/lc-popup';
  import LcBank from 'lighting-ui/packages/lc-bank';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcTitle from 'lighting-ui/packages/_mods/title.vue';

  export default {
    components: { LcTitle, Category, LcPopup, LcBank },
    data: () => ({
      cardList: [],
      isPopShow: false
    }),
    created () {
            this.cardList = [
                {
                    bank: 'abc',
                    num: '2314',
                    balance: 136123.00,
                    tradeLimit: 50,
                    dayLimit: 100,
                    special: '1折起',
                    visa: false
                },
                {
                    bank: 'cmb',
                    num: '8732',
                    balance: 136123.00,
                    tradeLimit: 50,
                    dayLimit: 100,
                    visa: false
                },
                {
                    bank: 'icbc',
                    num: '8732',
                    balance: 136123.00,
                    tradeLimit: 50,
                    dayLimit: 100,
                    visa: true
                },
                {
                    bank: 'boc',
                    num: '3456',
                    balance: 136123.00,
                    tradeLimit: 50,
                    dayLimit: 100,
                    visa: true
                },
                {
                    bank: 'cmbc',
                    num: '7523',
                    balance: 136123.00,
                    tradeLimit: 50,
                    dayLimit: 100,
                    visa: true
                },
                {
                    bank: 'psbc',
                    num: '5654',
                    balance: 136123.00,
                    tradeLimit: 50,
                    dayLimit: 100,
                    visa: true
                }
            ]
    },
    methods: {
      selectHandler(data){
        console.log(data)
        setTimeout(()=>{this.isPopShow = false},300)
      },
      openPopup(){
        this.isPopShow = true;
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
list	Array	Y		银行卡信息列表
bankSelected	Function	Y		选择银行卡的回调

• 1：list中每一项必须包含银行简称
• 2：银行卡对应表，可自行拓展：

  {
    icbc:{
       name: '工商银行',
       icon:  ''
    },
    cmb:{
        name:'招商银行',
        icon:''
    },
    boc:{
        name:'中国银行',
        icon:''
    },
    spdb:{
        name:'浦发银行',
        icon:''
    },
    bos:{
        name:'上海银行',
        icon:''
    },
    cib:{
        name:'兴业银行',
        icon:''
    },
    citic:{
        name:'中信银行',
        icon: ''
    },
    abc:{
        name:'农业银行',
        icon:''
    },
    ccb:{
        name:'建设银行',
        icon:''
    },
    cmbc:{
        name: '民生银行',
        icon: ''
    },
    hxb:{
        name: '华夏银行',
        icon: ''
    },
    psbc:{
        name:'邮储银行',
        icon: ''
    },
    bocom:{
        name:'交通银行',
        icon:''
    },
    ceb:{
        name:'光大银行',
        icon:''
    }
  }