wfg
/
lottery


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537
							<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
		<script>
		  var vConsole = new window.VConsole();
		</script>
		<script type="text/javascript">
			mui.init()
			(function flexible (window, document) {
				let docEl = document.documentElement
				let dpr = window.devicePixelRatio || 1
			
				// adjust body font size
				function setBodyFontSize () {
					if (document.body) {
						document.body.style.fontSize = (12 * dpr) + 'px'
					} else {
						document.addEventListener('DOMContentLoaded', setBodyFontSize)
					}
				}
				setBodyFontSize()
			
				// set 1rem = viewWidth / 10
				function setRemUnit () {
					let rem = docEl.clientWidth / 375
					docEl.style.fontSize = rem + 'px'
				}
			
				setRemUnit()
			
				// reset rem unit on page resize
				window.addEventListener('resize', setRemUnit)
				window.addEventListener('pageshow', function(e) {
					if (e.persisted) {
						setRemUnit()
					}
				})
			
				// detect 0.5px supports
				if (dpr >= 2) {
					let fakeBody = document.createElement('body')
					let testElement = document.createElement('div')
					testElement.style.border = '.5px solid transparent'
					fakeBody.appendChild(testElement)
					docEl.appendChild(fakeBody)
					if (testElement.offsetHeight === 1) {
						docEl.classList.add('hairlines')
					}
					docEl.removeChild(fakeBody)
				}
			}(window, document));
			(function() {
				if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
					handleFontSize()
				} else {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
					} else if (document.attachEvent) {
						document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
					}
				}
				function handleFontSize () {
					// 设置网页字体为默认大小
					WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
					// 重写设置网页字体大小的事件
					WeixinJSBridge.on('menu:setfont', function() {
						WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
					})
				}
			})()
		</script>
	</head>
