<%@ 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>
分享到：
相关推荐
然后在JavaScript文件中引入HandleBar.js库： ```javascript var Handlebars = require('handlebars'); ``` 3. **模板创建** 在HandleBar.js中，模板通常是一个HTML字符串，其中包含占位符（{{}}）。例如： `...
handlebar.js-实验前端模板引擎的实验-handlebar.js供应商： jQuery，handlebar.js，Bootstrap和LESS注意 ： 由于跨域AJAX请求，此实验存储库仅在服务器上有效
ember.js,一个构建“雄心勃勃”的应用程序的javascript框架。相对于angularjs稳定性更高一些。基于模版的开发方式让你重新认识编码方式。此处仅提供ember.js和handlebar.js资源文件。jquery请自行下载。注意ember只...
Util.js javascript常用工具函数集合 具体的函数参数可在源码中看 依赖 Jquery，Handlebar Examples formatDate 格式化日期 var date = new Date(); Util.formatDate(date,'YYYY/MM/DD hh:mm:ss'); // 2014/11/12 ...
并且为了可用性，正在使用 Handlebar.js。 4.排序方式与清除行程站点相同，但现在仅限于仅根据价格类别进行排序。 但它总是可以扩展为基于其他字段进行排序。 单击过滤器链接应切换隐藏的过滤器区域和显示的结果...
**Node.js** 是一个开放源代码、跨平台的JavaScript运行环境，用于在服务器端执行JavaScript代码。在StoryBook中，Node.js可能作为后端服务，提供API接口，处理数据请求，或者用于构建和打包前端资源。Node.js的事件...
在本文中，我们将深入探讨如何使用Node.js的Express.js框架和Handlebars模板引擎来构建一个基本的Web服务器。首先，让我们简要介绍一下这两个关键组件。 Express.js是Node.js中最流行的Web开发框架，它提供了一个...
基于nodejs的开放平台的设计与实现用到的技术node.jsexpress后端框架handlebar.jsmongodb数据库bootstrap样式库本地开发和运行安装 环境和 ；在项目根目录依次执行 npm install 和 bower install安装依赖项，然后...
使用 RequireJS 的 Backbone Contact Manager 使用 Backbone.js、Localstorage、RequireJS、Handlebar 和 Bootstrap 的联系人管理器。 此联系人管理器应用程序的功能是客户端数据存储（本地存储）、表单验证、搜索...
Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证...
ScratchOpz 完整的图书馆和资料库，用于存放和收集有用的脚本，并根据我的日常使用和需求对其进行定制和/或定制。...5. handleBar_js 片刻 6. javaScript-jQuery billShipSame.js camp-info.js dateScr
使用Sendgrid的handlebar.js模板语法子集。 辅助脚本 带有数据的渲染模板 npm run render -- [template_filename] [data_filename] [output_filename] 内联模板样式 npm run inline-style -- [template_filename] >...
handlebar-v3.0.3.js根据MIT许可证重新分发。 去做 该项目处于预发布状态。 我打算在考虑“可用”之前实施以下内容。 SafeString 在render支持Handlebars.compile选项。 部分。 Loggin支持（将Handlebars.log...
【标题】"Handlebar-Sample-Java" 是一个与Java相关的项目，主要涉及的是Handlebars模板引擎在Java环境中的应用示例。Handlebars是一种轻量级的JavaScript模板语言，它旨在提供一种简单的方式将数据绑定到HTML模板上...
描述中的 "使用nodejs express和handlebar的Web服务器" 指出，该项目主要使用了Node.js的Express框架来构建服务器端逻辑，以及Handlebars作为视图层的模板引擎，用于动态渲染网页内容。这表明项目将涉及服务器端编程...
本项目利用了Web开发的三大核心技术栈：JavaScript、Express JS、Handlebars以及数据库管理系统MongoDB，创建了一个简单易用的图书馆管理平台。下面将详细讲解这四个核心组件以及它们在系统中的作用。 首先，...
犀牛余烬预编译器Ember 车把预编译器...用法编译： java -jar <rhino> rhino-ember-compiler.js --handlebarJs <handlebars> --emberJs <Ember> --jqueryJs <Jquery> --templatesDir <handlebar templates director
- templates # handlebar templates - default.handlebars 过程 除上述文件和config.ignore中列出的内容外，所有文件和目录都将被解析。 默认情况下，markdown（.md）文件使用default.handlebars生成一个.html文件...
原有的技术栈包括Backbone.js、Marionette、jQuery、Underscore和Handlebar等，后端则基于Tomcat/Spring 3和Handlebar，采用传统的git分支管理和HTTP请求处理搜索引擎数据。 **项目特点** 1. **首屏渲染**：优先...