import React from 'react'; import DefaultAvatar from '../../assets/img-defaultAvatar.png'; import Logo from '../../assets/img-logo.png'; import MyTab from '../../components/MyTab/MyTab'; import Chat from '../../components/Chat/Chat'; import FieldGroup from '../../components/FieldGroup/FieldGroup'; import {OverlayTrigger, Popover, Col, Image, FormGroup,InputGroup, FormControl, Glyphicon, Button, Table} from 'react-bootstrap'; const popoverBottom = ( ); class App extends React.Component{ constructor(props){ super(props); this.state = { appointmentModal: false,//邀约弹窗 appConfirmModal: false,//确认邀约弹窗 appWaitedModal: false,//等待支付弹窗 addPatientModal: false,//添加患者弹窗显示状态 btnSatus: 0,//获取验证码按钮状态 btnText: '获取动态密码',//按钮text intervalTime: 9,//时间 errorText: '',//错误提示 errorType: true,//是否错误 patientCaptcha: false,//患者验证码 showChat: false,//是否进入会话 patientForm: { name: '',//姓名 sex: '',//性别 age: '',//年龄 phone: '',//电话 captcha: '',//验证码 }, patientFormInit: { name: '',//姓名 sex: '',//性别 age: '',//年龄 phone: '',//电话 captcha: '',//验证码 }, patientList: [ {id: 1,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 2,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 3,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 4,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 5,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 6,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 7,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 8,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 9,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 10,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 11,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 12,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 13,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 14,name: '王帆',sex: 'men',age: '26',phone: '18904032521'}, {id: 15,name: '王帆',sex: 'men',age: '26',phone: '18904032521'} ], doctorList: [ {id: 1,name: '王瀚哲1',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'}, {id: 2,name: '王瀚哲2',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'}, {id: 3,name: '王瀚哲3',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'}, {id: 4,name: '王瀚哲4',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'}, {id: 5,name: '王瀚哲5',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'}, {id: 6,name: '王瀚哲6',title: '主任医师',hospital: '南方医院',department: '口腔科',speciality: '牙体牙髓疾病、前牙美……'}, ], orderList:[ {id: 1,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '已经结束'}, {id: 2,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '进入会话'}, {id: 3,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '已经结束'}, {id: 4,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '进入会话'}, {id: 5,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '进入会话'}, {id: 6,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '进入会话'}, {id: 7,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '已经结束'}, {id: 8,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '进入会话'}, {id: 9,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '已经结束'}, {id: 10,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '已经结束'}, {id: 11,associateDoctor: '王瀚哲',transferStatus: '转出', date: '2017/09/24 10:00', orderStatus: '已经结束'} ] }; this.openAddPatientModal = this.openAddPatientModal.bind(this); this.closeAddPatientModal = this.closeAddPatientModal.bind(this); this.submitPatient = this.submitPatient.bind(this); this.handleInputChange = this.handleInputChange.bind(this); this.intervalMethod = this.intervalMethod.bind(this); this.showAppointmentModal = this.showAppointmentModal.bind(this); this.hideAppointmentModal = this.hideAppointmentModal.bind(this); this.showAppConfirmModalModal = this.showAppConfirmModalModal.bind(this); this.hideAppConfirmModalModal = this.hideAppConfirmModalModal.bind(this); this.showAppWaitedModalModal = this.showAppWaitedModalModal.bind(this); this.hideAppWaitedModalModal = this.hideAppWaitedModalModal.bind(this); this.showChat = this.showChat.bind(this); this.hideChat = this.hideChat.bind(this); } //隐藏会话窗口 hideChat() { this.setState({ showChat: false }); } //进入会话窗口 showChat() { this.setState({ showChat: true }); } //邀约弹窗 showAppointmentModal() { this.setState({ appointmentModal: true }); } hideAppointmentModal() { this.setState({ appointmentModal: false }); } //确认邀约弹窗 showAppConfirmModalModal() { this.setState({ appointmentModal: false, appConfirmModal: true }); } hideAppConfirmModalModal() { this.setState({ appConfirmModal: false }); } //等待支付弹窗 showAppWaitedModalModal() { this.setState({ appConfirmModal: false, appWaitedModal: true }); } hideAppWaitedModalModal() { this.setState({ appWaitedModal: false }); } //控件输入 handleInputChange(e){ const target = e.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; const form = this.state.patientForm; form[name] = value; this.setState({ patientForm: form }); } //轮询改变文字方法 intervalMethod(e) { e.preventDefault(); if(this.state.btnSatus === 0){ //interval 和 timeout 都需要 bind 一下当前的this,不然指向window this.timer = setInterval(function () { //跳出 if(this.state.intervalTime <=0){ clearInterval(this.timer); this.setState({ intervalTime: 9, btnSatus: 0, btnText: '获取动态密码' }); return; } //执行状态更新 可能是异步 (prevState, props) this.setState((prevState) => ( { btnSatus: 1, btnText: '重新获取('+prevState.intervalTime+'s)', intervalTime: prevState.intervalTime - 1, patientCaptcha: '1234' } )); }.bind(this),1000); } } //显示病人弹窗 openAddPatientModal() { this.setState({ addPatientModal: true }); } //关闭病人弹窗 closeAddPatientModal() { this.setState({ addPatientModal: false }); } //提交病人数据 插入到 patientList 里 submitPatient() { // e.preventDefault(); if(this.state.patientCaptcha !== this.state.patientForm.captcha){ this.setState({ errorType: false, errorText: this.state.patientCaptcha === false ? '请点击获取动态密码' : '您输入的动态密码有误' }); return; } const list = this.state.patientList; list.push(this.state.patientForm); this.setState({ patientList: list, addPatientModal: false, patientForm: this.state.patientFormInit//清空表单 }); } render() { return (
南方医务通医生工作台
李秋豪
{ this.state.showChat? :
{ this.state.doctorList.map((doctor) => ) }
医生姓名 职称 医院 科室 擅长 操作
{doctor.name} {doctor.title} {doctor.hospital} {doctor.department} {doctor.speciality}
3/60页
跳转到至第
}
); } } export default App;