本地开发 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#/

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

需求文档地址 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 实例

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 条款组件

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

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

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. 意外情况二 表单类组件, 所有表单元素通过适配层塞入生成, 没有商品信息无法预览 如: 通用信息收集, 投保人信息收集等

试算的响应数据

{
    "payType": "2", // 值 1 年交 2分期付款
    "insuredList": null,
    "serialCount": 0,
    "initialPremium": 180,
    "discountPremium": null,
    "nextPremium": 0,
    "totalPremium": 180,
    "totalSumInsured": null,
    "nextPaymentDate": null
}