mb-readterm

mb-readterm 通用条款阅读组件

简介

mb-readterm 是一个 Vue 3 条款阅读弹窗组件。

只需要传入后端返回的 productInfo（包含 prompt_section_list / qa_list / file_list 等），组件会自动：

• 渲染条款 tab（左侧竖向导航 + 右侧内容区）
• 支持滚动到底部校验
• 支持倒计时等待（waiting_time）
• 支持条款 PDF 文件列表（必读/非必读）

安装

npm / pnpm

pnpm add mb-readterm

本地包（联调）

pnpm add file:../../mb-npm/mb-readterm

基础用法（Vue 3）

<template>
  <ReadTerm
    v-model="visible"
    :product-info="productInfo"
    :data-provider="dataProvider"
    @complete="onComplete"
    @close="visible = false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ReadTerm } from 'mb-readterm'

const visible = ref(false)
const productInfo = ref<any>(null)

const dataProvider = {
  getInsuranceInfo: () => {
    return {
      // 这里返回你页面当前选项的 key/value，用于文件 condition 过滤、文本替换等
      period: '1d',
      plan_index: 0,
    }
  }
}

const onComplete = () => {
  // 用户完成阅读（满足规则后点“下一条/完成”）
}
</script>

Props

v-model

• v-model / modelValue: boolean，控制弹窗显示/隐藏

productInfo

• productInfo: 条款数据对象（后端返回）

dataProvider（可选）

用于提供动态数据：

• getInsuranceInfo?: () => Record<string, any> | Promise<Record<string, any>>

Events

• update:modelValue(visible: boolean)
• complete() 阅读流程完成
• close() 点击关闭
• tab-change(index: number, key: string)
• scroll-end(tabKey: string)
• countdown-end(tabKey: string)

数据结构（后端字段）

核心字段：

• prompt_section_list: tab 列表（顺序即展示顺序）
• qa_list: 常见问题（Q/A）
• file_list: 条款文件列表

prompt_section_list 示例

[
  { "key": "exempt_notice", "title": "责任免除" },
  { "key": "apply_notice", "title": "投保须知" },
  { "key": "claim_notice", "title": "理赔指引" },
  { "key": "qa_list", "title": "常见问题" },
  { "key": "file_list", "title": "条款文件", "type": "file_list" }
]

qa_list 示例

[
  { "q": "什么是意外伤害？", "a": "..." },
  { "q": "保单如何验真？", "a": "..." }
]

file_list 示例

[
  {
    "display_name": "保险条款",
    "file_name": "xxx.pdf",
    "file_url": "",
    "must_read": true,
    "condition": { "period": ["1d", "2d"] }
  }
]

文件 URL 规则

打开 PDF 时，URL 解析规则为：

• file.file_url（优先）
• file.url
• productInfo.resource_path + file.file_name

如果 file.file_name 本身是以 / 或 http 开头，则会直接使用。

条款文件过滤规则

组件会自动过滤以下文件（不显示）：

• product_info_only
• sign_only
• sz_only

并支持 condition 联动过滤（依赖 dataProvider.getInsuranceInfo() 返回的 key/value）。

注意事项

• 组件构建产物会自动注入自身 CSS，业务项目无需额外手动引入样式。
• prompt_section_list 建议始终包含 file_list，文件明细放在 productInfo.file_list。