lighting-ui/packages/lc-bank/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-bank

> 银行卡列表

### 规则
  - 集成常用银行的图标，生成银行列表,一般配合popup使用或独立页上显示
  
## [Demo](http://res.lightyy.com/lightui/example/bank/?_wx_tpl=http%3A%2F%2Fres.lightyy.com%2Flightui%2Fexample%2Fbank%2Findex.native.js)

<img src="./bank.png" width="240"/>
<img src="./bank-scan.png" width="160">

## 使用方法

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

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

    <lc-popup 
            :show="isPopShow"
            pos="bottom"
            height="800">
      <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: rgb(92, 184, 92);
    border-color: rgb(76, 174, 76);
  }
  .btn-txt{
    color: #ffffff;
    font-size: 26px;
  }
</style>

<script>
  import { LcPopup, LcBank } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';

  export default {
    components: { Title, 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)
      },
      openPopup(){
        this.isPopShow = true;
      }
    }
  };
</script>





```

### API
| 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:''
  }
}



```