更新

lottery/index.html

@@ -27,20 +27,18 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		margin-top: -100px;
 	}
 	.btn-img {
 		width: 290px;
 	}
 	.rule {
-		width: 375px;
+		width: 100%;
 		height: 509px;
 		padding: 65px 15px 40px;
 		background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
-		margin-top: -46px;
+		margin-top: -60px;
 	}
 	.rule-body {
-		width: 345px;
 		height: 404px;
 		background: #FEE8D0;
 		border-radius: 20px;
@@ -77,13 +75,17 @@
 	}  
 	  
 	.tab-content {
-	  font-weight: 400;
-	  font-size: 14px;
-	  color: #CB4E35;
-	  margin-top: 20px;
+		p {
+		    font-weight: 400;
+		    font-size: 14px;
+		    color: #CB4E35;
+		    margin-top: 20px;
+		}
 	}
 	.record-list {
-		/* display: flex; */
+		overflow-y: auto;
+		height: 300px;
+		margin-top: 18px;
 	}
 	.record-item {
 		width: 315px;
@@ -93,7 +95,7 @@
 		padding: 9px 10px 8px;
 		display: flex;
 		align-items: center;
-		margin-bottom: 10px;
+		margin: 0 auto 10px;
 	}
 	.prize-img {
 		width: 55px;
@@ -163,6 +165,7 @@
 		color: #222222;
 		text-align: right;
 		padding: 10px 0;
+		padding-right: 30px !important;
 	}
 	.mui-input-row label {
 		font-weight: 500;
@@ -196,7 +199,7 @@
 		float: right;
 		width: 65%;
 		height: 40px;
-		padding: 10px;
+		padding: 10px 30px 10px 10px;
 		display: flex;
 		font-weight: 500;
 		font-size: 14px;
@@ -243,46 +246,263 @@
 	  transition: opacity 0.5s ease; /* 可选：添加透明度过渡效果 */  
 	  display: none;
 	}
