# 投保功能描述

## 简述

投保功能包含三部分

* components目录 
* config目录
* util目录

components是根据基础组件组装的UI组件，供渲染工具类使用，也可单独导出组件使用。

config是模块配置模版，可直接使用，也可以根据模版的结构自行设计配置。

renderUtil提供一个函数，根据传入的配置渲染组件。

## 配置

### tmpl
BaseTmpl 配置的模版

insuranceProcess 投保流程数组，控制投保流程是否有该页面环节

   ```
insuranceProcess: [
    productDetail, // 产品详情页面
    fillInfo, // 信息录入
    healthNotification, // 健康告知
    payment, // 确认支付
    receipt, // 签收
  ],
  ```

productDetail 页面对象，控制该页面渲染组件，装填数据

layout  描述页面布局，

key  描述这个组件用于哪个业务场景

type  描述这个组件是哪个UI组件

rules  描述这个组件业务规则，与layout key相关联

```
name: ''
layout: [
       {
         type: BANNER, // 组件类型
         key: BANNER, // 组件的唯一标识，用来串联 layout, rules
         uri: '', // banner需要装填数据 uri,展示的图片链接
         width: 100, //图片宽度
         height: 100, // 图片高度
       },
       {
         type: TITLE,
         key: TITLE,
         h1: '', // title需要装填数据 主标题
         h2: '', // title需要装填数据 副标题
         label: [], // 多个展示标签
         labelColor: '', //颜色
       },
       {
         type: BUTTON_GROUP,
         key: BUTTON_GROUP,
         buttons: [],
         onSelect: () => {
         },
         selectIndex: 0,
       },
       {
         type: LIST_ITEM,
         key: LIST_ITEM,
         label: {
           icon: '', //左侧icon
           h1: '', //主标题
           rightIcon: '', //右侧icon
           rightText: '', //右侧文字
           onPress: () => {
           }, //点击事件
         },
         data: [{ key: '', value: '' }],
       },
       {
         type: CHOOSE,
         key: CHOOSE,
         title: {
           icon: '', //左侧icon
           h1: '', //主标题
           rightIcon: '', //右侧icon
           rightText: '', //右侧文字
           onPress: () => {
           }, //点击事件
         },
         text: '', //选择框显示标题
         values: [], //选择框数据集合
         source: {}, //修改源对象
         setKey: '', //修改源对象内的属性名称
         onChange: () => {
         }, //选中事件
         onWillChange: () => {
         }, // 选中前执行事件
       },
       {
         type: PRODUCT,
         key: PRODUCT,
         uri: '',
         label: {
           icon: '', //左侧icon
           h1: '', //主标题
           rightIcon: '', //右侧icon
           rightText: '', //右侧文字
           onPress: () => {
           }, //点击事件
         },
       },
       {
         type: SERVICE,
         key: SERVICE,
         uri: '',
         label: {
           icon: '', //左侧icon
           h1: '', //主标题
           rightIcon: '', //右侧icon
           rightText: '', //右侧文字
           onPress: () => {
           }, //点击事件
         },
       },
     ],
     rules: [
       {
         layoutKey: CHOOSE, // 串联 key 为 choose的组件
         range: [], // [min , max]   [a,b,c,d] 只允许包含在 a\b\c\d内
       },
     ],
```

getConfig 做了两件事：
根据ID，组装对应保险产品的配置。
预先设置数据到layout中。

fillData

真正的页面上需要获取服务器数据，再吧这些数据依次填入layout，绑定事件。