zhongshen_project/addon/supermember/shop/view/membercard/order.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="SUPERMEMBER_CSS/order_list.css"/>
{/block}
{block name="main"}
<div class="layui-card card-common card-brief">
	<div class="layui-card-header">
		<div>
			<span class="card-title">购卡概况</span>
		</div>
	</div>
	<div class="layui-card-body">

		<div class="content">
			<p class="title">累计购卡人数</p>
			<p class="money">{$buyer_num}</p>
		</div>
		<div class="content">
			<p class="title">累计购卡金额</p>
			<p class="money">{$order_money}</p>
		</div>
	</div>
</div>

<div class="screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<form class="layui-form layui-colla-content layui-form layui-show"  lay-filter="order_list" action="javascript:;">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">订单号</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="order_no">
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">购买人昵称</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="nickname">
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">支付时间</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="start_time" placeholder="开始时间" id="start_time" readonly>
						<i class=" iconrili iconfont calendar"></i>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="end_time" placeholder="结束时间" id="end_time" readonly>
						<i class=" iconrili iconfont calendar"></i>
					</div>
					<button class="layui-btn layui-btn-primary date-picker-btn" onclick="datePick(7, this);return false;">近7天</button>
					<button class="layui-btn layui-btn-primary date-picker-btn" onclick="datePick(30, this);return false;">近30天</button>
				</div>
			</div>
			
			<div class="form-row">
				<button class="layui-btn" lay-submit lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<div class="layui-tab table-tab " lay-filter="order_tab">
	<div class="layui-tab-content">
		<div id="order_list"></div>
	</div>
	<div id="order_page"></div>
</div>

{/block}

{block name="script"}
<script src="SUPERMEMBER_JS/order_list.js"></script>
<script>


	var form,laypage,element,laydate;
	var is_refresh = false;

	layui.use(['laypage','laydate','form', 'element'], function(){
		form = layui.form;
		laypage = layui.laypage;
		element = layui.element;
		laydate = layui.laydate;
		form.render();

		// 支付时间
		laydate.render({
			elem: '#start_time'
			,type: 'datetime'
			,change: function(value, date, endDate){
				$(".date-picker-btn").removeClass("selected");
			}
		});
		laydate.render({
			elem: '#end_time'
			,type: 'datetime'
			,change: function(value, date, endDate){
				$(".date-picker-btn").removeClass("selected");
			}
		});

		//监听Tab切换，以改变地址hash值
		element.on('tab(order_tab)', function(){
			$(".all-selected-checkbox input").prop("checked",false);
			var hash_data = getHashList();
			hash_data.page = 1;
			setHashOrderList(hash_data);
		});
		//监听筛选事件
		form.on('submit(search)', function(data){
			is_refresh = true;
			data.field.page = 1;
			setHashOrderList(data.field);
			return false;
		});
		getHashData();
		getOrderList();//筛选
	});

	function setHashOrderList(data){
		var hash = "";
		$.each(data,function(index, itemobj){
			if(itemobj != "" && itemobj != "all"){
				if(hash == ""){
					hash += "#!"+index +"="+itemobj;
				}else{
					hash += "&"+index +"="+itemobj;
				}
			}
		});
		hash_url = hash;
		location.hash = hash;
		getOrderList();
	}

	var order = new Order();
	function getOrderList(){
		var url = ns.url("supermember://shop/membercard/order", ns.urlReplace(location.hash.replace('#!', '')));
		$.ajax({
			type : 'get',
			dataType: 'json',
			url :url,
			success : function(res){
				if(res.code == 0){
					// setOrderInfo(res.data.list);
					order.setData(res.data);
					$("#order_list").html(order.fetch());
					form.render();

					laypage_util = new Page({
						elem: 'order_page',
						count: res.data.count,
						curr: getHashPage(),
						limit:getHashData()['page_size'] || 10,
						callback: function(obj){
							var hash_data = getHashData();
							hash_data.page = obj.curr;
							hash_data.page_size = obj.limit;
							setHashOrderList(hash_data);
						}
					});

				}else{
					layer.msg(res.message);
				}
			}
		});
	}

	/**
	 *通过hash获取页数
	 */
	function getHashPage(){
		var page = 1;
		var hash = location.hash;
		var startTime = '';
		var endTime = '';

		var hash_arr = hash.substr(2).split("&");
		$.each(hash_arr,function(index, itemobj){
			var item_arr = itemobj.split("=");
			if(item_arr.length == 2){
				switch(item_arr[0]){
					case "page":
						page = item_arr[1];
						break;
					case "start_time":
						startTime = ns.date_to_time(item_arr[1].split("%")[0]);
						break;
					case "end_time":
						endTime = ns.date_to_time(item_arr[1].split("%")[0]);
						break;
				}
			}
		});

		var _time = (endTime - startTime) / (24 * 60 * 60);
		if (_time == 6) {
			$(".date-picker-btn-seven").addClass("selected");
			$(".date-picker-btn-thirty").removeClass("selected");
		} else if (_time == 29) {
			$(".date-picker-btn-thirty").addClass("selected");
			$(".date-picker-btn-seven").removeClass("selected");
		} else {
			$(".date-picker-btn-seven").removeClass("selected");
			$(".date-picker-btn-thirty").removeClass("selected");
		}
		return page;
	}

	//从hash中获取数据
	function getHashData(){
		var hash = ns.urlReplace(location.hash);

		var hash_arr = hash.substr(2).split("&");
		var form_json = {
			"start_time" : "",
			"end_time" : "",
			"nickname" : "",
			"order_no" : "",
			'page_size':'',
			"page" : ""
		};
		if(hash_arr.length > 0){
			$.each(hash_arr,function(index, itemobj){
				var item_arr = itemobj.split("=");
				if(item_arr.length == 2){
					$.each(form_json,function(key, form_val){
						if(item_arr[0] == key){
							form_json[key] = item_arr[1];
						}
					})
				}
			})
		}

		return form_json;
	}
	function getHashList(){
		var hash = ns.urlReplace(location.hash);
		var data= [];
		var hash_arr = hash.split("&");

		var form_json = {
			"start_time" : "",
			"end_time" : "",
			"nickname" : "",
			"order_no" : "",
			'page_size':'',
			"page" : ""
		};
		if(hash_arr.length > 0){
			$.each(hash_arr,function(index, itemobj){
				var item_arr = itemobj.split("=");
				if(item_arr.length == 2){
					$.each(form_json,function(key, form_val){
						if(item_arr[0].indexOf(key) != "-1"){
							form_json[key] = item_arr[1];
						}
					})
				}
			})
		}

		return form_json;
	}

	/**
	 * 七天时间
	 */
	function datePick(date_num,event_obj){
		$(".date-picker-btn").removeClass("selected");
		$(event_obj).addClass('selected');
		var now_date = new Date();

		Date.prototype.Format = function (fmt,date_num) { //author: meizz
			this.setDate(this.getDate()-date_num);
			var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"H+": this.getHours(), //小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
			};
			if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		};
		// var now_time =  new Date().Format("yyyy-MM-dd HH:mm:ss",0);//当前日期
		var now_time =  new Date().Format("yyyy-MM-dd 23:59:59",0);//当前日期
		var before_time =  new Date().Format("yyyy-MM-dd 00:00:00",date_num-1);//前几天日期
		$("input[name=start_time]").val(before_time,0);
		$("input[name=end_time]").val(now_time,date_num-1);

	}
</script>
{/block}