+	.prize-content {
+		width: fit-content;
+		margin: -96% auto 0
+		
+	}
+	#grid-container {  
+	  display: grid;  
+	  grid-template-columns: repeat(3, 1fr); /* 创建3列，每列等宽 */  
+	  gap: 10px; /* 格子之间的间距 */  
+	  padding: 10px;  
+	}  
+	  
+	.grid-item {  
+		width: 78px; /* 使图片宽度适应格子 */
+		height: 78px; /* 保持图片原始宽高比 */ 
+	  position: relative; /* 为了让标题能够绝对定位 */  
+	  overflow: hidden; /* 确保图片不会溢出格子 */  
+	  background-image: url(./img/prize-bg.png);
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  background-size: cover;
+	  flex-direction: column;
+	  padding-top: 8px;
+	  transition: transform 0.3s, opacity 0.3s; /* 平滑过渡效果 */  
+	}  
+	  
+	.grid-item img {  
+	  width: 48px; /* 使图片宽度适应格子 */  
+	  height: 48px; /* 保持图片原始宽高比 */  
+	  display: block; /* 移除图片下方的默认空间 */  
+	}  
+	  
+	.grid-item-title {  
+	  font-weight: 400;
+	  font-size: 10px;
+	  color: #CC745A;
+	  width: 70px;
+	  white-space: nowrap;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  text-align: center;
+	}
+	/* ... 其他样式保持不变 ... */  
+	  
+	.rotating {  
+	    animation: rotateGrid 3s infinite linear;  
+	}  
+	  
+	@keyframes rotateGrid {  
+	    from {  
+	        transform: rotate(0deg);  
+	    }  
+	    to {  
+	        transform: rotate(360deg);  
+	    }  
+	}  
+	  
+	.actives {  
+	    border: 2px solid #df2727;
+		border-radius: 15px;
+	}
+
+	.lottery-tip {
+		text-align: center;
+		font-size: 14px;
+		color: #FFFFFF;
+		font-weight: 600;
+	}
+	.dialog {
+		position: fixed;
+		top: 0;  
+		left: 0;  
+		width: 100%;  
+		height: 100%;  
+		background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */  
+		z-index: 1000; /* 确保遮罩层在顶部 */
+		transition: opacity 0.5s ease; /* 可选：添加透明度过渡效果 */  
+		display: none;
+	}
+	.dialog-body {
+		width: 100%;
+		z-index: 1001; /* 确保遮罩层在顶部 */
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.dialog-tip {
+		width: 100%;
+		height: 100px;
+	}
+	.dialog-bg {
+		width: 295px;
+		height: 251px;
+		position: relative;
+	}
+	.prize-msg {
+		position: absolute;
+		text-align: center;
+	}
+	.money-title {
+		font-weight: 500;
+		font-size: 16px;
+		color: #FF4E4E;
+		padding-top: 90px;
+		padding-bottom: 10px;
+	}
+	.money-content {
+		margin-bottom: 30px;
+		height: 60px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.prize-money {
+		font-weight: bold;
+		font-size: 60px;
+		color: #FF4E4E;
+	}
+	.prize-unit {
+		font-weight: 500;
+		font-size: 16px;
+		color: #FF4E4E;
+		padding-left: 10px;
+		padding-top: 28px;
+	}
+	.dialog-btn {
+		width: 235px;
+		height: 52px;
+		margin-bottom: 10px;
+	}
+	.money-tip {
+		font-weight: 400;
+		font-size: 12px;
+		color: #999999;
+		margin-bottom: 15px;
+	}
+	.goods-img {
+		width: 100px;
+		height: 100px;
+		margin: 70px 0 10px;
+	}
+	.goods-name {
+		font-weight: 500;
+		font-size: 16px;
+		color: #222222;
+		margin-bottom: 20px;
+	}
+	.dialog-close {
+		width: 30px;
+		height: 30px;
+		margin-top: 20px;
+	}
+	.mui-poppicker {
+		z-index: 1002 !important;
+	}
+	.event-notice {
+		width: 30px;
+		height: 84px;
+		background: rgba(255,255,255,0.5);
+		border-radius: 15px 0px 0px 15px;
+		border: 1px solid #FFFFFF;
+		font-weight: 500;
+		font-size: 14px;
+		color: #FF4E4E;
+		position: absolute;
+		right: 0;
+		top: 20%;
+		writing-mode: vertical-rl;
+		text-align: center;
+		padding-right: 4px;
+	}
+	.notice-body  {
+		width: 80%;
+		z-index: 1001;
+		height: 500px;
+		overflow-y: auto;
+		background: #FFF;
+		margin: 40px;
+		border-radius: 20px;
+		padding: 20px;
+		font-size: 14px;
+		border: 4px solid #eb845a;
+	}
 </style>
 <body>
 	<img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
+	<div class="event-notice" id="eventNotice">
+		<span>活动须知</span>
+	</div>
+	<div class="prize-content">
+		<div id="grid-container">
+				
+		</div>  
+	</div>
 	<div class="btn">
-		<img class="btn-img" id="btnImg" src="./img/btn.png" mode="widthFix" />
+		<img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
 	</div>
+	<div class="lottery-tip" id="lotteryId"></div>
 	<div class="rule">
 		<div class="rule-body">
 			<div class="tabs">
 				<button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
 				<button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
 			</div>	  
-			<div id="tab1" class="tab-content">  
-				<div>活动规则：</div>  
-				<div>1.参与宝骏/车主认证成功的小伙伴才能参与抽奖，转发无效。</div>  
-				<div>2.请填写参与认证时填写的正在使用/提车手机号，其他手机号无效</div>  
-				<div>3.实物礼品将会在 15 个工作日内发货，敬请期待</div>  
+			<div id="tab1" class="tab-content"> 
 			</div>  
 			<div id="tab2" class="tab-content" style="display:none;">
-				<div class="record-list">
-					<div class="record-item">
-						<img class="prize-img" src="./img/lottery-bg.png" mode="widthFix" />
-						<div>
-							<div class="prize-name">奖品名称</div>
-							<div class="prize-time">2020-01-01 10:22:01</div>
-						</div>
-						<button id="toggleButton" class="get-btn">领取</button>
-					</div>
-					<div class="record-item">
-						<img class="prize-img" src="./img/lottery-bg.png" mode="widthFix" />
-						<div>
-							<div class="prize-name">奖品名称</div>
-							<div class="prize-time">2020-01-01 10:22:01</div>
-						</div>
-						<button class="get-btn" onclick="getPrize">领取</button>
-					</div>
+				<div class="record-list" id="recordList">
 				</div>
 			</div>  
 		</div>
 	</div>
+	<div id="dialog" class="dialog">
+		<div id="dialog-body" class="dialog-body">
+			<img class="dialog-tip" src="./img/dialog-tip.png" />
+			<img class="dialog-bg" src="./img/dialog-bg.png" />
+			<div class="prize-msg" id="prize-msg-money">
+				<div class="money-title">微信红包</div>
+				<div class="money-content">
+					<span class="prize-money" id="prize-money"></span>
+					<span class="prize-unit">元</span>
+				</div>
+				<img class="dialog-btn" id="dialog-btn-money" src="./img/dialog-btn.png" />
+				<div class="money-tip">红包到账会有延迟情况，请以实际为准</div>
+			</div>
+			<div class="prize-msg" id="prize-msg-goods">
+				<img class="goods-img" id="goods-img" src="" />
+				<div class="goods-name" id="goods-name"></div>
+				<img class="dialog-btn" id="dialog-btn-goods" src="./img/dialog-btn.png" />
+			</div>
+			<img class="dialog-close" id="dialog-close" src="./img/dialog-close.png" />
+		</div>
+	</div>
+	<div id="notice" class="dialog">
+		<div class="notice-body" id="notice-body">
+			<div>以下隐私协议是本产品对用户隐私保护的许诺，请您务必仔细阅读本协议，以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
+				为了给您提供更准确、更有针对性的服务，本产品可能会以如下方式，使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息，在未征得您许可的情况下，不会将这些信息对外公开或向第三方提供。<br />
+				请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范，我们不承担因违反上述管理规范所导致的任何责任。<br />
+				一、您已经认真阅读参与的活动信息，自愿参加相关活动。您自愿并乐意将活动链接、海报、文案等信息转发分享到微信朋友圈、微信群、微信聊天等渠道，并不是因为诱导的情况下参与相关活动、分享相关活动。<br />
+				二、您自愿选择服务或提供信息的情况下收集您的个人信息（包括但不限于，微信昵称，微信头像，微信地址，微信关联手机号等），并将这些信息进行整合，以便向您提供更好的用户服务。<br />
+				三、保有您的使用记录在如下情况下，本产品会遵照您的意愿或法律的规定披露您的个人信息（包括但不限于，微信昵称，微信头像，微信地址，微信关联手机号等），由此引发的问题将由您个人承担： <br />
+					1）事先获得您的授权<br />
+					2）只有获取您的个人资料，才能提供您所要求的服务 <br />
+					3）根据有关的法律法规要求<br />
+					4）按照相关政府主管部门的要求 <br />
+					5）为维护本产品的合法权益<br />
+					6）您同意让第三方共享资料<br />
+					7）我们发现您违反了本产品的服务条款或使用规定 <br />
+					8）我们需要向代表我们提供产品或服务的公司提供资料 （除非我们另行通知您，否则这些公司无权使用您的身份识别资料）<br />
+				四、本《隐私协议》不适用于以下情况： <br />
+					1）通过我们的服务而接入的第三方服务（包括任何第三方网站）收集的信息。本政策仅适用于我们所收集的信息，并不适用于任何第三方提供的服务或第三方的信息使用规则，我们对任何第三方使用由您提供的信息不承担任何责任。<br />
+					2）通过在我们服务中进行广告服务的其他公司或机构所收集的信息。<br />
+			</div>
+		</div>
+	</div>
 	<div id="overlay" class="overlay">
 		<div id="popForm" class="pop-form">
 			<div class="pop-title">
@@ -292,11 +512,11 @@
 			<form class="mui-input-group">
 				<div class="mui-input-row">
 					<label>姓名：</label>
-					<input type="text" id="salesMan" class="mui-input-clear" placeholder="请填写您的姓名">
+					<input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
 				</div>
 				<div class="mui-input-row">
 					<label>微信号：</label>
-					<input type="text" id="wechat" class="mui-input-clear" placeholder="请填写您的微信号">
+					<input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
 				</div><div class="mui-input-row">
 					<label>手机号：</label>
 					<input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
@@ -314,11 +534,11 @@
 				</div>
 				<div class="mui-input-row">
 					<label>详细地址：</label>
-					<input type="text" id="city" class="mui-input-clear" placeholder="请填写详细地址">
+					<input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
 				</div>
 				<div class="mui-input-row">
 					<label>备注：</label>
-					<input type="text" id="notes" class="mui-input-clear" placeholder="请填写详细地址">
+					<input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
 				</div>
 				<div class="mui-button-row">
 					<button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
@@ -328,9 +548,84 @@
 	</div>
 	<script>
 		window.onload = function() {
-			showCityLevel();
+			if (getQueryParam('openId')) {
+				if(!getQueryParam('externalUserid')) {
+					mui.alert('无权限访问', '提示', '确定');
+				} else {
+					showCityLevel();
+					raffleInfo();
+					raffleRecord();
+				}
+			} else {
+				// 走授权操作
+				getAuth();
+			}
 			document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
 		};
+		// 公众号授权，获取code
+		function getAuth() {
+			// 获取url上的code
+			let code = getQueryParam('code')
+			if (code) {
+				let bId = getQueryParam('bId')
+				mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-client/p/getInfoByh5Code',{
+					data:{
+						code: code,
+						bId: bId,
+					},
+					dataType:'json',//服务器返回json格式数据
+					type:'get',//HTTP请求类型
+					success:function(res){
+						if (res.data.externalUserid) {
+							showCityLevel();
+						} else {
+							// 进行下一步企微授权
+							gerQwAuth(bId, res.data.openId);
+						}
+					},
+					error:function(error){
+						//异常处理；
+						console.log(error);
+					}
+				});
+			} else {
+				let redirect_uri = window.location.href
+				// code 不存在，走微信网页授权逻辑 
+				let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx99ec0d0828a4d2d3&redirect_uri=${redirect_uri}&scope=snsapi_userinfo&state=STATE#wechat_redirect`
+				window.location.replace(url)
+			}
+		};
+		// 企微授权
+		function gerQwAuth (bId, openId) {
+				let link = window.location.href
+				mui.ajax('http://test.wefanbot.com:18993/p/insuite/p/getOAUrl',{
+					data:{
+						bId: bId,
+						openId: openId,
+					},
+					dataType:'json',//服务器返回json格式数据
+					type:'get',//HTTP请求类型
+					success:function(res){
+						if (res.data) {
+							window.location.replace(res.data)
+						}
+					},
+					error:function(error){
+						//异常处理；
+						console.log(error);
+					}
+				});
+		};
+		// 截取url中的数据
+		function getQueryParam(paramName) {
+			// 获取当前URL的查询字符串部分  
+			const queryString = window.location.search;  
+			// 创建一个URLSearchParams对象  
+			const urlParams = new URLSearchParams(queryString);
+			// 返回指定参数的值，如果不存在则返回null  
+			return urlParams.get(paramName);
+		};
+		// 城市数据
 		function showCityLevel() {
 			var picker = new mui.PopPicker({
 				layer: 2,
@@ -364,6 +659,196 @@
 				})
 			});
 		};
