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

	<head>
		<meta charset="utf-8">
		<title>VDN WebApp</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">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			.mui-slider-indicator {
				bottom: 0;
			}
			
			.mui-slider {
				background-color: #f2f2f2;
			}
			
			.icon-size {
				max-height: 48px;
				max-width: 48px;
				width: 48px;
				height: 48px;
			}
			
			.mui-media-body1 {
				word-wrap: break-all !important;
				white-space: normal !important;
				;
				height: 30px !important;
			}
			
			.icon {
				width: 40px;
				height: 40px;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			.cus-other span,
			.cus-other div {
				color: #0066CC !important;
			}
		</style>
	</head>

	<body>
		<div id="slider-1" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="images/two.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/one.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="images/two.jpg">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="images/one.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<div class="mui-content">
			<div id="Gallery" class="mui-slider" style="margin-top:15px;">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="bill.html">
									<span class="mui-icon mui-icon-personadd"></span>
									<div class="mui-media-body">在线预约</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="list.html">
									<span class="mui-icon mui-icon-person"><span id="span_count" class="mui-badge">0</span></span>
									<div class="mui-media-body">我的预约</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a name="a_ajax" href="ajax.html">
									<span  class="mui-icon mui-icon mui-icon-paperplane"></span>
									<div class="mui-media-body">Ajax</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="event.html">
									<span class="mui-icon mui-icon-chatboxes"></span>
									<div class="mui-media-body">事件及属性</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="chart.html">
									<span class="mui-icon mui-icon-list"></span>
									<div class="mui-media-body">图表</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="picker.html">
									<span class="mui-icon mui-icon mui-icon-map"></span>
									<div class="mui-media-body">选择器</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="cookie.html">
									<span class="mui-icon mui-icon-star"></span>
									<div class="mui-media-body">Cookie</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="env.html">
									<span class="mui-icon mui-icon-pengyouquan"></span>
									<div class="mui-media-body">环境变量</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="dw2json.html">
									<span class="mui-icon mui-icon-list"></span>
									<div class="mui-media-body">DW</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="dwedit.html">
									<span class="mui-icon mui-icon-compose"></span>
									<div class="mui-media-body">表格编辑</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="<!--INCLUDE:wxsdk-->">
									<span class="mui-icon mui-icon-weixin"></span>
									<div class="mui-media-body">微信接口</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="pay.html">
									<span class="mui-icon mui-icon mui-icon-spinner"></span>
									<div class="mui-media-body">在线支付</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="upfile.html">
									<span class="mui-icon mui-icon mui-icon-image"></span>
									<div class="mui-media-body">上传文件</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="barcode.html">
									<span class="mui-icon mui-icon-bars"></span>
									<div class="mui-media-body">二维码</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="query_1.html">
									<span class="mui-icon mui-icon-search"></span>
									<div class="mui-media-body">查询</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="canvas.html">
									<span class="mui-icon mui-icon-compose"></span>
									<div class="mui-media-body">在线签名</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="icon.html">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji3"></use>
									</svg>
									<div class="mui-media-body">多彩图标</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="trace.html">
									<span class="mui-icon mui-icon-map"></span>
									<div class="mui-media-body">调试跟踪</div>
								</a>
							</li>
							<!--方式一、动态嵌入-->
							<!--INCLUDE:Menu-->
							<!--方式二、前台动态-->
							<span id="span_menus">
							</span>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a name="a_exit" href="login.html">
									<span class="mui-icon mui-icon-redo"></span>
									<div name="div_exit" class="mui-media-body">注销</div>
								</a>
							</li>

						</ul>
					</div>
					<!--div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div-->
				</div>
			</div>
	</body>

	<!--------------------嵌入式模板------------------------->
	<script id="tmpl_menu" type="text/x-jquery-tmpl">
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
			<a href="${c_href}">
				<span class="mui-icon ${c_icon}"></span>
				<div class="mui-media-body">${c_text}</div>
			</a>
		</li>
	</script>

	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.tmpl.js" ></script>
	<script src="js/vdn.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/iconfont.js"></script>
	<script>
		mui.init();
		vdn.disableBack();
		mui.ready(function() {
			var slider = document.getElementById('Gallery');
			var group = slider.querySelector('.mui-slider-group');
			var items = mui('.mui-slider-item', group);
			//克隆第一个节点
			var first = items[0].cloneNode(true);
			first.classList.add('mui-slider-item-duplicate');
			//克隆最后一个节点
			var last = items[items.length - 1].cloneNode(true);
			last.classList.add('mui-slider-item-duplicate');
			//处理是否循环逻辑，若支持循环，需支持两点：
			//1、在.mui-slider-group节点上增加.mui-slider-loop类
			//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
			var sliderApi = mui(slider).slider();

			function toggleLoop(loop) {
				if(loop) {
					group.classList.add('mui-slider-loop');
					group.insertBefore(last, group.firstChild);
					group.appendChild(first);
					sliderApi.refresh();
					sliderApi.gotoItem(0);
				} else {
					group.classList.remove('mui-slider-loop');
					group.removeChild(first);
					group.removeChild(last);
					sliderApi.refresh();
					sliderApi.gotoItem(0);
				}
			}
			//动态菜单
			var menus = <!--INCLUDE:MenudData;JS-->;
			vdn.appendTo("span_menus", $("#tmpl_menu"), menus);
			//获取预约数量
			vdn.post({
					"method": "nvo_bill.GetListCount",
					"params": []
				}, function(data) {
					mui("#span_count")[0].innerHTML = data.Result;
				},
				function(err) {
					mui.toast(err.Message + "(" + err.Code.toString() + ")");
				});

		});
		//取消绑定
		function logout() {
			if(confirm("确定取消微信绑定?")) {
				//取消绑定
				vdn.post({
						"method": "nvo_main.logout",
						"params": []
					}, function(data) {
						$(location).prop('href', data.Result);
					},
					function(err) {
						mui.toast(err.Message + "(" + err.Code.toString() + ")");
					});
			}
		}
	</script>

</html>