wfg
/
lottery


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620
							<!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://res.wx.qq.com/open/js/jweixin-1.6.0.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: 315rem;
		height: 72rem;
		background: #FEDFC9;
		border-radius: 10remx;
		padding: 9rem 10rem 8rem;
		display: flex;
		align-items: center;
		margin: 0 auto 10rem;
	}
	.prize-img {
		width: 55rem;
		height: 55rem;
		border-radius: 10rem;
		margin-right: 8rem;
	}
	.get-btn {
		width: 72px;
		height: 30px;
		background: #FF4646;
		border-radius: 17px;
		font-size: 14px;
		color: #FFFFFF;
		margin-left: 30px;
	}
	.prize-name {
		font-size: 14rem;
		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;
		overflow: hidden;
	}
	.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: 154rem;
		/* 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( 48deg, #92E4FC 0%, #D0E7F5 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;
	}
	.upload-class {
		min-width: 80rem;
		height: 80rem;
		line-height: 80rem;
		font-size: 14px;
		border: 1px solid #c1bfa9;
		border-radius: 10rem;
		text-align: center;
		margin-top: 18rem;
		margin-right: 35rem;
		color: #999;
	}
</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])
					// 显示上传中状态  
					
					const gallery = document.getElementById('imageGallery');  
					const photoBtn = document.getElementById('photoBtn'); 
					const upload = document.createElement('div');
					upload.className = 'upload-class';
					upload.innerHTML = '上传中...'
					gallery.insertBefore(upload,photoBtn);
		    		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 img = document.createElement('img');
							img.className = 'upload-img';
							img.src = res.data.url;
							gallery.insertBefore(img,photoBtn);
							gallery.removeChild(upload);
		    			},
		    			error:function(error){
		    				//异常处理；
		    				console.log(error);
		    			}
		    		});
		    	}
		    }
		}
		window.onload = function() {
			if (localStorage.getItem('openId')) {
				if(!getQueryParam('externalUserid')) {
					let bId = getQueryParam('bId')
					gerQwAuth(bId);
				} else {
					h5Type = getQueryParam('h5Type')
					getQyWxSign()
					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';
		};
		// 内容类型的分享页，获取企业微信的签名
		function getQyWxSign () {
		  let shareUrl = `${window.location.origin}?bId=${getQueryParam('bId')}&h5Type=${getQueryParam('h5Type')}`
		  mui.ajax('https://wlapi.wefanbot.com/scrm/v1/ct-share/p/getSignature',{
			data:{
				url: window.location.href
			},
			dataType:'json',//服务器返回json格式数据
			type:'get',//HTTP请求类型
			success:function(res){
					if (res.code === 1) {
						wx.config({
						  debug: false,
						  appId: res.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
						  timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						  nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						  signature: res.data.signature, // 必填，签名，见附录1
						  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
						})
						// 分享接口仅激活的成员数超过200人且已经认证的企业才可在微信上调用。
						wx.ready(() => {
							let shareData = {
								link: shareUrl,
								title: '寻找可靠的伙伴——宝骏14周年车主故事征集', // 分享标题
								desc: '暨宝骏云海新车上市500万车主送祝福有奖活动，说出你和宝骏的故事', // 分享描述
								imgUrl: 'http://wfg-1631.oss.wefanbot.com/imgUrl.jpg',
							}
						  // 分享到朋友圈
						  wx.updateAppMessageShareData(shareData)
						  // 分享给朋友
						  wx.updateTimelineShareData(shareData);
						  // 配置失败的回调函数
						  wx.error(function (res) {
							  // 配置失败
							  console.log('配置失败', res);
						  })
						})
					}
			},
			error:function(error){
				//异常处理；
				console.log(error);
			}
		  })
		}
		// 公众号授权，获取code
		function getAuth() {
			// 获取url上的code
			let code = getQueryParam('code')
			if (code) {
				let bId = getQueryParam('bId')
				mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-client/p/getInfoByh5Code',{
					data:{
						code: code,
						bId: bId,
					},
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					success:function(res){
						h5Type = res.data.h5Type
						localStorage.setItem('openId', res.data.openId)
						if (h5Type == 19) {
							document.getElementById('collectPage').style.display = "none"
							document.getElementById('lotteryPage').style.display = "block"
							// if (!res.data.externalUserid) {
								// 进行下一步企微授权
								gerQwAuth(bId);
							// }
						} else if (h5Type == 20){
							document.getElementById('collectPage').style.display = "block"
							document.getElementById('lotteryPage').style.display = "none"
							// if (!res.data.externalUserid) {
								// 进行下一步企微授权
								gerQwAuth(bId);
							// }
						}
					},
					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) {
				let link = window.location.href
				mui.ajax('https://wlapi.wefanbot.com/p/insuite/p/getOAUrl',{
					data:{
						bId: bId,
						openId: localStorage.getItem('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('https://saasapi.wefango.com/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 textareaResult = document.getElementById("textarea").value;
			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-collect/p/add', {
				data:{
					bId: bId,
					openId: localStorage.getItem('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").value = "";
						findCollectList()
						const gallery = document.getElementById('imageGallery');
						// 遍历gallery的所有子元素  
						var imgsToRemove = gallery.querySelectorAll('img.upload-img'); 
						// 遍历找到的元素并移除它们  
						imgsToRemove.forEach(function(img) {  
						    gallery.removeChild(img);  
						});
					} else {
						mui.toast(res.msg);
					}
				},
				error:function(error){
					//异常处理；
					console.log(error);
				}
			});
		};
		// 获取用户故事收集列表
		function findCollectList() {
			mui.ajax('https://wlapi.wefanbot.com/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 = []
			const gallery = document.getElementById('imageGallery');
			// 遍历gallery的所有子元素
			var imgsToRemove = gallery.querySelectorAll('img.upload-img'); 
			// 遍历找到的元素并移除它们  
			imgsToRemove.forEach(function(img) {  
			    gallery.removeChild(img);  
			});
			document.getElementById("textarea").value = "";
			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 raffleId = getQueryParam('bId')
			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId',{
				data:{
					openId: localStorage.getItem('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 raffleId = getQueryParam('bId')
				mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/lottery',{
					data:{
						externalUserid: externalUserid,
						openId: localStorage.getItem('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 raffleId = getQueryParam('bId')
			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleRecord',{
				data:{
					openId: localStorage.getItem('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==-1 || record.status==1) ? 'disabled' : ''} class="get-btn" onclick="handleOpenForm(${record.id})">${record.status==1 ? '已领取' : (record.status==-1 ? '审核中' : '领取')}</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');  
			document.body.style.overflow = 'hidden';
		};
		// 切换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('https://wlapi.wefanbot.com/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()
							document.body.style.overflow = 'auto';
						} 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');
			document.body.style.overflow = 'auto';
		});
		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.body.style.overflow = 'hidden';
		});
		document.getElementById('notice').addEventListener('click', function() {
			var div = document.getElementById('notice-body');  
			// 检查点击事件的目标是否不是div本身或其子元素  
			if (!div.contains(event.target)) {
				document.getElementById('notice').style.display = 'none';
				document.body.style.overflow = 'auto';
			}
		});
		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>