选择医生就诊时间页面

.project

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>sr-publicServicePlatform</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
		<buildCommand>
			<name>com.aptana.ide.core.unifiedBuilder</name>
			<arguments>
			</arguments>
		</buildCommand>
	</buildSpec>
	<natures>
		<nature>com.aptana.projects.webnature</nature>
	</natures>
</projectDescription>

component/appointment/date-source.js

@@ -0,0 +1,130 @@
(function(){
    Vue.component('date-scource', {
        template: `<section class="mt30" name="date-section">
                    <p class="c-f18">就诊日期</p>
                    <div class="div-table">
                        <div class="table-row">
                            <div class="table-cell arrow-cell"><i class="fa fa-caret-left c-f20 c-909090"></i></div>
                            <div v-for="d in planDate" class="table-cell">{{d.date}} {{d.day}}</div>
                            <div class="table-cell arrow-cell active"><i class="fa fa-caret-right c-f20 c-909090"></i></div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell c-f16 bgc-ebf4f3">上午</div>
                            <div class="table-cell active">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-fea7a8">停诊<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-f4b87f">无安排<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell"></div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell c-f16 bgc-ebf4f3">下午</div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-fea7a8">停诊<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-f4b87f">无安排<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell"></div>
                        </div>
                    </div>
                    <p class="c-f18 mt30">就诊时间</p>
                    <div class="clearfix">
                        <div class="c-20 fl mb20">
                            <div class="source-tag active"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                    </div>
                    <div class="mt30 c-t-center mb50">
                        <button class="btn btn-primary">确认预约</button>
                    </div>
                </section>`,
        props: [],
        data: function(){
            return {
                planDate: [],
                selectedDate: 0,
                amData: [],
                pmData: []
            }
        },
        mounted: function(){
            var now = new Date(),
                d = new Date();
            //默认只有7天的号源
            for(i=1; i<8; i++){
                var nDate = now.getDate();
                d.setDate(nDate + i);
                var obj = {
                    date: d.format("MM月dd日"),
                    day: getWeekDay(d.getDay())
                }
                this.planDate.push(obj);
            }
            
            //获取每天上午和下午的数据
            for(i=0; i<7; i++){
                var d = this.planDate[i].date;
                
            }
        }
    });
    
    function getWeekDay(val){
        switch(val){
            case 0:
                return "周日";
                break;
            case 1:
                return "周一";
                break;
            case 2:
                return "周二";
                break;
            case 3:
                return "周三";
                break;
            case 4:
                return "周四";
                break;
            case 5:
                return "周五";
                break;
            case 6:
                return "周六";
                break;
        }
    }
})()

component/common/header.js

@@ -17,7 +17,7 @@
                <div class="row">
                    <div class="ui-grid ui-grid-middle">
                        <div class="ui-col-0">
                            <img src="../../images/LOGO.png">
                            <img src="../../../images/LOGO.png">
                        </div>
                        <div class="ui-col-1 pl30">
                            <div class="input-group search-box">

css/cross.css

@@ -32,7 +32,14 @@
    white-space: nowrap;
    text-overflow: ellipsis;
}
.c-nowrap-multi {
    display:-webkit-box; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    -webkit-box-orient:vertical; 
    -webkit-line-clamp:2;
    word-break: break-all;
}
.c-break {
    word-wrap: break-word;
    word-break: break-all;

css/style.min.css

@@ -3130,7 +3130,7 @@ a.forum-item-title:hover {
body {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    color: #323232;
    overflow-x: hidden
}

page/appointment/css/appointment.css

@@ -0,0 +1,90 @@
.bgc-ebf4f3{
    background-color: #EBF4F3;
}
.c-fea7a8{
    color: #FEA7A8;
}
.c-f4b87f{
    color: #F4B87F;
}
.div-table{
    display: table;
    width: 100%;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
}
.table-row{
    display: table-row;
}
.table-cell{
    display: table-cell;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    padding: 15px 0 8px;
    text-align: center;
    vertical-align: middle;
}
.table-cell.arrow-cell{
    width: 54px;
}
.table-cell.arrow-cell.active{
    background-color: #0AD8C8;
}
.table-cell.arrow-cell.active>i{
    color: #fff;
}
.table-cell.active{
    border: 2px solid #0AD8C8;
    position: relative;
}
.table-cell.active:after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 27px;
    background: url(../../../images/icon_xuanzhong.png) no-repeat;
    background-size: 100% 100%;
}
.table-cell.arrow-cell.active:after{
    background: none;
}
.yy-tag{
    display: inline-block;
    background-color: #c1c1c1;
    color: #fff;
    padding: 1px 10px;
    border-radius: 12px;
    margin-top: 5px;
}
.yy-tag.active{
    background-color: #0AD8C8;
}
.source-tag{
    border: 1px solid #e1e1e1;
    width: calc(100% - 20px);
    padding: 10px 0;
}
.source-tag span{
    display: inline-block;
    width: 50%;
    text-align: center;
}
.source-tag span:first-child{
    border-right: 1px solid #e1e1e1;
}
.source-tag.active{
    border: 1px solid #0AD8C8;
    position: relative;
}
.source-tag.active:after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25px;
    height: 27px;
    background: url(../../../images/icon_xuanzhong.png) no-repeat;
    background-size: 100% 100%;
}

