ywt-react/view/SendChatLog/SendChatLogView.js

import React from 'react';
import DefaultAvatar from '../../assets/img-defaultAvatar.png';
import Logo from '../../assets/img-logo.png';
import Thumb from '../../assets/img-thumb.jpg';
import Success from '../../assets/img-success.jpg';
import {OverlayTrigger, Popover, Modal, Image, Glyphicon, Button} from 'react-bootstrap';
import classes from './SendChatLogView.css';

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{
	// state = {};
	constructor(props){
		super(props);
		this.state = {
			showEndModal: false,
			showCommitSuccess: false
		};
		this.showEndModal = this.showEndModal.bind(this);
		this.hideEndModal = this.hideEndModal.bind(this);
		this.confirmEndModal = this.confirmEndModal.bind(this);
		this.showCommitSuccessModal = this.showCommitSuccessModal.bind(this);
		this.hideCommitSuccessModal = this.hideCommitSuccessModal.bind(this);
	}

	showEndModal(e){
		this.setState({
			showEndModal: true
		});
	}
	hideEndModal(e){
		this.setState({
			showEndModal: false
		});
	}
	confirmEndModal(e) {
		// this.hideEndModal();
		this.setState({
			showEndModal: false,
			showCommitSuccess: true
		});
	}

	//提交成功弹窗
	showCommitSuccessModal(e) {
		this.setState({
			showCommitSuccess: true
		});
	}
	hideCommitSuccessModal(e) {
		this.setState({
			showCommitSuccess: false
		});
	}
	//todo 聊天记录选择

	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">
								<ul className="clearfix">
									<li className="col-lg-4 col-md-4 col-xs-4"><a href="#/expertinquiry">找患者</a></li>
									<li className="col-lg-4 col-md-4 col-xs-4 active" ><a href="#/myorder">我的订单</a></li>
									<li className="col-lg-4 col-md-4 col-xs-4"><a href="#/expert">专家询诊流程</a></li>
								</ul>
							</div>
							<div className="sendBox">
								<div className="send-header">本次会话，是关于患者王帆的病情讨论！</div>
								<div className="send-body">
									<ul className="send-list">
										<li className="send-list-item">
											<div className="doctor">李秋豪医生：</div>
											<div className="checkBox">
												<div className="check"></div>
												<div className="context">我这有位心肌缺血患者，需要您指导治疗，病史、检查报告如下。</div>
											</div>
										</li>
										<li className="send-list-item">
											<div className="doctor">李秋豪医生：</div>
											<div className="checkBox">
												<div className="uncheck"></div>
												<div className="imgBox">
													<a href="#"><img src={Thumb} alt=""/></a>
												</div>
											</div>
										</li>
									</ul>
								</div>
								<div className="send-footer clearfix">
									<textarea className="messageBox" placeholder="请输入你的建议"></textarea>
								</div>
								<div style={{textAlign: 'center'}}>
									<Button className="btn-send" bsStyle="primary" onClick={this.showEndModal}>提交</Button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<Modal show={this.state.showEndModal} bsSize="small" onHide={this.hideEndModal}>
					<Modal.Body className="text-center">
						<p style={{fontSize: 18}}>是否确认提交？</p>
						<p style={{fontSize: 18}}>结束后将不能继续</p>
						<Button onClick={this.hideEndModal} className="btn-end btn-cancle">取消</Button>
						<Button onClick={this.confirmEndModal} className="btn-end btn-confirm">确定</Button>
					</Modal.Body>
				</Modal>
				<Modal show={this.state.showCommitSuccess} bsSize="small" onHide={this.hideCommitSuccessModal}>
					<Modal.Body className="text-center">
						<p>
							<Image src={Success} className="center-block" responsive style={{padding: '23px 0'}}></Image>
						</p>
						<p style={{fontSize: 18,paddingBottom: 30}}>提交成功</p>
					</Modal.Body>
				</Modal>
			</div>
		);
	}
}

export default App;