<style type="text/css">
	body {
	    margin: 0;
		background: #FFFFFF;
	}
	#lotteryPage,#collectPage{
		display: none;
	}
	.bg-img {
		width: 100%;
		height: 100%;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn-img {
		width: 290px;
	}
	.rule {
		width: 100%;
		height: 509px;
		padding: 65px 15px 40px;
		background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
		margin-top: -60px;
	}
	.rule-body {
		height: 404px;
		background: #FEE8D0;
		border-radius: 20px;
		padding: 20px;
	}
	.tabs {
		display: flex;  
		justify-content: space-around;
		align-items: center;
		padding: 0 2px;
		margin: 0 auto;
		width: 255px;
		height: 34px;
		background: rgba(255, 125, 97, 0.2);
		border-radius: 17px 17px 17px 17px;
	}
	.tab-link {  
	  border: none;  
	  outline: none;  
	  cursor: pointer;
	  transition: 0.3s;
	  color: #FF765B;
	  background: unset; 
	  width: 125px;
	  height: 30px;
	  border-radius: 17px
	}
	.tab-link:active {  
	  background: rgba(255, 125, 97, 0.2);  
	}  
	  
	.tab-link.active {  
	  background: #FFFFFF;
	}  
	  
	.tab-content {
		p {
		    font-weight: 400;
		    font-size: 14px;
		    color: #CB4E35;
		    margin-top: 20px;
		}
	}
	.record-list {
		overflow-y: auto;
		height: 300px;
		margin-top: 18px;
	}
	.record-item {
		width: 315px;
		height: 72px;
		background: #FEDFC9;
		border-radius: 10px;
		padding: 9px 10px 8px;
		display: flex;
		align-items: center;
		margin: 0 auto 10px;
	}
	.prize-img {
		width: 55px;
		height: 55px;
		border-radius: 10px;
		margin-right: 8px;
	}
	.get-btn {
		width: 72px;
		height: 30px;
		background: #FF4646;
		border-radius: 17px;
		font-size: 14px;
		color: #FFFFFF;
		margin-left: 30px;
	}
	.prize-name {
		font-weight: 500;
		color: #FF4646;
	}
	.prize-time {
		font-size: 12px;
		color: #FF6767;
	}
	.mui-input-group {
		padding-top: 15px;
	}
	.mui-input-group:before {
		background: none;
	}
	.mui-input-group:after {
		background: none;
	}
	.mui-input-group .mui-input-row:after {
		background: none;
	}
	.mui-input-group .mui-input-row {
	    height: 60px;
	}
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
		font-weight: 400;
		font-size: 14px;
		color: #CCCCCC;
		float: right;
	}
	::-moz-placeholder { /* Firefox 19+ */  
		font-weight: 400;
		font-size: 14px;
		color: #CCCCCC;
		float: right;
	}
	:-ms-input-placeholder { /* IE 10+ */ 
		font-weight: 400;
		font-size: 14px;
		color: #CCCCCC;
		float: right;
	}
	:-moz-placeholder { /* Firefox 18- */ 
		font-weight: 400;
		font-size: 14px;
		color: #CCCCCC;
		float: right;
	}
	.mui-input-clear {
		font-weight: 500;
		font-size: 14px;
		color: #222222;
		text-align: right;
		padding: 10px 0;
		padding-right: 30px !important;
	}
	.mui-input-row label {
		font-weight: 500;
		font-size: 14px;
		color: #666666;
	}
	.save-btn {
		width: 305px;
		height: 52px;
		background: #FF4646;
		border-radius: 20px;
		border: none;
		font-weight: 500;
		font-size: 16px;
		color: #FFFFFF;
	}
	.pop-form {
		width: 100%;  
		background-color: #FFFFFF;  
		height: 524px; /* 根据需要调整高度 */  
		position: fixed; /* 或 absolute，根据需要定位 */  
		bottom: -524px; /* 初始位置在可视区域外 */  
		transition: bottom 0.5s ease-in-out; /* 平滑过渡效果 */  
		left: 0;
		z-index: 1001; /* 确保在遮罩层之上 */  
		box-sizing: border-box;  
		padding: 24px 25px 44px 15px;  
		border-radius: 15px 15px 0px 0px;
	}
	.city-data {
		float: right;
		width: 65%;
		height: 40px;
		padding: 10px 30px 10px 10px;
		display: flex;
		font-weight: 500;
		font-size: 14px;
		color: #222222;
		justify-content: flex-end;
	}
	.no-data {
		width: 100%;
		font-weight: 400;
		font-size: 14px;
		color: #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.pop-form.show {  
	  bottom: 0; /* 显示时位置 */  
	}
	.pop-title {
		display: flex;
		align-items: center;
		font-weight: bold;
		font-size: 16px;
		color: #222222;
	}
	.close-Icon {
		width: 24px;
		height: 24px;
		margin-right: 100px;
	}
	.right-Icon {
		width: 16px;
		height: 16px;
		margin-left: 5px;
	}
	.overlay {  
	  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;
	}
	.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;
	}
	.bg_content {
		height: calc(100vh + 44rem);
		width: 100vw;
		background: url('./img/blessing.png');
		background-size: cover;
		margin-top: -44rem;
	}
	.show_box{
		position: absolute;
		top: 198rem;
		/* background: #FFFFFF; */
		left: 15rem;
		right: 15rem;
		height: 290rem;
	}
	.show_box .show_item{
		width: 20rem;
		height: 20rem;
		position: relative;
		display: none;
		opacity: 1;
	}
	.show_box .show_item.add_animation_item{
		display: block;
		animation: showItem 0.4s linear forwards,hiddenAvatarItem 0.8s linear 2.7s forwards
	}
	.show_box .show_item .avatar_box{
		width: 20rem;
		height: 20rem;
		border-radius: 15rem;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		transform: scale(1);
		display: flex;
		align-items: center;
	}
	.show_box .show_item.add_animation_item .avatar_box{
		animation: showAvatarItem 0.3s linear 2.4s forwards;
	}
	.show_box .show_item .avatar_box .avatar{
		width: 20rem;
		height: 20rem;
		object-fit: cover;
	}
	.show_box .show_item .info_box{
		position: absolute;
		top: -15rem;
		left: -15rem;
		z-index: 1;
		background: rgba(255,255,255,0.7);
		border-radius: 15rem;
		border: 1rem solid #FFFFFF;
		width: 240rem;
		padding: 15rem;
		box-sizing: border-box;
	}
	.show_box .show_item.add_animation_item .info_box{
		animation: hiddenItem 0.3s linear 2.4s forwards;
	}
	.show_box .show_item.show_img_item .info_box{
		top: -175rem;
		left: -15rem;
	}
	.show_box .show_item.show_img_item.add_animation_item .info_box{
		animation: hiddenImgItem 0.3s linear 2.4s forwards;
	}
	
	@keyframes showItem {
	    0% {
	        opacity: 0;
	    }
	    100% {
	        opacity: 1;
	    }
	}
	@keyframes showAvatarItem {
	    0% {
	        transform: scale(1);
	    }
	    100% {
	        transform: scale(2);
	    }
	}
	@keyframes hiddenAvatarItem {
	    0% {
	        transform: scale(2);
			opacity: 1;
	    }
	    100% {
	        transform: scale(1);
			opacity: 0;
			top: 135rem;
			left: 172rem;
	    }
	}
	@keyframes hiddenItem {
	    0% {
	        transform: scale(1);
			top: -15rem;
			left: -15rem;
	    }
	    100% {
	        transform: scale(0);
			left:-110rem;
			top: -30rem;
	    }
	}
	@keyframes hiddenImgItem {
	    0% {
	        transform: scale(1);
			top: -175rem;
			left: -15rem;
	    }
	    100% {
	        transform: scale(0);
			left:-110rem;
			top: -115rem;
	    }
	}
	
	.show_box .show_item .info_box .img_box{
		width: 210rem;
		height: 150rem;
		border-radius: 15rem;
		overflow: hidden;
		margin-bottom: 10rem;
		display: none;
	}
	.show_box .show_item.show_img_item .info_box .img_box{
		display: block;
	}
	.show_box .show_item .info_box .img_box .info_img{
		width: 210rem;
		height: 150rem;
		object-fit: cover;
	}
	.show_box .show_item .info_box .info_text{
		
	}
	.show_box .show_item .info_box .info_text .info_name{
		font-weight: 500;
		font-size: 14rem;
		color: #222222;
		line-height: 20rem;
		padding-left: 25rem;
		margin-bottom: 5rem;
		height: 20rem;
	}
	.show_box .show_item .info_box .info_text .info_dsc{
		font-weight: 400;
		font-size: 12rem;
		color: #222222;
		line-height: 17rem;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
	.show_box .show_item.show_img_item .info_box .info_text .info_dsc{
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.send_btn {
		width: 345rem;
		position: fixed;
		bottom: 50rem;
		left: 50%;
		transform: translateX(-50%);
	}
	.dialog_text {
		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%;
		height: 100vh;
		z-index: 1001; /* 确保遮罩层在顶部 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text_bg {
		background: url('./img/dialog-text.png');
		background-size: cover;
		width: 100vw;
		height: 368rem;
	}
	.close-text {
		width: 24rem;
		height: 24rem;
		float: right;
		margin-right: 25rem;
		margin-top: 25rem;
	}
	.textarea_style {
		background-color: rgba(255, 255, 255, 0);
		border: unset;
		height: 180rem;
		padding: 0 35rem;
		width: 100%;
		margin: 0;
	}
	.photo-btn {
		width: 80rem;
		height: 80rem;
		margin-top: 18rem;
		margin-right: 35rem;
	}
	.send_text {
		width: 225rem;
		height: 52rem;
		background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
		border-radius: 30rem;
		border: 2rem solid #FFFFFF;
		font-weight: 800;
		font-size: 16px;
		color: #222222;
		margin-top: 15rem;
	}
	.img_list {
		width: 100%;
		overflow-x: auto;
		padding: 0 35rem;
	}
	.imageGallery {
		display: flex;
		overflow-x: auto;
	}
	.imageGallery img{
		width: 80rem;
		height: 80rem;
		margin-top: 18rem;
		margin-right: 35rem;
	}
</style>
<body>
	<div id="collectPage">
		<div class="bg_content">
			<div class="show_box">
				<div id="showItem" class="show_item">
					<div class="avatar_box">
						<img id="avatar" class="avatar" src="./img/prize-bg.png"/>
					</div>
					<div class="info_box">
						<div class="img_box">
							<img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
						</div>
						<div class="info_text">
							<div id="infoName" class="info_name"></div>
							<div id="infoDsc" class="info_dsc"></div>
						</div>
					</div>
				</div>
			</div>
			<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
		</div>
		<div id="dialogText" class="dialog_text">
			<div class="dialog-body">
				<div class="text_bg">
					<img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
					<textarea class="textarea_style" id="textarea" placeHolder="说出您和宝骏汽车的故事，为宝骏云海新车上市送上祝福"></textarea>
					<div class="img_list">
						<div id="imageGallery" class="imageGallery">
							<img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" onclick="uploadImage()" />
							<input type="file" id="uploadfile" style="display: none;" multiple accept='image/*'>
						</div>
					</div>
				</div>
				<button class="send_text" onclick="handleSendText()">发送</button>
			</div>
		</div>
	</div>
	<div id="lotteryPage">
		<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="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 id="tab2" class="tab-content" style="display:none;">
					<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">
					<img class="close-Icon" id="closeIcon" src="./img/close.png" mode="widthFix" />
					<span>填写收货地址</span>
				</div>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>姓名：</label>
						<input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
					</div>
					<div class="mui-input-row">
						<label>微信号：</label>
						<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="请填写您的手机号">
					</div>
					<div class="mui-input-row">
						<label>地区：</label>
						<div class="city-data" id="showCityPicker">
							<div class="no-data" id="placeholderCity">
								<span>请选择地区</span>
								<img class="right-Icon" id="city-rightIcon" src="" mode="widthFix" />
							</div>
							<div id="province"></div>
							<div id="city"></div>
						</div>
					</div>
					<div class="mui-input-row">
						<label>详细地址：</label>
						<input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
					</div>
					<div class="mui-input-row">
						<label>备注：</label>
						<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>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
		let h5Type = null
		let credentials = {
			bucket: '',
			Authorization: '',
			secretId: '',
			serverDomain: ''
		}
		let imgList = []
		var itemList = []
		var itemIndex = 0
		var itemTimer = null
		function uploadImage() {
		    let uploaInput = document.getElementById('uploadfile');
			document.getElementById('uploadfile').click();
		    // 当用户上传时触发事件
		    uploaInput.onchange=function(){
		    	readFile(this);
		    }
		    //处理图片并添加都dom中的函数
		    let readFile=function(obj){
		    	// 获取input里面的文件组
		    	let fileList=obj.files;
		    	//对文件组进行遍历，可以到控制台打印出fileList去看看
		    	for(let i=0;i<fileList.length;i++){
		    		var formData = new FormData();
		    		formData.append('path', fileList[i].name)
		    		formData.append('file', fileList[i])
		    		let url = credentials.serverDomain+ '/open/v1/file/upload'
		    		mui.ajax(url, {
		    			data: formData,
		    			processData: false,
		    			contentType: false,
		    			type:'post',
		    			headers: {
		    			  'bucket': credentials.bucket,
		    			  'Authorization': credentials.authorization,
		    			  'secretId': credentials.secretId,
		    			},
		    			success:function(res){
		    				imgList.push(res.data.url)
							const gallery = document.getElementById('imageGallery');  
							const photoBtn = document.getElementById('photoBtn');  
							// imgList.forEach( item=> { // 假设data是一个包含图片URL的数组  
								const img = document.createElement('img');  
								img.src = res.data.url; // 假设每个图片对象都有一个url属性
								// gallery.appendChild(img); // 将图片添加到div中
								gallery.insertBefore(img,photoBtn);
							// }); 
							console.log('sdd', imgList);
		    			},
		    			error:function(error){
		    				//异常处理；
		    				console.log(error);
		    			}
		    		});
		    	}
		    }
		}
		window.onload = function() {
			if (getQueryParam('openId')) {
				if(!getQueryParam('externalUserid')) {
					mui.alert('无权限访问', '提示', '确定');
				} else {
					h5Type = getQueryParam('h5Type')
					if (h5Type == 19) {
						showCityLevel();
						raffleInfo();
						raffleRecord();
						document.getElementById('lotteryPage').style.display = "block"
					} else if (h5Type == 20) {
						findCollectList()
						document.getElementById('collectPage').style.display = "block"
					}
				}
			} 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){
						h5Type = res.data.h5Type
						if (h5Type == 19) {
							document.getElementById('collectPage').style.display = "none"
							document.getElementById('lotteryPage').style.display = "block"
							// if (!res.data.externalUserid) {
								// 进行下一步企微授权
								gerQwAuth(bId, res.data.openId);
							// }
						} else if (h5Type == 20){
							document.getElementById('collectPage').style.display = "block"
							document.getElementById('lotteryPage').style.display = "none"
							// if (!res.data.externalUserid) {
								// 进行下一步企微授权
								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);
					}
				});
		};
		function getCosObj() {
			mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/p/getAuthorization',{
				data:{
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				headers:{'Content-Type':'application/json'},
				success:function(res){
					credentials = res.data.info
					// 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
					credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
					console.log('credentials2', credentials);
				},
				error:function(error){
					//异常处理；
					console.log(error);
				}
			});
		};
		// 发送祝福
		function handleSendText() {
			let bId = getQueryParam('bId')
			let openId = getQueryParam('openId')
			let textareaResult = document.getElementById("textarea").value;
			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/add', {
				data:{
					bId: bId,
					openId: openId,
					content: textareaResult,
					imgList: imgList,
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				headers:{'Content-Type':'application/json'},
				success:function(res){
					if (res.code == 1) {
						mui.toast('发送成功');
						document.getElementById('dialogText').style.display = 'none';
						imgList = []
						document.getElementById("textarea").innerHTML = "";
						findCollectList()
					} else {
						mui.toast(res.msg);
					}
				},
				error:function(error){
					//异常处理；
					console.log(error);
				}
			});
		};
		// 获取用户故事收集列表
		function findCollectList() {
			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/findCollectList', {
				data:{
				},
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				success:function(res){
					itemList = res.data||[]
					itemIndex = 0
					onShowItem()
				},
				error:function(error){
					//异常处理；
					console.log(error);
				}
			});
		};
		function getRandomArbitrary(min, max) {
		  return Math.floor(Math.random() * (max - min) + min);
		}
		function showItem(data){
			var showItem = document.getElementById('showItem')
			var infoName = document.getElementById('infoName')
			var infoDsc = document.getElementById('infoDsc')
			var avatar = document.getElementById('avatar')
			avatar.src = data.avatar
			infoName.innerText = data.clientName
			infoDsc.innerText = data.content
			var  X = getRandomArbitrary(15,125)
			if(data.imgList&&data.imgList.length){//有图片
				showItem.classList.add("show_img_item")
				var infoImg = document.getElementById('infoImg')
				infoImg.src = data.imgList[0]
				var Y = getRandomArbitrary(175,208)
			}else{//无图片
				showItem.classList.remove("show_img_item")
				var Y = getRandomArbitrary(15,157)
			}
			showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
			showItem.classList.add("add_animation_item")
			setTimeout(()=>{
				showItem.classList.remove("add_animation_item")
			},3500)
		}
		function onShowItem(){
			if(itemTimer){
				clearTimeout(itemTimer)
				itemTimer = null
			}
			if(itemList.length){
				var data = itemList[itemIndex]
				showItem(data)
				if(itemIndex<itemList.length-1){
					itemIndex++
				}else{
					itemIndex = 0
				}
				itemTimer = setTimeout(()=>{
					onShowItem()
				},4000)
			}
		}
		document.getElementById('sendBtn').addEventListener('click', function() {
			document.getElementById('dialogText').style.display = 'block';
			if(itemTimer){
				clearTimeout(itemTimer)
				itemTimer = null
			}
			// 获取腾讯COS对象存储的实例对象
			getCosObj();
		});
		document.getElementById('closeText').addEventListener('click', function() {
			document.getElementById('dialogText').style.display = 'none';
			imgList = []
			document.getElementById("textarea").innerHTML = "";
			onShowItem()
		});
		// 截取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,
			});
			mui.ajax('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json',{
				data:{
				},
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				success:function(res){
					picker.setData(res)
				},
				error:function(error){
					//异常处理；
					console.log(error);
				}
			});
			let provinceResult = document.getElementById('province');
			let cityResult = document.getElementById('city');
			document.getElementById("showCityPicker").addEventListener('click', function(event) {
				event.stopPropagation();
				// 默认第一层显示第1项;第二层显示第2项
				picker.pickers[0].setSelectedIndex(0);
				picker.pickers[1].setSelectedIndex(2);
				picker.show(function(selectItems) {
					document.getElementById('placeholderCity').style.display = "none"
					var text1 = selectItems[0].text;
					var text2 = selectItems[1].text;
					provinceResult.innerText = text1
					cityResult.innerText = text2
				})
			});
		};
		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;  
		  tabcontent = document.getElementsByClassName("tab-content");  
		  for (i = 0; i < tabcontent.length; i++) {  
		    tabcontent[i].style.display = "none";  
		  }  
		  tablinks = document.getElementsByClassName("tab-link");  
		  for (i = 0; i < tablinks.length; i++) {  
		    tablinks[i].className = tablinks[i].className.replace(" active", "");  
		  }  
		  
		  // 显示当前tab内容，并添加激活类到链接  
		  document.getElementById(tabName).style.display = "block";  
		  evt.currentTarget.className += " active";  
		};
		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>