Sum up

1 组件

越单一的组件，越是容易复用

• 基础 / base
• 功能 / capability
• 业务 / property

2 类型

1、在编写界面的时候，就可以定义类型，让类型来辅助开发。

2、defineProps 与 HttpType 是有冲突的。

可以通过 Omit 剔除

3、 type 应该保留原始数据 raw ，因为 API 接入总是让人意想不到的

3 api

1、 独立 URLS，把源头也带上，更方便

2、 如果 api 少，没有必要独立

3、 可否把 数据的处理完全放在 API，而产出的仅为自定义的 type？

即，将类型转换都放入 api

如

const URLS = {
  // 查询所有数据
  报告_列表: "/monitor/device/osDeviceBodyUseLogController/selectList",

  体测机使用: "/monitor/device/osDeviceBodyUseLogController/deviceBodyUse",

  /**
   * 体测机发起支付
   *
   * http://www.cqzmi.com/api/monitor/doc.html#/default/%E4%BD%93%E6%B5%8B%E6%9C%BA%E4%BD%BF%E7%94%A8%E8%AE%B0%E5%BD%95/deviceBodyPayUsingPOST
   */
  获取体测结果_发起支付:
    "/monitor/device/osDeviceBodyUseLogController/deviceBodyPay",

  查询设备详情: "/monitor/device/osDeviceBodyController/", // 通过设备id 查询相关信息

  /**
   * http://www.cqzmi.com/api/monitor/doc.html#/default/%E4%BD%93%E6%B5%8B%E6%9C%BA%E4%BD%BF%E7%94%A8%E8%AE%B0%E5%BD%95/getReportPdfUrlUsingGET
   */
  查看PDF结果: "/monitor/device/osDeviceBodyUseLogController/getReportPdfUrl",
};

// ----------------------------------------------------------------------------
// 体测机 通过id 查询详情
// ----------------------------------------------------------------------------

export const reqGetDeviceDetailById = (deviceId: number) =>
  get<IResDeviceDetail>(URLS.查询设备详情 + deviceId);
interface IResDeviceDetail extends IHttpResponseBase {
  data: {
    payMoney: number;
  };
}

// ----------------------------------------------------------------------------
// 体测机 发起支付
// ----------------------------------------------------------------------------

interface IReqPayCheckup {
  amount: number;
  openId: string;
  deviceBoydId: number;
  scanId: string;
  couponId?: number;
}

export const reqPayCheckup = (data: IReqPayCheckup) =>
  post<IResPayOrder>(URLS.获取体测结果_发起支付, data);

// ----------------------------------------------------------------------------
// 获取 体测结果 PDF
// ----------------------------------------------------------------------------

export const reqCheckupPDF = (scanId: string) =>
  get<IReqCheckupPDF>(URLS.查看PDF结果, { scanId });
export interface IReqCheckupPDF extends IHttpResponseBase {
  data: string;
}

微信

微信可以挂起页面与在此进入，应该充分考虑这种情况

不足

1

data 驱动界面

data 与 逻辑绑定

一个例子：优惠券 与 总价的计算

2

未分类 unclassified

用户输入相关

初期用户输入没有考虑到夸页面逻辑，将太多的 数据 放在 state 中，这导致了很多的问题。

以后在处理这样的逻辑，需要注意使用 事件 来进行驱动，尽早放在 store 中，可以避免很多问题！