+		let lotteryStatus = '' // 抽奖活动状态
+		let gridList = []; // 用于存储所有格子数据
+		let gridItems = []; // 用于存储所有格子
+		let currentIndex = 0; // 当前活动的格子索引
+		let stopRotation = false; // 控制是否停止轮询的变量 
+		let remainingTimes = 0
+		// 获取抽奖信息
+		function raffleInfo() {
+			let openId = getQueryParam('openId')
+			let raffleId = getQueryParam('bId')
+			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId',{
+				data:{
+					openId: openId,
+					raffleId: raffleId,
+				},
+				dataType:'json',//服务器返回json格式数据
+				type:'get',//HTTP请求类型
+				success:function(res){
+						lotteryStatus = res.data.status
+						gridList = res.data.prizes
+						document.getElementById("tab1").innerHTML = res.data.activityInfo
+						remainingTimes = res.data.raffleNum-res.data.useNum
+						document.getElementById("lotteryId").innerHTML = `已抽奖${res.data.useNum}次，还剩${res.data.raffleNum-res.data.useNum}次机会`
+						const container = document.getElementById('grid-container');  
+						const buttons = document.getElementById('lottery-button');  
+						container.innerHTML = '';  
+						for (let i = 0; i < 9; i++) {
+							// 创建一个新的div元素作为格子  
+							const gridItem = document.createElement('div');  
+							gridItem.classList.add('grid-item');  
+						  
+							// 创建图片元素并添加到格子中  
+							const img = document.createElement('img');  
+							img.src = res.data.prizes[i].img; // 设置图片源  
+							img.alt = `图片 ${i + 1}`; // 设置图片的替代文本  
+							gridItem.appendChild(img);  
+						  
+							// 创建标题元素并添加到格子中  
+							const title = document.createElement('div');  
+							title.classList.add('grid-item-title');  
+							title.textContent = res.data.prizes[i].name; // 设置标题文本  
+							gridItem.appendChild(title);  
+						  
+							// 将格子添加到容器中  
+							container.appendChild(gridItem);  
+						}
+						gridItems = []
+						container.querySelectorAll('.grid-item').forEach(item => {  
+					      gridItems.push(item);  
+					    });  
+					    
+					    buttons.addEventListener('click', function() {
+							handleLottery();
+						})
+				},
+				error:function(error){
+					//异常处理；
+					console.log(error);
+				}
+			});
+		};
+		// 点击抽奖
+		function handleLottery() {
+			if (!remainingTimes) {
+				mui.toast('抽奖次数已用完');
+				return false;
+			}
+			const gridContainer = document.getElementById('grid-container');
+			if (lotteryStatus === -1) {
+				mui.toast('活动已结束');
+			} else if (lotteryStatus === 0) {
+				mui.toast('活动未开始');
+			} else if (lotteryStatus === 1) {
+				stopRotation = false
+				rotateActive();  
+				let externalUserid = getQueryParam('externalUserid')
+				let openId = getQueryParam('openId')
+				let raffleId = getQueryParam('bId')
+				mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/lottery',{
+					data:{
+						externalUserid: externalUserid,
+						openId: openId,
+						raffleId: raffleId,
+					},
+					dataType:'json',//服务器返回json格式数据
+					type:'get',//HTTP请求类型
+					success:function(res){
+						if (res.data) {
+							setTimeout(() => {  
+								// 停止轮询  
+								stopRotation = true;  
+						  
+								// 立即将 active 类应用到目标格子上  
+								gridItems.forEach(item => item.classList.remove('actives'));
+								gridList.forEach((item, index) => {
+									if (res.data.id === item.id) {
+										gridItems[index].classList.add('actives');
+									}
+								});  
+								if (res.data.acceptType === 0 || res.data.acceptType === 1) {
+									document.getElementById('dialog').style.display = 'flex';
+									document.getElementById('prize-msg-goods').style.display = 'block';
+									document.getElementById('prize-msg-money').style.display = 'none';
+									document.getElementById("goods-img").src = res.data.img
+									document.getElementById("goods-name").innerHTML = res.data.name
+								} else if (res.data.acceptType === 2) {
+									document.getElementById('dialog').style.display = 'flex';
+									document.getElementById('prize-msg-goods').style.display = 'none';
+									document.getElementById('prize-msg-money').style.display = 'block';
+									document.getElementById("prize-money").innerHTML = res.data.money
+								}
+								raffleInfo()
+								raffleRecord()
+								currentIndex = 0
+							}, 2000); // 假设接口调用需要2秒  
+						} else {
+							stopRotation = true;
+							gridItems.forEach(item => item.classList.remove('actives'));
+							currentIndex = 0
+							mui.toast(res.msg);
+						}
+					},
+					error:function(error){
+						//异常处理；
+						console.log(error);
+					}
+				});
+			}
+		};
+		// 轮询动画函数  
+		function rotateActive() {  
+			// 移除上一个格子的 active 类 
+			if (gridItems[currentIndex]) {  
+				gridItems[currentIndex].classList.remove('actives');  
+			}  
+	  
+			// 更新当前索引，循环到第一个格子如果超出范围  
+			currentIndex = (currentIndex + 1) % gridItems.length;  
+	  
+			// 应用 active 类到新的格子  
+			gridItems[currentIndex].classList.add('actives');  
+	  
+			// 递归调用以继续动画，直到接口调用完成  
+			if (!stopRotation) {  
+				setTimeout(rotateActive, 100); // 假设每个格子显示 500 毫秒  
+			}  
+		};
+		// 获取抽奖记录
+		function raffleRecord() {
+			let openId = getQueryParam('openId')
+			let raffleId = getQueryParam('bId')
+			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleRecord',{
+				data:{
+					openId: openId,
+					raffleId: raffleId,
+					page: 1,
+					pageCount: 1000,
+				},
+				dataType:'json',//服务器返回json格式数据
+				type:'post',//HTTP请求类型
+				headers:{'Content-Type':'application/json'},
+				success:function(res){
+					const recordList = document.getElementById('recordList');
+					recordList.innerHTML = ''
+					res.data.records.forEach(record => {
+						recordList.innerHTML += `
+						<div class="record-item">
+							<img class="prize-img" src="${record.img}" mode="widthFix" />
+							<div>
+								<div class="prize-name">${record.name}</div>
+								<div class="prize-time">${timeFormat(record.raffleTime)}</div>
+							</div>
+							<button id="toggleButton" ${record.status ? 'disabled' : ''} class="get-btn" onclick="handleOpenForm(${record.id})">${record.status ? '已领取' : '领取'}</button>
+						</div>`
+					});
+				},
+				error:function(error){
+					//异常处理；
+					console.log(error);
+				}
+			});
+		};
+		let recordId = ''
+		function handleOpenForm(id) {
+			recordId = id
+			document.getElementById('overlay').style.display = 'flex';
+			var div = document.getElementById('popForm');  
+			div.classList.add('show');  
+		};
+		// 切换tab
 		function changeTab(evt, tabName) {  
 		  // 获取所有tab链接，并移除激活类  
 		  var i, tabcontent, tablinks;  
@@ -380,16 +865,111 @@
 		  document.getElementById(tabName).style.display = "block";  
 		  evt.currentTarget.className += " active";  
 		};
