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>