From d36c005100440894403bfef1660e5b9563180474 Mon Sep 17 00:00:00 2001 From: zhengw <247276359@qq.com> Date: Fri, 9 Jan 2026 17:15:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增card-plugin组件，包含完整的卡片结构，支持头部、内容、底部插槽 - 组件具有显示更多功能，可控制内容展开收起 - 集成t-icon组件用于显示展开收起图标 - 修复popup-plugin组件的wxml格式缩进问题 - 调整processEntry页面高度计算，从calc(100vh - 50px)改为100vh --- .../components/card-plugin/card-plugin.json | 4 ++ .../components/card-plugin/card-plugin.ts | 64 +++++++++++++++++++ .../components/card-plugin/card-plugin.wxml | 18 ++++++ .../components/card-plugin/card-plugin.wxss | 34 ++++++++++ .../components/popup-plugin/popup-plugin.wxml | 20 +++--- .../pages/processEntry/processEntry.wxss | 2 +- 6 files changed, 131 insertions(+), 11 deletions(-) create mode 100644 miniprogram/pages/components/card-plugin/card-plugin.json create mode 100644 miniprogram/pages/components/card-plugin/card-plugin.ts create mode 100644 miniprogram/pages/components/card-plugin/card-plugin.wxml create mode 100644 miniprogram/pages/components/card-plugin/card-plugin.wxss diff --git a/miniprogram/pages/components/card-plugin/card-plugin.json b/miniprogram/pages/components/card-plugin/card-plugin.json new file mode 100644 index 0000000..6fdb810 --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": { "t-icon": "tdesign-miniprogram/icon/icon" } +} diff --git a/miniprogram/pages/components/card-plugin/card-plugin.ts b/miniprogram/pages/components/card-plugin/card-plugin.ts new file mode 100644 index 0000000..5382dfc --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.ts @@ -0,0 +1,64 @@ +// pages/components/card_plugin/card_plugin.js +Component({ + /** + * 组件的属性列表 + */ + options: { + multipleSlots: true, + addGlobalClass: true, + }, + properties: { + customStyle: null, + className: null, + headerStyle: null, + contentStyle: null, + footerStyle: null, + }, + lifetimes: { + attached() { + setTimeout(() => { + this.getSlotHeight(); + }, 100); + }, + }, + + /** + * 组件的初始数据 + */ + data: { + showMore: false, + }, + /** + * 组件的方法列表 + */ + methods: { + getSlotHeight() { + // 1. 创建组件内的节点查询器（必须加.in(this)） + const query = wx.createSelectorQuery().in(this); + // 2. 查询插槽容器节点 + query + .select("#contentSlot") + .boundingClientRect((rect) => { + if (rect) { + const height = rect.height; // 获取节点高度（单位px） + const fontSizeSetting = wx.getAppBaseInfo().fontSizeSetting; + this.setData({ showMoreBar: height >= fontSizeSetting * 3 * 1.57 }); + + // 可将高度通过自定义事件传递给父页面 + // this.triggerEvent("slotHeightChange", { height }); + } else { + // console.warn("未查询到插槽容器节点"); + } + }) + .exec(); // 执行查询 + }, + click(e: any) { + this.triggerEvent("tap", e); + }, + showMoreTap() { + this.setData({ + showMore: !this.data.showMore, + }); + }, + }, +}); diff --git a/miniprogram/pages/components/card-plugin/card-plugin.wxml b/miniprogram/pages/components/card-plugin/card-plugin.wxml new file mode 100644 index 0000000..93907b2 --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.wxml @@ -0,0 +1,18 @@ + + + + + + + + + + {{showMore ? '收起' : '显示更多' }} + + + + + + + + diff --git a/miniprogram/pages/components/card-plugin/card-plugin.wxss b/miniprogram/pages/components/card-plugin/card-plugin.wxss new file mode 100644 index 0000000..02f0046 --- /dev/null +++ b/miniprogram/pages/components/card-plugin/card-plugin.wxss @@ -0,0 +1,34 @@ +/* pages/components/card_plugin/card_plugin.wxss */ +.header, +.footer { + display: flex; +} + +.header:empty, +.content:empty { + display: none; +} + +.footer > view { + border-top: 1rpx solid #ddd; + padding: 8px 0 0 12px; + display: flex; + width: 100%; +} + +.footer > view:empty { + display: none; +} + +.show-more { + color: #999; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + height: 26px; +} + +.show-more:active { + background-color: #f5f5f5; +} diff --git a/miniprogram/pages/components/popup-plugin/popup-plugin.wxml b/miniprogram/pages/components/popup-plugin/popup-plugin.wxml index d0246b7..faa566e 100644 --- a/miniprogram/pages/components/popup-plugin/popup-plugin.wxml +++ b/miniprogram/pages/components/popup-plugin/popup-plugin.wxml @@ -1,14 +1,14 @@ - - {{title}} - - - - + + {{title}} + + + + diff --git a/miniprogram/pages/processEntry/processEntry.wxss b/miniprogram/pages/processEntry/processEntry.wxss index bbe6fe5..3982cdc 100644 --- a/miniprogram/pages/processEntry/processEntry.wxss +++ b/miniprogram/pages/processEntry/processEntry.wxss @@ -28,7 +28,7 @@ .container { display: flex; flex-direction: column; - height: calc(100vh - 50px); + height: 100vh; /* height: calc(100vh - 50px - env(safe-area-inset-bottom)); */ }