个人消息

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;
+}

pages/myself/notify/index.js

@@ -3,9 +3,31 @@ Page({
         messageList : [
             {"taskId":"2022","isRead":true,"title":"今天是任务的需要的","content":"任务【测试...】已延期","date":"2022-12-14"},
             {"taskId":"2022","isRead":false,"title":"任务延期","content":"点哦电脑玩i回家欧帝啊我你的破请问你的我i拿到钱哦i我你懂屁请问你oi","date":"2022-12-14"},
-            {"taskId":"2022","isRead":true,"title":"任务【测试3213...】已延期","content":"点哦电脑玩i回家欧帝啊我你的破请问你的我i拿到钱哦i我你懂屁请问你oi","date":"2022-12-14"},
+            {"taskId":"2022","isRead":true,"title":"任务【测试3213...】已延期","content":"","date":"2022-12-14"},
             {"taskId":"2022","isRead":false,"title":"任务【测试412312...】已延期","content":"任务【测试...】已延期","date":"2022-12-14"}
         ],
+        dialogKey: '',
+        clearConfirm : false,
+        checkConfirm : false
+    },
+    showDialog(e) {
+        const { key } = e.currentTarget.dataset;
+        this.setData({ [key]: true, dialogKey: key });
     },
 
+    closeDialog() {
+        const { dialogKey } = this.data;
+        this.setData({ [dialogKey]: false });
+    },
+
+    clearMessage() {
+        console.log("清除消息成功！")
+        this.closeDialog();
+    },
+
+    allRead() {
+        console.log("全部已读成功！")
+        this.closeDialog();
+    }
+
 });

pages/myself/notify/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "t-badge": "/components/badge/badge"
+    "t-badge": "/components/badge/badge",
+    "t-dialog": "/components/dialog/dialog"
   }
 }

pages/myself/notify/index.wxml

@@ -1,9 +1,8 @@
 <view class="msgTitle">
-    <view class="clear"></view>
-    <view class="clear"><t-icon name="app"></t-icon></view>
-    <view class="read"><t-icon name="app"/></view>
+    <view class="clear"><t-icon name="clear" data-key="clearConfirm" bind:tap="showDialog" /></view>
+    <view class="read"><t-icon name="check" data-key="checkConfirm" bind:tap="showDialog"/></view>
 </view>
-<view wx:for="{{messageList}}">
+<view class="msgContent" wx:for="{{messageList}}">
     <t-cell title="{{item.title}}" description="{{item.content}}" wx:key="index">
         <view slot="description">
             {{item.date}}
@@ -13,3 +12,21 @@
         </view>
     </t-cell>
 </view>
+<t-dialog
+        visible="{{clearConfirm}}"
+        title="确认清除所有消息？"
+        t-class-confirm="custom-confirm-btn"
+        confirm-btn="清除"
+        cancel-btn="取消"
+        bind:confirm="clearMessage"
+        bind:cancel="closeDialog"
+/>
+<t-dialog
+        visible="{{checkConfirm}}"
+        title="全部标记已读"
+        t-class-confirm="custom-confirm-btn"
+        confirm-btn="确定"
+        cancel-btn="取消"
+        bind:confirm="allRead"
+        bind:cancel="closeDialog"
+/>

pages/myself/notify/index.wxss

@@ -3,6 +3,13 @@
     justify-content: space-between;
     padding: 20rpx 50rpx;
 }
+.msgContent {
+    padding: 0;
+    margin: 0;
+}
 .sendDate {
     padding-left: 20rpx;
 }
+.custom-confirm-btn {
+    color: #ff4646 !important;
+}