@mas.io/rights-center-card NPM

安装

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

@mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.0.3

3 years ago