服务设置.html 21.4 KB

原文件审查历史永久链接

<!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 name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/tanchu.css" />
<link rel="stylesheet" type="text/css" href="css/rili.css" />
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  var position=$("#xx").offset();
  $("#div1").offset({
    top:position.top+22,
    left:position.left
  });
  $("#xx").click(function(){
    $("#NG").toggleClass("open");
  });

  $("#div1 input[name=ng]").click(function(){
    var arr=new Array();
    $("input[name=ng]:checked").each(function(key,value){
     arr[key]=$(value).val();
    });
    $("#xx").val(arr.join(","));
  })

  $("#close").click(function(){
	  $("div#NG").removeClass("open");
	  })

  $("#close1").click(function(){
	  $("div#NG").removeClass("open");
	  })
})

$(function(){
  var position=$("#ww").offset();
  $("#div2").offset({
    top:position.top+22,
    left:position.left
  });
  $("#ww").click(function(){
    $("#N1G").toggleClass("open");
  });

  $("#div2 input[name=n1g]").click(function(){
    var arr=new Array();
    $("input[name=n1g]:checked").each(function(key,value){
     arr[key]=$(value).val();
    });
    $("#ww").val(arr.join(","));
  })

   $("#close2").click(function(){
	  $("div#N1G").removeClass("open");
	  })

  $("#close3").click(function(){
	  $("div#N1G").removeClass("open");
	  })
})


$(function(){
  var position=$("#rili").offset();
  $("#div3").offset({
    top:position.top+22,
    left:position.left
  });
  $("#rili").click(function(){
    $("#popup").toggleClass("open");
  });


  $("#hours button[name=hour]").click(function(){
    var arr=new Array();

    $("button[name=hour]:checked").each(function(key,value){
     arr[key]=$(value).val();
    });
    $("#rili").val(arr.join(","));
  })


  $("#close5").click(function(){
	  $("div#popup").removeClass("open");
	  })

  $("#close6").click(function(){
  	  $("div#popup").removeClass("open");
  })


})


$(function(){
  var position=$("#dz").offset();
  $("#div4").offset({
    top:position.top+22,
    left:position.left
  });
  $("#dz").click(function(){
    $("#N2G").toggleClass("open");
  });

   $("#close7").click(function(){
	  $("div#N2G").removeClass("open");
	  })

  $("#close8").click(function(){
	  $("div#N2G").removeClass("open");
	  })
})
</script>

<style type="text/css">
input[type="checkbox"],input[type="radio"]{margin:0;opacity:0;filter: alpha(opacity=0);}
input:focus{ outline:none}
#checkbox p{cursor:pointer;}
.check_span{
	float: right;
	width: 20px;
	height: 20px;
	text-align: right;
	margin-top: 0.07rem;
}
.check_span--checked{border-color: #fff;background: url(images/icon_sprites.png); background-repeat:no-repeat;}

#close5 img{
	width:0.14rem;
	}
#close3 img{
	width:0.14rem;
	}
#close7 img{
	width:0.14rem;
	}
#close1 img{
	width:0.14rem;
	}
.cal img{
	width:0.16rem;
	}
.bar img{
	width:0.08rem;
	}
.servinp input {
    border-bottom: 0.01rem solid #d8b25f;
    width: 7rem;
    margin-bottom: 0.2rem;
    height: 0.3rem;
    font-size: 0.24rem;
    margin-left: 0.1rem;
    color: #424242;
}
.servinp {
	margin-left:0.5rem;
	color:#424242;
	display:inline-block;
	}
</style>
<title>服务设置</title>
</head>

<body style="background-color:#fff;">
<div class="perheader center">
	<div class="left perback"><a href="#" onClick="javascript:history.back(-1);"><img src="images/care_03.jpg"/></a></div>
    <div class="sertext">服务设置</div>
