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>
			.tipbox .layui-form-label {
				display: block;
				width: 100%;
				text-align: left;
			}
			
			.tipbox .layui-input-block {
				margin-left: 0;
			}
			
			.popupbos .layui-form-label {
				width: 110px;
			}
			
			.layui-upload-list img {
				width: auto;
			}
			
			.layui-table img {
			    max-width: 50px;
			    height: auto;
			}
			.mainpictrue{
				width: 100px;
				height: 100px;
			}
			.tipbox{
				display: none;
			}
		</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>
					<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>
					<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>
				<div class="layui-form-item">
					<label class="layui-form-label">下属粉丝数量</label>
					<div class="layui-input-inline">
						<input type="number" name="shareCount" class="layui-input" />
					</div>
					<div class="layui-form-mid layui-word-aux">提示：(当用户的下属粉丝数量达到所设置的值时，用户可以再次抽奖)</div>
				</div>
				<blockquote class="layui-elem-quote">奖项配置</blockquote>
				<table class="layui-table">
					<thead>
						<th>奖项</th>
						<th>奖品数量</th>
						<th>中奖概率(%)</th>
						<th>奖品类型</th>
						<th>奖品名称</th>
						<th>操作</th>
					</thead>
					<tbody id="prize-list">

					</tbody>
				</table>
				<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" style="margin-top: 20px;">
					<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>
		<div class="popupbox" style="display:none;">
			<div class="popupbos">
				<div class="layui-form">
					<div class="layui-field-box">
						<div class="layui-form-item">
							<label class="layui-form-label">奖品数量：</label>
							<div class="layui-input-inline" style="width:140px;">
								<input type="number" min="0" name="num" class="layui-input" />
							</div>
							<div class="layui-form-mid">名</div>
							<label class="layui-form-label">中奖概率：</label>
							<div class="layui-input-inline" style="width:140px;">
								<input type="number" value="0" name="probability" class="layui-input" />
							</div>
							<div class="layui-form-mid">%</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">类型：</label>
							<div class="layui-input-inline" style="width: 140px;">
								<select name="isMoney" lay-verify="required" lay-filter="isMoney">
									<option value="">请选择</option>
									<option value="1">红包</option>
									<option value="2">物品</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item redpakage">
							<label class="layui-form-label">红包随机金额 ：</label>
							<div class="layui-input-inline" style="width:140px;">
								<input type="number" value="0" name="mixMoney" class="layui-input" lay-verify="required" min="1">
							</div>
							<div class="layui-form-mid">至</div>
							<div class="layui-input-inline" style="width:140px;">
								<input type="number" value="0" name="maxMoney" class="layui-input" lay-verify="required" min="1" />
							</div>
							<div class="layui-form-mid">分</div>
						</div>
						<div class="layui-form-item prizeName">
							<label class="layui-form-label">上传主图 ：</label>
							<div class="layui-input-inline" style="width: 400px;">
								<div class="layui-upload">
									<button type="button" class="layui-btn" id="upload" style="margin:0 20px 0 0;float:left;">上传主图</button>
									<span class="layui-form-mid layui-word-aux">建议尺寸：100*100</span>
									<div class="layui-upload-list">
										<img class="layui-upload-img mainpictrue" src="">
										<input type="text" style="display:none;" name="imgUrl" lay-verify="required">
									</div>
								</div>
							</div>
						</div>
						<div class="layui-form-item prizeName">
							<label class="layui-form-label">礼品名称 ：</label>
							<div class="layui-input-inline" style="width:300px;">
								<input type="text" name="name" class="layui-input" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<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', 'upload'], function() {
				var form = layui.form,
					element = layui.element,
					laydate = layui.laydate,
					layer = layui.layer,
					upload = layui.upload;

				laydate.render({
					elem: '[name=beginTime]',
					type: 'datetime'
				});

				var prizelist = [];

				function initData() {
					$.get("/zzhnc/activity/getActivitySetting", function(data) {
						console.log(data)
						if(data.code == 0) {
							//基本信息
							$("[name=beginTime]").val(data.data.activity.beginTime);
							$("[name=status]").val(data.data.activity.status);
							$("[name=turn]").val(data.data.activity.turn);
							$("[name=planMny]").val(data.data.activity.planMny);
							$("[name=currentMny]").val(data.data.activity.currentMny.toFixed(2));
							$("[name=city]").val(data.data.activity.city);
							$("[name=shareCount]").val(data.data.activity.shareCount);
							//提示语
							$("[name=keyword]").val(data.data.activity.keyword);
							$("[name=replyWelcome]").val(data.data.activity.replyWelcome);
							$("[name=replyWait]").val(data.data.activity.replyWait);
							$("[name=replySucceed]").val(data.data.activity.replySucceed);
							$("[name=unLotteryReply]").val(data.data.activity.unLotteryReply);
							$("[name=replyFailed2]").val(data.data.activity.replyFailed2);
							$("[name=finishReply]").val(data.data.activity.finishReply);
							$("[name=lotteryTitle]").val(data.data.activity.lotteryTitle);
							$("[name=lotterySubTitle]").val(data.data.activity.lotterySubTitle);
							$("[name=noChanceReply]").val(data.data.activity.noChanceReply);
							$("[name=badWordsReply]").val(data.data.activity.badWordsReply);
							//奖项设置
							prizelist = data.data.prizeList;
							prizeList(prizelist);
							form.render();
						} else {
							top.layer.msg(data.msg);
						}
					})
				}

				//奖项设置显示
				function prizeList(list) {
					var str = "";
					for(var i = 0; i < list.length; i++) {
						if(list[i] != null){
							str += '<tr data-id=' + list[i].id + '>' +
							'<td>奖品' + (i + 1) + '</td>' +
							'<td>' + list[i].num + '</td>' +
							'<td>' + list[i].probability + '</td>' +
							'<td>' + type(list[i].isMoney) + '</td>' +
							'<td>' + money(list[i].isMoney, list[i].mixMoney, list[i].maxMoney, list[i].imgUrl, list[i].name) + '</td>' +
							'<td><a href="#" class="layui-btn layui-btn-sm updataBtn">修改</a>' +
							'</td>' +
							'</tr>';
						}
					}
					$("#prize-list").html(str);
					form.render();
				}

				//初始化
				initData();

				//上传操作
				upload.render({
					elem: '#upload',
					url: '/zzhnc/upload/UploadImg',
					done: function(data) {
						console.log(data)
						if(data.code == 0) {
							$("[name=imgUrl]").val(data.data.imgurl);
							$(".mainpictrue").attr("src", data.data.imgurl).css("margin", "15px 0");
						} else {
							return layer.msg('上传失败');
						}
					}
				});

				//修改奖品信息
				$(document).on("click", ".updataBtn", function() {
					var id = $(this).parents("tr").attr("data-id");
					var title = "奖品" + id;
					var prizeInfo = getPrize(id);
					layer.open({
						type: 1,
						title: title,
						area: ["700px", "400px"],
						content: $(".popupbox"),
						btnAlign: "c",
						btn: ["提交", "取消"],
						scrollbar: false,
						yes: function(index, layero) {
							var submitData = prizeInfo;
							submitData.num = $("[name=num]").val();
							submitData.probability = $("[name=probability]").val();
							if(toBool($("[name=isMoney]").val())){
								submitData.isMoney = toBool($("[name=isMoney]").val());
								submitData.mixMoney = $("[name=mixMoney]").val();
								submitData.maxMoney = $("[name=maxMoney]").val();
								submitData.imgUrl = "";
								submitData.name = "";
							}else{
								submitData.isMoney = toBool($("[name=isMoney]").val());
								submitData.mixMoney = 0;
								submitData.maxMoney = 0;
								submitData.imgUrl = $("[name=imgUrl]").val();
								submitData.name = $("[name=name]").val();
							}
							
							$.ajax({
								type: 'POST',
								url: '/zzhnc/activity/editActivityPrize/' + id,
								dataType: 'json',
								async: true,
								contentType: "application/json;charset=UTF-8",
								data: JSON.stringify(submitData),
								success: function(data) {
									layer.msg('操作成功');
									layer.close(index);
									prizelist = updatePrizeList(id, submitData);
									prizeList(prizelist);
								},
								error: function(xhr, type) {
									layer.msg('操作失败');
								}
							});
							form.render();
						},
						success: function() {
							console.log(prizeInfo)
							$("[name=num]").val(prizeInfo.num);
							$("[name=probability]").val(prizeInfo.probability);
							if(prizeInfo.isMoney) {
								$(".redpakage").show();
								$(".prizeName").hide();
								$("[name=isMoney]").val("1");
								$("[name=mixMoney]").val(prizeInfo.mixMoney);
								$("[name=maxMoney]").val(prizeInfo.maxMoney);
							} else {
								$(".prizeName").show();
								$(".redpakage").hide();
								$("[name=isMoney]").val("2");
								$("[name=imgUrl]").val(prizeInfo.imgUrl);
								$(".mainpictrue").attr("src", prizeInfo.imgUrl).css("margin", "15px 0");
								$("[name=name]").val(prizeInfo.name);
							}
							form.render();
						}
					})
				})

				//提交事件
				form.on('submit(submit)', function(e) {
					console.log(e.field)
					var submitData = e.field;
					$.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 type(t) {
					if(t) {
						return t = "红包"
					} else {
						return t = "礼品"
					}
				}

				//渲染列表时，显示的奖品名称
				function money(type, min, max, img, name) {
					var text = "";
					if(type) {
						if(min != max) {
							text = min + " - " + max + " 分 "
						} else {
							text = min + " 分 "
						}
					} else {
						text = '<img class="prizeImg" src="' + img + '" /> ' + name;
					}
					return text;
				}

				//得到单个奖品的信息
				function getPrize(id) {
					for(var i = 0; i < prizelist.length; i++) {
						if(prizelist[i].id == id) {
							return prizelist[i];
						}
					}
				}

				//将单个奖品的数据保存到list中
				function updatePrizeList(id, info) {
					for(var i = 0; i < prizelist.length; i++) {
						if(prizelist[i].id == id) {
							prizelist[i] == info;
						}
					}
					return prizelist;
				}

				//监控类型选择
				form.on("select(isMoney)", function(e) {
					console.log(e);
					if(e.value == "1") {
						$(".redpakage").show();
						$(".prizeName").hide();
					} else if(e.value == "2") {
						$(".prizeName").show();
						$(".redpakage").hide();
					}
				})

			})
		</script>

</html>