<!--
 * @Author: wangshengqiang
 * @Date: 2021-02-23 09:50:21
 * @LastEditTime: 2022-05-09 15:50:50
 * @LastEditors: wangshengqiang
 * @Description:
-->

本地开发
1、npm run dev
2、npm link 

项目上使用
3、 npm link 【包路径 /Users/zhongan/project/za-dplatform-h5-core 】

发布项目
1、npm run build
2、npm publish ----registry https://registry.npmjs.org  // 发布完成后 更新使用方的包版本

# 项目简单介绍

通过配置 json，渲染页面。页面由模块组成组成， 模块由组件组成。
数据层级 config ---》 page[] ----> module[] ----> 组件[]
rc-form
https://www.npmjs.com/package/rc-form
## 接口Swagger

[http://23307-zat-caerus-bops.test.za-tech.net/swagger-ui.html#/](http://23307-zat-caerus-bops.test.za-tech.net/swagger-ui.html#/)

开发人员：华清峰 、王圣强

## 需求文档地址 wiki 地址()

XXXXXX  
需求人员：XXX

## 蓝湖地址

XXXXX
设计人员：XXX

### 目录

- src
  - /action `异步请求的方法`
  - /assets
    - /images `图片资源`
  - /components `项目业务组件文件夹`
  - /healthComponets `原健康险业务组件`
  - /hooks `通用hooks`
  - /JSComponents `原险业务组件`
  - /pages `存放页面级组件`
  - /services `接口请求`
  - /store `页面状态数据`
  - /supervisionComponents
  - /themes `主题文件`
  - /utils `通用工具方法`
  - app.js `页面路由在这个文件里`
  - app.less
  - env.js `运行时的环境判断`
  - global.js
  - history.js
  - logger.js
  - styled.js

### 常用方法介绍

1、isPreviewMode() 判断是否在预览环境
2、useOrderDetail() 获取订单数据
3、useStore(path) 通过 path 参数 可以获取任意层级的数据

### 后面需重写

## 发布

### nginx 代理服务变量的命名规则：

    前缀：api
    间隔：_(下划线)
    服务说明：goods(商品中心)
    例子：api_goods ,  api_life_product

### 注意应用编排中的环境变量是否配置

    环境变量命名规则同上

### store 数据读写

```
import { getState } from '@/store';

const value = getState('a.b');

 or
import { useSelecter } from 'react-redux';
const certType = useSelector((state) => {
  return _.get(state.formValues, `${formKeyPrefix}.certType`);
});

```

```


```

### 表单的数据流程

表单的数据变更是, 通过 form onValueChange 事件同步到 store 中，
store 中的表单数据变化时，则由各个保单的 formItem 组件自行从 store 中获取

1、组件获取获取 store 数据的方法 使用 react-redux 下 useSelector

```
...

import { useSelector } from 'react-redux';

...

const value = useSelector((state) => {
return _.get(state.formValues, name);
});

...

```

2、每个业务组件（即和 json 中的组件存在映射关系的组件）的 props 中都可以取的 form 实例

```javascript
export default function CertNo(props) {
  const [disabled, setDisabled] = useState(false);
  const { formKey, form } = props;

  const formKeyPrefix = getSiblingsFormKeyPrefix(formKey);
  const certType = useSelector((state) => {
    return _.get(state.formValues, `${formKeyPrefix}.certType`);
  });
  // 联动证件类型
  useEffect(() => {
    setDisabled(certType === 'I');
  }, [certType]);

  return <RowInput {...props} disabled={disabled} />;
}
```

1、表单数据流
获取表单数据、获取试算因子数据、验证表单数据
2、订单数据查询
3、试算节点

2、组件开发
2.1、函数组件
2.2、类组件


TODO list 放在后面处理的组件 
逐页阅读条款 supervision
气泡提示（隐藏） tooltipHidden
条款组件

支付流程
健康险的
调用下一步接口后接口返回

```json
{
  "data": {
    "url": "https://cashier.zhongan.com/za-cashier-web/gateway.do?",
    "formData": {
      "merchant_code": "2010022401",
      "subject": "尊享e生百万医疗（泽普版）",
      "account_info": "{\"dk_phone_no\":\"18521700084\"}",
      "sign": "d19c1181f29149a4bb789087350715dd",
      "amt": "61",
      "notify_url": "https://aquarius-web.zhongan.io/api/v1/notify/paymentNotify",
      "show_result_page": "N",
      "request_charset": "utf-8",
      "out_trade_no": "202111051637072593514800001",
      "extra_info": "{\"pay_back_url\":\"http://dev-aquarius-web.zhongan.io/queryPay?orderNo=2021110516370725935148&successAction=jumpToPage&failedAction=jumpToPage&successInfo=7d7981a9&failedInfo=7d7981a9&oth=oth\",\"holderPhoneNo\":\"18521700084\",\"pay_page\":\"Y\"}",
      "notify_info": "{\"orderNo\":\"2021110516370725935148\"}",
      "pay_channel": "wxpay_sign",
      "return_url": "http://dev-aquarius-web.zhongan.io/queryPay?orderNo=2021110516370725935148&successAction=jumpToPage&failedAction=jumpToPage&successInfo=7d7981a9&failedInfo=7d7981a9&oth=oth",
      "src_type": "mobile",
      "expiry_time": "120",
      "order_type": "none",
      "sign_type": "MD5"
    }
  },
  "pageAction": "formSubmit"
}
```

### 组件开发规范

1. 预览值设置

组件默认值会在组件的`props.attrs`中传入, 如果不是从这里取的组件值, 需要特殊处理

1. 意外情况一
例: 利益演示组件中, 数据从模块中调用接口获取, 然后传递给子组件, 因为不能将默认数据传递给模块, 所以这里直接把默认数据存在了本地

```javascript
useEffect(() => {
  // 判断环境是否使用预览数据
  if (isPreviewMode()) {
    setBenefitTable(previewData);
    return;
  }

  const names = form.getFieldsName((meta) => meta.isBenefitFactor);
  form
    .validateFields(names, { noUpdate: true })
    .then((val) => {
      isBenefitFactor();
    })
    .catch(() => {
      setIsCanRequestBenfactor(false);
    });
}, [JSON.stringify(formValuesStr)]);
```
2. 意外情况二
表单类组件, 所有表单元素通过适配层塞入生成, 没有商品信息无法预览
如: 通用信息收集, 投保人信息收集等


试算的响应数据
```json
{
    "payType": "2", // 值 1 年交 2分期付款
    "insuredList": null,
    "serialCount": 0,
    "initialPremium": 180,
    "discountPremium": null,
    "nextPremium": 0,
    "totalPremium": 180,
    "totalSumInsured": null,
    "nextPaymentDate": null
}
```