feat: add click feedback

Author: anlyyao

app.json

@@ -1,5 +1,8 @@
 {
   "pages": ["pages/home/index", "pages/message/index", "pages/my/index"],
+  "usingComponents": {
+    "t-toast": "tdesign-miniprogram/toast/toast"
+  },
   "subpackages": [
     {
       "root": "pages/search",

behaviors/useToast.js

@@ -0,0 +1,22 @@
+import Toast, { hideToast } from 'tdesign-miniprogram/toast/index';
+
+const useToastBehavior = Behavior({
+  methods: {
+    onShowToast(selector, message) {
+      Toast({
+        context: this,
+        selector,
+        message,
+      });
+    },
+
+    onHideToast(selector) {
+      hideToast({
+        context: this,
+        selector,
+      });
+    },
+  },
+});
+
+export default useToastBehavior;

pages/my/index.js

@@ -1,13 +1,43 @@
 import request from '~/api/request';
+import useToastBehavior from '../../behaviors/useToast';
 
 Page({
+  behaviors: [useToastBehavior],
+
   data: {
     isLoad: false,
     service: [],
     personalInfo: {},
-    settingdata: [
+    gridList: [
+      {
+        name: '全部发布',
+        icon: 'root-list',
+        type: 'all',
+        url: '',
+      },
+      {
+        name: '审核中',
+        icon: 'search',
+        type: 'progress',
+        url: '',
+      },
+      {
+        name: '已发布',
+        icon: 'upload',
+        type: 'published',
+        url: '',
+      },
+      {
+        name: '草稿箱',
+        icon: 'file-copy',
+        type: 'draft',
+        url: '',
+      },
+    ],
+
+    settingList: [
       { name: '联系客服', icon: 'service', type: 'service' },
-      { name: '设置', icon: 'setting', type: 'setting' },
+      { name: '设置', icon: 'setting', type: 'setting', url: '/pages/setting/index' },
     ],
   },
 
@@ -48,4 +78,10 @@ Page({
   onNavigateTo() {
     wx.navigateTo({ url: `/pages/my/info-edit/index` });
   },
+
+  onEleClick(e) {
+    const { name, url } = e.currentTarget.dataset.data;
+    if (url) return;
+    this.onShowToast('#t-toast', name);
+  },
 });

pages/my/index.wxml

@@ -1,3 +1,5 @@
+<t-toast id="t-toast" />
+
 <view class="my">
   <image class="nav-bg" src="/static/bg_navbar.png" />
   <nav title-text="我的" />
@@ -27,10 +29,16 @@
     </t-cell-group>
     <t-divider t-class="divider-class" />
     <t-grid t-class="grid-class">
-      <t-grid-item text="全部发布" icon="root-list" class="split-line grid-item" />
-      <t-grid-item text="审核中" icon="search" class="grid-item" />
-      <t-grid-item text="已发布" icon="upload" class="grid-item" />
-      <t-grid-item text="草稿箱" icon="file-copy" class="grid-item" />
+      <t-grid-item
+        wx:for="{{gridList}}"
+        wx:for-item="gridItem"
+        wx:key="type"
+        text="{{gridItem.name}}"
+        icon="{{gridItem.icon}}"
+        class="grid-item {{gridItem.type === 'all' ? 'split-line' : ''}}"
+        data-data="{{gridItem}}"
+        bindclick="onEleClick"
+      />
     </t-grid>
   </view>
 
@@ -44,12 +52,24 @@
         text="{{item.name}}"
         image="{{item.image}}"
         url="{{item.url}}"
+        data-data="{{item}}"
+        bindclick="onEleClick"
       />
     </t-grid>
   </view>
 
   <t-cell-group theme="card">
-    <t-cell title="联系客服" leftIcon="service" hover arrow />
-    <t-cell title="设置" leftIcon="setting" url="/pages/setting/index" hover arrow />
+    <t-cell
+      wx:for="{{settingList}}"
+      wx:for-item="item"
+      wx:key="type"
+      title="{{item.name}}"
+      url="{{item.url}}"
+      leftIcon="{{item.icon}}"
+      hover
+      arrow
+      data-data="{{item}}"
+      bindclick="onEleClick"
+    />
   </t-cell-group>
 </view>

pages/setting/index.js

@@ -1,4 +1,7 @@
+import useToastBehavior from '../../behaviors/useToast';
+
 Page({
+  behaviors: [useToastBehavior],
   data: {
     menuData: [
       [
@@ -44,4 +47,10 @@ Page({
       ],
     ],
   },
+
+  onEleClick(e) {
+    const { title, url } = e.currentTarget.dataset.data;
+    if (url) return;
+    this.onShowToast('#t-toast', title);
+  },
 });

pages/setting/index.wxml

@@ -12,6 +12,10 @@
       url="{{carditem.url}}"
       bordered="true"
       leftIcon="{{carditem.icon}}"
+      data-data="{{carditem}}"
+      bindclick="onEleClick"
     />
   </t-cell-group>
 </view>
+
+<t-toast id="t-toast" />