安装

tnpm install --save @alipay/rights-center-card

组件介绍

权益卡片组件，针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: img | 否 | string | 卡片图片 | '' | 'https://gw.alipayobjects.com/mdn/rms_a0c592/afts/img/A*mmjnRIrPYP0AAAAAAAAAAABkARQnAQ' data | 否 | any | 绑定在卡片的数据 | null | {data:test} direction | 否 | string | 卡片显示布局，横向row，纵向column | row | row，column topRightTag | 否 | string | 卡片右上角标签,横向卡片可用 | '' | 限时特惠 snapped | 否 | number | 已抢人数 | 0 | 10 cardInfo | 否 | string | 卡片状态信息 | '' | 已抢完 backgroundColor | 否 | string | 卡片背景色 | '#fff' | '#fff' priceIcon | 否| string | 三级标题符号 | '' | '¥' title | 否 | string | 卡片标题 | '' | 标题 subTitle | 否| string | 副标题 | '' | subTitle salePrice | 否| string | 售价 | '' | '30' price | 否| string | 原价 | '' | '20' btnText | 否 | string | 按钮文本| 按钮 | 按钮 disabled | 否 | boolean | 禁用按钮 | false | false cardDisabled | 否 | boolean | 卡片是否可以点击 | false | false tags | 否 | array | 纵向卡片标签，只支持2个标签 | [] | [{desc: '代金券'}] onBtnTap | 否 | Function | 点击卡片按钮触发,返回绑定的data | null | ()=>{} onCardTap | 否 | Function | 点击卡片触发,返回绑定的data | null | ()=>{}

在小程序中使用

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

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<mas-card
  title="{{title}}"
  cardDisabled="{{cardDisabled}}"
  topRightTag="{{topRightTag}}"
  direction="row"
  img={{img}}
  subTitle="{{subTitle}}"
  price="{{price}}"
  salePrice="{{salePrice}}"
  btnText="{{btnText}}"
  disabled="{{disabled}}"
  tags="{{tags}}"
  onBtnTap="handleBtnClick"
  onCardTap="handCardClick"/>

在 index.js 中引用组件

Page({
  data: {
    data: { data: 'test' },
    img: 'https://gw.alipayobjects.com/mdn/rms_a0c592/afts/img/A*mmjnRIrPYP0AAAAAAAAAAABkARQnAQ',
    direction: 'column', // column,row
    topRightTag: '限时特惠',
    snapped: 10,
    cardInfo: '已抢完',
    title: '全国洗车卡',
    subTitle: '多店即享',
    price: '20',
    btnText: '立即抢购',
    disabled: false,
    salePrice: '30',
    cardDisabled: false,
    priceIcon: '¥',
    backgroundColor: '#fff',
    disabledBtn: true,
    btnTextEnd: '已结束',
    tags: [
      {
        desc: '代金券',
      },
      {
        desc: '认证专享',
      },
    ],
  },
  onLoad() {},
  handleBtnClick(data) {
    my.alert({
      content: `点击了按钮:${JSON.stringify(data)}`,
      buttonText: 'ok',
    });
  },
  handCardClick(data) {
    my.alert({
      content: `点击了卡片:${JSON.stringify(data)}`,
      buttonText: 'ok',
    });
  },
});

Badges

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