</div>
<div class="serveset">
  <ul>
	<li>
        <span><img src="images/serset_03.jpg"/>基础信息</span>
    </li>

	<li>
        <span><img src="images/serset_06.jpg"/>姓名</span>
        <span class="right"><!--李凯--></span>
    </li>

    <li>
        <span><img src="images/serset_08.jpg"/>性别</span>
        <span class="right sersex"><!--男--></span>
    </li>

    <li>
        <span><img src="images/serset_10.jpg"/>联系电话</span>
        <span class="right"><!--18600122345--></span>
    </li>

    <li>
        <span><img src="images/serset_03.jpg"/>服务机构</span>
        <span class="right"><!--综合医院--></span>
    </li>

    <li>
    	<span><img src="images/serset_03.jpg"/>从业年限</span>
    	<span class="right"><!--3-5年--></span>
    </li>

    <li>
    	<span><img src="images/serset_03.jpg"/>执业资格</span>
    	<span class="right"><input type="text" class="select-value6" placeholder="" /><img src="images/pergo_03.jpg"/></span>
    </li>

    <!--<li>
    	<span><img src="images/serset_03.jpg"/>执业资格等级</span>
    	<span class="right">初级护士</span>
    </li>-->

    <li>
    	<span><img src="images/serset_03.jpg"/>专业特长</span>
    	<span class="right"><input type="text" readonly id="xx" placeholder="最多可选5项"/><img src="images/pergo_03.jpg"/></span>
    </li>

    <li>
    	<span><img src="images/serset_03.jpg"/>可提供服务</span>
        <span class="right"><input type="text" readonly id="ww" placeholder="最多可选5项" /><img src="images/pergo_03.jpg"/></span>
    </li>

    <li>
    	<span><img src="images/serset_03.jpg"/>服务时间设置</span>
        <span class="right"><input type="text" readonly id="rili" placeholder="最多可安排7天日程" /><img src="images/pergo_03.jpg"/></span>
    </li>

    <li>
    	<span><img src="images/serset_03.jpg"/>常用地址设置</span>
        <span class="right"><input type="text"  id="dz" placeholder="请输入常用地址，以便精准派单" /><img src="images/pergo_03.jpg"/></span>
    </li>
  </ul>
</div>
<div><button type="button" class="sersetbut"/>保存</div>


<div id="div1">
<div class="mPicker1 close" id="NG">
    <div class="mPicker-mask1"></div>
    <div class="mPicker-main1">
    <div class="serdtit"><span class="left" id="close1"><img src="images/delete_weici2_icon.png" width="14px"></span>专业特长</div>
    <div id="checkbox1">
    <ul>
      <li>护理心血管疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="护理心血管疾病" /></span></li>
      <li>脑血管疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="脑血管疾病" /></span></li>
      <li>呼吸系统疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="呼吸系统疾病" /></span></li>
      <li>消化系统疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="消化系统疾病" /></span></li>
      <li>泌尿外科疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="泌尿外科疾病" /></span></li>
      <li>普通外科疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="普通外科疾病" /></span></li>
      <li>颅脑外伤疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="颅脑外伤疾病" /></span></li>
      <li>肾脏疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="肾脏疾病" /></span></li>
      <li>肛肠疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="肛肠疾病" /></span></li>
      <li>甲状腺疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="甲状腺疾病" /></span></li>
      <li>乳腺疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="乳腺疾病" /></span></li>
      <li>眼部疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="眼部疾病" /></span></li>
      <li>风湿类疾病<span class="check_span"><input type="checkbox" name="ng" class="servput" value="风湿类疾病" /></span></li>
      <li>护理肿瘤<span class="check_span"><input type="checkbox" name="ng" class="servput" value="护理肿瘤" /></span></li>
      <li>照护骨折<span class="check_span"><input type="checkbox" name="ng" class="servput" value="照护骨折" /></span></li>
      <li>照护临终<span class="check_span"><input type="checkbox" name="ng" class="servput" value="照护临终" /></span></li>
      <li>护理瘫痪<span class="check_span"><input type="checkbox" name="ng" class="servput" value="护理瘫痪" /></span></li>
      <li>糖尿病生活照护<span class="check_span"><input type="checkbox" name="ng" class="servput" value="糖尿病生活照护" /></span></li>
      <li>慢病管理<span class="check_span"><input type="checkbox" name="ng" class="servput" value="慢病管理" /></span></li>
      <li>健康管理<span class="check_span"><input type="checkbox" name="ng" class="servput" value="健康管理" /></span></li>
      <li>心理治理<span class="check_span"><input type="checkbox" name="ng" class="servput" value="心理治理" /></span></li>
      <li>其他<span class="check_span"><input type="checkbox" name="ng" class="servput" value="其他" /></span></li>
   </ul>
   </div>
   <div class="sersave" id="close"> 保存</div>
   </div>
