安装

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<string>| 门店标签 | [] | ['十元优惠', '到期退款'] data | N | any | 点击事件携带的参数值 | --- | index onClick | N | (data: any) => void | 卡片点击事件| -- | -- onAppear | N | (data: any) => void | 卡片曝光事件| -- | --

按钮组件

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:-:|:--:|:--:|:--: | :-: name | Y | string | 商品名称 | --- | 商品名称 price | N | string | 商品价格 | --- | ¥20 oldPrice | N | string | 划线价格 | '' | 门店价¥30 btn | Y | string | 按钮文字 | '' | 购买 disabled | N | boolean | 是否禁用 | false | true 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

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