handlebar.js

8671 ワード

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!doctype html>
<html class="no-js">
<%@ taglib prefix="s" uri="/struts-tags" %> 
<head>
  <title> </title>

<%@ include file="/PUBLISH/common/wapmeta.jsp"%>
<link rel="stylesheet" href="<%=path %>/PUBLISH/amazeui/css/amazeui.switch.css"/>
<link rel="stylesheet" href="<%=path %>/PUBLISH/amazeui/css/iscroll.css"/>

<script src="<%=path %>/PUBLISH/amazeui/js/iscroll.js"></script>
<script src="<%=path %>/PUBLISH/common/iscroll.js"></script>
<script src="<%=path %>/PUBLISH/amazeui/js/amazeui.switch.min.js"></script>
  <body>
  	<style>
	 .order{background:#FFF;font-size:2.0rem; color:#666; padding:0.8rem; border-bottom:1px solid #dbdbdb; margin-bottom:1rem;}
	 .order .time{}
	 .order .state{ color:#aeaeae; text-align:right; margin-bottom:1rem;}
	 .order .txtbox{ font-size:1.6rem; padding-bottom:0;}
	  .order .txtbox span{ color:#c94141; margin-right:0.5rem;}
	  
	  .order:active {background:#ededed;}
	  
	  
	  .am-tab-panel{ padding:0 !important;}
	  .am-active a{ background-color:#f5f5f5!important;  border-bottom:4px solid #f19321!important;}
	  
	 </style> 
	<script type="text/x-handlebars-template" id="amz-header">
  		{{>header header}}
	</script>
	<div id="myHeader"></div>
	<div class="am-tabs" id="doc-my-tabs">
	  <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
	    <li class="am-active"><a href="" id="option1" style="font-size:1.6rem; padding:1rem;color:#333"> </a></li>
	    <li><a href="" id="option2" style="font-size:1.6rem; padding:1rem; color:#333"> </a></li>
	  </ul>
	  <div class="am-tabs-bd">
	  	
		<div class="am-tab-panel am-active" id="scrollDiv1">
	    <div id="orderBox1">
	    </div>
	    <img id="noorderimg1" src="<%=path %>/PUBLISH/amazeui/i/noorder.png" width="50%" style="margin-left:25%; margin-top:25%;display: none" />
	    </div>
		<div class="am-tab-panel" id="scrollDiv2">
	    <div id="orderBox2">
	    </div>
	    <img id="noorderimg2" src="<%=path %>/PUBLISH/amazeui/i/noorder.png" width="50%" style="margin-left:25%; margin-top:25%;display: none" />
	    </div>
	  </div>
	</div>
	
	<script id="order-template1" type="text/x-handlebars-template">
{{#order}}
<div id="{{id}}" class="order" onclick="select(this.id)">

    <div class="am-g">
      <div class="am-u-sm-11">
		<div class="txtbox">   : {{username}}</div>
        <div class="txtbox">   : {{carNum}}</div>
		<div class="txtbox">         : {{tel}}</div>
		<div class="txtbox">  : {{createTime}}</div>
		<div class="txtbox">  : <span style="color:red">¥{{cost}} </span></div>
      </div>
    </div>

 </div>
  
{{/order}}
 	</script>
 	<script id="order-template2" type="text/x-handlebars-template">
{{#order}}
<div id="{{id}}" class="order" onclick="select(this.id)">

    <div class="am-g">
      <div class="am-u-sm-11">
        <div class="txtbox">   : {{username}}</div>
        <div class="txtbox">   : {{carNum}}</div>
		<div class="txtbox">         : {{tel}}</div>
		<div class="txtbox">  : {{createTime}}</div>
		<div class="txtbox">  : <span style="color:red">¥{{cost}} </span></div>
      </div>
    </div>

 </div>
  
{{/order}}
 	</script>
  
  	<script >
  	
  		var rows = 20;
  		var page1 = 1;
  		var page2 = 1;
  		var template1;
  		var template2;
  		var endFinish1 = false;
  		var endFinish2 = false;
  		
  		var text;
  		
  		$("#doc-my-tabs").tabs();
	  	$(function() {
	  		template1 = Handlebars.compile($("#order-template1").html());
	  		template2 = Handlebars.compile($("#order-template2").html());
	  		//  header
	  		loadHeader();
	  		getData1();
	  		getData2();
	  	});
	  	var loadHeader = function() {
	  		var value={
	  				leftLink:"javascript:history.back();",
	  				leftIcon:"chevron-left",
	  				title:" ",
	  				div:"myHeader"
	  		};
	  		header(value);
	  	};
	  	
	  	function getData1(){
	  		myLoading(" ...");
	  		$.ajax({
	  			type : "POST",
	  			dataType : "json",
	  			url : path + "/workerorder/getList.do",
	  			data : {rows : rows , page : page1 , orderStatus : "3"},
	  			success : function(json) {
	  				if(json.success){
	  					if(page1 == 1){
	  						text = $("#option1").text();
	  						$("#option1").text(text + "(" + json.sum + ")");
	  					}
	  					if(json.count == 0 && page1 == 1){
	  						$("#noorderimg1").css("display","block");
	  					}
	  					else{
	  						$("#noorderimg1").css("display","none");
	  					}
	  					$("#orderBox1").append(template1(json.data));
	  					
	  					$(window).scroll(function(){
	  						
	  						if($(document).scrollTop() + document.body.clientHeight == $(document).height()){
	  							if (!endFinish1) {
	  								getData1();
	  							}
	  						}
	  					});
	  					if(json.count < rows){
	  						endFinish1 = true;
	  					}
	  					if(json.count > 0){
	  						page1 = page1 + 1;
	  					}
	  				}
	  				myLoadingClose();
	  			}
	  		});
	  	}
	  	function getData2(){
	  		myLoading(" ...");
	  		$.ajax({
	  			type : "POST",
	  			dataType : "json",
	  			url : path + "/workerorder/getList.do",
	  			data : {rows : rows , page : page2 , orderStatus : "5"},
	  			success : function(json) {
	  				if(json.success){
	  					if(page2 == 1){
	  						text = $("#option2").text();
	  						$("#option2").text(text + "(" + json.sum + ")");
	  					}
	  					if(json.count == 0 && page2 == 1){
	  						$("#noorderimg2").css("display","block");
	  					}
	  					else{
	  						$("#noorderimg2").css("display","none");
	  					}
	  					$("#orderBox2").append(template2(json.data));
	  					
	  					$(window).scroll(function(){
	  						
	  						if($(document).scrollTop() + document.body.clientHeight == $(document).height()){
	  							if (!endFinish2) {
	  								getData2();
	  							}
	  						}
	  					});
	  					if(json.count < rows){
	  						endFinish2 = true;
	  					}
	  					if(json.count > 0){
	  						page2 = page2 + 1;
	  					}
	  				}
	  				myLoadingClose();
	  			}
	  		});
	  	}
	  	
	  	function select(id){
	  		window.location.href = path + "/workerorder/getDetail.do?id="+id;
	  	}
  	</script>
  </body>
</html>