<!VDNDOC "PageBase":"nvo_bill","IniEvent":"PageIni">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的预约</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="js/jquery-labelauty.js"></script>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/AppStyle.css" />
		<style>
			.sex:before {
				content: '男';
				font-size: 0.9em;
				font-weight: bold;
			}
			
			.sex.mui-active:before {
				content: '女';
				font-size: 0.9em;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<!--header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header-->
		<form id='form0' method="post">
			<div class="vdn-content">
				<div class="mui-input-row"><label>客户姓名</label>
					<input name="t_name" type="text" id="t_name" placeholder="请输入客户姓名" required="required" autofocus="autofocus" />
				</div>
				<div class="mui-input-row"><label>联系电话</label>
					<input name="t_tel" id="t_tel" placeholder="请输入联系电话" type="tel" required="required" /></div>

				<div class="mui-input-row"><label>性    别</label>
					<span></span>
					<div id="switch_sex" class="mui-switch mui-switch-blue mui-active sex">
						<div class="mui-switch-handle"></div>
						<input id="ck_sex" name="ck_sex" type="hidden" />
					</div>
				</div>
				<div class="mui-input-row"><label>服务门店</label>
					<select name="d_store" id="d_store">
					</select>
				</div>
				<div class="mui-input-row"><label>服务员工</label>
					<select name="d_oper" id="d_oper">
					</select>
				</div>
				<div class="mui-input-row"><label>到店日期</label>
					<input name="t_date" value="2017-11-03" id="t_date" placeholder="请输入到店日期" type="date" /></div>
				<div class="mui-input-row"><label>到店时间</label>
					<select name="d_time" id="d_time">
						<option value="9:00">9:00</option>
						<option value="9:30">9:30</option>
						<option value="10:00">10:00</option>
						<option value="10:30">10:30</option>
						<option value="11:00">11:00</option>
						<option value="11:30">11:30</option>
						<option value="12:00">12:00</option>
						<option value="12:30">12:30</option>
						<option value="13:00">13:00</option>
						<option value="13:30">13:30</option>
						<option value="14:00">14:00</option>
						<option value="14:30">14:30</option>
						<option value="15:00">15:00</option>
						<option value="15:30">15:30</option>
						<option value="16:00">16:00</option>
						<option value="16:30">16:30</option>
						<option value="17:00">17:00</option>
						<option value="17:30">17:30</option>
						<option value="18:00">18:00</option>
						<option value="18:30">18:30</option>
						<option value="19:00">19:00</option>
						<option value="19:30">19:30</option>
						<option value="20:00">20:00</option>
						<option value="20:30">20:30</option>
						<option value="21:00">21:00</option>
						<option value="21:30">21:30</option>
						<option value="22:00">22:00</option>
						<option selected="selected" value="22:30">22:30</option>
					</select>
				</div>
			</div>
			<div>
				<h3><img class="icon" alt="服务信息" src="images/Item.png">服务项目</h3>
				<div name="d_items">

				</div>
			</div>
			<input name="h_items" id="h_items" type="hidden" />
			<div class="">
				<h6>微信扫一扫：</h6>
				<button type="button" id="b_scanQRCode_Rtn" class="mui-btn mui-btn-primary">扫一扫(返回值)</button>
				<button type="button" id="b_scanQRCode" class="mui-btn mui-btn-primary">扫一扫(微信处理)</button>
			</div>
			<div class="mui-input-row"></div>
			<div class="mui-content-padded">
				<button type="button" data-loading-text="提交中" AutoPost="true" onclick="JavaScript:if(!AppointmentValid()) return false;" name="b_submit" id="b_submit" class="mui-btn mui-btn-block mui-btn-primary btn-padding" >确认预约</button>
			</div>
			</div>
			<script src="js/jweixin-1.2.0.js"></script>
			<script src="js/mui.min.js"></script>
			<script src="js/vdn.js"></script>
			<script>
				mui.init();
				//===========================微信SDK初始化==================================
				var config_ok = true;
				<!--INCLUDE:wx_config;JS-->
				wx.error(function(err) {
					config_ok = false;
					mui.toast(err.errMsg);
				});
				wx.ready(function() {

				})
				//============================微信扫一扫====================================
				//返回扫描信息
				$("#b_scanQRCode_Rtn").click(function() {
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function(res) {
							var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
							$("#t_name").val(result);
						},
						fail: function(err) {
							mui.toast(err.errMsg);
						}
					});
				});
				//扫一扫 微信直接处理信息
				$("#b_scanQRCode").click(function() {
					wx.scanQRCode({
						needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function(res) {

						},
						fail: function(err) {
							mui.toast(err.errMsg);
						}
					});
				});
				//服务项目列表
				$(function() {
					//each
					var obj_items = $('input[id^=ck_item_]');
					$.each(obj_items, function(index, item) {
						try {
							var obj_label = $(item).next("label");
							if(obj_label.length > 0) {
								$(item).attr("data-labelauty", obj_label[0].innerText);
								obj_label.hide();
							}
						} catch(e) {
							alert("Error:" + e.message);
						}
					});
					$('input[id^=ck_item_]').labelauty();
					//性别
					mui("body").on('toggle', '#switch_sex', function(event) {
						$("#ck_sex").val((event.detail.isActive ? 'off' : 'on'));
					});
				});
				//验证操作 可以放到单独的js中
				function AppointmentValid() {
					//Name
					var ls_name = $.trim($("#t_name").val())
					if(ls_name.length == 0) {
						alert("请填写正确的姓名");
						$("#t_name").focus().select();
						return false;
					}
					var pattern = /^[\u4e00-\u9fa5a-z]+$/gi;
					if(!pattern.test(ls_name)) {
						alert("姓名包含非法字符！");
						$("#t_name").focus().select();
						return false;
					}
					//Tel
					var isMobile = /^(?:1\d\d|15\d)\d{5}(\d{3}|\*{3})$/;
					var isPhone = /^((0\d{2,3}))?(\d{7,8})(-(\d{3,}))?$/;
					var ls_tel = $("#t_tel").val();
					if(!isMobile.test(ls_tel) && !isPhone.test(ls_tel)) {
						alert("请填写正确的电话号码,例如：138########或423####");
						$("#t_tel").focus().select();
						return false;
					}
					//item
					//each
					var obj_items = $('input[id^=ck_item_]');
					var ls_list = "";
					$.each(obj_items, function(index, item) {
						try {
							if($(item).prop("checked")) {
								ls_list += $(item).val() + ",";
							}
						} catch(e) {
							alert("Error:" + e.message);
						}
					});
					if(ls_list.length == 0) {
						alert("请选择服务项目");
						return false;
					}
					$("#h_items").val(ls_list);
					mui("#b_submit").button('loading');
					return true;
				}
				(function($) {
					//门店连动员工列表
					mui("#form0").on('change', '#d_store', function() {
						vdn.get({
								"method": "nvo_bill.getoper_json",
								"params": this.value
							}, function(data) {
								$("#d_oper").empty();
								$.each(data.Result, function(index, item) {
									$("#d_oper").append("<option value='" + item + "'>" + item + "</option>");
								});
							},
							function(err) {
								alert(err.Message + "(" + err.Code.toString() + ")");
							}
						);
					});

				})(jQuery);

				$(document).ready(function() {
					//					$("form").submit(function(e) {
					//					});
				});
			</script>
		</form>
	</body>

</html>