</div>
</div>

<div id="div2">
<div class="mPicker1 close" id="N1G">
    <div class="mPicker-mask1"></div>
    <div class="mPicker-main1">
    <div class="serdtit"><span class="left" id="close3"><img src="images/delete_weici2_icon.png" width="14px"></span>可提供服务</div>
    <div id="checkbox2">
    <ul>
      <li>打针输液<span class="check_span"><input type="checkbox" name="n1g" class="servput" value="打针输液" /></span></li>
      <li>伤口换药<span class="check_span"><input type="checkbox" name="n1g" class="servput" value="伤口换药" /></span></li>
      <li>导尿<span class="check_span"><input type="checkbox" name="n1g" class="servput" value="导尿" /></span></li>
      <li>更换胃管<span class="check_span"><input type="checkbox" name="n1g" class="servput" value="更换胃管" /></span></li>
      <li>压疮护理<span class="check_span"><input type="checkbox" name="n1g" class="servput" value="压疮护理" /></span></li>
      <li>监护室护理<span class="check_span"><input type="checkbox" name="n1g" class="servput" value="监护室护理" /></span></li>
   </ul>
   </div>
   <div class="sersave" id="close2"> 保存</div>
   </div>
</div>
</div>

<div id="div4">
<div class="mPicker1 close" id="N2G">
    <div class="mPicker-mask1"></div>
    <div class="mPicker-main1">
    <div class="serdtit"><span class="left" id="close7"><img src="images/delete_weici2_icon.png" width="14px"></span>地址设置</div>
    <div id="checkbox3" class="center">
		<div class="servinp">地区地址:<input type="text" /><br />家庭地址:<input type="text"/></div>
   </div>
   <div class="sersave" id="close8"> 保存</div>
   </div>
</div>
</div>

<script src="js/checkbox.js"></script>

<script>
$(function(){
	$("#checkbox1").selectCheck({
		allId:null,
		parentSelect:null
	});

	$("#checkbox2").selectCheck({
		allId:null,
		parentSelect:null
	});

});
</script>

<div id="div3">
<div v-cloak id="popup" @click="popupHide" class="close" >
	<div class="overlay"></div>
	<div class="content">
		<section class="srv-time-selector" v-show="switchShow" style="height:auto;">
			<div class="bar bar-1">
				<h1>选择服务时间</h1>
				<div id="close5"><img width="14px" src="images/delete_weici2_icon.png" /></div>
			</div>
			<div class="bd">
				<div class="header">
					<div class="data-picker">
						<div class="wrapper">
							<button v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)">
								{{date.week}} <br />
{{date.month}}/{{date.day}}

							</button>
							<button v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)">
								{{date.week}} <br />
{{date.month}}/{{date.day}}

							</button>
						</div>
					</div>
					<button class="cal" @click="tableShow">
						<img width="16" src="images/rili_weici2_icon@2x.png" alt="" />
						<span>30天</span>
					</button>
				</div>

				<div class="hours" id="hours">
					<div class="wrapper" v-for="date in dates.nowMonth" v-if="date.current && date.appointment">

						<div :class="{'chose-time': !isChoseTime}" v-if="isFirstDay === 0" >
							<!--<button  :class="['hour-this', {'not-can-use': (key + 20)/2 <= currentHours + 0.5}]"
                            v-for="(hour, key) in date.hours" @click="timeChose(key, $event)" name="hour">
                            {{hour.hour}}
                            </button>-->
                            <button class="hour-this" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)" name="hour">{{hour.hour}}<br />
