对接预约成功页面

component/appointment/doctor-list.js

@@ -19,7 +19,7 @@
								</p>\
							</div>\
							<div class="ui-col-1 div-doctor-section" v-for="(arrange, aindex) in arrangeList" v-if="index==aindex">\
								<div class="div-left-btn c-hide" @click="preClick"></div>\
								<div class="div-left-btn c-hide" @click="preClick" v-show="leftBtn"></div>\
								<ul class="doctor-ul">\
									<li v-for="(arrg, arrIndex) in arrange" @click="goToDoctorPage(doc.doctorSn, arrg.arrangeID)">\
										<div class="div-doctor-item" :class="getColorClass(arrg.numberStatus,arrg.arrangeStatus)">\
@@ -32,7 +32,7 @@
										</div>\
									</li>\
								</ul>\
								<div class="div-right-active-btn" @click="nextClick" v-if="arrangeList[aindex].length>4"></div>\
								<div class="div-right-active-btn" v-show="rightBtn" @click="nextClick" v-if="arrangeList[aindex].length>4"></div>\
							</div>\
						</div>\
						<div id="page" class="page_div fr"></div>\
@@ -48,7 +48,9 @@
				totalPage: 0,
				hosDeptId: "",
				doctorList: [],
				arrangeList:[]
				arrangeList:[],
				leftBtn:false,
				rightBtn:false,
			}
		},
		mounted: function() {

page/appointment/css/appointment.css

@@ -1,138 +1,206 @@
.bgc-ebf4f3{
    background-color: #EBF4F3;
}
.bgc-f6f6f6{
    background-color: #f6f6f6;
}
.c-fea7a8{
    color: #FEA7A8;
}
.c-f4b87f{
    color: #F4B87F;
}
.c-ffb5b6{
    color: #ffb5b6;
}
.c-f3be88{
    color: #f3be88;
}
.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%;
}
.c-border-t-dashed{
    border-bottom: 1px dashed #e1e1e1;
}
.btn-white{
    border-color: #d1d7d4;
    color: #d1d7d4;
}
.c-border-dashed{
    border: 1px dashed #e1e1e1;
}
.my-dialog .ui-dialog-footer button{
    color: #909090;
    border-color: #e1e1e1;
.bgc-ebf4f3 {
	background-color: #EBF4F3;
}
.bgc-f6f6f6 {
	background-color: #f6f6f6;
}
.c-fea7a8 {
	color: #FEA7A8;
}
.c-f4b87f {
	color: #F4B87F;
}
.c-ffb5b6 {
	color: #ffb5b6;
}
.c-f3be88 {
	color: #f3be88;
}
.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%;
}
.c-border-t-dashed {
	border-bottom: 1px dashed #e1e1e1;
}
.btn-white {
	border-color: #d1d7d4;
	color: #d1d7d4;
}
.c-border-dashed {
	border: 1px dashed #e1e1e1;
}
.my-dialog .ui-dialog-footer button {
	color: #909090;
	border-color: #e1e1e1;
}
.my-dialog .ui-dialog-footer button:hover,
.my-dialog .ui-dialog-footer button:focus,
.my-dialog .ui-dialog-footer button:active {
    color: #909090;
    border-color: #e1e1e1;
    background-color: #fff;
	color: #909090;
	border-color: #e1e1e1;
	background-color: #fff;
}
.my-dialog .ui-dialog-footer button:focus {
  outline: none;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
	outline: none;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.my-dialog .ui-dialog-footer button.ui-dialog-autofocus{
    color: #fff;
    background-color: #0AD8C8;
    border-color: #0AD8C8;
.my-dialog .ui-dialog-footer button.ui-dialog-autofocus {
	color: #fff;
	background-color: #0AD8C8;
	border-color: #0AD8C8;
}
.ui-dialog-footer button.ui-dialog-autofocus:hover,
.ui-dialog-footer button.ui-dialog-autofocus:focus,
.ui-dialog-footer button.ui-dialog-autofocus:active {
    color: #ffffff;
    background-color: #0AD8C8;
    border-color: #0AD8C8;
	color: #ffffff;
	background-color: #0AD8C8;
	border-color: #0AD8C8;
}
.h50 {
	height: 50px;
}
.h684 {
	height: 684px;
}
.btn-primary {
	border-color: #0AD8C8;
}
.div-btn {
	height: 50px;
	line-height: 50px;
	width: 130px;
	text-align: center;
}
.ml67 {
	margin-left: 67px;
}
.mr16 {
	margin-right: 16px;
}
.mt26 {
	margin-top: 26px;
}
.mt18 {
	margin-top: 18px;
}
#div_map {
	height: 474px;
	border: 1px solid #dcdcdc;
}

page/appointment/html/success-info.html

@@ -16,32 +16,6 @@
        <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="../../../css/common.css"/>
        <link rel="stylesheet" type="text/css" href="../css/appointment.css"/>
        <style>
        	.h50{
        		height: 50px;
        	}
        	.h684{
        		height: 684px;
        	}
        	.btn-primary{
        		border-color: #0AD8C8;
        	}
        	.div-btn{
        		height: 50px;line-height: 50px;width: 130px;text-align: center;
        	}
        	.ml67{
        		margin-left: 67px;
        	}
        	.mr16{
        		margin-right: 16px;
        	}
        	.mt26{
        		margin-top: 26px;
        	}
        	.mt18{
        		margin-top: 18px;
        	}
        </style>
    </head>
    <body class="bgc-f5f9f9">
        <div id="main">
@@ -56,53 +30,57 @@
                            <img src="../../../images/success.png" width="228" height="137" class="mt20">
                            <div class="c-f16 c-bold">预约成功！</div>
                            <div class="mt50">
                                <button type="button" class="btn btn-primary plr20">返回</button>
                                <button type="button" class="btn btn-primary plr20" @click="backPage">返回</button>
                            </div>
                        </div>
                        <div class="mt30 c-border bgc-fff">
                            <div class="h50 c-border-b" style="display: -webkit-box">
                            	<div class="div-btn c-border-r btn-primary">交通路线</div>
                            	<div class="div-btn c-border-r">楼层分布</div>
                            	<div class="div-btn c-border-r" :class="{'btn-primary': activeTabIdx==1}" @click="activeTab(1)">交通路线</div>
                            	<!--<div class="div-btn c-border-r" :class="{'btn-primary': activeTabIdx==2}" @click="activeTab(2)">楼层分布</div>-->
                            </div>
                            <div class="h684" id="jiaoTongLuXian">
                            <div class="h684" v-show="activeTabIdx==1" v-cloak>
                            	<div class="ml30 mt20">
                            		<img src="../../../images/icon_lianxifangshi.png" width="21" height="21" class="mr16"/>
                            		<label class="c-f14 c-323232">联系方式：</label>
                            		<label class="c-f14 c-909090">13500000001</label>
                            		<label class="c-f14 c-909090">{{data.contact}}</label>
                            	</div>
                            	<div class="ml30 mt26">
                            		<img src="../../../images/icon_dizhiyiyuan.png" width="21" height="21" class="mr16"/>
                            		<label class="c-f14 c-323232">医院地址：</label>
                            		<label class="c-f14 c-909090">福建省厦门市思明区</label>
                            		<label class="c-f14 c-909090">{{data.address}}</label>
                            	</div>
                            	<div class="ml30 mt26">
                            		<img src="../../../images/icon-gonggjiaotong.png" width="21" height="21" class="mr16"/>
                            		<label class="c-f14 c-323232">公共交通：</label>
                            		<label class="c-f14 c-909090">乘1、15路到厦大站下车</label>
                            		<label class="c-f14 c-909090">{{data.traffic}}</label>
                            	</div>
                            	<div class="ml67 mt18 c-f14 c-909090">
                            	<!--<div class="ml67 mt18 c-f14 c-909090">
                            		乘1、15路到厦大站下车
                            	</div>
                            	<div class="ml30 mt20 mb20 mr20" style="height: 474px;border: 1px solid #dcdcdc;">
                            		地图内容
                            	</div>-->
                            	<div class="ml30 mt20 mb20 mr20" id="div_map">
                            		
                            	</div>
                            </div>
                        	<div class="c-909090 c-f14 h684 c-hide" id="louCengFenBu">
                        	<!--<div class="c-909090 c-f14 h684" v-show="activeTabIdx==2">
                        		楼层位置信息
                        	</div>
                        	</div>-->
                        </div>
                    </div>
                </div>
            </div>
            <page-footer></page-footer>
        </div>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1W9gqPiqc7C9TDliPP8S9Rj9"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
        <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="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../../api/patient/appointment-api.js"></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>

page/appointment/js/success-info.js

@@ -1,22 +1,80 @@
new Vue({
    el: "#main",
    data: {
        
    },
    mounted: function(){
        EventBus.$emit("jump-step",{step:4});//step:跳转的步数
        
        $(".div-btn").on("click",function(){
        	var index = $(this).index();
        	if(index==0){
        		$("#jiaoTongLuXian").show();
        		$("#louCengFenBu").hide();
        	}else{
        		$("#jiaoTongLuXian").hide();
        		$("#louCengFenBu").show();
        	}
        	$(".div-btn").removeClass("btn-primary");
        	$(this).addClass("btn-primary");
        })
    }
})
	el: "#main",
	data: function() {
		return {
			activeTabIdx: 1,
			hospitalId:"",
			data: {}
		}
	},
	mounted: function() {
		this.hospitalId = this.getRequest("hospitalId");
		EventBus.$emit("jump-step", {
			step: 4
		}); //step:跳转的步数
		this.querySimpleHospitalById();
	},
	methods: {
		activeTab: function(idx) {
			this.activeTabIdx = idx;
		},
		//获取医院详情
		querySimpleHospitalById: function() {
			var vm = this;
			appointmentAPI.querySimpleHospitalById({
				hospitalId: vm.hospitalId
			}).then(function(res) {
				if(res.successFlg && res.obj.Code == "10000") {
					var obj = res.obj;
					vm.data = obj;
					vm.doLocate(obj.jd, obj.wd);
				}
			});
		},
		backPage: function() {
			window.location.href = "select-hospital.html";
		},
		//根据经纬度定位
		doLocate: function(jd, wd) {
			// 百度地图API功能
			var map = new BMap.Map("div_map");
			// 创建Map实例
			map.enableScrollWheelZoom();
			//启用滚轮放大缩小
			map.centerAndZoom(new BMap.Point(jd, wd), 15);
			var point = new BMap.Point(jd, wd);
			var marker = new BMap.Marker(point);
			map.addOverlay(marker);
			// map.addOverlay(new BMap.Marker(point));
			//			marker.enableDragging(); //启用标注拖动
			//			marker.addEventListener('dragend', function(e) { //拖动标注结束
			//				var pointNew = e.point;
			//				console.log(pointNew);
			//				alert(pointNew.lng + '|' + pointNew.lat);
			//			});
			map.centerAndZoom(point, 15);
			// 初始化地图,设置中心点坐标和地图级别。
		},
		getRequest: function(name) {
			var url = window.location.href; //获取地址栏url
			var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
			var matcher = pattern.exec(url);
			var items = null;
			if(null != matcher) {
				try {
					items = decodeURIComponent(decodeURIComponent(matcher[1]));
				} catch(e) {
					try {
						items = decodeURIComponent(matcher[1]);
					} catch(e) {
						items = matcher[1];
					}
				}
			}
			return items;
		}
	}
})