这篇文章是对上篇文章的加强，是用的tdesign完成的处理流程，代码如下：
参考组件库
[tdesign](https://tdesign.tencent.com/miniprogram/components/steps?tab=demo)
```
// 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文件
/**
* 自定义step节点样式：注意权重
*/
@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;
}
```javascript
<!--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}}"/>
? ? ? <van-icon slot="icon"? name="close" wx:else/>
? ? ? <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>
```
对上面的组件进行引用
```javascript
? ? ? ? ? ? ? <step customStepItems="{{customStepItems}}"></step>
```
数据格式如下：