<span class="state">空闲</span></button>
						</div>


						<div :class="{'chose-time': !isChoseTime}" v-else>
							<button class="hour-this" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)" name="hour">{{hour.hour}}<br />
<span class="state">空闲</span></button>
						</div>
					</div>
					<div class="wrapper" v-else-if="date.current && !date.appointment">
						<div class="tips">
							<button class="hour-this" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)" name="hour">{{hour.hour}}<br />
<span class="state">空闲</span></button>
						</div>
					</div>
					<div class="wrapper"  v-for="date in dates.nextMonth" v-if="date.current && date.appointment">
						<div :class="{'chose-time': !isChoseTime}">
							<button class="hour-this" v-for="hour in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
						</div>
					</div>
					<div class="wrapper" v-else-if="date.current && !date.appointment">
						<div class="tips">
							<img class="null-tips" src="images/baoqian_weici2_icon.png" alt="" />
							<p>抱歉，今天的服务暂停哦~</p>
						</div>
					</div>
				</div>
				<div class="out">
					<button class="submit" id="close6" @click="submitFunc">确定</button>
				</div>
			</div>
		</section>

		<section class="srv-time-selector" v-show="!switchShow" style="height:auto;">
			<div class="bar">
				<img width="8" src="images/fanhui_weici2_icon.png" @click="tableHide">
				<h1>选择服务时间</h1>
			</div>
			<div class="bd">
				<section class="days-component" style="height:auto;" >
					<div class="weekdays">
						<div class="weekday">日</div>
						<div class="weekday">一</div>
						<div class="weekday">二</div>
						<div class="weekday">三</div>
						<div class="weekday">四</div>
						<div class="weekday">五</div>
						<div class="weekday">六</div>
					</div>
					<div class="days-body">
						<div>
							<div class="month">{{currentYears}}年{{currentMonth}}月</div>
							<div class="days">
								<div class="day" v-for="day in nullDay">{{day}}</div>
								<div class="day" v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)">
									<font v-show="index == 0">今天</font>
									<span>{{date.appointment ? '' : '暂不可约'}}</span>
									<a  :href="'#scroll-' + index">{{date.day}}</a>
								</div>
							</div>
							<div class="month">{{currentYears}}年{{currentMonth + 1}}月</div>
							<div class="days">
								<div class="day" v-for="day in nextNullDay">{{day}}</div>
								<div class="day" v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)">
									<span>{{date.appointment ? '' : '暂不可约'}}</span>
									<a  :href="'#scroll-next-' + index">{{date.day}}</a>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</section>
	</div>
</div>
</div>