-		document.getElementById('toggleButton').addEventListener('click', function() {
-			document.getElementById('overlay').style.display = 'flex';
-			var div = document.getElementById('popForm');  
-			div.classList.add('show');  
-		});
+		function handleSave() {
+			let nameResult = document.getElementById('name').value;
+			let wxAccountResult = document.getElementById('wxAccount').value
+			let phone = document.getElementById("phone").value;
+			let provinceResult = document.getElementById('province');
+			let cityResult = document.getElementById('city');
+			let addressResult = document.getElementById("address").value;
+			let remarkResult = document.getElementById("remark").value;
+			if (!nameResult){
+				mui.toast("请填写姓名");
+			} else if (!phone){
+				mui.toast("请输入手机号");
+			} else if (!provinceResult.innerText){
+				mui.toast('请选择城市');
+			} else {
+				mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleForm',{
+					data:{
+						name: nameResult,
+						wxAccount: wxAccountResult,
+						phone: phone,
+						province: provinceResult.innerText || '',
+						city: cityResult.innerText || '',
+						address: addressResult,
+						remark: remarkResult,
+						recordId: recordId
+					},
+					dataType:'json',//服务器返回json格式数据
+					type:'post',//HTTP请求类型
+					timeout:10000,//超时时间设置为10秒；
+					headers:{'Content-Type':'application/json'},	              
+					success:function(res){
+						if (res.code === 1) {
+							mui.toast("提交成功！");
+							document.getElementById('overlay').style.display = 'none';
+							var div = document.getElementById('popForm');  
+							div.classList.remove('show');
+							raffleRecord()
+						} else {
+							mui.toast(res.msg);
+						}
+					},
+					error:function(error){
+						//异常处理；
+						console.log(error);
+						mui.toast(error);
+					}
+				});
+			}
+		};
 		document.getElementById('closeIcon').addEventListener('click', function() {
 			document.getElementById('overlay').style.display = 'none';
 			var div = document.getElementById('popForm');  
 			div.classList.remove('show');
 		});
