跳到主要内容

邮轮穿舱件管理系统-小程序端组件文档

概述​

本文档详细记录了邮轮穿舱件管理系统小程序端的所有可复用组件，包括card组件、nav组件、custom-tab-bar等组件的接口定义、使用方式、样式定制和架构分析。

目录​

Card组件​

接口定义​

Card组件是一个通用的卡片展示组件，主要用于展示图片、描述信息和标签。

属性定义：

  • url (String): 图片URL地址
  • desc (String): 描述文本
  • tags (Array): 标签数组，每个标签包含text和theme属性

参考文件：

模板结构​

<view class="home-card">
  <t-image t-class="home-card__image" src="{{url}}" mode="aspectFill" />
  <view class="home-card__info">
    <text>{{desc}}</text>
    <view class="home-card__tag-group">
      <t-tag wx:for="{{tags}}" wx:key="index" size="small" variant="light" theme="{{item.theme}}">{{item.text}}</t-tag>
    </view>
  </view>
</view>

参考文件：

样式定制​

.home-card {
  display: inline-flex;
  flex-direction: column;
  width: 340rpx;
  height: 488rpx;
  border-radius: 9px;
  background: @bg-color-white;

  &__image {
    width: 340rpx;
    height: 340rpx;
  }

  &__info {
    padding: 32rpx;
    font-weight: 400;
    font-size: @font-size-small;
  }

  &__tag-group {
    display: flex;
    gap: 16rpx;
    margin-top: 16rpx;
  }
}

参考文件：

依赖组件​

  • t-image: TDesign图片组件
  • t-tag: TDesign标签组件

接口定义​

Nav组件是一个导航栏组件，支持标题模式和搜索模式，包含侧边栏抽屉功能。

属性定义：

  • navType (String): 导航类型，支持'title'和'search'，默认值'title'
  • titleText (String): 标题文本

数据定义：

  • visible (Boolean): 侧边栏显示状态
  • sidebar (Array): 侧边栏菜单项数组
  • statusHeight (Number): 状态栏高度

参考文件：

模板结构​

<view class="home-navbar">
  <t-navbar title="{{ navType === 'search' ? '' : titleText }}">
    <view slot="left">
      <view class="home-navbar__left">
        <t-icon class="home-navbar__icon" bind:tap="openDrawer" name="view-list" size="48rpx" />
        <t-search
          shape="round"
          placeholder="请搜索你想要的内容"
          bindtap="searchTurn"
          wx:if="{{navType === 'search'}}"
        />
      </view>
    </view>
  </t-navbar>
  <t-drawer
    style="padding-top: {{statusHeight}}px;"
    visible="{{visible}}"
    items="{{sidebar}}"
    placement="left"
    title="页面目录"
    bind:item-click="itemClick"
  />
</view>

参考文件：

样式定制​

.home-navbar {
  .t-navbar {
    &__left {
      margin-left: 12rpx;
    }
  }

  &__icon {
    padding: 12rpx;
  }

  &__left {
    display: flex;
    align-items: center;
    padding: 0 16rpx;

    .t-search {
      --td-search-height: 64rpx;
      --td-search-font-size: @font-size-mini;
      width: 375rpx;

      .t-icon {
        font-size: @font-size-default !important;
      }
    }
  }
  --td-drawer-title-font-size: 48rpx;
}

参考文件：

方法功能​

  • openDrawer(): 打开侧边栏抽屉
  • itemClick(e): 处理菜单项点击事件
  • searchTurn(): 跳转到搜索页面

依赖组件​

  • t-navbar: TDesign导航栏组件
  • t-icon: TDesign图标组件
  • t-drawer: TDesign抽屉组件
  • t-search: TDesign搜索组件

Custom Tab Bar组件​

接口定义​

Custom Tab Bar是一个自定义底部标签栏组件，支持消息未读数量显示。

数据定义：

  • value (String): 当前选中的标签值
  • unreadNum (Number): 未读消息数量
  • list (Array): 标签项列表

参考文件：

模板结构​

