WebContent/WEB-INF/jsp/pc/prize/prizeList.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">
		<style>
			.layui-form-label {
				height: 28px;
				line-height: 28px;
				padding: 5px 15px;
			}
			
			.layui-form-radio {
				margin: 0;
			}
			
			.tipbox {
				display: none;
			}
			
			.tipbox .layui-form-label {
				display: block;
				width: 100%;
				text-align: left;
			}
			
			.tipbox .layui-input-block {
				margin-left: 0;
			}
		</style>

		<body class="wrap">
			<form class="layui-form">
				<blockquote class="layui-elem-quote">抽奖基本信息</blockquote>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>活动开启时间 </label>
					<div class="layui-input-inline">
						<div class="layui-input-inline">
							<input type="text" name="beginTime" placeholder="- 开始时间 -" class="layui-input" lay-verify="required" />
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>活动状态</label>
					<div class="layui-input-inline">
						<select name="status" lay-verify="required" disabled>
							<option value="0">请选择状态 </option>
							<option value="1">未开启 </option>
							<option value="2"> 进行中</option>
							<option value="3"> 已结束</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>当前轮次</label>
					<div class="layui-input-inline">
						<input type="number" name="turn" class="layui-input" readonly />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>发放红包预算 </label>
					<div class="layui-input-inline">
						<input type="number" name="planMny" class="layui-input" lay-verify="required" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">红包活动范围 </label>
					<div class="layui-input-inline">
						<input type="text" name="city" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">已发放红包金额</label>
					<div class="layui-input-inline">
						<input type="number" name="currentMny" class="layui-input" readonly />
					</div>
					<div class="layui-form-mid layui-word-aux">提示：(该金额为缓存的已发放金额，每个保存会清零，实际发放金额以抽奖记录为准）</div>
				</div>
				<blockquote class="layui-elem-quote">奖项配置</blockquote>
				<div class="prize-item">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>一等奖</legend>
						<div class="layui-field-box">
							<div class="layui-form-item">
								<label class="layui-form-label">奖品数量：</label>
								<div class="layui-input-inline">
									<input type="number" min="0" name="num1" class="layui-input" />
								</div>
								<div class="layui-form-mid">名</div>
								<label class="layui-form-label">中奖概率：</label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="probability1" class="layui-input" />
								</div>
								<div class="layui-form-mid">%</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney1" lay-filter="isMoney1" value="1" title="红包"></label>
								<label class="layui-form-label">红包随机金额 </label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="mixMoney1" class="layui-input" lay-verify="required" min="1">
								</div>
								<div class="layui-form-mid">至</div>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="maxMoney1" class="layui-input" lay-verify="required" min="1" />
								</div>
								<div class="layui-form-mid">分</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney1" lay-filter="isMoney1" value="2" title="物品"></label>
								<label class="layui-form-label">礼品名称 </label>
								<div class="layui-input-inline">
									<input type="text" name="name1" class="layui-input" />
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="prize-item">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>二等奖</legend>
						<div class="layui-field-box">
							<div class="layui-form-item">
								<label class="layui-form-label">奖品数量：</label>
								<div class="layui-input-inline">
									<input type="number" min="0" name="num2" class="layui-input" />
								</div>
								<div class="layui-form-mid">名</div>
								<label class="layui-form-label">中奖概率：</label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" name="probability2" class="layui-input" />
								</div>
								<div class="layui-form-mid">%</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney2" lay-filter="isMoney2" value="1" title="红包"></label>
								<label class="layui-form-label">红包随机金额 </label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="mixMoney2" class="layui-input" lay-verify="required" min="1">
								</div>
								<div class="layui-form-mid">至</div>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="maxMoney2" class="layui-input" lay-verify="required" min="1" />
								</div>
								<div class="layui-form-mid">分</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney2" lay-filter="isMoney2" value="2" title="物品"></label>
								<label class="layui-form-label">礼品名称 </label>
								<div class="layui-input-inline">
									<input type="text" name="name2" class="layui-input" />
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="prize-item">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>三等奖</legend>
						<div class="layui-field-box">
							<div class="layui-form-item">
								<label class="layui-form-label">奖品数量：</label>
								<div class="layui-input-inline">
									<input type="number" min="0" name="num3" class="layui-input" />
								</div>
								<div class="layui-form-mid">名</div>
								<label class="layui-form-label">中奖概率：</label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" name="probability3" class="layui-input" />
								</div>
								<div class="layui-form-mid">%</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney3" lay-filter="isMoney3" value="1" title="红包"></label>
								<label class="layui-form-label">红包随机金额 </label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="mixMoney3" class="layui-input" lay-verify="required" min="1">
								</div>
								<div class="layui-form-mid">至</div>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="maxMoney3" class="layui-input" lay-verify="required" min="1" />
								</div>
								<div class="layui-form-mid">分</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney3" lay-filter="isMoney3" value="2" title="物品"></label>
								<label class="layui-form-label">礼品名称 </label>
								<div class="layui-input-inline">
									<input type="text" name="name3" class="layui-input" />
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="prize-item">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>四等奖</legend>
						<div class="layui-field-box">
							<div class="layui-form-item">
								<label class="layui-form-label">奖品数量：</label>
								<div class="layui-input-inline">
									<input type="number" min="0" name="num4" class="layui-input" />
								</div>
								<div class="layui-form-mid">名</div>
								<label class="layui-form-label">中奖概率：</label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" name="probability4" class="layui-input" />
								</div>
								<div class="layui-form-mid">%</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney4" lay-filter="isMoney4" value="1" title="红包"></label>
								<label class="layui-form-label">红包随机金额 </label>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="mixMoney4" class="layui-input" lay-verify="required" min="1">
								</div>
								<div class="layui-form-mid">至</div>
								<div class="layui-input-inline" style="width:100px;">
									<input type="number" value="0" name="maxMoney4" class="layui-input" lay-verify="required" min="1" />
								</div>
								<div class="layui-form-mid">分</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label"><input type="radio" name="isMoney4" lay-filter="isMoney4" value="2" title="物品"></label>
								<label class="layui-form-label">礼品名称 </label>
								<div class="layui-input-inline">
									<input type="text" name="name4" class="layui-input" />
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<blockquote class="layui-elem-quote" style="display: none;">提示语设置</blockquote>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">粉丝输入以下关键字将触发抽奖功能（多个关键字请以“|”分隔）</label>
					<div class="layui-input-block">
						<input type="text" name="keyword" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">红包活动欢迎语</label>
					<div class="layui-input-block">
						<textarea name="replyWelcome" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">提示语(多个请以“|”分隔), 不填则仍给抽奖机会</label>
					<div class="layui-input-block">
						<input type="text" name="badWordsReply" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">等待中奖结果提示语</label>
					<div class="layui-input-block">
						<input type="text" name="replyWait" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">中奖提示语</label>
					<div class="layui-input-block">
						<input type="text" name="replySucceed" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">未中奖提示语</label>
					<div class="layui-input-block">
						<input type="text" name="unLotteryReply" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">第二次未中奖提示语</label>
					<div class="layui-input-block">
						<input type="text" name="replyFailed2" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">活动结束后新粉丝触发抽奖提示语</label>
					<div class="layui-input-block">
						<input type="text" name="finishReply" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">粉丝中奖后，向粉丝推送的红包链接标题</label>
					<div class="layui-input-block">
						<input type="text" name="lotteryTitle" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">粉丝中奖后，向粉丝推送的红包链接的副标题</label>
					<div class="layui-input-block">
						<input type="text" name="lotterySubTitle" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item tipbox">
					<label class="layui-form-label">粉丝当前轮次已经中奖后，向粉丝回复的内容</label>
					<div class="layui-input-block">
						<input type="text" name="noChanceReply" class="layui-input" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<a class="layui-btn" lay-submit lay-filter="submit">保存</a>
					<button class="layui-btn" lay-submit lay-filter="start">立即开启活动</button>
					<button class="layui-btn" lay-submit lay-filter="finish">立即结束活动</button>
					<button class="layui-btn" lay-submit lay-filter="nextround">开启下一轮</button>
				</div>
			</form>
		</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', 'laydate', 'layer', 'laypage'], function() {
				var form = layui.form,
					element = layui.element,
					laydate = layui.laydate,
					layer = layui.layer,
					laypage = layui.laypage;
				
				laydate.render({
				    elem: '[name=beginTime]',
				    type: 'datetime'
				});
  
				$.get("/zzhnc/activity/getActivitySetting", function(data) {
					console.log(data)
					if(data.code == 0) {
						//基本信息
						$("[name=beginTime]").val(data.data.beginTime);
						$("[name=status]").val(data.data.status);
						$("[name=turn]").val(data.data.turn);
						$("[name=planMny]").val(data.data.planMny);
						$("[name=currentMny]").val(data.data.currentMny.toFixed(2));
						$("[name=city]").val(data.data.city);
						//奖项设置
						for(var i = 1; i < 5; i++) {
							if(i == 1) {
								var list = data.data.p1
							} else if(i == 2) {
								var list = data.data.p2
							} else if(i == 3) {
								var list = data.data.p3
							} else if(i == 4) {
								var list = data.data.p4
							}
							if(list != null) {
								$("[name=num" + i + "]").val(list.num);
								$("[name=probability" + i + "]").val(list.probability);
								if(list.isMoney) {
									$("[name=isMoney" + i + "]")[0].checked = true;
									$("[name=mixMoney" + i + "], [name=maxMoney" + i + "]").attr("lay-verify", "required").removeAttr("disabled").removeClass("layui-disabled");
									$("[name=name"+i+"]").removeAttr("lay-verify").attr("disabled", "disabled").addClass("layui-disabled");
								} else {
									$("[name=isMoney" + i + "]")[1].checked = true;
									$("[name=mixMoney" + i + "], [name=maxMoney" + i + "]").removeAttr("lay-verify").attr("disabled", "disabled").addClass("layui-disabled");
									$("[name=name"+i+"]").attr("lay-verify", "required").removeAttr("disabled").removeClass("layui-disabled");
								}
								$("[name=mixMoney" + i + "]").val(list.mixMoney);
								$("[name=maxMoney" + i + "]").val(list.maxMoney);
								$("[name=name" + i + "]").val(list.name);
							} else {
								$("[name=name" + i + "]").val("")
							}

						}
						//提示语
						$("[name=keyword]").val(data.data.keyword);
						$("[name=replyWelcome]").val(data.data.replyWelcome);
						$("[name=replyWait]").val(data.data.replyWait);
						$("[name=replySucceed]").val(data.data.replySucceed);
						$("[name=unLotteryReply]").val(data.data.unLotteryReply);
						$("[name=replyFailed2]").val(data.data.replyFailed2);
						$("[name=finishReply]").val(data.data.finishReply);
						$("[name=lotteryTitle]").val(data.data.lotteryTitle);
						$("[name=lotterySubTitle]").val(data.data.lotterySubTitle);
						$("[name=noChanceReply]").val(data.data.noChanceReply);
						$("[name=badWordsReply]").val(data.data.badWordsReply);

						form.render();
					} else {
						top.layer.msg(data.msg);
					}
				})

				form.on('submit(submit)', function(e) {
					console.log(e.field)
					var p1, p2, p3, p4 = {};
					var p = {
						num: 0,
						probability: 0,
						isMoney: true,
						mixMoney: 0,
						maxMoney: 0,
						name: ""
					}
					if(e.field.num1 > 0) {
						p1 = {
							id: 1,
							num: parseInt(e.field.num1, 10),
							probability: parseInt(e.field.probability1, 10),
							isMoney: toBool(e.field.isMoney1),
							mixMoney: parseInt(e.field.mixMoney1, 10),
							maxMoney: parseInt(e.field.maxMoney1, 10),
							name: e.field.name1
						}
					} else {
						p1 = p;
						p1.id = 1;
					}

					if(e.field.num2 > 0) {
						p2 = {
							id: 2,
							num: parseInt(e.field.num2, 10),
							probability: parseInt(e.field.probability2, 10),
							isMoney: toBool(e.field.isMoney2),
							mixMoney: parseInt(e.field.mixMoney2, 10),
							maxMoney: parseInt(e.field.maxMoney2, 10),
							name: e.field.name2
						}
					} else {
						p2 = p;
						p2.id = 2;
					}

					if(e.field.num3 > 0) {
						p3 = {
							id: 3,
							num: parseInt(e.field.num3, 10),
							probability: parseInt(e.field.probability3, 10),
							isMoney: toBool(e.field.isMoney3),
							mixMoney: parseInt(e.field.mixMoney3, 10),
							maxMoney: parseInt(e.field.maxMoney3, 10),
							name: e.field.name3
						}
					} else {
						p3 = p;
						p3.id = 3;
					}

					if(e.field.num4 > 0) {
						p4 = {
							id: 4,
							num: parseInt(e.field.num4, 10),
							probability: parseInt(e.field.probability4, 10),
							isMoney: toBool(e.field.isMoney4),
							mixMoney: parseInt(e.field.mixMoney4, 10),
							maxMoney: parseInt(e.field.maxMoney4, 10),
							name: e.field.name4
						}
					} else {
						p4 = p;
						p4.id = 4;
					}

					var submitData = {
						beginTime: e.field.beginTime,
						status: e.field.status,
						turn: e.field.turn,
						planMny: e.field.planMny,
						city: e.field.city,
						currentMny: e.field.currentMny,
						p1: p1,
						p2: p2,
						p3: p3,
						p4: p4,
						keyword: e.field.keyword,
						replyWelcome: e.field.replyWelcome,
						badWordsReply: e.field.badWordsReply,
						replyWait: e.field.replyWait,
						replySucceed: e.field.replySucceed,
						unLotteryReply: e.field.unLotteryReply,
						replyFailed2: e.field.replyFailed2,
						finishReply: e.field.finishReply,
						lotteryTitle: e.field.lotteryTitle,
						lotterySubTitle: e.field.lotterySubTitle,
						noChanceReply: e.field.noChanceReply
					}
					$.ajax({
						type: 'POST',
						url: '/zzhnc/activity/editActivitySetting',
						dataType: 'json',
						async: true,
						contentType: "application/json;charset=UTF-8",
						data: JSON.stringify(submitData),
						success: function(data) {
							layer.msg('操作成功');
						},
						error: function(xhr, type) {
							layer.msg('操作失败');
						}
					});
				});

				//立即开始
				form.on('submit(start)', function(e) {
					var status = $("select[name=status]").val();
					console.log(status)
					if(status == "1") {
						$.post("/zzhnc/activity/updateActivityStatus", {
							status: "2"
						}, function(data) {
							console.log(data);
							if(data.code == 0) {
								layer.msg("开启活动成功");

							} else {
								layer.msg(data.msg);
							}
						})
					} else {
						layer.msg("只有未开启的活动才可以开启");
					}
				});

				//立即结束
				form.on('submit(finish)', function(e) {
					var status = $("select[name=status]").val();
					if(status == "2") {
						$.post("/zzhnc/activity/updateActivityStatus", {
							status: "3"
						}, function(data) {
							console.log(data);
							if(data.code == 0) {
								layer.msg("设置活动结束成功");
							} else {
								layer.msg(data.msg);
							}
						})
					} else {
						layer.msg("只有进行中的活动可以结束");
					}
				});
				
				//设置下一轮
				form.on('submit(nextround)', function(e) {
					var status = $("select[name=status]").val();
					if(status == "3") {
						$.get("/zzhnc/activity/clearActivity", function(data) {
							console.log(data);
							if(data.code == 0) {
								layer.msg("开启下一轮成功");
							} else {
								layer.msg(data.msg);
							}
						})
					} else {
						layer.msg("活动结束后才能开启下一轮");
					}
				});

				//数值转为true或false
				function toBool(v) {
					if(v == "1") {
						v = true
					} else {
						v = false
					}
					return v;
				}

				//监控奖项类型变化
				function monitorPrizeType(selector, name1, name2) {
					form.on(selector, function(data) {
						if(data.value == 1) {
							$(name1).attr("lay-verify", "required").removeAttr("disabled").removeClass("layui-disabled");
							$(name2).removeAttr("lay-verify").attr("disabled", "disabled").addClass("layui-disabled");
						} else {
							$(name1).removeAttr("lay-verify").attr("disabled", "disabled").addClass("layui-disabled");
							$(name2).attr("lay-verify", "required").removeAttr("disabled").removeClass("layui-disabled");

						}
					});
				}
				monitorPrizeType("radio(isMoney1)", "[name=mixMoney1],[name=maxMoney1]", "[name=name1]");
				monitorPrizeType("radio(isMoney2)", "[name=mixMoney2],[name=maxMoney2]", "[name=name2]");
				monitorPrizeType("radio(isMoney3)", "[name=mixMoney3],[name=maxMoney3]", "[name=name3]");
				monitorPrizeType("radio(isMoney4)", "[name=mixMoney4],[name=maxMoney4]", "[name=name4]");

			})
		</script>

</html>