fuyu
/
tjshop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑龙江昆仑盛和安体检中心</title>
<link rel="stylesheet" type="text/css" href="/style/common.css" />
<link rel="stylesheet" type="text/css" href="/style/user.css" />
<link rel="icon" href="/images/favicon.ico" type="image/x-icon"/>

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->
<!--窗口自适应适配低端IE-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
	.show {
		display: block;
	}
	.showtable {
		display: table;
	}
	.hidden {
		display: none;
	}
	.error {
		border: 1px solid red !important;
	}
</style>
</head>

<body>
	<div th:include="/fragments :: header"></div>
	<div class="wp">
		<div class="main bgFF">
			<ul class="subnav l mt20">
				<li class="u2"><a href="/mypayedorders" class="ca">预约体检</a></li>
                <li class="u3"><a href="/tjorders">报告查询</a></li>
                <li class="u3"><a href="/family/list">家人管理</a></li>
                <li class="u6"><a href="/fqa">常见问题</a></li>
                <li class="u7"><a th:attr="href=${ucweb} + '#/resetPwd'" target="_blank">修改密码</a></li>
                <li class="u8"><a th:attr="href=${uccenter} + 'login/loginout?redirect=' + ${outredirect}">退出登录</a></li>
			</ul>
			<div class="l" style="width: 80%;">
				<div class="clearfix mt20">
					<strong class="f16" th:text="${good.name}"></strong><span
						class="y f12 cBlue">适应人群：*</span>
				</div>
				<div class="u-speed-bar">
					<table>
						 <td class="ing" id="step1"><div class="axis"></div><dl><dt  id="step1Num">1</dt><dd>查看套餐详情</dd></dl></td>
                         <td class="soon" id="step2"><div class="axis"></div><dl><dt id="step2Num">2</dt><dd>填写体检人信息</dd></dl></td>
                         <td class="soon" id="step3"><div class="axis"></div><dl><dt id="step3Num">3</dt><dd>完成预约</dd></dl></td>
					</table>
				</div>
				<div id="step1Content">
					<table class="tab-1-EEE mt20">
					<thead>
						<tr>
							<td>项目</td>
							<td>指标</td>
						</tr>
					</thead>
					<tbody>
						<tr th:each="name : ${checklist}">
							<td width="90" th:text="${name}"></td>
							<td></td>
						</tr>
					</tbody>
					</table>
					<div class="user_speed_nextBar">
						<a href="javascript:step2();" class="nextBtn" >下一步</a>
					</div>	
				</div>
				
				<div id="step2Content" class="hidden">
					<div class="u-form" >
	                    <dl>
	                    	<dt>选择体检人：</dt>
	                    	<dd th:each="people:${peoples}">
	                        	<label class="label">
	                        		<input class="radio" type="radio" name="people" th:attr="value=${people.id}"/>
	                        		<span class="radioInput"></span>
	                        		<span th:text="${people.name}"></span>
	                        	</label>
	                        </dd>
	                    </dl><!--已做过体检则有记录，选择某人后自动填充-->
	                    <div style="width:100%; height:1px; background-color:#EEE; font-size:0; "></div>
	                  	<dl>
	                  		<dt>体检人证件号：</dt>
	                  		<dd>
	                  			<select class="slt">
	                  				<option>身份证</option>
	                  			</select>
	                  			<input id="idcard" type="text" class="txt ml5" style="width:231px; " placeholder="请输入身份证号码" maxlength="19"/>
	                  		</dd>
	                  	</dl>
	                    <dl>
	                    	<dt>姓名：</dt>
	                    	<dd>
	                    		<input id="name" type="text" class="txt" placeholder="请输入与证件上一致的体检人姓名" style="width:300px; " maxlength="32"/>
	                    	</dd>
	                    </dl>
	                    <dl>
	                    	<dt>性别：</dt>
	                    	<dd>
	                            <label class="label"><input id="sex1" class="radio" type="radio" name="sex" value="1" checked="checked"/><span class="radioInput"></span>男</label>
	                        </dd>
	                    	<dd>
	                        	<label class="label"><input id="sex0" class="radio" type="radio" name="sex" value="0"/><span class="radioInput"></span>女</label>
	                        </dd>
	                    </dl>
	                    <dl>
	                    	<dt>手机号码：</dt>
	                    	<dd>
	                    		<input id="phone" type="text" class="txt" style="width:300px; " placeholder="此手机号用于接收体检报告及预约信息" maxlength="32"/>
	                    	</dd>
	                    </dl>
	                    <dl>
	                    	<dt>生日：</dt>
	                    	<dd>
	                    		<input id="birth" type="text" class="txt" style="width:300px; " onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})" placeholder="请选择生日" readonly="readonly"/>
	                    	</dd>
	                    </dl>
	                    <div style="width:100%; height:1px; background-color:#EEE; font-size:0; "></div>
	                    <dl>
	                    	<dt>预约体检日期：</dt>
	                    	<dd>
	                    		<input id="atime" name="" type="text" class="txt" style="width:160px;" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})" readonly="readonly" placeholder="请选择体检日期"/>
	                    		<select id="extend" name="extend" class="slt" style="width:130px; ">
	                    			<option value="">预约时间</option>
	                    			<option value="08:00">08:00</option>
	                    			<option value="08:30">08:30</option>
	                    			<option value="09:00">09:00</option>
	                    		</select>
	                    	</dd>
	                    </dl>
	                </div>
	                <div class="user_speed_nextBar">
						<a href="javascript:step3();" class="nextBtn" >下一步</a><a href="javascript:step1();" class="preBtn" >上一步</a>
					</div>
                </div>
                <div class="hidden" id="step3Content">
                <div class="u-speed-tips"><h1>预约成功！</h1></div>
                <table class="tab-1-EEE mt20">
                	<tr><td><span class="f14 c999 w100 dis-ile-blk">体检人：</span><span class="f14 c666" id="successName"></span></td></tr>
                    <tr><td><span class="f14 c999 w100 dis-ile-blk">生份证号：</span><span class="f14 c666" id="successIdcard"></span></td></tr>
					<tr><td><span class="f14 c999 w100 dis-ile-blk">手机号：</span><span class="f14 c666" id="successPhone"></span></td></tr>
                    <tr><td><span class="f14 c999 w100 dis-ile-blk">体检日期：</span><span class="f14 c666" id="successAtime"></span></td></tr>
                    <tr><td><p class="lh32 f14 cred"><strong>温馨提示：</strong></p><p class="lh32 f14 cred">1. 体检一般空腹</p><p class="lh32 f14 cred">2. 体检前一天请勿饮酒</p></td></tr>
                </table>
				<div class="user_speed_nextBar">
					<a href="/mypayedorders" class="nextBtn" >完成</a>
				</div>
				</div>
			</div>
		</div>
	</div>
	
	<div th:replace="/fragments :: footer"></div>

	<script src="/plugs/My97DatePicker/WdatePicker.js"></script>
	<script th:inline="javascript">
		/* <![CDATA[ */
		var peoples = JSON.parse([[${peoplesJSON}]])
		var bid		= [[${bid}]]
		var itemid	= [[${itemid}]]
		$("input[name=people]").click(function(){
			var id = $(this).val();
			if (id == "0"){
				$("#idcard").val("");
				$("#name").val("");
				$("#sex1").attr("checked","checked")
				$("#phone").val("")
				$("#birth").val("")
			}else{
				for (var i = 0; i < peoples.length; ++i){
					var obj = peoples[i]
					if (obj.id==id){
						$("#idcard").val(obj.idcard);
						$("#name").val(obj.name);
						$("#sex" + obj.sex).attr("checked","checked")
						$("#phone").val(obj.phone)
						$("#birth").val(obj.birth)
					}
				}
			}
		});
		
		function step1(){
			clearStep();
			$("#step1").addClass("ing");
			$("#step2").addClass("soon");
			$("#step3").addClass("soon");
			
			$("#step1Content").removeClass("hidden").addClass("show");
			$("#step1Num").empty().append(1);
			$("#step2Num").empty().append(2);
			$("#step3Num").empty().append(3);
		}
		
		function step2(){
			clearStep();
			$("#step1").addClass("ed");
			$("#step2").addClass("ing");
			$("#step3").addClass("soon");
			
			$("#step2Content").removeClass("hidden").addClass("show");
			$("#step1Num").empty();
			$("#step2Num").empty().append(2);
			$("#step3Num").empty().append(3);
		}
		
		function step3(){
			var fid 	= $("input[name=people]:checked").val();
			var idcard 	= $("#idcard").val();
			var name	= $("#name").val();
			var sex		= $("input[name='sex']:checked").val();
			var phone 	= $("#phone").val();
			var atime	= $("#atime").val();
			var extend	= $("#extend").val();
			var birth 	= $("#birth").val();
			
			var validate = check();
			if (!validate){
				return;
			}
			
			$.post("/appointment/save", {
				"bid":bid, 
				"itemid":itemid, 
				"fid":fid,
				"idcard":idcard,
				"name":name,
				"sex":sex,
				"phone":phone,
				'birth':birth,
				"atime":atime,
				"extend": extend,
				},function(result){
					$("#successName").append(name);
					$("#successIdcard").append(idcard);
					$("#successPhone").append(phone);
					$("#successAtime").append(atime);
					clearStep();
					$("#step1").addClass("ed");
					$("#step2").addClass("ed");
					$("#step3").addClass("ing");
					
					$("#step3Content").removeClass("hidden").addClass("show");
					$("#step1Num").empty();
					$("#step2Num").empty();
					$("#step3Num").empty().append(3);
				}
			);
		}
		
		function clearStep(){
			for(var i = 1; i < 3; ++i){
				$("#step" + i).removeClass("ed");
				$("#step" + i).removeClass("ing");
				$("#step" + i).removeClass("soon");
				
				$("#step" + i + "Content").addClass("hidden");
				$("#step" + i + "Content").addClass("hidden");
				$("#step" + i + "Content").addClass("hidden");
			}	
		}
		
		function check(){
			var idValidates = [/^\d{17}[\dXx]$/, /^.+$/, /^1\d{10}$/, /^.+$/, /^.+$/, /^.+$/]
			var ok = true;
			var ids = ["idcard", "name", "phone", "birth", "atime", "extend"]
			for (var i = 0; i < ids.length; ++i){
				var id 	= ids[i]
				var obj	= $("#" + id)
				var val = obj.val()
				
				var validate = idValidates[i]
				if (validate && validate.test(val)){
					obj.removeClass("error")
				}else{
					obj.addClass('error')
					ok = false
				}
			}
			return ok;
		}
		/* ]]> */
	</script>
</body>
</html>