WebContent/WEB-INF/jsp/pc/report/prize.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>抽奖记录</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
	</head>
	<style>
		.floatR {
			float: right;
			line-height: 36px;
			padding-right: 40px;
		}
		
		.floatR span {
			color: red;
			font-size: 1.4em;
		}
	</style>

	<body class="wrap">
		<div class="layui-form">
			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 140px;">
					<input type="number" class="layui-input" name="turn" placeholder="轮次（数字）" />
				</div>
				<div class="layui-input-inline" style="width: 140px;">
					<select name="status">
						<option value="">状态</option>
						<option value="1">未兑换</option>
						<option value="2">已兑换</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 140px;">
					<input type="text" class="layui-input" name="keyword" placeholder="关键字" />
				</div>
				<button class="layui-btn" lay-submit lay-filter="querybtn">查询</button>
				<button class="layui-btn layui-btn-primary resetBtn" type="reset">重置</button>
				<div class="floatR">已中奖金额：<span id="moneySum"></span>元</div>
			</div>

		</div>
		<table class="layui-table">
			<thead>
				<tr>
					<th>No</th>
					<th>轮次</th>
					<th>中奖人员</th>
					<th>红包</th>
					<th>礼品</th>
					<th>状态</th>
					<th style="min-width: 84px;">时间 </th>
				</tr>
			</thead>
			<tbody id="tablelist">

			</tbody>
		</table>
		<div class="nodata">暂无数据</div>
		<div id="page"></div>
	</body>

	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js"></script>
	<script src="/zzhnc/res/js/me.js"></script>
	<script>
		layui.use(['form', 'element', 'laypage'], function() {
			var form = layui.form,
				element = layui.element,
				laypage = layui.laypage;

			//查询条件
			var queryObj = {
				page: 1,
				pagesize: 10,
				turn: null,
				status: null,
				keyword: null
			}

			//初始化方法
			function initData(queryObj) {
				$.post("/zzhnc/activity/lotterys", queryObj, function(data) {
					data = data.data;
					$('#moneySum').text(data.sum)
					console.log(data)
					$("#tablelist").html("");
					var str = "";
					if(data.rows.length < 1) {
						$(".nodata").show();
					} else {
						$(".nodata").hide();
						for(var i = 0; i < data.rows.length; i++) {
							str += '<tr>' +
								'<td>' + ((data.page - 1) * data.pageSize + i + 1) + '</td>' +
								'<td>' + data.rows[i].turn + '</td>' +
								'<td><img class="fansImg" src="' + data.rows[i].logo + '" />' + data.rows[i].nickname + '</td>' +
								'<td>' + showMny(data.rows[i].mny) + '</td>' +
								'<td>' + showPrizeName(data.rows[i].mny, data.rows[i].prizeName) + '</td>' +
								'<td>' + showStatus(data.rows[i].status) + '</td>'+
								'<td>' + toTime_G(data.rows[i].createdtime) + '</td>' +
								'</tr>';
						}
						$("#tablelist").html(str);
						form.render();
						toNull_G();
					}
					laypage.render({
						elem: 'page',
						count: data.total,
						limit: queryObj.pagesize,
						curr: queryObj.page,
						layout: ['count', 'prev', 'page', 'next', 'skip'],
						jump: function(obj, first) {
							if(!first) {
								queryObj.page = obj.curr
								initData(queryObj);
							}

						}
					})
				})
			}

			//初始化数据
			initData(queryObj);

			//查询
			form.on('submit(querybtn)', function(data) {
				console.log(data.field)
				queryObj = data.field;
				queryObj.page = 1;
				queryObj.keyword = $("[name=keyword]").val();
				queryObj.turn = $("[name=turn]").val();
				queryObj.status = $("[name=status]").val();
				initData(queryObj);
			});

			//重置
			$(".resetBtn").on("click", function() {
				$("[name=keyword]").val("");
				$("[name=turn]").val("");
				$('[name=status]').val("")
				queryObj.turn = null;
				queryObj.keyword = null;
				queryObj.status = null
				form.render();
				initData(queryObj);
			})
			
			//显示红包
			function showMny(mny){
				var val = "";
				if(mny > 0){
					val = mny + "元";
				}else{
					val = "";
				}
				return val;
			}
			
			//显示礼品
			function showPrizeName(mny, name){
				var val = "";
				if(mny > 0){
					val = "";
				}else{
					val = name;
				}
				return val;
			}
			
			//显示状态
			function showStatus(s){
				var val = "";
				if(s == 1){
					val = "未兑换";
				}else if(s == 2){
					val = "已兑换";
				}
				return val;
			}
		})
	</script>

</html>