arganzheng/lottery_create.jsp

## lottery_create.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>微生活抽奖模块管理后台</title>
<link href="/static/bootstrap/css/bootstrap.min.css"  rel="stylesheet" media="screen">
<link href="/static/css/datetimepicker.css" rel="stylesheet" media="screen">
</head>
<body>
  <h1>微生活抽奖模块管理后台</h1>

	<div class="container">

		<form class="form-horizontal" method="POST">
			<fieldset class="form-horizontal">

				<input id="token" name="g_tk" type="hidden" />
				<input name="g_ty" type="hidden" value="lk" />

			    <legend>创建抽奖活动 <small>^_^</small></legend>

				<div class="control-group">
				 	 <label class="control-label" for="inputName">活动名称*</label>
		                <div class="controls">
		                	<input type="text" id="inputName" maxlength="20" placeholder="不超过20字" name="name"/>
		                </div>
		        </div>
		        <div class="control-group">
		             <label class="control-label" for="inputStartTime">开始时间*</label>
	                 <div class="controls">
		                 <div class="input-append date form_datetime" data-date="2013-04-01 00:00:00" >
						    <input size="16" type="text" value="2013-04-01 00:00:00" id="inputStartTime"  name="startTime">
						    <span class="add-on"><i class="icon-remove"></i></span>
						    <span class="add-on"><i class="icon-th"></i></span>
						</div>
					</div>
		         </div>
		         <div class="control-group">
	              	 <label class="control-label" for="inputEndTime">结束时间*</label>
	                 <div class="controls">
	                 	<div class="input-append date form_datetime"  data-date="2013-05-01 00:00:00">
						    <input size="16" type="text" value="2013-05-01 00:00:00" id="inputEndTime" name="endTime">
						    <span class="add-on"><i class="icon-remove"></i></span>
						    <span class="add-on"><i class="icon-th"></i></span>
						</div>
	                 </div>
		         </div>
		         <div class="input-append">
		            	<label class="control-label" for="inputDailyLimit">抽奖次数*</label>
		            	<div class="controls">
							<div class="btn-group">
								<div class="input-prepend input-append">
								  <span class="add-on">每天</span>
								  <input class="span1" id="inputDailyLimit" type="text" name="dailyLimit" value="1">
								  <span class="add-on">次</span>
								</div>
						     </div>
						 </div>
				</div>

		        <h4>奖品配置</h4>

		        <div class="control-group" id="awards" >
		        	<div id="award" class="awardTemplate" style="display:none;">
				 		<label class="control-label" id="labelAwardLevel" for="inputAwardName"></label>
				 		<div class="controls">
					 		<select class="span2" id="selectAwardType">
					 			<option value="Coupon" selected>优惠卷</option>
					 		</select>
					 		<input type="text" id="inputAwardName" placeholder="奖品名称" maxlength="20" >
					 		<input type="text" id="inputAwardBalance" class="input-small" placeholder="奖品数量" >

					 		<input type="text" id="inputCouponTemplateId" placeholder="优惠卷模版id">

						 	<a href="javascript:;" id="remove_award_button" title="删除该奖品" style="display:none;">删除</a>
						</div>
					</div>

		        	<div id="award-1">
				 		<label class="control-label" id="labelAwardLevel-1" for="inputAwardName-1">一等奖</label>
				 		<div class="controls">
					 		<select class="span2" id="selectAwardType-1">
					 			<option value="Coupon" selected>优惠卷</option>
					 		</select>
					 		<input type="text" id="inputAwardName-1" placeholder="奖品名称" maxlength="20" >
					 		<input type="text" id="inputAwardBalance-1" class="input-small" placeholder="奖品数量" >

					 		<input type="text" id="inputCouponTemplateId-1" placeholder="优惠卷模版id">
						</div>
					</div>

			 	</div>

				 <div class="controls">
			 		<a href="javascript:;" id="add_award_button">增加奖项</a>
		        </div>

		        <h4>活动简要描述</h4>

				<div class="controls">
					<textarea id="textareaDescription" class="input-block-level" rows="10" placeholder="活动简要描述：如活动背景、活动规则、职责说明等" name="description"></textarea>
				</div>

				<div class="form-actions">
				    <button id="buttonSave" type="submit" class="btn btn-large btn-primary">保存活动</button>
				    <button type="button" class="btn btn-large">预览</button>
				</div>

			</fieldset>
		</form>
	 </div> <!-- /container -->

	<script type="text/javascript" src="http://static.paipaiimg.com/js/jquery-1.8.0.min.js" ></script>
	<script type="text/javascript" src="http://static.paipaiimg.com/js/bootstrap.js" ></script>

	<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

	<script type="text/javascript" src="/js/ls.core.js" ></script>

	<script type="text/javascript">
		awardLevelMap={1:'一等奖', 2:'二等奖', 3:'三等奖', 4:'四等奖', 5:'五等奖'};

		awardCount=1; // 奖项数量（也是目前的最低奖项）

		$('#add_award_button').click( function() { // 添加一个奖项
			var level=awardCount+1;


			var newAward= $('.awardTemplate').clone()
				.attr('id', 'award-'+level)
				.find('label#labelAwardLevel').text(awardLevelMap[level]).attr('id','labelAwardLevel-1').attr('for','inputAwardName-'+level).end()
				.find('select#selectAwardType').attr('id', 'selectAwardType-'+level).end()
				.find('input#inputAwardName').attr('id', 'inputAwardName-'+level).end()
				.find('input#inputAwardBalance').attr('id', 'inputAwardBalance-'+level).end()
				.find('input#inputCouponTemplateId').attr('id', 'inputCouponTemplateId-'+level).end()
				.removeClass('awardTemplate')
				.appendTo($('#awards'))
				.hide()
  				.fadeIn("slow");

  			// 隐藏前面奖项的删除按钮
			$('a#remove_award_button').hide();
  			newAward.find('a#remove_award_button').show();

			awardCount++;
		});

		// 注意：动态的添加的dom元素需要使用live绑定时间，否则不生效。
		$('#remove_award_button').live('click', function() {

			$('#award-' + awardCount).remove();

			 // 显示前一个奖项的删除按钮
			$('#award-' + --awardCount).find('a#remove_award_button').show();
		});

		$('.form_datetime').datetimepicker({
			language: 'zh-CN',
			format: 'yyyy-mm-dd hh:ii:ss',
			weekStart: 1,
			todayBtn: 1,
			todayHighlight: 1,
			autoclose: 1,
			forceParse: 0,
			startView: 2,
			showMeridian: 1
		});


		$("form").on("submit", function( event ) {
			event.preventDefault();

			// construct token for csrf check
			$('#token').val($getToken());

			// construct lottery json object
			lottery = {};
			lottery['name']=$('#inputName').val();
			lottery['startTime']=$('#inputStartTime').val();
			lottery['endTime']=$('#inputEndTime').val();
			lottery['dailyLimit']=$('#inputDailyLimit').val();
			lottery['description']=$('#textareaDescription').val();
			// awards

			awards = [];
			for(var i=0;i<awardCount;i++){
				var level=i+1;
				var award = {};
				award['name']=$('#inputAwardName-'+level).val();
				award['balance']=$('#inputAwardBalance-'+level).val();
				award['type']=$('#selectAwardType-'+level).val();
				award['name']=$('#inputAwardName-'+level).val();
				award['imageUrl']=''; // should be @NotNull!
				var coupon = {};
				coupon['code'] = $('#inputCouponTemplateId-'+level).val();
				award['property']=JSON.stringify(coupon);

				awards[i]=award;
			}

			lottery['awards']= awards;

			$.ajax({
				type : "POST",
				url : '/buyer/hac-back/save_lottery.xhtml?g_ty=lk&g_tk=' + $getToken(),
				data : JSON.stringify(lottery),
				contentType: "application/json; charset=UTF-8",
				success: function(result) {
					console.log(result);
					if (result.errorCode) {
			   			alert(result.msg || "服务器异常[" + result.errorCode + "],请稍后再次尝试。");
			  			return;
			   		}
			   		alert("创建活动成功！");
					window.location.href = 'lottery_list.xhtml';
				},
				error : function(err){
					alert("http请求错误:" + err);
				}
			});
			return false; // keeps the page from not refreshing
		});
	</script>
