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} |
|
)
}
}
);
}
}
export default App;