@mas.io/mas-cs-shop-card NPM

安装

tnpm install --save @alipay/mas-cs-shop-card

组件介绍

行业小程序门店列表组件，分为门店卡片和下方的按钮卡片两部分，两个组件可以分开使用也可以结合使用，具体看demo

参数说明

卡片组件

属性	必填	参数类型	参数说明	默认值	示例
img	N	string	门店图片	---	''
status	N	string	门店状态	---	''
title	Y	string	门店名	---	余杭区五常街道向往街11号
tag	Y	string	门店名后面的标签	''	买过
rate	N	number	评分	---	3.8
subTitle	N	string	副标题	---	666单
address	N	string	门店地址	---	余杭区五常街道向往街11
distance	N	string	门店距离	---	3km
shopTags	N	Arrar\	门店标签	[]	'十元优惠', '到期退款'
data	N	any	点击事件携带的参数值	---	index
onClick	N	(data: any) => void	卡片点击事件	--	--
onAppear	N	(data: any) => void	卡片曝光事件	--	--

在小程序中使用

{
  "usingComponents": {
    "shop-card": "@alipay/mas-cs-shop-card/es/index",
    "shop-card-goods": "@alipay/mas-cs-shop-card/es/goods-info/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<shop-card
  title="ZJK一站式汽车服务"
    address="余杭区五常街道向往街11号"
    rate="{{ 3.8 }}"
    subTitle="666单"
    distance="3km"
    data="click data"
    status="暂停营业"
    tag="买过"
    img="https://gw.alipayobjects.com/mdn/rms_6d74f8/afts/img/A*_BBwT7BtC4UAAAAAAAAAAAAAARQnAQ"
    onClick="onClick"
    shopTags="{{ ['十元优惠', '到期退款'] }}"
>
  <block a:for="{{ 3 }}">
    <shop-card-goods
      key="{{ index }}"
      data="{{ index }}"
      name="商品名称"
      btn="购买"
      price="¥20"
      disabled="{{ false }}"
      oldPrice="门店价¥30"
      onClick="onPay"
    />
  </block>
</shop-card>

Badges

@mas.io/falcon-core

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

1.0.3

3 years ago