公用组件库

说明：小程序端自开发的，频率使用较高的公有组件库。组件命名以GGCPS开头，以区分其他第三方库的包名。

引用方式： import { XXX } from”@/GGCPS”;

01.GGCPS_TopBar

Type1：搜索

mode=’search’
图示：

调用方式：

<GGCPS_TopBar
   //模式
   mode="search"
   //输入框内提示内容
   searchPlaceholder={this.state.search.placeholder}
   //搜索按钮事件处理
   searchOnclick={(value) => {
      let func = this.state.search.onClick;
      if (func) func(value);
   }}
/>

统一对外接口（Mock中定义）：

search: {
  //默认显示信息
  placeholder: '搜索科室',
  //搜索按钮点击事件处理
  //value……搜索输入框传入内容
  onClick: (value) => {
     console.log("::search-click::");
     console.log(value);
  }
}

Type2：医生信息

mode=’doctorInfor’

调用方式：

<GGCPS_TopBar 
  mode='doctorInfor' 
  //医生数据
  //参考下面mock中定义字段
  doctorInfor={this.state.doctorinfor}
/>

统一对外接口（Mock中定义）：

doctorinfor: {
   //医生头像
   pic: super.BASE_RES('index/user.svg'),
   //医生姓名
   name: "张三",
   //医生职称
   identity: "副主任医师",
   //可选（右侧的消息按钮及消息状态）
   msg: {
      //是否激活小红点
      state: true,
      //点击事件处理  
      onClick: () => {
         console.log("## MSG BTN ##");
      }
  }
}

Type3：患者信息

mode=’patientInfor’

调用方式：

//patientInfor
//患者数据
//参考下面mock中定义字段
<GGCPS_TopBar mode='patientInfor' patientInfor={this.state.patientinfor} />

统一对外接口（Mock中定义）：

patientinfor: {
  //患者头像
  pic: super.BASE_RES('index/user.svg'),
  //患者姓名
  name: "张三",
  //第一行额外数据
  extra1: "男",
  //第二行额外数据
  extra2: "卡号：32030303030303",
}

Type4：信息

mode=’infor’

调用方式：

//inforContent
//自定义内容
<GGCPS_TopBar mode='infor' inforContent={<View>
          <Text style={{ marginRight: '10px' }}>{topBarInfor.docName}</Text>
          <Text>{topBarInfor.office}</Text>
      </View>
   } 
/>

统一对外接口（Mock中定义）：

可以按实际情况自定义

02.GGCPS_TopBar