安装

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

组件介绍

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

参数说明

| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 | | --------------- | :---: | :------: | :------------------: | :----: | :--: | | hasMention | Y | Boolean | 是否含有注意事项 | true | true/false | | category | N | Array | 办理项目，根据不同办理项目获取不同项目的办理流程，可以不用传，根据业务需求来 | null | [ { identify: 1, // 按钮标识 - 用于区分点击的按钮以获取不同分类下的数据 btnText: '代办年检标识', // 按钮文本 }, { identify: 2, btnText: 'VIP检车', }, { identify: 3, btnText: '代驾检车', }, { identify: 4, btnText: '预约车检站', }, ] | | selectId | N | Number | 选中按钮index，当hasMention为true时，该属性必传 | 1 | 1 | | stepflows | Y | Array | 步骤流程数组，为该组件主要展示部分，必传，数组中包含步骤icon值，步骤名称，步骤所需时间 | null | [ { iconClass: 'icon-Fillin', // 步骤icon，必填，此处是通过上传到confront实现，可根据自身项目icon方式实现 stepText: '填写资料', // 步骤名称，必填 stepTime: '1分钟', // 步骤所需时间，非必填，仅步骤展示时展示，根据业务需求 }, { iconClass: 'icon-PayCircle', stepText: '下单付款', stepTime: '1分钟', }, { iconClass: 'icon-User', stepText: '管家代办', stepTime: '1分钟', }, { iconClass: 'icon-File', stepText: '接收标识', stepTime: '1分钟', }, ] | | mentions | N | Array | 注意事项数组，当当hasMention为true时，该属性必传，数组中包含注意事项，以及扩展跳转事件 | null | [ { mentionText: '可办理车辆：支持办理非运营轿车、小型客车9座及以下', //注意事项内容，必填 mentionView: '', // 扩展事件，非必填 handleTapView: (params) => { console.log(params); }, // 扩展事件点击事件，非必填 }, { mentionText: '办理条件：如有交通事故或违法行为，请先处理完毕方可办理。', mentionView: '立即查询车辆违章情况', handleTapView: (params) => { console.log(params); }, }, { mentionText: '所需资料：行驶证及交强险照片，车辆保险必须在有效时间范围内，如有逾期请先办理保险续保。', mentionView: '', handleTapView: (params) => { console.log(params); }, }, ] |

在小程序中使用

.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