jQuery实现手机版页面翻页效果。

var page = 1;
var size = 6;
var mark = 0;
var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}";
var commentTpl = '<div style="margin-top: 10px">\
				<button data-oid="<order_id>" style="width: 65px; height: 20px;z-index:999;" οnclick="comment()">去评价</button>\
				</div>';
var template = '<li class="item-order-li">\
				    <a class="item-shop" href="{Pigcms{:U('Store/shop', array("store_id"=>"<store_id>"))}">\
					    <i class="shop-icon"></i>\
					    <span class="shop-name">{store_name}</span>\
					    <i class="enter-icon"></i>\
					</a>\
			    <div class="item-order" data-node="item-order" data-oid="<order_id>" data-status="0">\
				<a style="z-index:0;" href="{pigcms{:U('Order/status', array("order_id"=>"<order_id>"))}">\
			        <div class="list-img"> <img class="lazy-load" src="{pic_info}"> </div>\
			        <div class="list-content">\
			            <div class="order-detail">\
			                <p class="time">{create_time}</p>\
			                <p class="desc">总价:¥{discount_price}</p>\
			            </div>\
			            <div class="order-content-rt">\
			                <div class="order-status "> {state}{comment_tpl}</div>\
			            </div>\
			        </div></a>\
				</div>\
			</li>';
var emptyTpl = '<div id="refund-widget-list" class="refund-widget-list">\
			    <ul class="refundlist" data-node="refundList">\
			<div class="no-result">\
			    <figure></figure>\
			    <p>暂无订单</p>\
			</div>\
			</ul>\
			</div>';
function getList() {
    if (mark) {
		return false;
    }
    mark = 1;
	var requestUrl = url.replace(/d%/, page);
	$("#page-loader").show();
	$.get(requestUrl, function(json){
		if (json.num > 0) {
			render(json.list);
			$("#page-loader").hide();
			page = page + 1;
		} else if(json.num <= 0 && page == 1) {
			$(".order-list").html(emptyTpl);
		}
		if (json.num >= size) {
			mark = 0;
		}
        $("#page-loader").hide();
	}, 'json');
}
function render(data){
	for (var i=0,item; item=data[i++];) {
		var html = template;
		if (item['comment_status'] == 0 && item['order_status'] == 1) {
			item['comment_tpl'] = commentTpl.replace(new RegExp('<order_id>', "gm"), item['order_id']);
		} else if(item['comment_status'] == 1 && item['order_status'] == 1){
			item['comment_tpl'] = '<div style="margin-top: 10px"><span style="width: 55px; height: 20px;">已评价</span></div>';
		} else {
			item['comment_tpl'] = '<div style="margin-top: 10px"><span style="width: 55px; height: 20px;"></span></div>';
		}
		switch (item['order_status']) {
			case '0': item['state'] = '订单失效';break
			case '1': item['state'] = '订单完成';break
			case '2': item['state'] = '商家未确认';break
			case '3': item['state'] = '商家已确认';break
			case '4': item['state'] = '已取餐';break
			case '5': item['state'] = '正在配送';break
			case '6': item['state'] = '退单';break
			case '7': item['state'] = '商家取消订单';break
			case '8': item['state'] = '配送员已接单';break
		}
		html = html.replace(new RegExp('<order_id>', "gm"), item['order_id']);
		html = html.replace(new RegExp('<store_id>', "gm"), item['store_id']);
		for (var key in item) {
			html = html.replace(new RegExp('{'+key+'}',"gm"), item[key]);
		}
		$(".order-list").append(html);
	}
}
getList();


function comment(e){
	e = e || window.event;
	e.stopPropagation();
	e.preventDefault();
	var oid = $("button").attr("data-oid");
	location.href = "{pigcms{:U('User/comment')}&order_id="+oid;
}


$(document).ready(function(){
	var WindowHeight = $(document).height;
	$(window).scroll(function(){
		var top = $(document).scrollTop();
		var height = $(document).height() - $(window).height() - 10;
		if (top >= height) {
			getList();
		}
	});
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值