微信小程序实现步骤条-类似vantweapp(二)-tdesign实现

这篇文章是对上篇文章的加强，是用的tdesign完成的处理流程，代码如下：
参考组件库
tdesign

// pkg-sales-department/component/step/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    customStepItems:{}
  },

  data: {
    customStepCurrent: 2,
    // customStepItems: [
    //   {
    //     title: '二级步骤描述',
    //     content: '可自定义此处内容',
    //     extra: '可自定义此处内容',
    //   },
    //   {
    //     content: '可自定义此处内容',
    //     extra: '可自定义此处内容',
    //   },
    //   {
    //     content: '可自定义此处内容',
    //     extra: '可自定义此处内容',
    //   },
    //   {
    //     title: '二级步骤描述',
    //     extra: '可自定义此处内容',
    //     content: '可自定义此处内容',
    //   },
    //   {
    //     title: '二级步骤描述',
    //     extra: '可自定义此处内容',
    //     content: '可自定义此处内容',
    //   },
    // ],
  },

  lifetimes: {
    // attached() {
    //   this.init();
    // },
  },

  methods: {
    init() {
      // const newCustomStepItems = this.properties.customStepItems.map((element, elementIndex) => {
      //   console.log('===', elementIndex);
      //   if (elementIndex < this.properties.customStepItems.length) {
      //     element.status = 'finish';
      //   } else if (elementIndex === this.properties.customStepItems.length) {
      //     element.status = 'active';
      //   } else {
      //     element.status = 'default';
      //   }
      //   return element;
      // });
      // this.setData({
      //   customStepItems: newCustomStepItems,
      // });
    },
  },
})

{
“component”: true,
“usingComponents”: {
“t-steps”: “tdesign-miniprogram/steps/steps”,
“t-step-item”: “tdesign-miniprogram/steps/step-item”,
“t-icon”: “tdesign-miniprogram/icon/icon”,
“van-icon”: “@vant/weapp/icon/index”
}
}

less文件

@import ‘…/…/…/styles/flex.less’;
page {
–default-color: #c5c5c5;
–finish-color: #0052d9;
–active-color: rgb(5, 150, 34);

–description-color: rgb(38, 37, 37);
}
.demo-steps {
padding-top: 80rpx;
padding-left: 32rpx;
}
.t-class-extra {
color: gray;
text-align: left;
font-size: 28rpx !important;
}

<!--pkg-sales-department/component/step/index.wxml-->
<t-steps class="demo-steps" current="{{customStepItems.length}}"  readonly="true" layout="vertical">
    <t-step-item
      wx:for="{{customStepItems}}"
      wx:key="key"
      wx:item="item"
      icon="slot"
      title="{{item.createDatetime}}"
      content="{{item.content}}"
      t-class-extra="t-class-extra"
    >
    <view slot="extra">{{item.status}}</view>
      <van-icon slot="icon"  name="passed" wx:if="{{item.businessContent=='通过'||item.businessContent==null||item.businessContent}}" style="color:cadetblue;background-color: white;"/>
      <van-icon slot="icon"  name="close" wx:else style="color: red;background-color: white;"/>
      <view slot="extra" class="flex jc-between">
        <view slot="extra">{{item.business}}</view>
        <view slot="extra">操作人：张三</view>
      </view>
      <view slot="extra">{{item.businessContent}}</view>
    </t-step-item>
  </t-steps>

对上面的组件进行引用

              <step customStepItems="{{customStepItems}}"></step>

数据格式如下：

原生实现
点击跳转