个人消息

pages/myself/about/index.js

@@ -1,10 +1,47 @@
 Page({
     data: {
-        activeValues: [],
+        customStepCurrent: 4,
+        customStepItems: [
+            {
+                title: '二级步骤描述',
+                content: '可自定义此处内容',
+                extra: '可自定义此处内容',
+            },
+            {
+                content: '可自定义此处内容',
+                extra: '可自定义此处内容',
+            },
+            {
+                content: '可自定义此处内容',
+                extra: '可自定义此处内容',
+            },
+            {
+                title: '二级步骤描述',
+                extra: '可自定义此处内容',
+                content: '可自定义此处内容',
+            },
+            {
+                title: '二级步骤描述',
+                extra: '可自定义此处内容',
+                content: '可自定义此处内容',
+            },
+        ],
     },
-    handleChange(e) {
-        this.setData({
-            activeValues: e.detail.value,
+
+    onShow() {
+        const { customStepCurrent, customStepItems } = this.data;
+        const newCustomStepItems = customStepItems.map((element, elementIndex) => {
+            if (elementIndex < customStepCurrent) {
+                element.status = 'finish';
+            } else if (elementIndex === customStepCurrent) {
+                element.status = 'active';
+            } else {
+                element.status = 'default';
+            }
+            return element;
         });
-    },
+        this.setData({
+            customStepItems: newCustomStepItems,
+        });
+    }
 });

pages/myself/about/index.json

@@ -1,6 +1,6 @@
 {
   "usingComponents": {
-    "t-collapse": "/components/collapse/collapse",
-    "t-collapse-panel": "/components/collapse/collapse-panel"
+    "t-steps": "/components/steps/steps",
+    "t-step-item": "/components/steps/step-item"
   }
 }

pages/myself/about/index.wxml

@@ -1,11 +1,20 @@
-<wxs module="_"> module.exports.contains = function(arr, target) { return arr.indexOf(target) > -1; } </wxs>
-<t-collapse value="{{activeValues}}" bind:change="handleChange">
-    <t-collapse-panel
-            header="关于我们"
-            header-right-content="{{_.contains(activeValues, 0) ? '收起' : '展开'}}"
-            value="{{0}}"
-            expandIcon
+<t-steps class="demo-steps" current="{{customStepCurrent}}" readonly="true" layout="vertical">
+    <t-step-item
+            wx:for="{{customStepItems}}"
+            wx:key="key"
+            wx:item="item"
+            icon="slot"
+            title="{{item.title}}"
+            content="{{item.content}}"
+            t-class-inner="t-class-inner t-class-inner--{{item.status}}"
+            t-class-title="t-class-title {{item.title? '' : 't-class-title--no'}}"
+            t-class-description="t-class-description"
+            t-class-extra="t-class-extra"
     >
-        我们很强真肉蛋
-    </t-collapse-panel>
-</t-collapse>
+        <view
+                slot="icon"
+                class="t-icon-slot t-icon-slot--{{item.status}} {{item.title? '' : 't-icon-slot--child'}}"
+        ></view>
+        <view slot="extra">{{item.extra}}</view>
+    </t-step-item>
+</t-steps>

pages/myself/about/index.wxss

@@ -0,0 +1,60 @@
+.demo-steps {
+    padding-top: 80rpx;
+    padding-left: 32rpx;
+}
+
+.t-icon-slot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #c5c5c5;
+}
+
+.t-icon-slot--child {
+    width: 10px;
+    height: 10px;
+}
+
+.t-icon-slot--finish {
+    background-color: #0052d9;
+}
+
+.t-icon-slot--active {
+    background-color: rgb(5, 150, 34);
+}
+
+.t-icon-slot--default {
+    background-color: #c5c5c5;
+}
+/** 自定义line颜色：
+* 方法1: 通过t-class-inner外部样式的 ::after
+* 方法2: 覆盖组件内部样式。
+*/
+.t-class-inner--finish::after {
+    background-color: #0052d9;
+}
+
+.t-class-inner--active::after {
+    background-color: #c5c5c5;
+}
+
+.t-class-inner--default::after {
+    background-color: #c5c5c5;
+}
+
+.t-class-title {
+    color: #000 !important;
+}
+.t-class-title--no {
+    margin: 0 !important;
+}
+.t-class-description {
+    color: rgb(38, 37, 37) !important;
+}
+
+.t-class-extra {
+    color: #c5c5c5;
+    text-align: left;
+    font-size: 20rpx !important;
+    margin-top: 0px !important;
+}