背景

过去的一年，我完成了很多业务场景的开发。因为有编写开发设计文档的习惯，所以在年初做整理的时候，打开文档列表，能够很容易的找到过去的每一个设计方案。

于是，借着休息日的时光，整理了部分功能，编写成完整的文章，分享出来。

今天分享一篇关于通过功能描述与拆分进而捋清开发设计方案的业务场景实现方案。

购买须知功能

购买须知业务组件

1、功能描述

1.1 必需校验

每次重新进入都需要进行购买须知

1.2 购买须知状态的区分

• 未购买须知，不通过购买须知校验，区域内做提示且【提交购买】时进行拦截；
• 购买须知不通过，不可投保，做toast提示且【提交购买】时进行拦截；
• 购买须知通过，通过购买须知校验，继续其他校验。

1.3 购买须知弹窗

• 其中一项或几项符合：点击改按钮，购买须知状态变为不通过并给出toast提示；
• 全部未有：点击改按钮，购买须知状态变为通过。

2、交互流程图

3、购买须知公共组件

3.1 重点功能1：根据购买须知状态获取展示信息

（1）根据当前的购买须知状态进行校验，校验提示分类：

• 未购买须知，展示文字：请查看购买须知！，色号：红色
• 购买须知不通过，展示文字：抱歉，本次购买商品不符合投保条件！，色号：红色
• 购买须知通过，展示文字：本次购买商品符合投保条件，色号：黑色

（2）设置对应的枚举对象

（3）根据状态的具体值获取枚举对应值（对象）；

（4）页面会按照获取的最终值进行渲染。

/**
   * 根据购买须知的状态获取购买须知的展示文字
   * @param {number} status 根据购买须知的状态 2-不通过 3-未告知 1-通过
   * @return {string} 返回的校验信息
   */
  getbuyInformShowTip(status) {
    let buyInformStatusObjAll = {
      1: {
        text: '本次购买商品符合投保条件',
        className: '',
      },
      2: {
        text: buyInformStatusObj[2],
        className: 'text-red',
      },
      3: {
        text: buyInformStatusObj[3],
        className: 'text-red',
      },
    };
    let show = buyInformStatusObjAll[status] || {};
    return show;
  }

3.2 重点功能2：对于购买须知状态的公共处理方法

公共处理包括两项：使用回调函数返回状态值和根据状态值设置页面提示的回显。

/**
   * 对于购买须知状态的公共处理方法
   */
  const commonStatusHandle = status => {
    callback && callback(status);
    setTipVal(status);
  };

两个操作：选择【全部未有】或者选择【其中一项或几项符合】，都会调用上面的公共处理方法。

/**
   * 操作-全部未有
   */
  const allOk = () => {
    setVisible(false);
    commonStatusHandle(1);
  };

  /**
   * 操作-其中一项或几项符合
   */
  const failed = () => {
    setVisible(false);
    commonStatusHandle(2);
  };

5、页面引入该组件并添加赋值和回调等功能

（1）定义购买须知状态变量：buyInformStatus，不设置初始默认值；

// 购买须知状态
const [buyInformStatus, setbuyInformStatus] = useState(null);

（2）引入购买须知公共子组件，添加回调函数：buyInformCallback，该回调函数的主要功能是返回购买须知的状态，并在当前页面中进行赋值操作。

import {  EmployerbuyInform } from '@/bundleComponents';
......
/**
 * 购买须知组件的回调
 */
const buyInformCallback = status => {
  setbuyInformStatus(status);
};

......
<EmployerbuyInform callback={buyInformCallback} data={{ status: buyInformStatus }} />

（3）初始没有任何操作时，页面不展示任何提示，所以需要在【提交】时校验当前购买须知的状态，并告知子组件状态值，在子组件中进行提示的回显。

其中，提示内容的获取是通过公共方法【获取购买须知状态校验提示】

/**
   * 提交操作前的校验-获取购买须知错误提示并设置状态值
   */
  const getAndSetbuyInformStatus = () => {
    let msg = '';
    // 购买须知状态校验
    let buyInformStatusInit = buyInformStatus ? buyInformStatus : 3;
    setbuyInformStatus(buyInformStatusInit);
    msg = employerBasics.getbuyInformCheckMsg(buyInformStatusInit);
    return msg;
  };

  /**
   * 提交操作前的校验
   */
  const beforeFinishCheckMsg = () => {
    const { employeeNum } = data;
    let msg = '';
    // 获取购买须知状态校验的错误提示
    msg = getAndSetbuyInformStatus();
    return msg;
  };

获取购买须知状态校验提示

1、根据当前的购买须知状态进行校验，校验提示分类：

• 未购买须知，提示：请查看购买须知！
• 购买须知不通过，提示：抱歉，本次购买商品不符合投保条件！

2、设置公共枚举对象，后面还用得到

/** @name 购买须知状态对应枚举对象  */
const buyInformStatusObj = {
  2: '抱歉，本次购买商品不符合投保条件！',
  3: '请查看购买须知！',
};

3、根据状态的具体值获取枚举对应值（字符串），如果不存在则返回空。

/**
   * 根据购买须知的状态获取购买须知的校验信息 返回值可以为空
   * @param {number} status 根据购买须知的状态 2-不通过 3-未告知
   * @return {string} 返回的校验信息
   */
  getbuyInformCheckMsg(status) {
    let msg = buyInformStatusObj[status];
    msg = msg ? msg : '';
    return msg;
  }

总结

虽然是老生常谈了，但是还是想强调一下：

后面会继续整理其他的业务场景实现方案，敬请期待。

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。