@mas.io/mas-cs-step-flow v0.0.2

安装

tnpm install --save @alipay/mas-cs-step-flow

组件介绍

行业小程序步骤流程组件 场景一：步骤/流程 - 全状态（包含注意事项） 实现：办理项目、办理流程、注意事项 场景二：仅步骤 实现：办理流程

参数说明

在小程序中使用

.json配置 示例代码

{
  "usingComponents": {
    "mas-cs-step-flow": "@alipay/mas-cs-step-flow/es/index"
  }
}

.axml 示例代码

<!-- 页面使用方式 -->
 <mas-cs-step-flow
    hasMention="{{hasMention}}"
    category="{{category}}"
    selectId="{{selectId}}"
    stepflows="{{stepflows}}"
    mentions="{{mentions}}"
    handleTapCategory="{{handleTapCategory}}"
  />

.js 示例代码

data: {
  hasMention: true, // 是否有注意事项
  category: [
    {
      identify: 1, // 按钮标识 - 用于区分点击的按钮以获取不同分类下的数据
      btnText: '代办年检标识', // 按钮文本
    },
    {
      identify: 2,
      btnText: 'VIP检车',
    },
    {
      identify: 3,
      btnText: '代驾检车',
    },
    {
      identify: 4,
      btnText: '预约车检站',
    },
  ],
  selectId: 1, // 选中按钮的identify
  stepflows: [
    {
      iconClass: 'icon-Fillin',
      stepText: '填写资料',
      stepTime: '1分钟',
    },
    {
      iconClass: 'icon-PayCircle',
      stepText: '下单付款',
      stepTime: '1分钟',
    },
    {
      iconClass: 'icon-User',
      stepText: '管家代办',
      stepTime: '1分钟',
    },
    {
      iconClass: 'icon-File',
      stepText: '接收标识',
      stepTime: '1分钟',
    },
  ],
  mentions: [
    {
      mentionText: '可办理车辆：支持办理非运营轿车、小型客车9座及以下',
      mentionView: '',
      handleTapView: (params) => { console.log(params); },
    },
    {
      mentionText: '办理条件：如有交通事故或违法行为，请先处理完毕方可办理。',
      mentionView: '立即查询车辆违章情况',
      handleTapView: (params) => { console.log(params); },
    },
    {
      mentionText: '所需资料：行驶证及交强险照片，车辆保险必须在有效时间范围内，如有逾期请先办理保险续保。',
      mentionView: '',
      handleTapView: (params) => { console.log(params); },
    },
  ],
},

handleTapCategory(e) {
  const selectId = e.target.dataset.identify;
  this.setData({
    selectId,
  });
},

Badges