安装

tnpm install --save @alipay/mas-bank-card

组件介绍

行业小程序银行卡组件，此组件有未绑卡和已绑卡两种状态。

参数说明

未绑卡状态传值

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: binded | 否 | Boolean | 绑卡状态 | false(未绑卡) | -- unbindedBackgroundUrl | 否 | String | 未绑卡背景底图 | 默认有图 | -- title | 否 | String | 未绑卡状态提示title(binded为false生效) | 绑定本人银行卡 | -- desc | 否 | String | 未绑卡状态提示详细描述(binded为false生效) | 绑定后可提取公积金到此卡 | -- onClick | 是 | Function | 点击绑卡回调 | '' | -- value | 否 | any | 如果业务需要可传,在回调onClick(bindedValue)接收 | '' | -- className | 否 | String | class类名 | - | --

已绑卡状态传值

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: binded | 是(要传true) | Boolean | 绑卡状态 | false(未绑卡) | -- bindedBackgroundUrl | 是 | String | 背景底图 | - | -- bankIconUrl | 否 | String | 银行图标 | - | -- bankName | 是 | String | 银行名称 | '' | -- bankCardType | 否 | String | 银行卡类型 | - | -- bankCardNumber | 是 | String | 银行卡号(接受带格式的字符串) | '' | '**** **** **** 8989' operationText | 否 | String | 右边操作文案(为空则不显示右边操作) | '' | -- onClick | 否 | Function | 点击替换或其他操作,存在operationText生效 | '' | -- value | 否 | any | 如果业务需要可传,在回调onClick(bindedValue)接收 | '' | -- className | 否 | String | class类名 | - | --

在小程序中使用

{
  "usingComponents": {
    "mas-bank-card": "@alipay/mas-bank-card/es/index"
  }
}

在 page.axml 中引用组件

未绑卡:

<!-- 页面使用方式 -->
 <mas-bank-card
    title="{{title}}"
    desc="{{desc}}"
    onClick="onClick"
    value="{{value}}"
    className="{{className}}"
 />

已绑卡:

<!-- 页面使用方式 -->
 <mas-bank-card
    binded="{{true}}"
    bindedBackgroundUrl="{{bindedBackgroundUrl}}"
    bankIconUrl="{{bankIconUrl}}"
    bankName="{{bankName}}"
    bankCardType="{{bankCardType}}"
    bankCardNumber="{{bankCardNumber}}"
    operationText="{{operationText}}"
    onClick="onClick"
    value="{{value}}"
    className="{{className}}"
 />

Badges

[![install size][install-size-image]][install-size-url]