ywt-react/view/ExpertInquiry/ExpertInquiryView.js

import React from 'react';
import DefaultAvatar from '../../assets/img-defaultAvatar.png';
import Logo from '../../assets/img-logo.png';
import Circle from '../../assets/bg_circle.png';
import Line from '../../assets/bg_line.png';
import {Media, OverlayTrigger, Popover, Col, Image, FormGroup,InputGroup, FormControl, Glyphicon, Button, Table, ControlLabel, Modal} from 'react-bootstrap';
import FieldGroup from '../../components/FieldGroup/FieldGroup';
import MyTab from '../../components/MyTab/MyTab';
import './ExpertInquiryView.css';
import Chat from '../../components/Chat/Chat';

const popoverBottom = (
	<Popover id="popover-positioned-scrolling-bottom">
		<Button bsSize="xsmall" href="#/" style={{border:0,background:'#fff',width:'120px'}}><Glyphicon glyph="off" />退  出</Button>
	</Popover>
);

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,//患者验证码
			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);
	}

	//邀约弹窗
	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;
				}
				//执行状态更新 可能是异步
				this.setState((prevState, props) => (
					{
						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) {
		// 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 (
			<div>
				<div className="homeTop clearfix">
					<div className="left">
						<Image src={Logo} responsive></Image>
					</div>
					<div className="right">
                        南方医务通医生工作台
					</div>
				</div>

				<div className="homeBody clearfix">
					<div className="left">
						<div className="avatarbox">
							<OverlayTrigger container={this} trigger="click" placement="bottom" overlay={popoverBottom}>
								<Button style={{border: 0,background: '#fff'}}>
									<Image className="avatar" src={DefaultAvatar} rounded responsive/>
								</Button>
							</OverlayTrigger>
							<div className="name">李秋豪</div>
						</div>
						<div className="col-lg-12 list">
							<ul className="parent">
								<li><a href="#/userMessage"><span className="icon icon-message"></span><span className="text-message">消息&nbsp;&nbsp;2</span></a></li>
								<li><a href="#/home"><span className="icon icon-home"></span><span>首页</span></a></li>
								<ul className="childList">
									<li className="active"><a href="#">专家询诊</a></li>
									<li><a href="#">双向转诊</a></li>
									<li><a href="#">名医主诊</a></li>
									<li><a href="#">名医主诊</a></li>
								</ul>
								<li><a href="#"><span className="icon icon-patient"></span><span>我的患者</span></a></li>
								<li><a href="#"><span className="icon icon-doctor"></span><span>我的关联医生</span></a></li>
								<li><a href="#"><span className="icon icon-expert"></span><span>平台所有医生</span></a></li>
							</ul>
						</div>
					</div>
					<div className="right" style={{overflow: 'auto'}}>
						<div className="body">
							<div className="head">					
								<div className="my_tab_container">
									<MyTab>
										<div titleName = "找患者">
											<div className="clearfix">
												<div style={{position: 'relative'}}>
													<FormGroup style={{width: '300px',margin: '0 auto'}}>
														<InputGroup>
															<InputGroup.Addon style={{
																border: 0,
																background: '#fff',
																borderTopLeftRadius: '20px',
																borderBottomLeftRadius: '20px'
															}}><Glyphicon glyph="search" /></InputGroup.Addon>
															<FormControl type="text" style={{border: 0,boxShadow: 'none'}}/>
															<InputGroup.Button>
																<Button bsStyle="link" style={{background: '#fff',borderTopRightRadius: '20px',borderBottomRightRadius: '20px'}}>搜索</Button>
															</InputGroup.Button>
														</InputGroup>
													</FormGroup>
													<Button bsStyle="danger" onClick={this.openAddPatientModal} style={{
														position: 'absolute',
														right: 10,
														top: 1,
														borderRadius: 50
													}}>添加患者</Button>
												</div>
												<div className="tableBox">
													<Table striped hover >
														<thead>
															<tr>
																<th>患者姓名</th>
																<th>性别</th>
																<th>年龄（Y）</th>
																<th>手机号</th>
																<th>操作</th>
															</tr>
														</thead>
														<tbody>
															{
																this.state.patientList.map((patient) =>
																	<tr key={patient.id}>
																		<td>{patient.name}</td>
																		<td>{patient.sex === 'men'?'男':'女'}</td>
																		<td>{patient.age}</td>
																		<td>{patient.phone}</td>
																		<td>
																			<Button bsSize="small" bsStyle="link" onClick={this.showAppointmentModal}>帮他/她预约</Button>
																		</td>
																	</tr>
																)
															}

														</tbody>
													</Table>
													<div className="clearfix myPagination">
														<div className="addheigh">3/60页</div>
														<div className="addheigh">
															<Button bsStyle="link">上一页</Button>
														</div>
														<div className="addheigh">
															<Button bsStyle="link">下一页</Button>
														</div>
														<div className="">
                                                            跳转到至第
															<input style={{width: '30px'}} type="text"/>
                                                            页
															<Button style={{background: '#4f80f6',marginLeft: '10px'}} bsStyle="primary" bsSize="xsmall">确定</Button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div titleName = "我的订单">
											<Chat test="aaa" orderType={0} doctorType={1}>
											</Chat>
										</div>
										<div titleName = "询诊流程" style={{padding: 60}}>
											<Media>
												<Media.Left style={{position: 'relative'}}>
													<img width={60} height={60} src={Circle} alt=""/>
													<div style={{position: 'absolute',fontSize: 18,top: 18,left: 21,color: '#fff'}}>诊</div>
												</Media.Left>
												<Media.Right align="middle">
													<span style={{color: '#808a9c'}}>患者到门诊医生处就诊；</span>
												</Media.Right>
											</Media>
											<Media style={{marginTop: 3}}>
												<Media.Left>
													<img width={60} height={40} src={Line} alt=""/>
												</Media.Left>
											</Media>
											<Media style={{marginTop: 0}}>
												<Media.Left style={{position: 'relative'}}>
													<img width={60} height={60} src={Circle} alt=""/>
													<div style={{position: 'absolute',fontSize: 18,top: 18,left: 21,color: '#fff'}}>邀</div>
												</Media.Left>
												<Media.Right align="middle">
													<span style={{color: '#808a9c'}}>门诊医生根据患者病情，邀约关联医生询诊（邀约前患者需支付询诊费用）；</span>
												</Media.Right>
											</Media>
											<Media style={{marginTop: 3}}>
												<Media.Left>
													<img width={60} height={40} src={Line} alt=""/>
												</Media.Left>
											</Media>
											<Media style={{marginTop: 0}}>
												<Media.Left style={{position: 'relative'}}>
													<img width={60} height={60} src={Circle} alt=""/>
													<div style={{position: 'absolute',fontSize: 18,top: 18,left: 21,color: '#fff'}}>论</div>
												</Media.Left>
												<Media.Right align="middle">
													<span style={{color: '#808a9c'}}>门诊医生与关联医生在平台上留言（图文），讨论患者情况，门诊医生整理会话记录并总结建议；</span>
												</Media.Right>
											</Media>
											<Media style={{marginTop: 3}}>
												<Media.Left>
													<img width={60} height={40} src={Line} alt=""/>
												</Media.Left>
											</Media>
											<Media style={{marginTop: 0}}>
												<Media.Left style={{position: 'relative'}}>
													<img width={60} height={60} src={Circle} alt=""/>
													<div style={{position: 'absolute',fontSize: 18,top: 18,left: 21,color: '#fff'}}>录</div>
												</Media.Left>
												<Media.Right align="middle">
													<span style={{color: '#808a9c'}}>将整理的会话记录与建议发送给患者。</span>
												</Media.Right>
											</Media>
										</div>
									</MyTab>
								</div>
							</div>
						</div>
					</div>
				</div>
				{/*添加患者*/}
				<Modal show={this.state.addPatientModal} onHide={this.closeAddPatientModal}>
					<Modal.Header closeButton>
						<Modal.Title> </Modal.Title>
					</Modal.Header>
					<Modal.Body>
						<form>
							<FieldGroup
								id="formControlsText"
								type="text"
								label="姓名"
								placeholder="请输入患者姓名"
								value={this.state.patientForm.name}
								name="name"
								onChange={this.handleInputChange}
							/>
							<FormGroup controlId="formControlsSelect">
								<ControlLabel style={{color: '#808a9c'}}>性别</ControlLabel>
								<FormControl name="sex" onChange={this.handleInputChange} componentClass="select"
									placeholder="select" value={this.state.patientForm.sex} style={{
										background: '#f0f1f7',borderRadius: 0,MozBorderRadius: 0,border: '#e8eaf1'}}>
									<option value="">请选择</option>
									<option value="men">男</option>
									<option value="women">女</option>
								</FormControl>
							</FormGroup>
							<FieldGroup
								id="formControlsText"
								type="text"
								label="年龄"
								placeholder="请输入患者年龄"
								value={this.state.patientForm.age}
								onChange={this.handleInputChange}
								name="age"
							/>
							<FieldGroup
								id="formControlsText"
								type="text"
								label="手机号"
								placeholder="请输入手机号"
								name="phone"
								value={this.state.patientForm.phone}
								onChange={this.handleInputChange}
							/>
							<div>
								{this.state.errorType == false ?
									(<div style={{color: '#ff6f56',visibility: 'visible'}}>{this.state.errorText}</div>):
									(<div style={{color: '#ff6f56',visibility: 'hidden'}}>{this.state.errorText}</div>)
								}
							</div>
							<div className="clearfix">
								<Col lg={7} md={7} xs={7} style={{paddingLeft: 0}}>
									<FieldGroup
										id="formControlsText"
										type="text"
										label="验证码"
										placeholder="请输入患者提供的验证码"
										name="captcha"
										onChange={this.handleInputChange}
										value={this.state.patientForm.captcha}
									/>
								</Col>
								<Col lg={5} md={5} xs={5} style={{paddingTop: 24}}>
									<Button bsStyle="primary" onClick={this.intervalMethod}
										style={{
											border: '1px #4f80f6 solid',
											background: '#4f80f6',
											color: '#fff'}}>{this.state.btnText}</Button>
								</Col>
							</div>
							<div className="text-center">
								<Button bsStyle="primary" onClick={this.submitPatient} style={{width: 120, height: 40,border: '1px #4f80f6 solid', background: '#4f80f6',color: '#fff', borderRadius: 50,MozBorderRadius: 50}}>确定</Button>
							</div>
						</form>
					</Modal.Body>
				</Modal>
				{/* 预约 */}
				<Modal show={this.state.appointmentModal} onHide={this.hideAppointmentModal}>
					<Modal.Header closeButton>
						<Modal.Title className="text-center" style={{color: '#4f80f6',fontSize: 18}}>邀约关联医生</Modal.Title>
					</Modal.Header>
					<Modal.Body style={{background: '#f6f7fa',padding: 0}}>
						<div className="clearfix" style={{paddingTop: '15px'}}>
							<Col lg={4} md={4} xs={4}>
								<FormGroup controlId="formControlsSelect">
									<FormControl componentClass="select" placeholder="select">
										<option value="1">南方医院</option>
										<option value="2">广医三院</option>
									</FormControl>
								</FormGroup>
							</Col>
							<Col lg={4} md={4} xs={4}>
								<FormGroup controlId="formControlsSelect">
									<FormControl componentClass="select" placeholder="select">
										<option value="1">口腔科</option>
										<option value="2">内科</option>
										<option value="3">中医科</option>
									</FormControl>
								</FormGroup>
							</Col>
							<Col lg={4} md={4} xs={4}>
								<FormGroup style={{width: '100%',margin: '0 auto'}}>
									<InputGroup>
										<InputGroup.Addon style={{
											border: 0,
											background: '#fff',
											borderTopLeftRadius: '20px',
											borderBottomLeftRadius: '20px'
										}}><Glyphicon glyph="search" /></InputGroup.Addon>
										<FormControl type="text" style={{border: 0,boxShadow: 'none'}}/>
										<InputGroup.Button>
											<Button bsStyle="link" style={{background: '#fff',borderTopRightRadius: '20px',borderBottomRightRadius: '20px'}}>搜索</Button>
										</InputGroup.Button>
									</InputGroup>
								</FormGroup>
							</Col>
						</div>
						<div className="tableBox">
							<Table striped hover >
								<thead>
									<tr>
										<th>医生姓名</th>
										<th>职称</th>
										<th>医院</th>
										<th>科室</th>
										<th>擅长</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									{
										this.state.doctorList.map((doctor) =>
											<tr key={doctor.id}>
												<td>{doctor.name}</td>
												<td>{doctor.title}</td>
												<td>{doctor.hospital}</td>
												<td>{doctor.department}</td>
												<td>{doctor.speciality}</td>
												<td>
													<Button bsSize="small" bsStyle="link" onClick={this.showAppConfirmModalModal}>邀约</Button>
												</td>
											</tr>
										)
									}

								</tbody>
							</Table>
							<div className="clearfix myPagination" style={{paddingBottom: '15px'}}>
								<div className="addheigh">3/60页</div>
								<div className="addheigh">
									<Button bsStyle="link">上一页</Button>
								</div>
								<div className="addheigh">
									<Button bsStyle="link">下一页</Button>
								</div>
								<div className="">
                                    跳转到至第
									<input style={{width: '30px'}} type="text"/>
                                    页
									<Button style={{background: '#4f80f6',marginLeft: '10px'}} bsStyle="primary" bsSize="xsmall">确定</Button>
								</div>
							</div>
						</div>
					</Modal.Body>
				</Modal>
				{/* 确认 */}
				<Modal show={this.state.appConfirmModal} bsSize="small" onHide={this.hideAppConfirmModalModal}>
					<Modal.Body className="text-center" style={{paddingTop: 45,fontSize: 18}}>
						<p>专家询诊订单将发送给患者王帆</p>
						<p>（手机号：18904032521）支付</p>
						<Button onClick={this.hideAppConfirmModalModal} className="btn-end btn-cancle">取消</Button>
						<Button onClick={this.showAppWaitedModalModal} className="btn-end btn-confirm">确定</Button>
					</Modal.Body>
				</Modal>
				{/* 确认结果 */}
				<Modal show={this.state.appWaitedModal} bsSize="small" onHide={this.hideAppWaitedModalModal}>
					<Modal.Body className="text-center" style={{paddingTop: 45,fontSize: 18}}>
						<p>专家询诊订单已发送给患者王帆</p>
						<p>（手机号：18904032521），</p>
						<p>请等待患者支付</p>
						<Button onClick={this.hideAppWaitedModalModal} className="btn-end btn-confirm">确定</Button>
					</Modal.Body>
				</Modal>
			</div>
		);
	}
}

export default App;
// export default CSSModules(App,classes);