zhjwxt/uniapp/components

组件和工具函数库

这是从 clue_info.vue 页面重构提取出来的可复用组件和工具函数集合。

🧩 组件列表

1. ClientInfoCard - 客户信息卡片

显示客户基本信息的卡片组件，包含客户头像、姓名、电话等信息。

位置: components/client-info-card/client-info-card.vue

Props:

• clientInfo: Object - 客户信息对象

Events:

• call: 拨打电话事件，参数: phoneNumber

使用示例:

<ClientInfoCard 
  :client-info="clientInfo" 
  @call="handleCall" 
/>

2. StudentInfoCard - 学生信息卡片

显示学生信息的卡片组件，支持展开/收起操作按钮。

位置: components/student-info-card/student-info-card.vue

Props:

• student: Object - 学生信息对象
• actions: Array - 操作按钮配置（可选）
• showDetails: Boolean - 是否显示详细信息（默认true）

Events:

• toggle-actions: 切换操作面板事件
• action: 操作按钮点击事件，参数: { action, student }

使用示例:

<StudentInfoCard 
  :student="student" 
  :actions="[
    { key: 'edit', text: '编辑学生' },
    { key: 'order', text: '查看订单' }
  ]"
  @toggle-actions="toggleActions"
  @action="handleAction"
/>

3. TabSwitcher - 标签切换组件

通用的标签页切换组件。

位置: components/tab-switcher/tab-switcher.vue

Props:

• tabs: Array - 标签配置数组 [{ id, name }]
• activeTabId: String|Number - 当前激活标签ID

Events:

• tab-change: 标签切换事件，参数: { tabId, index, tab }

使用示例:

<TabSwitcher 
  :tabs="[
    { id: 1, name: '基本资料' },
    { id: 2, name: '课程信息' },
    { id: 3, name: '通话记录' }
  ]" 
  :active-tab-id="activeTabId"
  @tab-change="handleTabChange"
/>

4. FitnessRecordCard - 体测记录卡片

显示体测记录数据和相关PDF报告的卡片组件。

位置: components/fitness-record-card/fitness-record-card.vue

Props:

• record: Object - 体测记录对象

Events:

• file-click: 文件点击事件，参数: { file, record }

使用示例:

<FitnessRecordCard 
  :record="fitnessRecord" 
  @file-click="handleFileClick"
/>

5. CallRecordCard - 通话记录卡片

显示通话记录详情的卡片组件。

位置: components/call-record-card/call-record-card.vue

Props:

• record: Object - 通话记录对象

使用示例:

<CallRecordCard :record="callRecord" />

🛠️ 工具函数库

核心工具函数

以下函数已添加到 common/util.js 中：

1. safeGet(obj, path, defaultValue)

安全访问对象属性，避免undefined错误。

const name = this.$util.safeGet(clientInfo, 'customerResource.name', '未知客户')

2. formatFileSize(bytes)

格式化文件大小为可读格式。

this.$util.formatFileSize(1024000) // "1 MB"

3. formatAge(age)

格式化年龄显示（小数转年龄+月份）。

this.$util.formatAge(9.05) // "9岁5个月"

4. formatGender(gender)

格式化性别显示。

this.$util.formatGender(1) // "男"
this.$util.formatGender(2) // "女"

5. makePhoneCall(phoneNumber, successCallback, failCallback)

拨打电话的通用方法。

this.$util.makePhoneCall('13800138000')

6. navigateToPage(url, params)

页面跳转的通用方法，自动处理参数拼接。

this.$util.navigateToPage('/pages/detail/index', {
  id: 123,
  name: '测试'
})
// 结果: /pages/detail/index?id=123&name=测试

7. getCurrentDate()

获取当前日期 YYYY-MM-DD 格式。

const today = this.$util.getCurrentDate() // "2024-01-15"

📁 文件结构

components/
├── client-info-card/
│   └── client-info-card.vue
├── student-info-card/
│   └── student-info-card.vue
├── tab-switcher/
│   └── tab-switcher.vue
├── fitness-record-card/
│   └── fitness-record-card.vue
├── call-record-card/
│   └── call-record-card.vue
├── index.js                    # 组件导出索引
└── README.md                   # 本文档

common/
├── util.js                     # 扩展后的工具函数库
└── utils-index.js              # 工具函数导出索引

🚀 使用方式

在页面中使用组件

1. 直接导入使用:

<template>
  <ClientInfoCard :client-info="clientInfo" @call="handleCall" />
</template>

<script>
import ClientInfoCard from '@/components/client-info-card/client-info-card.vue'

export default {
  components: {
    ClientInfoCard
  }
}
</script>

2. 批量导入:

// 从索引文件导入
import { ClientInfoCard, StudentInfoCard } from '@/components/index.js'

使用工具函数

工具函数已集成到全局 $util 对象中，可直接使用：

<template>
  <view>{{ $util.safeGet(data, 'user.name', '未知') }}</view>
</template>

<script>
export default {
  methods: {
    handleCall() {
      const phone = this.$util.safeGet(this.clientInfo, 'phone', '')
      this.$util.makePhoneCall(phone)
    }
  }
}
</script>

💡 重构优势

1. 代码复用: 组件和工具函数可在多个页面中复用
2. 维护性: 集中管理，修改一处影响全局
3. 可测试性: 独立组件易于单元测试
4. 性能优化: 减少重复代码，提升应用性能
5. 开发效率: 标准化组件提升开发速度

📋 迁移指南

原 clue_info.vue 中的代码可按以下方式迁移：

1. 替换工具函数调用：

   • this.safeGet() → this.$util.safeGet()
   • this.formatAge() → this.$util.formatAge()
   • this.makeCall() → this.$util.makePhoneCall()

2. 替换组件代码：

   • 客户信息展示区域 → <ClientInfoCard>
   • 学生信息展示区域 → <StudentInfoCard>
   • 标签切换区域 → <TabSwitcher>
   • 体测记录展示 → <FitnessRecordCard>
   • 通话记录展示 → <CallRecordCard>

3. 事件处理：

   • 保持原有事件处理逻辑
   • 通过组件events获取用户操作