<t-tab-bar value="{{ value }}" theme="tag" split="{{ false }}" bind:change="handleChange">
  <t-tab-bar-item icon="home" value="home">首页</t-tab-bar-item>
  <t-tab-bar-item icon="search" value="searchPage">搜索</t-tab-bar-item>
  <t-tab-bar-item icon="task" value="taskPage">任务</t-tab-bar-item>
  <t-tab-bar-item icon="user" value="my">我的</t-tab-bar-item>
</t-tab-bar>

参考文件：

样式定制​

.custom-tab-bar {
  --td-tab-bar-height: @tab-bar-height;

  &-item {
    margin: 0;
    padding: 16rpx 24rpx;
  }
}

参考文件：

方法功能​

  • handleChange(e): 处理标签切换事件
  • setUnreadNum(unreadNum): 设置未读消息数量

依赖组件​

  • t-tab-bar: TDesign标签栏组件
  • t-tab-bar-item: TDesign标签项组件

组件依赖关系分析​

外部依赖分析​

所有组件都基于TDesign小程序组件库构建，具体依赖关系如下：

flowchart TD
    A[Card组件] --> B[t-image组件]
    A --> C[t-tag组件]
    
    D[Nav组件] --> E[t-navbar组件]
    D --> F[t-icon组件]
    D --> G[t-drawer组件]
    D --> H[t-search组件]
    
    I[Custom Tab Bar] --> J[t-tab-bar组件]
    I --> K[t-tab-bar-item组件]
    
    L[TDesign组件库] --> B
    L --> C
    L --> E
    L --> F
    L --> G
    L --> H
    L --> J
    L --> K

内部依赖关系​

flowchart LR
    A[页面组件] --> B[Card组件]
    A --> C[Nav组件]
    A --> D[Custom Tab Bar]
    
    E[App全局配置] --> D

组件架构图​

组件层次结构​

classDiagram
    class BaseComponent {
        +properties
        +data
        +methods
        +lifetimes
    }
    
    class CardComponent {
        +url: String
        +desc: String
        +tags: Array
    }
    
    class NavComponent {
        +navType: String
        +titleText: String
        +visible: Boolean
        +sidebar: Array
        +statusHeight: Number
        +openDrawer()
        +itemClick()
        +searchTurn()
    }
    
    class TabBarComponent {
        +value: String
        +unreadNum: Number
        +list: Array
        +handleChange()
        +setUnreadNum()
    }
    
    BaseComponent <|-- CardComponent
    BaseComponent <|-- NavComponent
    BaseComponent <|-- TabBarComponent

数据流图​

flowchart TD
    A[页面数据] --> B[组件属性]
    B --> C[组件内部状态]
    C --> D[模板渲染]
    D --> E[用户交互]
    E --> F[事件处理]
    F --> G[状态更新]
    G --> D

使用示例​

Card组件使用示例​

// 在页面JSON中引入组件
{
  "usingComponents": {
    "card": "/components/card/index"
  }
}
<!-- 在页面WXML中使用 -->
<card url="https://example.com/image.jpg" 
      desc="产品描述信息" 
      tags="{{[{text: '新品', theme: 'success'}, {text: '热销', theme: 'warning'}]}}" />
// 在页面JSON中引入组件
{
  "usingComponents": {
    "nav": "/components/nav/index"
  }
}
<!-- 标题模式 -->
<nav navType="title" titleText="首页" />

<!-- 搜索模式 -->
<nav navType="search" />

Custom Tab Bar使用示例​

// 在app.json中配置
{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页"
      }
      // ... 其他标签项
    ]
  }
}

索引​

本文档详细分析了邮轮穿舱件管理系统小程序端的三个核心可复用组件：

  1. Card组件: 用于展示图片、描述和标签的通用卡片组件
  2. Nav组件: 支持标题和搜索模式的导航栏组件，包含侧边栏功能
  3. Custom Tab Bar: 自定义底部标签栏，支持消息未读数量显示

所有组件都基于TDesign组件库构建，具有良好的可定制性和扩展性。组件设计遵循小程序组件开发规范，支持属性传递、事件处理和样式定制。

参考文件汇总：