sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
							<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>APP</title>
	<link rel="stylesheet" type="text/css" href="./css/api.css" />
	<!--<link rel="stylesheet" type="text/css" href="./css/aui.css" />-->
	<link rel="stylesheet" type="text/css" href="./css/aui-win.css" />
	<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
		}

		.aui-nav .aui-bar-tab {
			background: #fff;
		}

		.aui-bar {
			text-align: center;
			height: 3.3rem;
		}

		#footer {
			border-top: 1px solid #ddd;
		}

		.btn-icon {
			width: 1.2rem;
			margin: 0 auto;
			margin-bottom: 3px;
		}

		.aui-bar-tab .aui-bar-tab-item {
			padding: 10px 0;
			box-sizing: border-box;
		}

		.aui-bar1 {
			position: relative;
			top: 0;
			right: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			min-height: 2.25rem;
			font-size: 0.9rem;
			text-align: center;
			display: table;
		}
		/*底部切换栏*/

		.aui-bar-tab1 {
			position: fixed;
			top: auto;
			bottom: 0;
			table-layout: fixed;
			background-color: #ffffff;
			color: #757575;
		}

		.aui-bar-tab1 .aui-bar-tab-item {
			display: table-cell;
			position: relative;
			width: 1%;
			height: 2.5rem;
			text-align: center;
			vertical-align: middle;
			padding: 5px 0;
		}

		.aui-bar-tab-label {
			font-size: 0.8rem;
			margin-top: -5px;
		}

		.myBg {
			background: linear-gradient(45deg, #005fa3, #00a0ea) !important;
		}
		.whitebar{
        background-color:#ffffff !important;
        color: #333333;
    }
	</style>
</head>

<body>
	<header class="aui-bar aui-bar-nav" id="aui-header">
		<div class="aui-title" id="aui-title">
			赛轮商城门店端
		</div>
	</header>
	<footer class="aui-bar1 aui-bar-tab1" id="footer">
		<div  class="aui-bar-tab-item aui-active" id="home"  tapmode    >
			<img src="./luntai/img/images/tabar_home_active.png" id="index1" class="btn-icon" />
			<div class="aui-bar-tab-label">
				首页
			</div>
		</div>
		<!--<div class="aui-bar-tab-item aui-active" tapmode onclick="randomSwitchBtn(1,'find')">
				<img src="./luntai/img/images/faxian.png" id="index1" class="btn-icon"/>
				<div class="aui-bar-tab-label"aui-bar-tab-item>
					发现
				</div>
			</div>-->
		<div class="aui-bar-tab-item" tapmode>
			<img src="./luntai/img/images/xiaoxi.png" id="index2" class="btn-icon" />
			<div class="aui-bar-tab-label">
				消息
			</div>
		</div>
		<div class="aui-bar-tab-item" tapmode>
			<img src="./luntai/img/images/shop_inactive.png" id="index4" class="btn-icon" />
			<div class="aui-bar-tab-label">
				购物车
			</div>
		</div>
		<div class="aui-bar-tab-item" tapmode>
			<img src="./luntai/img/images/wode.png" id="index3" class="btn-icon" />
			<div class="aui-bar-tab-label">
				我的
			</div>
		</div>
	</footer>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/aui-tab.js"></script>
<script type="text/javascript">
	apiready = function() {
		//			$api.clearStorage();
		var header = $api.byId('aui-header');
		$api.fixStatusBar(header);
		var headerPos = $api.offset(header);
		var footer = $api.byId('footer');
		$api.fixTabBar(footer)
		var body_h = $api.offset($api.dom('body')).h;
		var footer_h = $api.offset($api.byId('footer')).h;
		var loginid = $api.getStorage("loginid");
		//			openFrameGroup(headerPos, body_h, footer_h);
		if (loginid == "" || typeof loginid == 'undefined') {
			///  登录页面
			setTimeout(function() {
				openLogin(headerPos, body_h, footer_h);
			}, 200);
		} else {
			openFrameGroup(headerPos, body_h, footer_h);
		}
		///  打开页面组
		api.addEventListener({
			name: 'openFrameGroup'
		}, function(ret, err) {
			//coding...
			//alert(JSON.stringify(ret) );
			openFrameGroup(headerPos, body_h, footer_h);
			setTimeout(function() {
				api.closeWin({
					name: 'login',
					animation: {
						type: "push", //动画类型（详见动画类型常量）
						subType: "from_right", //动画子类型（详见动画子类型常量）
						duration: 300
					}
				});
			}, 1200);
		});
		api.addEventListener({
			name:'gotocart'
		}, function(ret){
			$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
			$api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi.png');
			$api.attr($api.byId('index3'), 'src', './luntai/img/images/wode.png');
			$api.attr($api.byId('index4'), 'src', './luntai/img/images/shop_active.png');
			 
		 	api.setFrameGroupIndex({
                name: 'indexGroup',
				index:2,
				reload:true
			});  
			var home= $api.byId('home');
			home.classList.remove("aui-active");
			 
		
			// var _tab = tabItems[index-1];
        	// if(_tab.parentNode.querySelector(".aui-active"))_tab.parentNode.querySelector(".aui-active").classList.remove("aui-active");
        	// _tab.classList.add("aui-active");
			 
		})
		var tab = new auiTab({
			element: document.getElementById("footer"),
		}, function(ret) {
			if (ret.index == 1) {
				$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_active.png');
				$api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi.png');
				$api.attr($api.byId('index3'), 'src', './luntai/img/images/wode.png');
				$api.attr($api.byId('index4'), 'src', './luntai/img/images/shop_inactive.png');
				api.sendEvent({
					name: 'startLogin',
					extra: {}
				});
			} else if (ret.index == 2) {
				$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
				$api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi_active.png');
				$api.attr($api.byId('index3'), 'src', './luntai/img/images/wode.png');
				$api.attr($api.byId('index4'), 'src', './luntai/img/images/shop_inactive.png');
				api.sendEvent({
					name: 'refushMsg',
					extra: {}
				});
			}
			else if (ret.index == 3) {
				$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
				$api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi.png');
				$api.attr($api.byId('index3'), 'src', './luntai/img/images/wode.png');
				$api.attr($api.byId('index4'), 'src', './luntai/img/images/shop_active.png');
				api.sendEvent({
					name: 'refreshshopcart',
					extra: {}
				});
				 
			}
			else {
				$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
				$api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi.png');
				$api.attr($api.byId('index3'), 'src', './luntai/img/images/wode_active.png');
				$api.attr($api.byId('index4'), 'src', './luntai/img/images/shop_inactive.png');
				
				api.sendEvent({
					name: 'refushMeber',
					extra: {}
				});
			}
			// if (ret.index == 1) {
			// 	$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_active.png');
			// 	$api.attr($api.byId('index2'), 'src', './luntai/img/images/wode.png');
			// } else {
			// 	$api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
			// 	$api.attr($api.byId('index2'), 'src', './luntai/img/images/wode_active.png');
			//   api.sendEvent({
			//       name: 'refushMeber',
			//       extra: {
			//       }
			//   });
			//
			// }
			api.setFrameGroupIndex({
				name: 'indexGroup',
				index: (ret.index - 1),
			});
		});
	};
	//  打开登陆页面
	function openLogin(headerPos, body_h, footer_h) {
		api.openWin({
			name: 'login',
			url: 'luntai/login.html',
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: body_h - footer_h - headerPos.h
			},
			animation: {
				type: "none", //动画类型（详见动画类型常量）
				subType: "from_right", //动画子类型（详见动画子类型常量）
				duration: 200 //动画过渡时间，默认300毫秒
			}
		});
	}

	//  打开页面组
	function openFrameGroup(headerPos, body_h, footer_h) {
		api.openFrameGroup({
			name: 'indexGroup',
			scrollEnabled: false,
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: body_h - footer_h
			},
			index: 0,
			frames: [{
				name: 'main',
				url: 'luntai/index.html',
				vScrollBarEnabled: false,
				hScrollBarEnabled: false,
				bounces: false,
			}, {
				name: 'msg',
				url: 'luntai/msg.html',
				vScrollBarEnabled: false,
				hScrollBarEnabled: false,
				bounces: false,
			},
			{
				name: 'cart',
				url: 'luntai/cart.html',
				vScrollBarEnabled: false,
				hScrollBarEnabled: false,
				bounces: false
			},
			{
				name: 'my',
				url: 'luntai/meber.html',
				vScrollBarEnabled: false,
				hScrollBarEnabled: false,
				bounces: false
			}],
		}, function(ret, err) {
			if (ret.index == 1) {
				$api.addCls($api.byId('aui-header'), 'myBg');
			} 
			else if (ret.index==2){
				$api.addCls($api.byId('aui-header'), 'whitebar');
			}
			else {
				$api.removeCls($api.byId('aui-header'), 'myBg');
				$api.removeCls($api.byId('aui-header'), 'whitebar');
			}
		});
	}
</script>

</html>