+		if (document.getElementById('dialog-btn-money')) {
+			document.getElementById('dialog-btn-money').addEventListener('click', function() {
+				document.getElementById('dialog').style.display = 'none';
+				gridItems[currentIndex].classList.remove('actives');
+			});
+		}
+		if (document.getElementById('dialog-btn-goods')) {
+			document.getElementById('dialog-btn-goods').addEventListener('click', function() {
+				document.getElementById('dialog').style.display = 'none';
+				gridItems[currentIndex].classList.remove('actives');
+			});
+		}
+		document.getElementById('dialog-close').addEventListener('click', function() {
+			document.getElementById('dialog').style.display = 'none';
+			gridItems[currentIndex].classList.remove('actives');
+		});
+		document.getElementById('eventNotice').addEventListener('click', function() {
+			document.getElementById('notice').style.display = 'block';
+		});
+		document.getElementById('notice').addEventListener('click', function() {
+			var div = document.getElementById('notice-body');  
+			// 检查点击事件的目标是否不是div本身或其子元素  
+			if (!div.contains(event.target)) {
+				document.getElementById('notice').style.display = 'none';
+			}
+		});
+		function timeFormat (time, format = 'yyyy-MM-dd hh:mm:ss') {
+		    if (time === undefined || time === '' || time === null) {
+		        return '/'
+		    } else {
+		        const date = new Date(time)
+		        const o = {
+		            'M+': date.getMonth() + 1,
+		            'd+': date.getDate(),
+		            'h+': date.getHours(),
+		            'm+': date.getMinutes(),
+		            's+': date.getSeconds(),
+		            'q+': Math.floor((date.getMonth() + 3) / 3),
+		            'S': date.getMilliseconds()
+		        }
+		        if (/(y+)/.test(format)) {
+		            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+		        }
+		        for (let k in o) {
+		            if (new RegExp('(' + k + ')').test(format)) {
+		                format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+		            }
+		        }
+		        return format
+		    }
+		}
 	</script>
 </body>
 </html>