<script src="js/vue.min.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#popup',

		data: {
			switchShow: true,
			currentMonth: null,
			currentHours: null,
			isFirstDay: 0,
			popupShow: false,
			isChoseTime: true,
			isChoseTimeShow: true,
			nextProtoWeek: null,
			nullDay: [],
			nextNullDay: [],
			dates: {
				nowMonth: [],
				nextMonth: []
			}
		},

		methods: {
			selectedNow: function(index, event) {

				for (date in this.dates.nowMonth){
					this.dates.nowMonth[date].current = false;

				}
				for (date in this.dates.nextMonth){
					this.dates.nextMonth[date].current = false;

				};

				if (!this.dates.nowMonth[index].appointment) {
					this.isChoseTimeShow = false;
				} else {
					this.isChoseTimeShow = true;
					this.isChoseTime = true;
				}

				this.isFirstDay = index;
				console.log(this.isFirstDay);
				this.tableHide();
				this.dates.nowMonth[index].current = true;

			},
			selectedNext: function(index, event) {

				for (date in this.dates.nextMonth){
					this.dates.nextMonth[date].current = false;

				}
				for (date in this.dates.nowMonth){
					this.dates.nowMonth[date].current = false;

				};

				if (!this.dates.nextMonth[index].appointment) {
					this.isChoseTimeShow = false;
				} else {
					this.isChoseTimeShow = true;
					this.isChoseTime = true;
				}

				this.isChoseTime = true;
				this.tableHide();

				this.dates.nextMonth[index].current = true;

			},

			tableShow: function() {

				this.switchShow = false;

			},

			tableHide: function() {

				this.switchShow = true;

			},

			timeChose: function(key, event) {
				this.isChoseTime = false;
				$(event.target).siblings().removeClass('chosed');
				$(event.target).addClass('chosed');
				//var arr=new Array();
//
//				$(event.target).each(function(key,value){
//				  arr[key]=$(value).val();
//				  alert();
//				});
                $a = $.trim($("button.current").text());
				if($(event.target).children("span.state").text() == "空闲"){
					$(event.target).css("background-color","#d8b25f");
					$(event.target).children("span.state").text("忙碌");
				}else{
					$(event.target).css("background-color","white");
					$(event.target).children("span.state").text("空闲");
				}
				$("#rili").val($a+"  "+$(event.target).text());
			},

			notChoseTime: function() {
				this.isChoseTime = true;
			},

			popupHide: function() {
				popupShow = false;
			},

			// submit
			submitFunc: function() {
				var time, choseH, subInfo;

				for (ts in this.dates.nowMonth) {
					if (this.dates.nowMonth[ts].current == true) {
						time = this.dates.nowMonth[ts];
					}
				}
				for (tc in this.dates.nextMonth) {
					if (this.dates.nextMonth[tc].current == true) {
						time = this.dates.nextMonth[tc];
					}
				}

				var choseHours = $('.hour-this');
				var noSel = $('.no-sel');

				if(noSel.hasClass('not-chose-time')) {
					choseH = null;
				} else {

					for (var h = 0; h < choseHours.length; h++) {
						if(choseHours.eq(h).hasClass('chosed')) {
							choseH = choseHours.eq(h).text();
						}
					}

				}


				subInfo = {
					"day": time,
					"hour": choseH
				}
				console.log(subInfo);
			}
		},

		created: function() {

			var totalDays = 30,
					date = new Date(),
					currentYears = date.getFullYear(),
					week = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六'),
					currentMonth = date.getMonth() + 1,
					currentDay = date.getDate(),
					protoWeek = date.getDay(),
					currentHours = date.getHours(),
					hours = [
						{'hour': '8:00' },	{'hour': '9:00' },
						{'hour': '10:00'},  {'hour': '11:00'},
						{'hour': '12:00'},  {'hour': '13:00'},
						{'hour': '14:00'},  {'hour': '15:00'},
						{'hour': '16:00'},  {'hour': '17:00'},
						{'hour': '18:00'},  {'hour': '19:00'},
						{'hour': '20:00'},  {'hour': '21:00'}
					];

			this.currentYears =	currentYears;
			this.currentMonth =	currentMonth;
			this.currentDay =	currentDay;
			this.currentHours = currentHours;
			console.log(this.currentDay);

			for (var i = 0; i < totalDays; i++) {

				var month = date.getMonth() + 1,
						day = date.getDate(),
						proteWeek = date.getDay(),
						timestamp = date.getTime(),
						appointment = true;

						if(proteWeek == 0 || proteWeek == 6) {
							appointment = false;
						}

				var	d = {
							'timestamp': timestamp,
							'appointment': appointment,
							'month': month,
							'day': day,
							'proteWeek': proteWeek,
							'week': week[proteWeek],
							'hours': hours,
							'current': false
						};

				if (month == currentMonth) {
					this.dates.nowMonth.push(d);
				} else {
					this.dates.nextMonth.push(d);
				}

				date.setDate(date.getDate() + 1);
			}


			this.dates.nowMonth[0].current = true;
			this.nextProtoWeek = this.dates.nextMonth[0].proteWeek;
			console.log(this.nextProtoWeek);
			console.log(this.dates);

			for(var j = 0; j < protoWeek; j++) {

				this.nullDay.push("");

			}

			for(var k = 0; k < this.nextProtoWeek; k++) {

				this.nextNullDay.push("");

			}
		}
	})
</script>
<script src="js/deposit.js"></script><div class="mPicker hide"><div class="mPicker-mask hide"></div></div>
</body>