html:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>个人中心</title><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><meta name="format-detection" content="telephone=no, email=no"></head><link rel="stylesheet" href="css/swipeslider.css" /><link rel="stylesheet" href="css/public.css" /><link rel="stylesheet" href="css/layer.css" /><link rel="stylesheet" href="css/personalCenter.css" /><body><embed type="text/html" src="header.html" /><nav><div class="navs"><div class="perss nleftimg"><a href="#"><img src="images/back.png" /></a></div><div class="perss personal"><h1>个人中心</h1></div><div class="perss nrightimg"><img src="images/shezhi.png" /></div></div></nav><div class="infcenters"><div class="introduction"><div class="introduc"><!-- <div class="intleftimg intcont"><div class="intlimm"><img src="images/01.jpg" /></div> </div>--><div class="intright intcont"><div class="inttopname"><!-- <h1>名字名字</h1><p class="boy"><img src='images/boy@2x.png'/></p><p class="gril"><img src='images/gril@2x.png'/></p> --></div><div class="intbottombut"><!-- <div class="banyuanleft"></div><div class="dabutton"><a href="fileSetting.html"> </a>档案设置</div><div class="banyuanright"></div> --></div></div></div></div><div class="registration"><div class="regis"><h2>我的挂号单</h2><a href="registrationForm.html">查看更多</a></div></div><center><div class="center"><div class="centinforms"><img class="topinfrig" src="images/rigtiaowen.png" /><img class="topinlef" src="images/yxtiaowe.png" /><div class="infonames"><p><span class="renminse">黄轩</span>内分泌科</p><div class="clidimg"><img src="images/del.png" /></div></div><div class="infbottom"><div class="botjiuxhengr"><p>就诊人：周凡婷</p><span>已预约</span><button>取消预约</button></div></div></div></div><div class="center"><div class="centinforms"><img class="topinfrig" src="images/rigtiaowen.png" /><img class="topinlef" src="images/yxtiaowe.png" /><div class="infonames"><p><span class="renminse">黄轩</span>内分泌科</p><div class="clidimg"><img src="images/del.png" /></div></div><div class="infbottom"><div class="botjiuxhengr"><p>就诊人：周凡婷</p><span>已预约</span><button>取消预约</button></div></div></div></div><div class="center"><div class="centinforms"><img class="topinfrig" src="images/rigtiaowen.png" /><img class="topinlef" src="images/yxtiaowe.png" /><div class="infonames"><p><span class="renminse">黄轩</span>内分泌科</p><div class="clidimg"><img src="images/del.png" /></div></div><div class="infbottom"><div class="botjiuxhengr"><p>就诊人：周凡婷</p><span>已预约</span><button>取消预约</button></div></div></div></div></center></div> </body><script type="text/javascript" src="js/rem.js" ></script><script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script><script type="text/javascript" src="js/layer.js" ></script><script type="text/javascript" src="js/personalCenter.js" ></script></html>
css:
/*introduction*/.infcenters{width: 100%;height: 100%;background:white;}.introduction{width: 100%;height: 2.1rem;}.introduc{width: 6.46rem;height: 2rem;margin: 0 auto;display: -webkit-flex;display: flex;border-bottom: 0.01rem solid #e1e1e1e1;}.intleftimg{display: -webkit-flex;display: flex;align-items: center;justify-content: center;}.intright{width: 6.46rem;display: -webkit-flex;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}.inttopname , .intbottombut{display: -webkit-flex;display: flex;justify-content: flex-start;align-content: flex-end;}.intbottombut{width:2.12rem;height: 0.56rem;}.inttopname{position: relative;width:100%;}.inttopname h1{font-size: 0.46rem;font-weight: bolder;margin-left: 0.3rem;}.inttopname p{position: absolute;width:0.4rem;height:0.4rem;top: 0.2rem;left: 2.3rem;display:none;}.dabutton{width:2.7rem;height: 0.56rem;background: white;border-top: 0.01rem solid #00a09d;border-bottom: 0.01rem solid #00a09d;display: -webkit-flex;display: flex;align-items: center;justify-content: center;font-size: 0.3rem;font-weight: bolder;color: #00a09d;}.dabutton a{color: #00a09d;}.banyuanleft{width:0.5rem;height: 0.56rem;border-radius:1.5rem 0 0 1.5rem;border-top: 0.01rem solid #00a09d;border-left: 0.01rem solid #00a09d;border-bottom: 0.01rem solid #00a09d;background: white;}.banyuanright{width:0.5rem;height: 0.56rem;border-radius:0 1.5rem 1.5rem 0;border-top: 0.01rem solid #00a09d;border-right: 0.01rem solid #00a09d;border-bottom: 0.01rem solid #00a09d;background: white;}/*introduction*//*闁圭鍊歌ぐ鍧楀础閿燂拷*/.registration{width: 100%;height: 1rem;background: white;}.regis{width: 6.46rem;height: 100%;margin: 0 auto;display: -webkit-flex;display: flex;align-items: center;justify-content: space-between;}.regis h2{font-size: 0.36rem;font-weight: bolder;}.regis a{color: #6498f0;font-size: 0.24rem;}/*闁圭鍊歌ぐ鍧楀础閿燂拷*//*center*/center{width: 100%;height: 100%;}.center{width: 7.1rem;height: auto;padding:0.25rem 0;background: #fff; }.centinforms{width: 100%;height: 2.1rem;position: relative;border-radius: 5%;-webkit-box-shadow: #888 0 0 0.1rem; -moz-box-shadow: #888 0 0 0.1rem; box-shadow: #888 0 0 0.01rem; }.centinforms .topinfrig{width: 0.76rem;height: 0.44rem;background-repeat:no-repeat;position: absolute;top: -0.01rem;left: 6.35rem;}.centinforms .topinlef{width: 0.76rem;height: 0.44rem;background-repeat:no-repeat;position: absolute;top: 1.67rem;left: -0.01rem;}.infonames{width: 6.08rem;height: 0.85rem;border-bottom: 0.01rem solid #e1e1e1;display: -webkit-flex;display: flex;align-items: center;justify-content: space-between;}.infonames p{font-size: 0.25rem;}.infonames .renminse{font-size: 0.32rem;margin-right: 0.4rem;}.clidimg{width: 0.4rem;height: 0.4rem;}.clidimg img{width: 100%;height: 100%;}.infbottom{width: 6.08rem;height: 1.2rem;display: flex;align-items: center;justify-content: space-between;}.botttime{display: -webkit-flex;display: flex;justify-content: space-between;margin: 0.1rem 0;}.botttime p{font-size:0.27rem;}.botttime span{margin-left: 0.5rem;}.botjiuxhengr{display: -webkit-flex;display: flex;}.botjiuxhengr p{font-size:0.27rem;flex: 0 0 35%;display: -webkit-flex;display: flex;align-content: center;justify-content: flex-start;}.botjiuxhengr span{font-flex: 0 0 25%;color: #58b5b3;display: flex;align-content: center;justify-content: center;display: inline-block;width: 3rem;font-size:0.3rem;}.botjiuxhengr button{flex: 0 0 30%;width:1.50rem;height: 0.50rem;border-radius: 5%;display: flex;align-content: center;justify-content: center;color:#6498f0;background:white;border:0.01rem solid #6498f0;font-size:0.3rem;}/* .appcent{color:#6498f0;border:0.01rem solid #6498f0;background:white;disabled:disabled;}.yunappcent{border: 0.01rem solid #6498f0;background: white;color: #6498f0;disabled:none;} */
js:
var id=241;$(function(){var id=241;var sex=0;var name='周凢';loadPersonal(id,name,sex);judgeSex(sex);loadReservations(id);})function loadPersonal(id,name,sex){$(".inttopname").append("<h1>"+name+"</h1><p class='boy'><img src='images/boy@2x.png'/></p><p class='gril'><img src='images/gril@2x.png'/></p>");$(".intbottombut").append("<div class='banyuanleft'></div>"+"<div class='dabutton' οnclick='clickFile("+id+")'>档案设置</div>"+"<div class='banyuanright'></div>")}function loadReservations(id){$.ajax({url:"/hospitalmanage/user/getschinfo.do",type:"post",dataType:"json",data:{"id":id},success:function(data){console.log(data);$("center").html("");for(var i=0;i<data.data.length;i++){if(i<=3){$("center").append("<div class='center'>"+"<div class='centinforms'>"+"<div class='infonames'>"+"<p><span class='renminse'>"+data.data[i].doctorName+"</span>"+data.data[i].org+"</p>"+"<div class='clidimg' οnclick='deleteOrcancel("+data.data[i].id+",1)'><img src='images/del.png' /></div>"+"</div>"+"<div class='infbottom'>"+"<div class='botttime'>"+"<p>"+data.data[i].date+"</p>"+"</div>"+"<div class='botjiuxhengr'>"+"<p>就诊人："+data.data[i].patientName+"</p>"+"<span id='makapp'>"+makeAppointment(data.data[i].stat)+"</span>"+"<button id='delebutton' status='"+data.data[i].stat+"' οnclick='deleteOrcancel("+data.data[i].id+",0)'>"+makeAppbtn(data.data[i].stat)+"</button>"+"</div>"+ "</div>"+"<img class='topinfrig' src='images/rigtiaowen.png' /><img class='topinlef' src='images/yxtiaowe.png' />"+"</div>"+"</div>"+"</div>");$("button[status='0']").css("color","#6498f0");$("button[status='0']").css("disabled","");$("button[status='1']").css("color","#999");$("button[status='1']").attr("disabled","disabled");}}}});}//预约function makeAppointment(stat){switch(stat){case 0:return "已预约";case 1:return "已取消预约";default:return "";}}function makeAppbtn(stat){switch(stat){case 0:return "取消预约";case 1:return "预约";default:return "";}}//删除//取消预约function deleteOrcancel(doid,delnum){if(delnum==0){//取消var title="取消预约成功";}else{var title="删除成功";}$.ajax({url:"/hospitalmanage/user/delyyjl.do",type:"post",dataType:"json",data:{"id":doid,"flg":delnum},success:function(data){layer.msg(title);loadReservations(id);}});}//跳转档案function clickFile(id){location.href='fileSetting.html?id='+id;}//sexfunction judgeSex(sex){if(sex==0){$(".boy").css("display","block");$(".gril").css("display","none");}else{$(".gril").css("display","block");$(".boy").css("display","none");}}//显示年份function getNowFormatDate() {var date = new Date();currentdate = date.getFullYear();return currentdate;}
