Home Explore Help
Register Sign In
wfg
/
lottery
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 7cd05b1ca1
Branches Tags
lottery
/
lottery
/
index.html

index.html 43 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 		<meta charset="utf-8">
    5. 

  5. 		<title>幸运大抽奖</title>
    6. 

  6. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    7. 

  7. 		<link href="css/mui.css" rel="stylesheet" />
    8. 

  8. 		<link href="css/mui.picker.css" rel="stylesheet" />
    9. 

  9. 		<link href="css/mui.poppicker.css" rel="stylesheet" />
    10. 

  10. 		<script src="js/mui.js"></script>
    11. 

  11. 		<script src="js/mui.picker.js"></script>
    12. 

  12. 		<script src="js/mui.poppicker.js"></script>
    13. 

  13. 		<script type="text/javascript">
    14. 

  14. 			mui.init()
    15. 

  15. 			(function flexible (window, document) {
    16. 

  16. 				let docEl = document.documentElement
    17. 

  17. 				let dpr = window.devicePixelRatio || 1
    18. 

  18. 			
    19. 

  19. 				// adjust body font size
    20. 

  20. 				function setBodyFontSize () {
    21. 

  21. 					if (document.body) {
    22. 

  22. 						document.body.style.fontSize = (12 * dpr) + 'px'
    23. 

  23. 					} else {
    24. 

  24. 						document.addEventListener('DOMContentLoaded', setBodyFontSize)
    25. 

  25. 					}
    26. 

  26. 				}
    27. 

  27. 				setBodyFontSize()
    28. 

  28. 			
    29. 

  29. 				// set 1rem = viewWidth / 10
    30. 

  30. 				function setRemUnit () {
    31. 

  31. 					let rem = docEl.clientWidth / 375
    32. 

  32. 					docEl.style.fontSize = rem + 'px'
    33. 

  33. 				}
    34. 

  34. 			
    35. 

  35. 				setRemUnit()
    36. 

  36. 			
    37. 

  37. 				// reset rem unit on page resize
    38. 

  38. 				window.addEventListener('resize', setRemUnit)
    39. 

  39. 				window.addEventListener('pageshow', function(e) {
    40. 

  40. 					if (e.persisted) {
    41. 

  41. 						setRemUnit()
    42. 

  42. 					}
    43. 

  43. 				})
    44. 

  44. 			
    45. 

  45. 				// detect 0.5px supports
    46. 

  46. 				if (dpr >= 2) {
    47. 

  47. 					let fakeBody = document.createElement('body')
    48. 

  48. 					let testElement = document.createElement('div')
    49. 

  49. 					testElement.style.border = '.5px solid transparent'
    50. 

  50. 					fakeBody.appendChild(testElement)
    51. 

  51. 					docEl.appendChild(fakeBody)
    52. 

  52. 					if (testElement.offsetHeight === 1) {
    53. 

  53. 						docEl.classList.add('hairlines')
    54. 

  54. 					}
    55. 

  55. 					docEl.removeChild(fakeBody)
    56. 

  56. 				}
    57. 

  57. 			}(window, document));
    58. 

  58. 			(function() {
    59. 

  59. 				if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
    60. 

  60. 					handleFontSize()
    61. 

  61. 				} else {
    62. 

  62. 					if (document.addEventListener) {
    63. 

  63. 						document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
    64. 

  64. 					} else if (document.attachEvent) {
    65. 

  65. 						document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
    66. 

  66. 					}
    67. 

  67. 				}
    68. 

  68. 				function handleFontSize () {
    69. 

  69. 					// 设置网页字体为默认大小
    70. 

  70. 					WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
    71. 

  71. 					// 重写设置网页字体大小的事件
    72. 

  72. 					WeixinJSBridge.on('menu:setfont', function() {
    73. 

  73. 						WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
    74. 

  74. 					})
    75. 

  75. 				}
    76. 

  76. 			})()
    77. 

  77. 		</script>
    78. 

  78. 	</head>
    79. 

  79. <style type="text/css">
    80. 

  80. 	body {
    81. 

  81. 	    margin: 0;
    82. 

  82. 		background: #FFFFFF;
    83. 

  83. 	}
    84. 

  84. 	.bg-img {
    85. 

  85. 		width: 100%;
    86. 

  86. 		height: 100%;
    87. 

  87. 	}
    88. 

  88. 	.btn {
    89. 

  89. 		display: flex;
    90. 

  90. 		justify-content: center;
    91. 

  91. 		align-items: center;
    92. 

  92. 	}
    93. 

  93. 	.btn-img {
    94. 

  94. 		width: 290px;
    95. 

  95. 	}
    96. 

  96. 	.rule {
    97. 

  97. 		width: 100%;
    98. 

  98. 		height: 509px;
    99. 

  99. 		padding: 65px 15px 40px;
    100. 

  100. 		background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
    101. 

  101. 		margin-top: -60px;
    102. 

  102. 	}
    103. 

  103. 	.rule-body {
    104. 

  104. 		height: 404px;
    105. 

  105. 		background: #FEE8D0;
    106. 

  106. 		border-radius: 20px;
    107. 

  107. 		padding: 20px;
    108. 

  108. 	}
    109. 

  109. 	.tabs {
    110. 

  110. 		display: flex;  
    111. 

  111. 		justify-content: space-around;
    112. 

  112. 		align-items: center;
    113. 

  113. 		padding: 0 2px;
    114. 

  114. 		margin: 0 auto;
    115. 

  115. 		width: 255px;
    116. 

  116. 		height: 34px;
    117. 

  117. 		background: rgba(255, 125, 97, 0.2);
    118. 

  118. 		border-radius: 17px 17px 17px 17px;
    119. 

  119. 	}
    120. 

  120. 	.tab-link {  
    121. 

  121. 	  border: none;  
    122. 

  122. 	  outline: none;  
    123. 

  123. 	  cursor: pointer;
    124. 

  124. 	  transition: 0.3s;
    125. 

  125. 	  color: #FF765B;
    126. 

  126. 	  background: unset; 
    127. 

  127. 	  width: 125px;
    128. 

  128. 	  height: 30px;
    129. 

  129. 	  border-radius: 17px
    130. 

  130. 	}
    131. 

  131. 	.tab-link:active {  
    132. 

  132. 	  background: rgba(255, 125, 97, 0.2);  
    133. 

  133. 	}  
    134. 

  134. 	  
    135. 

  135. 	.tab-link.active {  
    136. 

  136. 	  background: #FFFFFF;
    137. 

  137. 	}  
    138. 

  138. 	  
    139. 

  139. 	.tab-content {
    140. 

  140. 		p {
    141. 

  141. 		    font-weight: 400;
    142. 

  142. 		    font-size: 14px;
    143. 

  143. 		    color: #CB4E35;
    144. 

  144. 		    margin-top: 20px;
    145. 

  145. 		}
    146. 

  146. 	}
    147. 

  147. 	.record-list {
    148. 

  148. 		overflow-y: auto;
    149. 

  149. 		height: 300px;
    150. 

  150. 		margin-top: 18px;
    151. 

  151. 	}
    152. 

  152. 	.record-item {
    153. 

  153. 		width: 315px;
    154. 

  154. 		height: 72px;
    155. 

  155. 		background: #FEDFC9;
    156. 

  156. 		border-radius: 10px;
    157. 

  157. 		padding: 9px 10px 8px;
    158. 

  158. 		display: flex;
    159. 

  159. 		align-items: center;
    160. 

  160. 		margin: 0 auto 10px;
    161. 

  161. 	}
    162. 

  162. 	.prize-img {
    163. 

  163. 		width: 55px;
    164. 

  164. 		height: 55px;
    165. 

  165. 		border-radius: 10px;
    166. 

  166. 		margin-right: 8px;
    167. 

  167. 	}
    168. 

  168. 	.get-btn {
    169. 

  169. 		width: 72px;
    170. 

  170. 		height: 30px;
    171. 

  171. 		background: #FF4646;
    172. 

  172. 		border-radius: 17px;
    173. 

  173. 		font-size: 14px;
    174. 

  174. 		color: #FFFFFF;
    175. 

  175. 		margin-left: 30px;
    176. 

  176. 	}
    177. 

  177. 	.prize-name {
    178. 

  178. 		font-weight: 500;
    179. 

  179. 		color: #FF4646;
    180. 

  180. 	}
    181. 

  181. 	.prize-time {
    182. 

  182. 		font-size: 12px;
    183. 

  183. 		color: #FF6767;
    184. 

  184. 	}
    185. 

  185. 	.mui-input-group {
    186. 

  186. 		padding-top: 15px;
    187. 

  187. 	}
    188. 

  188. 	.mui-input-group:before {
    189. 

  189. 		background: none;
    190. 

  190. 	}
    191. 

  191. 	.mui-input-group:after {
    192. 

  192. 		background: none;
    193. 

  193. 	}
    194. 

  194. 	.mui-input-group .mui-input-row:after {
    195. 

  195. 		background: none;
    196. 

  196. 	}
    197. 

  197. 	.mui-input-group .mui-input-row {
    198. 

  198. 	    height: 60px;
    199. 

  199. 	}
    200. 

  200. 	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    201. 

  201. 		font-weight: 400;
    202. 

  202. 		font-size: 14px;
    203. 

  203. 		color: #CCCCCC;
    204. 

  204. 		float: right;
    205. 

  205. 	}
    206. 

  206. 	::-moz-placeholder { /* Firefox 19+ */  
    207. 

  207. 		font-weight: 400;
    208. 

  208. 		font-size: 14px;
    209. 

  209. 		color: #CCCCCC;
    210. 

  210. 		float: right;
    211. 

  211. 	}
    212. 

  212. 	:-ms-input-placeholder { /* IE 10+ */ 
    213. 

  213. 		font-weight: 400;
    214. 

  214. 		font-size: 14px;
    215. 

  215. 		color: #CCCCCC;
    216. 

  216. 		float: right;
    217. 

  217. 	}
    218. 

  218. 	:-moz-placeholder { /* Firefox 18- */ 
    219. 

  219. 		font-weight: 400;
    220. 

  220. 		font-size: 14px;
    221. 

  221. 		color: #CCCCCC;
    222. 

  222. 		float: right;
    223. 

  223. 	}
    224. 

  224. 	.mui-input-clear {
    225. 

  225. 		font-weight: 500;
    226. 

  226. 		font-size: 14px;
    227. 

  227. 		color: #222222;
    228. 

  228. 		text-align: right;
    229. 

  229. 		padding: 10px 0;
    230. 

  230. 		padding-right: 30px !important;
    231. 

  231. 	}
    232. 

  232. 	.mui-input-row label {
    233. 

  233. 		font-weight: 500;
    234. 

  234. 		font-size: 14px;
    235. 

  235. 		color: #666666;
    236. 

  236. 	}
    237. 

  237. 	.save-btn {
    238. 

  238. 		width: 305px;
    239. 

  239. 		height: 52px;
    240. 

  240. 		background: #FF4646;
    241. 

  241. 		border-radius: 20px;
    242. 

  242. 		border: none;
    243. 

  243. 		font-weight: 500;
    244. 

  244. 		font-size: 16px;
    245. 

  245. 		color: #FFFFFF;
    246. 

  246. 	}
    247. 

  247. 	.pop-form {
    248. 

  248. 		width: 100%;  
    249. 

  249. 		background-color: #FFFFFF;  
    250. 

  250. 		height: 524px; /* 根据需要调整高度 */  
    251. 

  251. 		position: fixed; /* 或 absolute，根据需要定位 */  
    252. 

  252. 		bottom: -524px; /* 初始位置在可视区域外 */  
    253. 

  253. 		transition: bottom 0.5s ease-in-out; /* 平滑过渡效果 */  
    254. 

  254. 		left: 0;
    255. 

  255. 		z-index: 1001; /* 确保在遮罩层之上 */  
    256. 

  256. 		box-sizing: border-box;  
    257. 

  257. 		padding: 24px 25px 44px 15px;  
    258. 

  258. 		border-radius: 15px 15px 0px 0px;
    259. 

  259. 	}
    260. 

  260. 	.city-data {
    261. 

  261. 		float: right;
    262. 

  262. 		width: 65%;
    263. 

  263. 		height: 40px;
    264. 

  264. 		padding: 10px 30px 10px 10px;
    265. 

  265. 		display: flex;
    266. 

  266. 		font-weight: 500;
    267. 

  267. 		font-size: 14px;
    268. 

  268. 		color: #222222;
    269. 

  269. 		justify-content: flex-end;
    270. 

  270. 	}
    271. 

  271. 	.no-data {
    272. 

  272. 		width: 100%;
    273. 

  273. 		font-weight: 400;
    274. 

  274. 		font-size: 14px;
    275. 

  275. 		color: #CCCCCC;
    276. 

  276. 		display: flex;
    277. 

  277. 		align-items: center;
    278. 

  278. 		justify-content: flex-end;
    279. 

  279. 	}
    280. 

  280. 	.pop-form.show {  
    281. 

  281. 	  bottom: 0; /* 显示时位置 */  
    282. 

  282. 	}
    283. 

  283. 	.pop-title {
    284. 

  284. 		display: flex;
    285. 

  285. 		align-items: center;
    286. 

  286. 		font-weight: bold;
    287. 

  287. 		font-size: 16px;
    288. 

  288. 		color: #222222;
    289. 

  289. 	}
    290. 

  290. 	.close-Icon {
    291. 

  291. 		width: 24px;
    292. 

  292. 		height: 24px;
    293. 

  293. 		margin-right: 100px;
    294. 

  294. 	}
    295. 

  295. 	.right-Icon {
    296. 

  296. 		width: 16px;
    297. 

  297. 		height: 16px;
    298. 

  298. 		margin-left: 5px;
    299. 

  299. 	}
    300. 

  300. 	.overlay {  
    301. 

  301. 	  position: fixed;  
    302. 

  302. 	  top: 0;  
    303. 

  303. 	  left: 0;  
    304. 

  304. 	  width: 100%;  
    305. 

  305. 	  height: 100%;  
    306. 

  306. 	  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */  
    307. 

  307. 	  z-index: 1000; /* 确保遮罩层在顶部 */
    308. 

  308. 	  transition: opacity 0.5s ease; /* 可选：添加透明度过渡效果 */  
    309. 

  309. 	  display: none;
    310. 

  310. 	}
    311. 

  311. 	.prize-content {
    312. 

  312. 		width: fit-content;
    313. 

  313. 		margin: -96% auto 0
    314. 

  314. 		
    315. 

  315. 	}
    316. 

  316. 	#grid-container {  
    317. 

  317. 	  display: grid;  
    318. 

  318. 	  grid-template-columns: repeat(3, 1fr); /* 创建3列，每列等宽 */  
    319. 

  319. 	  gap: 10px; /* 格子之间的间距 */  
    320. 

  320. 	  padding: 10px;  
    321. 

  321. 	}  
    322. 

  322. 	  
    323. 

  323. 	.grid-item {  
    324. 

  324. 		width: 78px; /* 使图片宽度适应格子 */
    325. 

  325. 		height: 78px; /* 保持图片原始宽高比 */ 
    326. 

  326. 	  position: relative; /* 为了让标题能够绝对定位 */  
    327. 

  327. 	  overflow: hidden; /* 确保图片不会溢出格子 */  
    328. 

  328. 	  background-image: url(./img/prize-bg.png);
    329. 

  329. 	  display: flex;
    330. 

  330. 	  justify-content: center;
    331. 

  331. 	  align-items: center;
    332. 

  332. 	  background-size: cover;
    333. 

  333. 	  flex-direction: column;
    334. 

  334. 	  padding-top: 8px;
    335. 

  335. 	  transition: transform 0.3s, opacity 0.3s; /* 平滑过渡效果 */  
    336. 

  336. 	}  
    337. 

  337. 	  
    338. 

  338. 	.grid-item img {  
    339. 

  339. 	  width: 48px; /* 使图片宽度适应格子 */  
    340. 

  340. 	  height: 48px; /* 保持图片原始宽高比 */  
    341. 

  341. 	  display: block; /* 移除图片下方的默认空间 */  
    342. 

  342. 	}  
    343. 

  343. 	  
    344. 

  344. 	.grid-item-title {  
    345. 

  345. 	  font-weight: 400;
    346. 

  346. 	  font-size: 10px;
    347. 

  347. 	  color: #CC745A;
    348. 

  348. 	  width: 70px;
    349. 

  349. 	  white-space: nowrap;
    350. 

  350. 	  overflow: hidden;
    351. 

  351. 	  text-overflow: ellipsis;
    352. 

  352. 	  text-align: center;
    353. 

  353. 	}
    354. 

  354. 	/* ... 其他样式保持不变 ... */  
    355. 

  355. 	  
    356. 

  356. 	.rotating {  
    357. 

  357. 	    animation: rotateGrid 3s infinite linear;  
    358. 

  358. 	}  
    359. 

  359. 	  
    360. 

  360. 	@keyframes rotateGrid {  
    361. 

  361. 	    from {  
    362. 

  362. 	        transform: rotate(0deg);  
    363. 

  363. 	    }  
    364. 

  364. 	    to {  
    365. 

  365. 	        transform: rotate(360deg);  
    366. 

  366. 	    }  
    367. 

  367. 	}  
    368. 

  368. 	  
    369. 

  369. 	.actives {  
    370. 

  370. 	    border: 2px solid #df2727;
    371. 

  371. 		border-radius: 15px;
    372. 

  372. 	}
    373. 

  373. 

  374. 	.lottery-tip {
    375. 

  375. 		text-align: center;
    376. 

  376. 		font-size: 14px;
    377. 

  377. 		color: #FFFFFF;
    378. 

  378. 		font-weight: 600;
    379. 

  379. 	}
    380. 

  380. 	.dialog {
    381. 

  381. 		position: fixed;
    382. 

  382. 		top: 0;  
    383. 

  383. 		left: 0;  
    384. 

  384. 		width: 100%;  
    385. 

  385. 		height: 100%;  
    386. 

  386. 		background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */  
    387. 

  387. 		z-index: 1000; /* 确保遮罩层在顶部 */
    388. 

  388. 		transition: opacity 0.5s ease; /* 可选：添加透明度过渡效果 */  
    389. 

  389. 		display: none;
    390. 

  390. 	}
    391. 

  391. 	.dialog-body {
    392. 

  392. 		width: 100%;
    393. 

  393. 		z-index: 1001; /* 确保遮罩层在顶部 */
    394. 

  394. 		display: flex;
    395. 

  395. 		flex-direction: column;
    396. 

  396. 		align-items: center;
    397. 

  397. 		justify-content: center;
    398. 

  398. 	}
    399. 

  399. 	.dialog-tip {
    400. 

  400. 		width: 100%;
    401. 

  401. 		height: 100px;
    402. 

  402. 	}
    403. 

  403. 	.dialog-bg {
    404. 

  404. 		width: 295px;
    405. 

  405. 		height: 251px;
    406. 

  406. 		position: relative;
    407. 

  407. 	}
    408. 

  408. 	.prize-msg {
    409. 

  409. 		position: absolute;
    410. 

  410. 		text-align: center;
    411. 

  411. 	}
    412. 

  412. 	.money-title {
    413. 

  413. 		font-weight: 500;
    414. 

  414. 		font-size: 16px;
    415. 

  415. 		color: #FF4E4E;
    416. 

  416. 		padding-top: 90px;
    417. 

  417. 		padding-bottom: 10px;
    418. 

  418. 	}
    419. 

  419. 	.money-content {
    420. 

  420. 		margin-bottom: 30px;
    421. 

  421. 		height: 60px;
    422. 

  422. 		display: flex;
    423. 

  423. 		justify-content: center;
    424. 

  424. 		align-items: center;
    425. 

  425. 	}
    426. 

  426. 	.prize-money {
    427. 

  427. 		font-weight: bold;
    428. 

  428. 		font-size: 60px;
    429. 

  429. 		color: #FF4E4E;
    430. 

  430. 	}
    431. 

  431. 	.prize-unit {
    432. 

  432. 		font-weight: 500;
    433. 

  433. 		font-size: 16px;
    434. 

  434. 		color: #FF4E4E;
    435. 

  435. 		padding-left: 10px;
    436. 

  436. 		padding-top: 28px;
    437. 

  437. 	}
    438. 

  438. 	.dialog-btn {
    439. 

  439. 		width: 235px;
    440. 

  440. 		height: 52px;
    441. 

  441. 		margin-bottom: 10px;
    442. 

  442. 	}
    443. 

  443. 	.money-tip {
    444. 

  444. 		font-weight: 400;
    445. 

  445. 		font-size: 12px;
    446. 

  446. 		color: #999999;
    447. 

  447. 		margin-bottom: 15px;
    448. 

  448. 	}
    449. 

  449. 	.goods-img {
    450. 

  450. 		width: 100px;
    451. 

  451. 		height: 100px;
    452. 

  452. 		margin: 70px 0 10px;
    453. 

  453. 	}
    454. 

  454. 	.goods-name {
    455. 

  455. 		font-weight: 500;
    456. 

  456. 		font-size: 16px;
    457. 

  457. 		color: #222222;
    458. 

  458. 		margin-bottom: 20px;
    459. 

  459. 	}
    460. 

  460. 	.dialog-close {
    461. 

  461. 		width: 30px;
    462. 

  462. 		height: 30px;
    463. 

  463. 		margin-top: 20px;
    464. 

  464. 	}
    465. 

  465. 	.mui-poppicker {
    466. 

  466. 		z-index: 1002 !important;
    467. 

  467. 	}
    468. 

  468. 	.event-notice {
    469. 

  469. 		width: 30px;
    470. 

  470. 		height: 84px;
    471. 

  471. 		background: rgba(255,255,255,0.5);
    472. 

  472. 		border-radius: 15px 0px 0px 15px;
    473. 

  473. 		border: 1px solid #FFFFFF;
    474. 

  474. 		font-weight: 500;
    475. 

  475. 		font-size: 14px;
    476. 

  476. 		color: #FF4E4E;
    477. 

  477. 		position: absolute;
    478. 

  478. 		right: 0;
    479. 

  479. 		top: 20%;
    480. 

  480. 		writing-mode: vertical-rl;
    481. 

  481. 		text-align: center;
    482. 

  482. 		padding-right: 4px;
    483. 

  483. 	}
    484. 

  484. 	.notice-body  {
    485. 

  485. 		width: 80%;
    486. 

  486. 		z-index: 1001;
    487. 

  487. 		height: 500px;
    488. 

  488. 		overflow-y: auto;
    489. 

  489. 		background: #FFF;
    490. 

  490. 		margin: 40px;
    491. 

  491. 		border-radius: 20px;
    492. 

  492. 		padding: 20px;
    493. 

  493. 		font-size: 14px;
    494. 

  494. 		border: 4px solid #eb845a;
    495. 

  495. 	}
    496. 

  496. 	.bg_content {
    497. 

  497. 		height: calc(100vh + 44rem);
    498. 

  498. 		width: 100vw;
    499. 

  499. 		background: url('./img/blessing.png');
    500. 

  500. 		background-size: cover;
    501. 

  501. 		margin-top: -44rem;
    502. 

  502. 	}
    503. 

  503. 	.show_box{
    504. 

  504. 		position: absolute;
    505. 

  505. 		top: 198rem;
    506. 

  506. 		//background: #FFFFFF;
    507. 

  507. 		left: 15rem;
    508. 

  508. 		right: 15rem;
    509. 

  509. 		height: 290rem;
    510. 

  510. 	}
    511. 

  511. 	.show_box .show_item{
    512. 

  512. 		width: 20rem;
    513. 

  513. 		height: 20rem;
    514. 

  514. 		position: relative;
    515. 

  515. 		top: 15rem;
    516. 

  516. 		left: 15rem;
    517. 

  517. 		display: none;
    518. 

  518. 	}
    519. 

  519. 	.show_box .show_item.add_animation_item{
    520. 

  520. 		display: block;
    521. 

  521. 		animation: hiddenAvatarItem 0.8s ease-out 2.3s forwards
    522. 

  522. 	}
    523. 

  523. 	.show_box .show_item .avatar_box{
    524. 

  524. 		width: 20rem;
    525. 

  525. 		height: 20rem;
    526. 

  526. 		border-radius: 15rem;
    527. 

  527. 		overflow: hidden;
    528. 

  528. 		position: absolute;
    529. 

  529. 		top: 0;
    530. 

  530. 		left: 0;
    531. 

  531. 		z-index: 2;
    532. 

  532. 		transform: scale(1);
    533. 

  533. 	}
    534. 

  534. 	.show_box .show_item.add_animation_item .avatar_box{
    535. 

  535. 		animation: showAvatarItem 0.3s ease-out 2s forwards;
    536. 

  536. 	}
    537. 

  537. 	.show_box .show_item .avatar_box .avatar{
    538. 

  538. 		width: 20rem;
    539. 

  539. 		height: 20rem;
    540. 

  540. 		object-fit: cover;
    541. 

  541. 	}
    542. 

  542. 	.show_box .show_item .info_box{
    543. 

  543. 		position: absolute;
    544. 

  544. 		top: -15rem;
    545. 

  545. 		left: -15rem;
    546. 

  546. 		z-index: 1;
    547. 

  547. 		background: rgba(255,255,255,0.8);
    548. 

  548. 		border-radius: 15rem;
    549. 

  549. 		border: 1rem solid #FFFFFF;
    550. 

  550. 		width: 240rem;
    551. 

  551. 		padding: 15rem;
    552. 

  552. 		box-sizing: border-box;
    553. 

  553. 	}
    554. 

  554. 	.show_box .show_item.add_animation_item .info_box{
    555. 

  555. 		animation: hiddenItem 0.3s ease-out 2s forwards;
    556. 

  556. 	}
    557. 

  557. 	.show_box .show_item.show_img_item .info_box{
    558. 

  558. 		top: -175rem;
    559. 

  559. 		left: -15rem;
    560. 

  560. 	}
    561. 

  561. 	.show_box .show_item.show_img_item.add_animation_item .info_box{
    562. 

  562. 		animation: hiddenImgItem 0.3s ease-out 2s forwards;
    563. 

  563. 	}
    564. 

  564. 	
    565. 

  565. 	@keyframes showItem {
    566. 

  566. 	    0% {
    567. 

  567. 	        opacity: 0;
    568. 

  568. 	    }
    569. 

  569. 	    100% {
    570. 

  570. 	        opacity: 1;
    571. 

  571. 	    }
    572. 

  572. 	}
    573. 

  573. 	@keyframes showAvatarItem {
    574. 

  574. 	    0% {
    575. 

  575. 	        transform: scale(1);
    576. 

  576. 	    }
    577. 

  577. 	    100% {
    578. 

  578. 	        transform: scale(1.5);
    579. 

  579. 	    }
    580. 

  580. 	}
    581. 

  581. 	@keyframes hiddenAvatarItem {
    582. 

  582. 	    0% {
    583. 

  583. 	        transform: scale(1.5);
    584. 

  584. 			opacity: 1;
    585. 

  585. 	    }
    586. 

  586. 	    100% {
    587. 

  587. 	        transform: scale(1.5);
    588. 

  588. 			opacity: 0;
    589. 

  589. 			top: 135rem;
    590. 

  590. 			left: 172rem;
    591. 

  591. 	    }
    592. 

  592. 	}
    593. 

  593. 	@keyframes hiddenItem {
    594. 

  594. 	    0% {
    595. 

  595. 	        transform: scale(1);
    596. 

  596. 			top: -15rem;
    597. 

  597. 			left: -15rem;
    598. 

  598. 	    }
    599. 

  599. 	    100% {
    600. 

  600. 	        transform: scale(0);
    601. 

  601. 			left:-110rem;
    602. 

  602. 			top: -30rem;
    603. 

  603. 	    }
    604. 

  604. 	}
    605. 

  605. 	@keyframes hiddenImgItem {
    606. 

  606. 	    0% {
    607. 

  607. 	        transform: scale(1);
    608. 

  608. 			top: -175rem;
    609. 

  609. 			left: -15rem;
    610. 

  610. 	    }
    611. 

  611. 	    100% {
    612. 

  612. 	        transform: scale(0);
    613. 

  613. 			left:-110rem;
    614. 

  614. 			top: -115rem;
    615. 

  615. 	    }
    616. 

  616. 	}
    617. 

  617. 	
    618. 

  618. 	.show_box .show_item .info_box .img_box{
    619. 

  619. 		width: 210rem;
    620. 

  620. 		height: 150rem;
    621. 

  621. 		border-radius: 15rem;
    622. 

  622. 		overflow: hidden;
    623. 

  623. 		margin-bottom: 10rem;
    624. 

  624. 		display: none;
    625. 

  625. 	}
    626. 

  626. 	.show_box .show_item.show_img_item .info_box .img_box{
    627. 

  627. 		display: block;
    628. 

  628. 	}
    629. 

  629. 	.show_box .show_item .info_box .img_box .info_img{
    630. 

  630. 		width: 210rem;
    631. 

  631. 		height: 150rem;
    632. 

  632. 		object-fit: cover;
    633. 

  633. 	}
    634. 

  634. 	.show_box .show_item .info_box .info_text{
    635. 

  635. 		
    636. 

  636. 	}
    637. 

  637. 	.show_box .show_item .info_box .info_text .info_name{
    638. 

  638. 		font-weight: 500;
    639. 

  639. 		font-size: 14rem;
    640. 

  640. 		color: #222222;
    641. 

  641. 		line-height: 20rem;
    642. 

  642. 		padding-left: 25rem;
    643. 

  643. 		margin-bottom: 5rem;
    644. 

  644. 	}
    645. 

  645. 	.show_box .show_item .info_box .info_text .info_dsc{
    646. 

  646. 		font-weight: 400;
    647. 

  647. 		font-size: 12rem;
    648. 

  648. 		color: #222222;
    649. 

  649. 		line-height: 17rem;
    650. 

  650. 	}
    651. 

  651. 	.send_btn {
    652. 

  652. 		width: 100%;
    653. 

  653. 		position: fixed;
    654. 

  654. 		bottom: 0rem;
    655. 

  655. 		left: 50%;
    656. 

  656. 		transform: translateX(-50%);
    657. 

  657. 	}
    658. 

  658. 	.dialog_text {
    659. 

  659. 		position: fixed;
    660. 

  660. 		top: 0;  
    661. 

  661. 		left: 0;  
    662. 

  662. 		width: 100%;  
    663. 

  663. 		height: 100%;  
    664. 

  664. 		background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */  
    665. 

  665. 		z-index: 1000; /* 确保遮罩层在顶部 */
    666. 

  666. 		transition: opacity 0.5s ease; /* 可选：添加透明度过渡效果 */  
    667. 

  667. 		display: none;
    668. 

  668. 	}
    669. 

  669. 	.dialog-body {
    670. 

  670. 		width: 100%;
    671. 

  671. 		height: 100vh;
    672. 

  672. 		z-index: 1001; /* 确保遮罩层在顶部 */
    673. 

  673. 		display: flex;
    674. 

  674. 		flex-direction: column;
    675. 

  675. 		align-items: center;
    676. 

  676. 		justify-content: center;
    677. 

  677. 	}
    678. 

  678. 	.text_bg {
    679. 

  679. 		background: url('./img/dialog-text.png');
    680. 

  680. 		background-size: cover;
    681. 

  681. 		width: 100vw;
    682. 

  682. 		height: 368rem;
    683. 

  683. 	}
    684. 

  684. 	.close-text {
    685. 

  685. 		width: 24rem;
    686. 

  686. 		height: 24rem;
    687. 

  687. 		float: right;
    688. 

  688. 		margin-right: 25rem;
    689. 

  689. 		margin-top: 25rem;
    690. 

  690. 	}
    691. 

  691. 	.textarea_style {
    692. 

  692. 		background-color: rgba(255, 255, 255, 0);
    693. 

  693. 		border: unset;
    694. 

  694. 		height: 180rem;
    695. 

  695. 		padding: 0 35rem;
    696. 

  696. 		width: 100%;
    697. 

  697. 		margin: 0;
    698. 

  698. 	}
    699. 

  699. 	.photo-btn {
    700. 

  700. 		width: 80rem;
    701. 

  701. 		height: 80rem;
    702. 

  702. 		margin-top: 18rem;
    703. 

  703. 		margin-left: 35rem;
    704. 

  704. 	}
    705. 

  705. 	.send_text {
    706. 

  706. 		width: 225rem;
    707. 

  707. 		height: 52rem;
    708. 

  708. 		background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
    709. 

  709. 		border-radius: 30rem;
    710. 

  710. 		border: 2rem solid #FFFFFF;
    711. 

  711. 		font-weight: 800;
    712. 

  712. 		font-size: 16px;
    713. 

  713. 		color: #222222;
    714. 

  714. 		margin-top: 15rem;
    715. 

  715. 	}
    716. 

  716. 	.imageGallery {
    717. 

  717. 		width: 100%;
    718. 

  718. 		display: flex;
    719. 

  719. 		overflow-x: auto;
    720. 

  720. 	}
    721. 

  721. 	.imageGallery img{
    722. 

  722. 		width: 80rem;
    723. 

  723. 		height: 80rem;
    724. 

  724. 		margin-top: 18rem;
    725. 

  725. 		margin-left: 35rem;
    726. 

  726. 	}
    727. 

  727. </style>
    728. 

  728. <body>
    729. 

  729. 	<div id="collectPage">
    730. 

  730. 		<div class="bg_content">
    731. 

  731. 			<div class="show_box">
    732. 

  732. 				<div id="showItem" class="show_item">
    733. 

  733. 					<div class="avatar_box">
    734. 

  734. 						<img id="avatar" class="avatar" src="./img/prize-bg.png"/>
    735. 

  735. 					</div>
    736. 

  736. 					<div class="info_box">
    737. 

  737. 						<div class="img_box">
    738. 

  738. 							<img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
    739. 

  739. 						</div>
    740. 

  740. 						<div class="info_text">
    741. 

  741. 							<div id="infoName" class="info_name">不爱吃甜：</div>
    742. 

  742. 							<div id="infoDsc" class="info_dsc">不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜</div>
    743. 

  743. 						</div>
    744. 

  744. 					</div>
    745. 

  745. 				</div>
    746. 

  746. 			</div>
    747. 

  747. 			<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
    748. 

  748. 		</div>
    749. 

  749. 		<div id="dialogText" class="dialog_text">
    750. 

  750. 			<div class="dialog-body">
    751. 

  751. 				<div class="text_bg">
    752. 

  752. 					<img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
    753. 

  753. 					<textarea class="textarea_style" id="textarea"></textarea>
    754. 

  754. 					<div id="imageGallery" class="imageGallery"></div>
    755. 

  755. 					<img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" onclick="uploadImage()" />
    756. 

  756. 					<input type="file" id="uploadfile" style="display: none;" multiple accept='image/*'>
    757. 

  757. 				</div>
    758. 

  758. 				<button class="send_text" onclick="handleSendText()">发送</button>
    759. 

  759. 			</div>
    760. 

  760. 		</div>
    761. 

  761. 	</div>
    762. 

  762. 	<div id="lotteryPage">
    763. 

  763. 		<img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
    764. 

  764. 		<div class="event-notice" id="eventNotice">
    765. 

  765. 			<span>活动须知</span>
    766. 

  766. 		</div>
    767. 

  767. 		<div class="prize-content">
    768. 

  768. 			<div id="grid-container">
    769. 

  769. 					
    770. 

  770. 			</div>  
    771. 

  771. 		</div>
    772. 

  772. 		<div class="btn">
    773. 

  773. 			<img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
    774. 

  774. 		</div>
    775. 

  775. 		<div class="lottery-tip" id="lotteryId"></div>
    776. 

  776. 		<div class="rule">
    777. 

  777. 			<div class="rule-body">
    778. 

  778. 				<div class="tabs">
    779. 

  779. 					<button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
    780. 

  780. 					<button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
    781. 

  781. 				</div>	  
    782. 

  782. 				<div id="tab1" class="tab-content"> 
    783. 

  783. 				</div>  
    784. 

  784. 				<div id="tab2" class="tab-content" style="display:none;">
    785. 

  785. 					<div class="record-list" id="recordList">
    786. 

  786. 					</div>
    787. 

  787. 				</div>  
    788. 

  788. 			</div>
    789. 

  789. 		</div>
    790. 

  790. 		<div id="dialog" class="dialog">
    791. 

  791. 			<div id="dialog-body" class="dialog-body">
    792. 

  792. 				<img class="dialog-tip" src="./img/dialog-tip.png" />
    793. 

  793. 				<img class="dialog-bg" src="./img/dialog-bg.png" />
    794. 

  794. 				<div class="prize-msg" id="prize-msg-money">
    795. 

  795. 					<div class="money-title">微信红包</div>
    796. 

  796. 					<div class="money-content">
    797. 

  797. 						<span class="prize-money" id="prize-money"></span>
    798. 

  798. 						<span class="prize-unit">元</span>
    799. 

  799. 					</div>
    800. 

  800. 					<img class="dialog-btn" id="dialog-btn-money" src="./img/dialog-btn.png" />
    801. 

  801. 					<div class="money-tip">红包到账会有延迟情况，请以实际为准</div>
    802. 

  802. 				</div>
    803. 

  803. 				<div class="prize-msg" id="prize-msg-goods">
    804. 

  804. 					<img class="goods-img" id="goods-img" src="" />
    805. 

  805. 					<div class="goods-name" id="goods-name"></div>
    806. 

  806. 					<img class="dialog-btn" id="dialog-btn-goods" src="./img/dialog-btn.png" />
    807. 

  807. 				</div>
    808. 

  808. 				<img class="dialog-close" id="dialog-close" src="./img/dialog-close.png" />
    809. 

  809. 			</div>
    810. 

  810. 		</div>
    811. 

  811. 		<div id="notice" class="dialog">
    812. 

  812. 			<div class="notice-body" id="notice-body">
    813. 

  813. 				<div>以下隐私协议是本产品对用户隐私保护的许诺，请您务必仔细阅读本协议，以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
    814. 

  814. 					为了给您提供更准确、更有针对性的服务，本产品可能会以如下方式，使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息，在未征得您许可的情况下，不会将这些信息对外公开或向第三方提供。<br />
    815. 

  815. 					请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范，我们不承担因违反上述管理规范所导致的任何责任。<br />
    816. 

  816. 					一、您已经认真阅读参与的活动信息，自愿参加相关活动。您自愿并乐意将活动链接、海报、文案等信息转发分享到微信朋友圈、微信群、微信聊天等渠道，并不是因为诱导的情况下参与相关活动、分享相关活动。<br />
    817. 

  817. 					二、您自愿选择服务或提供信息的情况下收集您的个人信息（包括但不限于，微信昵称，微信头像，微信地址，微信关联手机号等），并将这些信息进行整合，以便向您提供更好的用户服务。<br />
    818. 

  818. 					三、保有您的使用记录在如下情况下，本产品会遵照您的意愿或法律的规定披露您的个人信息（包括但不限于，微信昵称，微信头像，微信地址，微信关联手机号等），由此引发的问题将由您个人承担： <br />
    819. 

  819. 						1）事先获得您的授权<br />
    820. 

  820. 						2）只有获取您的个人资料，才能提供您所要求的服务 <br />
    821. 

  821. 						3）根据有关的法律法规要求<br />
    822. 

  822. 						4）按照相关政府主管部门的要求 <br />
    823. 

  823. 						5）为维护本产品的合法权益<br />
    824. 

  824. 						6）您同意让第三方共享资料<br />
    825. 

  825. 						7）我们发现您违反了本产品的服务条款或使用规定 <br />
    826. 

  826. 						8）我们需要向代表我们提供产品或服务的公司提供资料 （除非我们另行通知您，否则这些公司无权使用您的身份识别资料）<br />
    827. 

  827. 					四、本《隐私协议》不适用于以下情况： <br />
    828. 

  828. 						1）通过我们的服务而接入的第三方服务（包括任何第三方网站）收集的信息。本政策仅适用于我们所收集的信息，并不适用于任何第三方提供的服务或第三方的信息使用规则，我们对任何第三方使用由您提供的信息不承担任何责任。<br />
    829. 

  829. 						2）通过在我们服务中进行广告服务的其他公司或机构所收集的信息。<br />
    830. 

  830. 				</div>
    831. 

  831. 			</div>
    832. 

  832. 		</div>
    833. 

  833. 		<div id="overlay" class="overlay">
    834. 

  834. 			<div id="popForm" class="pop-form">
    835. 

  835. 				<div class="pop-title">
    836. 

  836. 					<img class="close-Icon" id="closeIcon" src="./img/close.png" mode="widthFix" />
    837. 

  837. 					<span>填写收货地址</span>
    838. 

  838. 				</div>
    839. 

  839. 				<form class="mui-input-group">
    840. 

  840. 					<div class="mui-input-row">
    841. 

  841. 						<label>姓名：</label>
    842. 

  842. 						<input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
    843. 

  843. 					</div>
    844. 

  844. 					<div class="mui-input-row">
    845. 

  845. 						<label>微信号：</label>
    846. 

  846. 						<input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
    847. 

  847. 					</div><div class="mui-input-row">
    848. 

  848. 						<label>手机号：</label>
    849. 

  849. 						<input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
    850. 

  850. 					</div>
    851. 

  851. 					<div class="mui-input-row">
    852. 

  852. 						<label>地区：</label>
    853. 

  853. 						<div class="city-data" id="showCityPicker">
    854. 

  854. 							<div class="no-data" id="placeholderCity">
    855. 

  855. 								<span>请选择地区</span>
    856. 

  856. 								<img class="right-Icon" id="city-rightIcon" src="" mode="widthFix" />
    857. 

  857. 							</div>
    858. 

  858. 							<div id="province"></div>
    859. 

  859. 							<div id="city"></div>
    860. 

  860. 						</div>
    861. 

  861. 					</div>
    862. 

  862. 					<div class="mui-input-row">
    863. 

  863. 						<label>详细地址：</label>
    864. 

  864. 						<input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
    865. 

  865. 					</div>
    866. 

  866. 					<div class="mui-input-row">
    867. 

  867. 						<label>备注：</label>
    868. 

  868. 						<input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
    869. 

  869. 					</div>
    870. 

  870. 					<div class="mui-button-row">
    871. 

  871. 						<button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
    872. 

  872. 					</div>
    873. 

  873. 				</form>
    874. 

  874. 			</div>
    875. 

  875. 		</div>
    876. 

  876. 	</div>
    877. 

  877. 	<script>
    878. 

  878. 		function uploadImage() {
    879. 

  879. 		    let uploaInput = document.getElementById('uploadfile');
    880. 

  880. 			document.getElementById('uploadfile').click();
    881. 

  881. 		    // 当用户上传时触发事件
    882. 

  882. 		    uploaInput.onchange=function(){
    883. 

  883. 		    	readFile(this);
    884. 

  884. 		    }
    885. 

  885. 		    //处理图片并添加都dom中的函数
    886. 

  886. 		    let readFile=function(obj){
    887. 

  887. 		    	// 获取input里面的文件组
    888. 

  888. 		    	let fileList=obj.files;
    889. 

  889. 		    	//对文件组进行遍历，可以到控制台打印出fileList去看看
    890. 

  890. 		    	for(let i=0;i<fileList.length;i++){
    891. 

  891. 		    		var formData = new FormData();
    892. 

  892. 		    		formData.append('path', fileList[i].name)
    893. 

  893. 		    		formData.append('file', fileList[i])
    894. 

  894. 		    		let url = credentials.serverDomain+ '/open/v1/file/upload'
    895. 

  895. 		    		mui.ajax(url, {
    896. 

  896. 		    			data: formData,
    897. 

  897. 		    			processData: false,
    898. 

  898. 		    			contentType: false,
    899. 

  899. 		    			type:'post',
    900. 

  900. 		    			headers: {
    901. 

  901. 		    			  'bucket': credentials.bucket,
    902. 

  902. 		    			  'Authorization': credentials.authorization,
    903. 

  903. 		    			  'secretId': credentials.secretId,
    904. 

  904. 		    			},
    905. 

  905. 		    			success:function(res){
    906. 

  906. 		    				imgList.push(res.data.url)
    907. 

  907. 							const gallery = document.getElementById('imageGallery');  
    908. 

  908. 							imgList.forEach( item=> { // 假设data是一个包含图片URL的数组  
    909. 

  909. 								const img = document.createElement('img');  
    910. 

  910. 								img.src = item; // 假设每个图片对象都有一个url属性
    911. 

  911. 								gallery.appendChild(img); // 将图片添加到div中  
    912. 

  912. 							}); 
    913. 

  913. 		    			},
    914. 

  914. 		    			error:function(error){
    915. 

  915. 		    				//异常处理；
    916. 

  916. 		    				console.log(error);
    917. 

  917. 		    			}
    918. 

  918. 		    		});
    919. 

  919. 		    	}
    920. 

  920. 		    }
    921. 

  921. 		}
    922. 

  922. 		let h5Type = 20
    923. 

  923. 		let mpClientId = ''
    924. 

  924. 		let credentials = {
    925. 

  925. 			bucket: '',
    926. 

  926. 			Authorization: '',
    927. 

  927. 			secretId: '',
    928. 

  928. 			serverDomain: ''
    929. 

  929. 		}
    930. 

  930. 		let imgList = []
    931. 

  931. 		window.onload = function() {
    932. 

  932. 			if (getQueryParam('openId')) {
    933. 

  933. 				if(!getQueryParam('externalUserid')) {
    934. 

  934. 					mui.alert('无权限访问', '提示', '确定');
    935. 

  935. 				} else {
    936. 

  936. 					if (h5Type == 19) {
    937. 

  937. 						showCityLevel();
    938. 

  938. 						raffleInfo();
    939. 

  939. 						raffleRecord();
    940. 

  940. 					} else if (h5Type == 20) {
    941. 

  941. 						// 获取腾讯COS对象存储的实例对象
    942. 

  942. 						getCosObj();
    943. 

  943. 					}
    944. 

  944. 				}
    945. 

  945. 			} else {
    946. 

  946. 				// 走授权操作
    947. 

  947. 				getAuth();
    948. 

  948. 			}
    949. 

  949. 			document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
    950. 

  950. 		};
    951. 

  951. 		// 公众号授权，获取code
    952. 

  952. 		function getAuth() {
    953. 

  953. 			// 获取url上的code
    954. 

  954. 			let code = getQueryParam('code')
    955. 

  955. 			if (code) {
    956. 

  956. 				let bId = getQueryParam('bId')
    957. 

  957. 				mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-client/p/getInfoByh5Code',{
    958. 

  958. 					data:{
    959. 

  959. 						code: code,
    960. 

  960. 						bId: bId,
    961. 

  961. 					},
    962. 

  962. 					dataType:'json',//服务器返回json格式数据
    963. 

  963. 					type:'get',//HTTP请求类型
    964. 

  964. 					success:function(res){
    965. 

  965. 						h5Type = res.data.h5Type
    966. 

  966. 						if (h5Type == 19) {
    967. 

  967. 							document.getElementById('collectPage').style.display = "none"
    968. 

  968. 							document.getElementById('lotteryPage').style.display = "block"
    969. 

  969. 							if (res.data.externalUserid) {
    970. 

  970. 								showCityLevel();
    971. 

  971. 							} else {
    972. 

  972. 								// 进行下一步企微授权
    973. 

  973. 								gerQwAuth(bId, res.data.openId);
    974. 

  974. 							}
    975. 

  975. 						} else if (h5Type == 20){
    976. 

  976. 							document.getElementById('collectPage').style.display = "block"
    977. 

  977. 							document.getElementById('lotteryPage').style.display = "none"
    978. 

  978. 							mpClientId = res.data.mpClientId
    979. 

  979. 							// if (!res.data.externalUserid) {
    980. 

  980. 							// 	// 进行下一步企微授权
    981. 

  981. 							// 	gerQwAuth(bId, res.data.openId);
    982. 

  982. 							// }
    983. 

  983. 						}
    984. 

  984. 					},
    985. 

  985. 					error:function(error){
    986. 

  986. 						//异常处理；
    987. 

  987. 						console.log(error);
    988. 

  988. 					}
    989. 

  989. 				});
    990. 

  990. 			} else {
    991. 

  991. 				let redirect_uri = window.location.href
    992. 

  992. 				// code 不存在，走微信网页授权逻辑 
    993. 

  993. 				let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx99ec0d0828a4d2d3&redirect_uri=${redirect_uri}&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    994. 

  994. 				window.location.replace(url)
    995. 

  995. 			}
    996. 

  996. 		};
    997. 

  997. 		// 企微授权
    998. 

  998. 		function gerQwAuth (bId, openId) {
    999. 

  999. 				let link = window.location.href
    1000. 

  1000. 				mui.ajax('http://test.wefanbot.com:18993/p/insuite/p/getOAUrl',{
    1001. 

  1001. 					data:{
    1002. 

  1002. 						bId: bId,
    1003. 

  1003. 						openId: openId,
    1004. 

  1004. 					},
    1005. 

  1005. 					dataType:'json',//服务器返回json格式数据
    1006. 

  1006. 					type:'get',//HTTP请求类型
    1007. 

  1007. 					success:function(res){
    1008. 

  1008. 						if (res.data) {
    1009. 

  1009. 							window.location.replace(res.data)
    1010. 

  1010. 						}
    1011. 

  1011. 					},
    1012. 

  1012. 					error:function(error){
    1013. 

  1013. 						//异常处理；
    1014. 

  1014. 						console.log(error);
    1015. 

  1015. 					}
    1016. 

  1016. 				});
    1017. 

  1017. 		};
    1018. 

  1018. 		function getCosObj() {
    1019. 

  1019. 			mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/p/getAuthorization',{
    1020. 

  1020. 				data:{
    1021. 

  1021. 				},
    1022. 

  1022. 				dataType:'json',//服务器返回json格式数据
    1023. 

  1023. 				type:'post',//HTTP请求类型
    1024. 

  1024. 				headers:{'Content-Type':'application/json'},
    1025. 

  1025. 				success:function(res){
    1026. 

  1026. 					credentials = res.data.info
    1027. 

  1027. 					// 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
    1028. 

  1028. 					credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
    1029. 

  1029. 					console.log('credentials2', credentials);
    1030. 

  1030. 				},
    1031. 

  1031. 				error:function(error){
    1032. 

  1032. 					//异常处理；
    1033. 

  1033. 					console.log(error);
    1034. 

  1034. 				}
    1035. 

  1035. 			});
    1036. 

  1036. 		};
    1037. 

  1037. 		// 发送祝福
    1038. 

  1038. 		function handleSendText() {
    1039. 

  1039. 			let openId = getQueryParam('openId')
    1040. 

  1040. 			let textareaResult = document.getElementById("textarea").value;
    1041. 

  1041. 			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/add', {
    1042. 

  1042. 				data:{
    1043. 

  1043. 					mpClientId: mpClientId,
    1044. 

  1044. 					openId: openId,
    1045. 

  1045. 					content: textareaResult,
    1046. 

  1046. 					imgList: imgList,
    1047. 

  1047. 				},
    1048. 

  1048. 				dataType:'json',//服务器返回json格式数据
    1049. 

  1049. 				type:'post',//HTTP请求类型
    1050. 

  1050. 				headers:{'Content-Type':'application/json'},
    1051. 

  1051. 				success:function(res){
    1052. 

  1052. 					if (res.code == 1) {
    1053. 

  1053. 						mui.toast('发送成功');
    1054. 

  1054. 						document.getElementById('dialogText').style.display = 'none';
    1055. 

  1055. 					} else {
    1056. 

  1056. 						mui.toast(res.msg);
    1057. 

  1057. 					}
    1058. 

  1058. 				},
    1059. 

  1059. 				error:function(error){
    1060. 

  1060. 					//异常处理；
    1061. 

  1061. 					console.log(error);
    1062. 

  1062. 				}
    1063. 

  1063. 			});
    1064. 

  1064. 		};
    1065. 

  1065. 		// 获取用户故事收集列表
    1066. 

  1066. 		function findCollectList() {
    1067. 

  1067. 			let openId = getQueryParam('openId')
    1068. 

  1068. 			let textareaResult = document.getElementById("textarea").value;
    1069. 

  1069. 			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/findCollectList', {
    1070. 

  1070. 				data:{
    1071. 

  1071. 				},
    1072. 

  1072. 				dataType:'json',//服务器返回json格式数据
    1073. 

  1073. 				type:'get',//HTTP请求类型
    1074. 

  1074. 				success:function(res){
    1075. 

  1075. 				},
    1076. 

  1076. 				error:function(error){
    1077. 

  1077. 					//异常处理；
    1078. 

  1078. 					console.log(error);
    1079. 

  1079. 				}
    1080. 

  1080. 			});
    1081. 

  1081. 		};
    1082. 

  1082. 		function getRandomArbitrary(min, max) {
    1083. 

  1083. 		  return Math.floor(Math.random() * (max - min) + min);
    1084. 

  1084. 		}
    1085. 

  1085. 		function showItem(type){
    1086. 

  1086. 			var showItem = document.getElementById('showItem')
    1087. 

  1087. 			var infoName = document.getElementById('infoName')
    1088. 

  1088. 			var infoDsc = document.getElementById('infoDsc')
    1089. 

  1089. 			var avatar = document.getElementById('avatar')
    1090. 

  1090. 			avatar.src = ""
    1091. 

  1091. 			infoName.innerText = '455'
    1092. 

  1092. 			infoDsc.innerText = '455'
    1093. 

  1093. 			var  X = getRandomArbitrary(15,125)
    1094. 

  1094. 			if(type===1){//无图片
    1095. 

  1095. 				showItem.classList.remove("show_img_item")
    1096. 

  1096. 				var Y = getRandomArbitrary(15,157)
    1097. 

  1097. 			}
    1098. 

  1098. 			if(type===2){//有图片
    1099. 

  1099. 				showItem.classList.add("show_img_item")
    1100. 

  1100. 				var infoImg = document.getElementById('infoImg')
    1101. 

  1101. 				infoImg.src = ""
    1102. 

  1102. 				var Y = getRandomArbitrary(175,208)
    1103. 

  1103. 			}
    1104. 

  1104. 			showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
    1105. 

  1105. 			showItem.classList.add("add_animation_item")
    1106. 

  1106. 			setTimeout(()=>{
    1107. 

  1107. 				showItem.classList.remove("add_animation_item")
    1108. 

  1108. 			},3500)
    1109. 

  1109. 		}
    1110. 

  1110. 		document.getElementById('sendBtn').addEventListener('click', function() {
    1111. 

  1111. 			document.getElementById('dialogText').style.display = 'block';
    1112. 

  1112. 		});
    1113. 

  1113. 		document.getElementById('closeText').addEventListener('click', function() {
    1114. 

  1114. 			document.getElementById('dialogText').style.display = 'none';
    1115. 

  1115. 		});
    1116. 

  1116. 		// 截取url中的数据
    1117. 

  1117. 		function getQueryParam(paramName) {
    1118. 

  1118. 			// 获取当前URL的查询字符串部分  
    1119. 

  1119. 			const queryString = window.location.search;  
    1120. 

  1120. 			// 创建一个URLSearchParams对象  
    1121. 

  1121. 			const urlParams = new URLSearchParams(queryString);
    1122. 

  1122. 			// 返回指定参数的值，如果不存在则返回null  
    1123. 

  1123. 			return urlParams.get(paramName);
    1124. 

  1124. 		};
    1125. 

  1125. 		// 城市数据
    1126. 

  1126. 		function showCityLevel() {
    1127. 

  1127. 			var picker = new mui.PopPicker({
    1128. 

  1128. 				layer: 2,
    1129. 

  1129. 			});
    1130. 

  1130. 			mui.ajax('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json',{
    1131. 

  1131. 				data:{
    1132. 

  1132. 				},
    1133. 

  1133. 				dataType:'json',//服务器返回json格式数据
    1134. 

  1134. 				type:'get',//HTTP请求类型
    1135. 

  1135. 				success:function(res){
    1136. 

  1136. 					picker.setData(res)
    1137. 

  1137. 				},
    1138. 

  1138. 				error:function(error){
    1139. 

  1139. 					//异常处理；
    1140. 

  1140. 					console.log(error);
    1141. 

  1141. 				}
    1142. 

  1142. 			});
    1143. 

  1143. 			let provinceResult = document.getElementById('province');
    1144. 

  1144. 			let cityResult = document.getElementById('city');
    1145. 

  1145. 			document.getElementById("showCityPicker").addEventListener('click', function(event) {
    1146. 

  1146. 				event.stopPropagation();
    1147. 

  1147. 				// 默认第一层显示第1项;第二层显示第2项
    1148. 

  1148. 				picker.pickers[0].setSelectedIndex(0);
    1149. 

  1149. 				picker.pickers[1].setSelectedIndex(2);
    1150. 

  1150. 				picker.show(function(selectItems) {
    1151. 

  1151. 					document.getElementById('placeholderCity').style.display = "none"
    1152. 

  1152. 					var text1 = selectItems[0].text;
    1153. 

  1153. 					var text2 = selectItems[1].text;
    1154. 

  1154. 					provinceResult.innerText = text1
    1155. 

  1155. 					cityResult.innerText = text2
    1156. 

  1156. 				})
    1157. 

  1157. 			});
    1158. 

  1158. 		};
    1159. 

  1159. 		let lotteryStatus = '' // 抽奖活动状态
    1160. 

  1160. 		let gridList = []; // 用于存储所有格子数据
    1161. 

  1161. 		let gridItems = []; // 用于存储所有格子
    1162. 

  1162. 		let currentIndex = 0; // 当前活动的格子索引
    1163. 

  1163. 		let stopRotation = false; // 控制是否停止轮询的变量 
    1164. 

  1164. 		let remainingTimes = 0
    1165. 

  1165. 		// 获取抽奖信息
    1166. 

  1166. 		function raffleInfo() {
    1167. 

  1167. 			let openId = getQueryParam('openId')
    1168. 

  1168. 			let raffleId = getQueryParam('bId')
    1169. 

  1169. 			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId',{
    1170. 

  1170. 				data:{
    1171. 

  1171. 					openId: openId,
    1172. 

  1172. 					raffleId: raffleId,
    1173. 

  1173. 				},
    1174. 

  1174. 				dataType:'json',//服务器返回json格式数据
    1175. 

  1175. 				type:'get',//HTTP请求类型
    1176. 

  1176. 				success:function(res){
    1177. 

  1177. 						lotteryStatus = res.data.status
    1178. 

  1178. 						gridList = res.data.prizes
    1179. 

  1179. 						document.getElementById("tab1").innerHTML = res.data.activityInfo
    1180. 

  1180. 						remainingTimes = res.data.raffleNum-res.data.useNum
    1181. 

  1181. 						document.getElementById("lotteryId").innerHTML = `已抽奖${res.data.useNum}次，还剩${res.data.raffleNum-res.data.useNum}次机会`
    1182. 

  1182. 						const container = document.getElementById('grid-container');  
    1183. 

  1183. 						const buttons = document.getElementById('lottery-button');  
    1184. 

  1184. 						container.innerHTML = '';  
    1185. 

  1185. 						for (let i = 0; i < 9; i++) {
    1186. 

  1186. 							// 创建一个新的div元素作为格子  
    1187. 

  1187. 							const gridItem = document.createElement('div');  
    1188. 

  1188. 							gridItem.classList.add('grid-item');  
    1189. 

  1189. 						  
    1190. 

  1190. 							// 创建图片元素并添加到格子中  
    1191. 

  1191. 							const img = document.createElement('img');  
    1192. 

  1192. 							img.src = res.data.prizes[i].img; // 设置图片源  
    1193. 

  1193. 							img.alt = `图片 ${i + 1}`; // 设置图片的替代文本  
    1194. 

  1194. 							gridItem.appendChild(img);  
    1195. 

  1195. 						  
    1196. 

  1196. 							// 创建标题元素并添加到格子中  
    1197. 

  1197. 							const title = document.createElement('div');  
    1198. 

  1198. 							title.classList.add('grid-item-title');  
    1199. 

  1199. 							title.textContent = res.data.prizes[i].name; // 设置标题文本  
    1200. 

  1200. 							gridItem.appendChild(title);  
    1201. 

  1201. 						  
    1202. 

  1202. 							// 将格子添加到容器中  
    1203. 

  1203. 							container.appendChild(gridItem);  
    1204. 

  1204. 						}
    1205. 

  1205. 						gridItems = []
    1206. 

  1206. 						container.querySelectorAll('.grid-item').forEach(item => {  
    1207. 

  1207. 					      gridItems.push(item);  
    1208. 

  1208. 					    });  
    1209. 

  1209. 					    
    1210. 

  1210. 					    buttons.addEventListener('click', function() {
    1211. 

  1211. 							handleLottery();
    1212. 

  1212. 						})
    1213. 

  1213. 				},
    1214. 

  1214. 				error:function(error){
    1215. 

  1215. 					//异常处理；
    1216. 

  1216. 					console.log(error);
    1217. 

  1217. 				}
    1218. 

  1218. 			});
    1219. 

  1219. 		};
    1220. 

  1220. 		// 点击抽奖
    1221. 

  1221. 		function handleLottery() {
    1222. 

  1222. 			if (!remainingTimes) {
    1223. 

  1223. 				mui.toast('抽奖次数已用完');
    1224. 

  1224. 				return false;
    1225. 

  1225. 			}
    1226. 

  1226. 			const gridContainer = document.getElementById('grid-container');
    1227. 

  1227. 			if (lotteryStatus === -1) {
    1228. 

  1228. 				mui.toast('活动已结束');
    1229. 

  1229. 			} else if (lotteryStatus === 0) {
    1230. 

  1230. 				mui.toast('活动未开始');
    1231. 

  1231. 			} else if (lotteryStatus === 1) {
    1232. 

  1232. 				stopRotation = false
    1233. 

  1233. 				rotateActive();  
    1234. 

  1234. 				let externalUserid = getQueryParam('externalUserid')
    1235. 

  1235. 				let openId = getQueryParam('openId')
    1236. 

  1236. 				let raffleId = getQueryParam('bId')
    1237. 

  1237. 				mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/lottery',{
    1238. 

  1238. 					data:{
    1239. 

  1239. 						externalUserid: externalUserid,
    1240. 

  1240. 						openId: openId,
    1241. 

  1241. 						raffleId: raffleId,
    1242. 

  1242. 					},
    1243. 

  1243. 					dataType:'json',//服务器返回json格式数据
    1244. 

  1244. 					type:'get',//HTTP请求类型
    1245. 

  1245. 					success:function(res){
    1246. 

  1246. 						if (res.data) {
    1247. 

  1247. 							setTimeout(() => {  
    1248. 

  1248. 								// 停止轮询  
    1249. 

  1249. 								stopRotation = true;  
    1250. 

  1250. 						  
    1251. 

  1251. 								// 立即将 active 类应用到目标格子上  
    1252. 

  1252. 								gridItems.forEach(item => item.classList.remove('actives'));
    1253. 

  1253. 								gridList.forEach((item, index) => {
    1254. 

  1254. 									if (res.data.id === item.id) {
    1255. 

  1255. 										gridItems[index].classList.add('actives');
    1256. 

  1256. 									}
    1257. 

  1257. 								});  
    1258. 

  1258. 								if (res.data.acceptType === 0 || res.data.acceptType === 1) {
    1259. 

  1259. 									document.getElementById('dialog').style.display = 'flex';
    1260. 

  1260. 									document.getElementById('prize-msg-goods').style.display = 'block';
    1261. 

  1261. 									document.getElementById('prize-msg-money').style.display = 'none';
    1262. 

  1262. 									document.getElementById("goods-img").src = res.data.img
    1263. 

  1263. 									document.getElementById("goods-name").innerHTML = res.data.name
    1264. 

  1264. 								} else if (res.data.acceptType === 2) {
    1265. 

  1265. 									document.getElementById('dialog').style.display = 'flex';
    1266. 

  1266. 									document.getElementById('prize-msg-goods').style.display = 'none';
    1267. 

  1267. 									document.getElementById('prize-msg-money').style.display = 'block';
    1268. 

  1268. 									document.getElementById("prize-money").innerHTML = res.data.money
    1269. 

  1269. 								}
    1270. 

  1270. 								raffleInfo()
    1271. 

  1271. 								raffleRecord()
    1272. 

  1272. 								currentIndex = 0
    1273. 

  1273. 							}, 2000); // 假设接口调用需要2秒  
    1274. 

  1274. 						} else {
    1275. 

  1275. 							stopRotation = true;
    1276. 

  1276. 							gridItems.forEach(item => item.classList.remove('actives'));
    1277. 

  1277. 							currentIndex = 0
    1278. 

  1278. 							mui.toast(res.msg);
    1279. 

  1279. 						}
    1280. 

  1280. 					},
    1281. 

  1281. 					error:function(error){
    1282. 

  1282. 						//异常处理；
    1283. 

  1283. 						console.log(error);
    1284. 

  1284. 					}
    1285. 

  1285. 				});
    1286. 

  1286. 			}
    1287. 

  1287. 		};
    1288. 

  1288. 		// 轮询动画函数  
    1289. 

  1289. 		function rotateActive() {  
    1290. 

  1290. 			// 移除上一个格子的 active 类 
    1291. 

  1291. 			if (gridItems[currentIndex]) {  
    1292. 

  1292. 				gridItems[currentIndex].classList.remove('actives');  
    1293. 

  1293. 			}  
    1294. 

  1294. 	  
    1295. 

  1295. 			// 更新当前索引，循环到第一个格子如果超出范围  
    1296. 

  1296. 			currentIndex = (currentIndex + 1) % gridItems.length;  
    1297. 

  1297. 	  
    1298. 

  1298. 			// 应用 active 类到新的格子  
    1299. 

  1299. 			gridItems[currentIndex].classList.add('actives');  
    1300. 

  1300. 	  
    1301. 

  1301. 			// 递归调用以继续动画，直到接口调用完成  
    1302. 

  1302. 			if (!stopRotation) {  
    1303. 

  1303. 				setTimeout(rotateActive, 100); // 假设每个格子显示 500 毫秒  
    1304. 

  1304. 			}  
    1305. 

  1305. 		};
    1306. 

  1306. 		// 获取抽奖记录
    1307. 

  1307. 		function raffleRecord() {
    1308. 

  1308. 			let openId = getQueryParam('openId')
    1309. 

  1309. 			let raffleId = getQueryParam('bId')
    1310. 

  1310. 			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleRecord',{
    1311. 

  1311. 				data:{
    1312. 

  1312. 					openId: openId,
    1313. 

  1313. 					raffleId: raffleId,
    1314. 

  1314. 					page: 1,
    1315. 

  1315. 					pageCount: 1000,
    1316. 

  1316. 				},
    1317. 

  1317. 				dataType:'json',//服务器返回json格式数据
    1318. 

  1318. 				type:'post',//HTTP请求类型
    1319. 

  1319. 				headers:{'Content-Type':'application/json'},
    1320. 

  1320. 				success:function(res){
    1321. 

  1321. 					const recordList = document.getElementById('recordList');
    1322. 

  1322. 					recordList.innerHTML = ''
    1323. 

  1323. 					res.data.records.forEach(record => {
    1324. 

  1324. 						recordList.innerHTML += `
    1325. 

  1325. 						<div class="record-item">
    1326. 

  1326. 							<img class="prize-img" src="${record.img}" mode="widthFix" />
    1327. 

  1327. 							<div>
    1328. 

  1328. 								<div class="prize-name">${record.name}</div>
    1329. 

  1329. 								<div class="prize-time">${timeFormat(record.raffleTime)}</div>
    1330. 

  1330. 							</div>
    1331. 

  1331. 							<button id="toggleButton" ${record.status ? 'disabled' : ''} class="get-btn" onclick="handleOpenForm(${record.id})">${record.status ? '已领取' : '领取'}</button>
    1332. 

  1332. 						</div>`
    1333. 

  1333. 					});
    1334. 

  1334. 				},
    1335. 

  1335. 				error:function(error){
    1336. 

  1336. 					//异常处理；
    1337. 

  1337. 					console.log(error);
    1338. 

  1338. 				}
    1339. 

  1339. 			});
    1340. 

  1340. 		};
    1341. 

  1341. 		let recordId = ''
    1342. 

  1342. 		function handleOpenForm(id) {
    1343. 

  1343. 			recordId = id
    1344. 

  1344. 			document.getElementById('overlay').style.display = 'flex';
    1345. 

  1345. 			var div = document.getElementById('popForm');  
    1346. 

  1346. 			div.classList.add('show');  
    1347. 

  1347. 		};
    1348. 

  1348. 		// 切换tab
    1349. 

  1349. 		function changeTab(evt, tabName) {  
    1350. 

  1350. 		  // 获取所有tab链接，并移除激活类  
    1351. 

  1351. 		  var i, tabcontent, tablinks;  
    1352. 

  1352. 		  tabcontent = document.getElementsByClassName("tab-content");  
    1353. 

  1353. 		  for (i = 0; i < tabcontent.length; i++) {  
    1354. 

  1354. 		    tabcontent[i].style.display = "none";  
    1355. 

  1355. 		  }  
    1356. 

  1356. 		  tablinks = document.getElementsByClassName("tab-link");  
    1357. 

  1357. 		  for (i = 0; i < tablinks.length; i++) {  
    1358. 

  1358. 		    tablinks[i].className = tablinks[i].className.replace(" active", "");  
    1359. 

  1359. 		  }  
    1360. 

  1360. 		  
    1361. 

  1361. 		  // 显示当前tab内容，并添加激活类到链接  
    1362. 

  1362. 		  document.getElementById(tabName).style.display = "block";  
    1363. 

  1363. 		  evt.currentTarget.className += " active";  
    1364. 

  1364. 		};
    1365. 

  1365. 		function handleSave() {
    1366. 

  1366. 			let nameResult = document.getElementById('name').value;
    1367. 

  1367. 			let wxAccountResult = document.getElementById('wxAccount').value
    1368. 

  1368. 			let phone = document.getElementById("phone").value;
    1369. 

  1369. 			let provinceResult = document.getElementById('province');
    1370. 

  1370. 			let cityResult = document.getElementById('city');
    1371. 

  1371. 			let addressResult = document.getElementById("address").value;
    1372. 

  1372. 			let remarkResult = document.getElementById("remark").value;
    1373. 

  1373. 			if (!nameResult){
    1374. 

  1374. 				mui.toast("请填写姓名");
    1375. 

  1375. 			} else if (!phone){
    1376. 

  1376. 				mui.toast("请输入手机号");
    1377. 

  1377. 			} else if (!provinceResult.innerText){
    1378. 

  1378. 				mui.toast('请选择城市');
    1379. 

  1379. 			} else {
    1380. 

  1380. 				mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleForm',{
    1381. 

  1381. 					data:{
    1382. 

  1382. 						name: nameResult,
    1383. 

  1383. 						wxAccount: wxAccountResult,
    1384. 

  1384. 						phone: phone,
    1385. 

  1385. 						province: provinceResult.innerText || '',
    1386. 

  1386. 						city: cityResult.innerText || '',
    1387. 

  1387. 						address: addressResult,
    1388. 

  1388. 						remark: remarkResult,
    1389. 

  1389. 						recordId: recordId
    1390. 

  1390. 					},
    1391. 

  1391. 					dataType:'json',//服务器返回json格式数据
    1392. 

  1392. 					type:'post',//HTTP请求类型
    1393. 

  1393. 					timeout:10000,//超时时间设置为10秒；
    1394. 

  1394. 					headers:{'Content-Type':'application/json'},	              
    1395. 

  1395. 					success:function(res){
    1396. 

  1396. 						if (res.code === 1) {
    1397. 

  1397. 							mui.toast("提交成功！");
    1398. 

  1398. 							document.getElementById('overlay').style.display = 'none';
    1399. 

  1399. 							var div = document.getElementById('popForm');  
    1400. 

  1400. 							div.classList.remove('show');
    1401. 

  1401. 							raffleRecord()
    1402. 

  1402. 						} else {
    1403. 

  1403. 							mui.toast(res.msg);
    1404. 

  1404. 						}
    1405. 

  1405. 					},
    1406. 

  1406. 					error:function(error){
    1407. 

  1407. 						//异常处理；
    1408. 

  1408. 						console.log(error);
    1409. 

  1409. 						mui.toast(error);
    1410. 

  1410. 					}
    1411. 

  1411. 				});
    1412. 

  1412. 			}
    1413. 

  1413. 		};
    1414. 

  1414. 		document.getElementById('closeIcon').addEventListener('click', function() {
    1415. 

  1415. 			document.getElementById('overlay').style.display = 'none';
    1416. 

  1416. 			var div = document.getElementById('popForm');  
    1417. 

  1417. 			div.classList.remove('show');
    1418. 

  1418. 		});
    1419. 

  1419. 		if (document.getElementById('dialog-btn-money')) {
    1420. 

  1420. 			document.getElementById('dialog-btn-money').addEventListener('click', function() {
    1421. 

  1421. 				document.getElementById('dialog').style.display = 'none';
    1422. 

  1422. 				gridItems[currentIndex].classList.remove('actives');
    1423. 

  1423. 			});
    1424. 

  1424. 		}
    1425. 

  1425. 		if (document.getElementById('dialog-btn-goods')) {
    1426. 

  1426. 			document.getElementById('dialog-btn-goods').addEventListener('click', function() {
    1427. 

  1427. 				document.getElementById('dialog').style.display = 'none';
    1428. 

  1428. 				gridItems[currentIndex].classList.remove('actives');
    1429. 

  1429. 			});
    1430. 

  1430. 		}
    1431. 

  1431. 		document.getElementById('dialog-close').addEventListener('click', function() {
    1432. 

  1432. 			document.getElementById('dialog').style.display = 'none';
    1433. 

  1433. 			gridItems[currentIndex].classList.remove('actives');
    1434. 

  1434. 		});
    1435. 

  1435. 		document.getElementById('eventNotice').addEventListener('click', function() {
    1436. 

  1436. 			document.getElementById('notice').style.display = 'block';
    1437. 

  1437. 		});
    1438. 

  1438. 		document.getElementById('notice').addEventListener('click', function() {
    1439. 

  1439. 			var div = document.getElementById('notice-body');  
    1440. 

  1440. 			// 检查点击事件的目标是否不是div本身或其子元素  
    1441. 

  1441. 			if (!div.contains(event.target)) {
    1442. 

  1442. 				document.getElementById('notice').style.display = 'none';
    1443. 

  1443. 			}
    1444. 

  1444. 		});
    1445. 

  1445. 		function timeFormat (time, format = 'yyyy-MM-dd hh:mm:ss') {
    1446. 

  1446. 		    if (time === undefined || time === '' || time === null) {
    1447. 

  1447. 		        return '/'
    1448. 

  1448. 		    } else {
    1449. 

  1449. 		        const date = new Date(time)
    1450. 

  1450. 		        const o = {
    1451. 

  1451. 		            'M+': date.getMonth() + 1,
    1452. 

  1452. 		            'd+': date.getDate(),
    1453. 

  1453. 		            'h+': date.getHours(),
    1454. 

  1454. 		            'm+': date.getMinutes(),
    1455. 

  1455. 		            's+': date.getSeconds(),
    1456. 

  1456. 		            'q+': Math.floor((date.getMonth() + 3) / 3),
    1457. 

  1457. 		            'S': date.getMilliseconds()
    1458. 

  1458. 		        }
    1459. 

  1459. 		        if (/(y+)/.test(format)) {
    1460. 

  1460. 		            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    1461. 

  1461. 		        }
    1462. 

  1462. 		        for (let k in o) {
    1463. 

  1463. 		            if (new RegExp('(' + k + ')').test(format)) {
    1464. 

  1464. 		                format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    1465. 

  1465. 		            }
    1466. 

  1466. 		        }
    1467. 

  1467. 		        return format
    1468. 

  1468. 		    }
    1469. 

  1469. 		}
    1470. 

  1470. 	</script>
    1471. 

  1471. </body>
    1472. 

  1472. </html>
    1473.