page/appointment/html/select-time.html

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择就诊时间</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="keywords" content="公众健康服务平台">
        <meta name="description" content="公众健康服务平台">
        <link rel="shortcut icon" href="../../favicon.ico">
        <link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../plugins/artDialog/6.0.5/api/css/ui-dialog.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../css/appointment.css"/>
    </head>
    <body>
        <div id="main">
            <page-header></page-header>
            <div class="container">
                <div class="ui-grid">
                    <div class="ui-col-0">
                        
                    </div>
                    <div class="ui-col-1">
                        <!--医生基本信息展示-->
                        <section class="mt30" name="doc-info">
                            <div class="ui-grid">
                                <div class="ui-col-0 mr30">
                                    <img src="../../../images/d-male.png" width="120" height="120" class="c-images-cycle">
                                </div>
                                <div class="ui-col-1">
                                    <p><span class="c-f20 c-323232 c-bold mr20">路易斯</span><span class="c-f16 c-323232 mr20">主治医师</span><span class="c-f16 c-909090">骨科</span></p>
                                    <p class="c-f16 c-909090">上饶市第一医院</p>
                                    <p class="c-f16"><span class="c-909090">擅长：</span><span class="c-323232">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></p>
                                    <div class="ui-grid c-f16">
                                        <div class="ui-col-0"><span class="c-909090">简介：</span></div>
                                        <div class="ui-col-1">
                                            <p class="c-323232 c-nowrap-multi">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!--医生号源日期展示-->
                        <date-scource></date-scource>
                    </div>
                </div>
            </div>
            
            <page-footer></page-footer>
        </div>
        <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/jquery-2.2.4.js"></script>
        <script src="../../../js/bootstrap.min.js"></script>
        <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
        <!--<script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="../../../plugins/artDialog/6.0.5/api/js/dialog-plus.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/header.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/footer.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/common/event-bus.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../component/appointment/date-source.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/select-time.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

page/appointment/js/select-time.js

@@ -0,0 +1,6 @@
new Vue({
    el: "#main",
    data: {
        
    }
})

page/appointment/js/source-resp.js

@@ -0,0 +1,286 @@
var sourceResp = {
    "status": 200,
    "msg": "获取医生排班成功！",
    "data": [{
            "date": "2018/4/6 0:00:00",
            "max": "37",
            "fee": "20",
            "time": "a",
            "used": "15",
            "regType": "急诊号",
            "sections": [{
                    "max": "1",
                    "startTime": "2018/4/6 8:06:00",
                    "used": "0",
                    "endTime": "2018/4/6 8:12:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 8:12:00",
                    "used": "0",
                    "endTime": "2018/4/6 8:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 8:18:00",
                    "used": "0",
                    "endTime": "2018/4/6 8:24:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 8:48:00",
                    "used": "0",
                    "endTime": "2018/4/6 8:54:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 8:54:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:00:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 9:06:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:12:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 9:12:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 9:24:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 9:30:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:36:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 9:36:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:42:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 9:42:00",
                    "used": "0",
                    "endTime": "2018/4/6 9:48:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 10:24:00",
                    "used": "0",
                    "endTime": "2018/4/6 10:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 10:36:00",
                    "used": "0",
                    "endTime": "2018/4/6 10:42:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 10:42:00",
                    "used": "0",
                    "endTime": "2018/4/6 10:48:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 10:48:00",
                    "used": "0",
                    "endTime": "2018/4/6 10:54:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 10:54:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:00:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 11:00:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:06:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 11:12:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 11:18:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:24:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 11:24:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 11:30:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:36:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/6 11:36:00",
                    "used": "0",
                    "endTime": "2018/4/6 11:42:00"
                }
            ],
            "status": "1"
        }, {
            "date": "2018/4/7 0:00:00",
            "max": "37",
            "fee": "20",
            "time": "a",
            "used": "7",
            "regType": "急诊号",
            "sections": [{
                    "max": "1",
                    "startTime": "2018/4/7 8:06:00",
                    "used": "0",
                    "endTime": "2018/4/7 8:12:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 8:12:00",
                    "used": "0",
                    "endTime": "2018/4/7 8:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 8:18:00",
                    "used": "0",
                    "endTime": "2018/4/7 8:24:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 8:24:00",
                    "used": "0",
                    "endTime": "2018/4/7 8:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 8:36:00",
                    "used": "0",
                    "endTime": "2018/4/7 8:42:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 8:42:00",
                    "used": "0",
                    "endTime": "2018/4/7 8:48:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:12:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:18:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:24:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:24:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:30:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:36:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:36:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:42:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:42:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:48:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:48:00",
                    "used": "0",
                    "endTime": "2018/4/7 9:54:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 9:54:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:00:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:00:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:06:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:06:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:12:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:12:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:18:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:24:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:24:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:30:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:36:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:36:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:42:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:48:00",
                    "used": "0",
                    "endTime": "2018/4/7 10:54:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 10:54:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:00:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:00:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:06:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:06:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:12:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:12:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:18:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:18:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:24:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:24:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:30:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:30:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:36:00"
                }, {
                    "max": "1",
                    "startTime": "2018/4/7 11:36:00",
                    "used": "0",
                    "endTime": "2018/4/7 11:42:00"
                }
            ],
            "status": "1"
        }
    ]
}