update some functions

jinlong · Mar 28, 2015 · fcea6a4 · fcea6a4
1 parent 38945ec
commit fcea6a4
Show file tree

Hide file tree

Showing 6 changed files with 1,960 additions and 6 deletions.
diff --git a/html/frm_city.html b/html/frm_city.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
+	<title>选择城市</title>
+	<link rel="stylesheet" type="text/css" href="../css/api.css" />
+	<link rel="stylesheet" type="text/css" href="../css/fonts/css/font-awesome.min.css" />
+	<style>
+	</style>
+</head>
+<body>
+
+</body>
+<script type="text/javascript" src="../script/api.js"></script>
+<script>
+
+	apiready = function(){
+		var y = api.pageParam.headerH;
+		var obj = api.require('cityList');
+		obj.open({
+			y: y,
+			w: api.frameWidth,
+			h: api.frameHeight,
+		    currentCity:'北京',
+		    resource:'widget://res/cityList.json'
+		},function(ret,err){
+			if(ret){
+				// alert(JSON.stringify(ret));
+
+				var city = ret.cityInfo.city;
+				api.execScript({
+					name: 'win_order',
+	                script: 'changeCity("'+ city +'");'
+                });
+                setTimeout(function(){
+					api.closeWin();
+                },200);
+			}
+		});
+	};
+</script>
+</html>
diff --git a/html/frm_time_selector.html b/html/frm_time_selector.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
+	<title>预约拉屎</title>
+	<link rel="stylesheet" type="text/css" href="../css/api.css" />
+	<style>
+		html,body{
+			height: 100%; width: 100%; background: transparent;
+		}
+		body{position: relative;}
+		.header{
+			border-top: 2px solid #ff8903; height: 40px; line-height: 40px;
+			overflow: hidden; background-color: #f5f5f5;
+		}
+		.header span{
+			color: #fd9e34; padding: 0 20px; font-size: 14px;
+		}
+		.header span:first-child{
+			float: left;
+		}
+		.header span:last-child{
+			float: right;
+		}
+		#selector{
+			position: absolute; bottom: 0; width: 100%;
+			background-color: #fff;
+		}
+		.datetime{
+			height: 140px; overflow: auto;
+		}
+		.datetime ul{
+			line-height: 2;
+			text-align: center; height: 140px; overflow: auto;
+			position: absolute; z-index: 2; width: 33.33%;
+		}
+		.datetime ul:nth-child(2){
+			z-index: 3; left: 33.33%;
+		}
+		.datetime ul:nth-child(3){
+			z-index: 4; left: 66.66%;
+		}
+	</style>
+</head>
+<body>
+	<div id="selector">
+		<div class="header">
+			<span>取消</span><span>确定</span>
+		</div>
+		<div class="datetime">
+			<ul class="date">
+				<li>今天</li>
+				<li>明天</li>
+				<li>后天</li>
+			</ul>
+			<ul class="hour">
+				<li>0点</li>
+				<li>1点</li>
+				<li>2点</li>
+				<li>3点</li>
+				<li>4点</li>
+				<li>5点</li>
+				<li>6点</li>
+				<li>7点</li>
+				<li>8点</li>
+				<li>9点</li>
+				<li>10点</li>
+				<li>11点</li>
+				<li>12点</li>
+				<li>13点</li>
+				<li>14点</li>
+				<li>15点</li>
+				<li>16点</li>
+				<li>17点</li>
+				<li>18点</li>
+				<li>19点</li>
+				<li>20点</li>
+				<li>21点</li>
+				<li>22点</li>
+				<li>23点</li>
+			</ul>
+			<ul>
+				<li>0分</li>
+				<li>10分</li>
+				<li>20分</li>
+				<li>30分</li>
+				<li>40分</li>
+				<li>50分</li>
+			</ul>
+		</div>
+	</div>
+</body>
+<script type="text/javascript" src="../script/api.js"></script>
+<script type="text/javascript" src="../script/zepto.js"></script>
+<script>
+	apiready = function(){
+
+	};
+</script>
+</html>
diff --git a/html/win_city.html b/html/win_city.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
+	<title>选择城市</title>
+	<link rel="stylesheet" type="text/css" href="../css/api.css" />
+	<link rel="stylesheet" type="text/css" href="../css/fonts/css/font-awesome.min.css" />
+	<style>
+		html,body{height: 100%;}
+		body{
+			background-color: #f0f0f0;
+		}
+		#header{
+			text-align: center; background-color: #f5f5f5; 
+			width: 100%; border-bottom: 1px solid #e5e5e5;
+		}
+		#header h1{
+		    position: relative;
+		    font-size: 20px; height: 44px; line-height: 44px; margin: 0em; 
+		}
+		#header .cancel{
+			position: absolute; left: 10px; bottom: 0; width: 44px; height: 44px;
+			font-size: 26px;
+
+		}
+		#header .cancel i{
+			border:1px solid #e0e0e0; color: #8c8c8c; width: 30px; height: 30px;
+			border-radius: 30px; line-height: 30px; text-align: center; 
+		}
+		#header .cancel i.active{
+			background-color: #e6e6e6;
+		}
+		#main{
+
+		}
+
+	</style>
+</head>
+<body>
+	<div id="header">
+		<h1>
+		<span class="cancel" tapmode="active" onclick="api.closeWin();">
+			<i class="fa fa-angle-left"></i>
+		</span>
+		选择城市
+		</h1>
+	</div>
+	<div id="main">
+
+	</div>
+</body>
+<script type="text/javascript" src="../script/api.js"></script>
+<script type="text/javascript" src="../script/zepto.js"></script>
+<script>
+
+	apiready = function(){
+		var header = $api.byId('header');
+        $api.fixIos7Bar(header); 
+        var headerPos = $api.offset(header);
+        api.openFrame({
+	        name: 'frm_city',
+	        url: 'frm_city.html',
+	        bounces: false,
+	        pageParam: {
+	        	headerH: headerPos.h
+	        },
+	        rect: {
+		        x: 0,
+		        y: headerPos.h,
+		        w: 'auto',
+		        h: 'auto'
+	        }
+        });
+
+	};
+</script>
+</html>
diff --git a/html/win_dropping.html b/html/win_dropping.html
@@ -53,7 +53,7 @@
 <body>
 	<div id="header">
 		<h1>