</body>

</html>
	<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>微生活抽奖模块管理后台</title>
	<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link href="/static/css/datetimepicker.css" rel="stylesheet" media="screen">
	</head>
	<body>
	<h1>微生活抽奖模块管理后台</h1>

	<div class="container">

	<form class="form-horizontal" method="POST">
	<fieldset class="form-horizontal">

	<input id="token" name="g_tk" type="hidden" />
	<input name="g_ty" type="hidden" value="lk" />

	<legend>创建抽奖活动 <small>^_^</small></legend>

	<div class="control-group">
	<label class="control-label" for="inputName">活动名称*</label>
	<div class="controls">
	<input type="text" id="inputName" maxlength="20" placeholder="不超过20字" name="name"/>
	</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="inputStartTime">开始时间*</label>
	<div class="controls">
	<div class="input-append date form_datetime" data-date="2013-04-01 00:00:00" >
	<input size="16" type="text" value="2013-04-01 00:00:00" id="inputStartTime" name="startTime">
	<span class="add-on"><i class="icon-remove"></i></span>
	<span class="add-on"><i class="icon-th"></i></span>
	</div>
	</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="inputEndTime">结束时间*</label>
	<div class="controls">
	<div class="input-append date form_datetime" data-date="2013-05-01 00:00:00">
	<input size="16" type="text" value="2013-05-01 00:00:00" id="inputEndTime" name="endTime">
	<span class="add-on"><i class="icon-remove"></i></span>
	<span class="add-on"><i class="icon-th"></i></span>
	</div>
	</div>
	</div>
	<div class="input-append">
	<label class="control-label" for="inputDailyLimit">抽奖次数*</label>
	<div class="controls">
	<div class="btn-group">
	<div class="input-prepend input-append">
	<span class="add-on">每天</span>
	<input class="span1" id="inputDailyLimit" type="text" name="dailyLimit" value="1">
	<span class="add-on">次</span>
	</div>
	</div>
	</div>
	</div>

	<h4>奖品配置</h4>

	<div class="control-group" id="awards" >
	<div id="award" class="awardTemplate" style="display:none;">
	<label class="control-label" id="labelAwardLevel" for="inputAwardName"></label>
	<div class="controls">
	<select class="span2" id="selectAwardType">
	<option value="Coupon" selected>优惠卷</option>
	</select>
	<input type="text" id="inputAwardName" placeholder="奖品名称" maxlength="20" >
	<input type="text" id="inputAwardBalance" class="input-small" placeholder="奖品数量" >

	<input type="text" id="inputCouponTemplateId" placeholder="优惠卷模版id">

	<a href="javascript:;" id="remove_award_button" title="删除该奖品" style="display:none;">删除</a>
	</div>
	</div>

	<div id="award-1">
	<label class="control-label" id="labelAwardLevel-1" for="inputAwardName-1">一等奖</label>
	<div class="controls">
	<select class="span2" id="selectAwardType-1">
	<option value="Coupon" selected>优惠卷</option>
	</select>
	<input type="text" id="inputAwardName-1" placeholder="奖品名称" maxlength="20" >
	<input type="text" id="inputAwardBalance-1" class="input-small" placeholder="奖品数量" >

	<input type="text" id="inputCouponTemplateId-1" placeholder="优惠卷模版id">
	</div>
	</div>

	</div>

	<div class="controls">
	<a href="javascript:;" id="add_award_button">增加奖项</a>
	</div>

	<h4>活动简要描述</h4>

	<div class="controls">
	<textarea id="textareaDescription" class="input-block-level" rows="10" placeholder="活动简要描述：如活动背景、活动规则、职责说明等" name="description"></textarea>
	</div>

	<div class="form-actions">
	<button id="buttonSave" type="submit" class="btn btn-large btn-primary">保存活动</button>
	<button type="button" class="btn btn-large">预览</button>
	</div>

	</fieldset>
	</form>
	</div> <!-- /container -->

	<script type="text/javascript" src="http://static.paipaiimg.com/js/jquery-1.8.0.min.js" ></script>
	<script type="text/javascript" src="http://static.paipaiimg.com/js/bootstrap.js" ></script>

	<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

	<script type="text/javascript" src="/js/ls.core.js" ></script>

	<script type="text/javascript">
	awardLevelMap={1:'一等奖', 2:'二等奖', 3:'三等奖', 4:'四等奖', 5:'五等奖'};

	awardCount=1; // 奖项数量（也是目前的最低奖项）

	$('#add_award_button').click( function() { // 添加一个奖项
	var level=awardCount+1;



	var newAward= $('.awardTemplate').clone()
	.attr('id', 'award-'+level)
	.find('label#labelAwardLevel').text(awardLevelMap[level]).attr('id','labelAwardLevel-1').attr('for','inputAwardName-'+level).end()
	.find('select#selectAwardType').attr('id', 'selectAwardType-'+level).end()
	.find('input#inputAwardName').attr('id', 'inputAwardName-'+level).end()
	.find('input#inputAwardBalance').attr('id', 'inputAwardBalance-'+level).end()
	.find('input#inputCouponTemplateId').attr('id', 'inputCouponTemplateId-'+level).end()
	.removeClass('awardTemplate')
	.appendTo($('#awards'))
	.hide()
	.fadeIn("slow");

	// 隐藏前面奖项的删除按钮
	$('a#remove_award_button').hide();
	newAward.find('a#remove_award_button').show();

	awardCount++;
	});

	// 注意：动态的添加的dom元素需要使用live绑定时间，否则不生效。
	$('#remove_award_button').live('click', function() {

	$('#award-' + awardCount).remove();

	// 显示前一个奖项的删除按钮
	$('#award-' + --awardCount).find('a#remove_award_button').show();
	});

	$('.form_datetime').datetimepicker({
	language: 'zh-CN',
	format: 'yyyy-mm-dd hh:ii:ss',
	weekStart: 1,
	todayBtn: 1,
	todayHighlight: 1,
	autoclose: 1,
	forceParse: 0,
	startView: 2,
	showMeridian: 1
	});


	$("form").on("submit", function( event ) {
	event.preventDefault();

	// construct token for csrf check
	$('#token').val($getToken());

	// construct lottery json object
	lottery = {};
	lottery['name']=$('#inputName').val();
	lottery['startTime']=$('#inputStartTime').val();
	lottery['endTime']=$('#inputEndTime').val();
	lottery['dailyLimit']=$('#inputDailyLimit').val();
	lottery['description']=$('#textareaDescription').val();
	// awards

	awards = [];
	for(var i=0;i<awardCount;i++){
	var level=i+1;
	var award = {};
	award['name']=$('#inputAwardName-'+level).val();
	award['balance']=$('#inputAwardBalance-'+level).val();
	award['type']=$('#selectAwardType-'+level).val();
	award['name']=$('#inputAwardName-'+level).val();
	award['imageUrl']=''; // should be @NotNull!
	var coupon = {};
	coupon['code'] = $('#inputCouponTemplateId-'+level).val();
	award['property']=JSON.stringify(coupon);

	awards[i]=award;
	}

	lottery['awards']= awards;

	$.ajax({
	type : "POST",
	url : '/buyer/hac-back/save_lottery.xhtml?g_ty=lk&g_tk=' + $getToken(),
	data : JSON.stringify(lottery),
	contentType: "application/json; charset=UTF-8",
	success: function(result) {
	console.log(result);
	if (result.errorCode) {
	alert(result.msg \|\| "服务器异常[" + result.errorCode + "],请稍后再次尝试。");
	return;
	}
	alert("创建活动成功！");
	window.location.href = 'lottery_list.xhtml';
	},
	error : function(err){
	alert("http请求错误:" + err);
	}
	});
	return false; // keeps the page from not refreshing
	});
	</script>
	</body>

	</html>