-		<span class="cancel" tapmode onclick="api.closeWin();">取消</span>
+		<span class="cancel" tapmode onclick="api.closeWin({name: 'dropping'});">取消</span>
 		选择坑型
 		<i class="fa fa-map-marker"></i>
 		</h1>

diff --git a/html/win_order.html b/html/win_order.html
@@ -107,18 +107,18 @@ <h1>
 		</h1>
 	</div>
 	<div id="main">
-		<div class="order" tapmode="active">
+		<div class="order" tapmode="active" onclick="orderDropping();">
 			<i class="fa fa-clock-o"></i>
 			预约拉屎
 		</div>
 		<div class="loc">
-			<div class="city" tapmode="active">北京</div>
+			<div class="city" tapmode="active" onclick="selectCity();">北京</div>
 			<div class="when">
-				<div class="when1" tapmode="active">
+				<div class="when1" tapmode="active" onclick="search(this);">
 					<i class="fa fa-map-marker"></i>
-					<span>什么时候拉屎</span>
+					<span>从哪里出发</span>
 				</div>
-				<div class="where" tapmode="active">
+				<div class="where" tapmode="active" onclick="search(this);">
 					<i class="fa fa-map-marker"></i>
 					<span>去哪里拉屎</span>
 				</div>
@@ -136,7 +136,48 @@ <h1>
 <script type="text/javascript" src="../script/api.js"></script>
 <script type="text/javascript" src="../script/zepto.js"></script>
 <script>
+	function orderDropping(){
+//		api.openFrame({
+//	        name: 'frm_time_selector',
+//	        url: 'frm_time_selector.html',
+//	        bounces: false,
+//	        opaque: false,
+//	        bgColor: 'rgba(0,0,0,0)',
+//	        rect: {
+//		        x: 0,
+//		        y: 0,
+//		        w: 'auto',
+//		        h: 'auto'
+//	        }
+//      });
+	}
 
+	function search(cur){
+		var obj = api.require('searchBar');
+		obj.open(function(ret,err){
+			if(ret){
+				if(ret.isRecord){
+			        // api.alert({msg:'点击了录音按钮'});
+			    }else{
+			    	$(cur).find('span').text(ret.text);
+			    }
+			}
+		});
+	}
+
+	function changeCity(city){
+		city = city || '北京';
+		$('.city').text(city);
+	}
+	function selectCity(){
+		api.openWin({
+	        name: 'win_city',
+	        url: 'win_city.html',
+	        animation: {
+	        	type: 'none'
+	        }
+        });
+	}
 	apiready = function(){
 		var header = $api.byId('header');
         $api.fixIos7Bar(header);