index.html 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>幸运大抽奖</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="css/mui.css" rel="stylesheet" />
  8. <link href="css/mui.picker.css" rel="stylesheet" />
  9. <link href="css/mui.poppicker.css" rel="stylesheet" />
  10. <script src="js/mui.js"></script>
  11. <script src="js/mui.picker.js"></script>
  12. <script src="js/mui.poppicker.js"></script>
  13. <script type="text/javascript">
  14. mui.init()
  15. (function flexible (window, document) {
  16. let docEl = document.documentElement
  17. let dpr = window.devicePixelRatio || 1
  18. // adjust body font size
  19. function setBodyFontSize () {
  20. if (document.body) {
  21. document.body.style.fontSize = (12 * dpr) + 'px'
  22. } else {
  23. document.addEventListener('DOMContentLoaded', setBodyFontSize)
  24. }
  25. }
  26. setBodyFontSize()
  27. // set 1rem = viewWidth / 10
  28. function setRemUnit () {
  29. let rem = docEl.clientWidth / 375
  30. docEl.style.fontSize = rem + 'px'
  31. }
  32. setRemUnit()
  33. // reset rem unit on page resize
  34. window.addEventListener('resize', setRemUnit)
  35. window.addEventListener('pageshow', function(e) {
  36. if (e.persisted) {
  37. setRemUnit()
  38. }
  39. })
  40. // detect 0.5px supports
  41. if (dpr >= 2) {
  42. let fakeBody = document.createElement('body')
  43. let testElement = document.createElement('div')
  44. testElement.style.border = '.5px solid transparent'
  45. fakeBody.appendChild(testElement)
  46. docEl.appendChild(fakeBody)
  47. if (testElement.offsetHeight === 1) {
  48. docEl.classList.add('hairlines')
  49. }
  50. docEl.removeChild(fakeBody)
  51. }
  52. }(window, document));
  53. (function() {
  54. if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
  55. handleFontSize()
  56. } else {
  57. if (document.addEventListener) {
  58. document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
  59. } else if (document.attachEvent) {
  60. document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
  61. }
  62. }
  63. function handleFontSize () {
  64. // 设置网页字体为默认大小
  65. WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
  66. // 重写设置网页字体大小的事件
  67. WeixinJSBridge.on('menu:setfont', function() {
  68. WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
  69. })
  70. }
  71. })()
  72. </script>
  73. </head>
  74. <style type="text/css">
  75. body {
  76. margin: 0;
  77. background: #FFFFFF;
  78. }
  79. .bg-img {
  80. width: 100%;
  81. height: 100%;
  82. }
  83. .btn {
  84. display: flex;
  85. justify-content: center;
  86. align-items: center;
  87. }
  88. .btn-img {
  89. width: 290px;
  90. }
  91. .rule {
  92. width: 100%;
  93. height: 509px;
  94. padding: 65px 15px 40px;
  95. background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
  96. margin-top: -60px;
  97. }
  98. .rule-body {
  99. height: 404px;
  100. background: #FEE8D0;
  101. border-radius: 20px;
  102. padding: 20px;
  103. }
  104. .tabs {
  105. display: flex;
  106. justify-content: space-around;
  107. align-items: center;
  108. padding: 0 2px;
  109. margin: 0 auto;
  110. width: 255px;
  111. height: 34px;
  112. background: rgba(255, 125, 97, 0.2);
  113. border-radius: 17px 17px 17px 17px;
  114. }
  115. .tab-link {
  116. border: none;
  117. outline: none;
  118. cursor: pointer;
  119. transition: 0.3s;
  120. color: #FF765B;
  121. background: unset;
  122. width: 125px;
  123. height: 30px;
  124. border-radius: 17px
  125. }
  126. .tab-link:active {
  127. background: rgba(255, 125, 97, 0.2);
  128. }
  129. .tab-link.active {
  130. background: #FFFFFF;
  131. }
  132. .tab-content {
  133. p {
  134. font-weight: 400;
  135. font-size: 14px;
  136. color: #CB4E35;
  137. margin-top: 20px;
  138. }
  139. }
  140. .record-list {
  141. overflow-y: auto;
  142. height: 300px;
  143. margin-top: 18px;
  144. }
  145. .record-item {
  146. width: 315px;
  147. height: 72px;
  148. background: #FEDFC9;
  149. border-radius: 10px;
  150. padding: 9px 10px 8px;
  151. display: flex;
  152. align-items: center;
  153. margin: 0 auto 10px;
  154. }
  155. .prize-img {
  156. width: 55px;
  157. height: 55px;
  158. border-radius: 10px;
  159. margin-right: 8px;
  160. }
  161. .get-btn {
  162. width: 72px;
  163. height: 30px;
  164. background: #FF4646;
  165. border-radius: 17px;
  166. font-size: 14px;
  167. color: #FFFFFF;
  168. margin-left: 30px;
  169. }
  170. .prize-name {
  171. font-weight: 500;
  172. color: #FF4646;
  173. }
  174. .prize-time {
  175. font-size: 12px;
  176. color: #FF6767;
  177. }
  178. .mui-input-group {
  179. padding-top: 15px;
  180. }
  181. .mui-input-group:before {
  182. background: none;
  183. }
  184. .mui-input-group:after {
  185. background: none;
  186. }
  187. .mui-input-group .mui-input-row:after {
  188. background: none;
  189. }
  190. .mui-input-group .mui-input-row {
  191. height: 60px;
  192. }
  193. ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  194. font-weight: 400;
  195. font-size: 14px;
  196. color: #CCCCCC;
  197. float: right;
  198. }
  199. ::-moz-placeholder { /* Firefox 19+ */
  200. font-weight: 400;
  201. font-size: 14px;
  202. color: #CCCCCC;
  203. float: right;
  204. }
  205. :-ms-input-placeholder { /* IE 10+ */
  206. font-weight: 400;
  207. font-size: 14px;
  208. color: #CCCCCC;
  209. float: right;
  210. }
  211. :-moz-placeholder { /* Firefox 18- */
  212. font-weight: 400;
  213. font-size: 14px;
  214. color: #CCCCCC;
  215. float: right;
  216. }
  217. .mui-input-clear {
  218. font-weight: 500;
  219. font-size: 14px;
  220. color: #222222;
  221. text-align: right;
  222. padding: 10px 0;
  223. padding-right: 30px !important;
  224. }
  225. .mui-input-row label {
  226. font-weight: 500;
  227. font-size: 14px;
  228. color: #666666;
  229. }
  230. .save-btn {
  231. width: 305px;
  232. height: 52px;
  233. background: #FF4646;
  234. border-radius: 20px;
  235. border: none;
  236. font-weight: 500;
  237. font-size: 16px;
  238. color: #FFFFFF;
  239. }
  240. .pop-form {
  241. width: 100%;
  242. background-color: #FFFFFF;
  243. height: 524px; /* 根据需要调整高度 */
  244. position: fixed; /* 或 absolute,根据需要定位 */
  245. bottom: -524px; /* 初始位置在可视区域外 */
  246. transition: bottom 0.5s ease-in-out; /* 平滑过渡效果 */
  247. left: 0;
  248. z-index: 1001; /* 确保在遮罩层之上 */
  249. box-sizing: border-box;
  250. padding: 24px 25px 44px 15px;
  251. border-radius: 15px 15px 0px 0px;
  252. }
  253. .city-data {
  254. float: right;
  255. width: 65%;
  256. height: 40px;
  257. padding: 10px 30px 10px 10px;
  258. display: flex;
  259. font-weight: 500;
  260. font-size: 14px;
  261. color: #222222;
  262. justify-content: flex-end;
  263. }
  264. .no-data {
  265. width: 100%;
  266. font-weight: 400;
  267. font-size: 14px;
  268. color: #CCCCCC;
  269. display: flex;
  270. align-items: center;
  271. justify-content: flex-end;
  272. }
  273. .pop-form.show {
  274. bottom: 0; /* 显示时位置 */
  275. }
  276. .pop-title {
  277. display: flex;
  278. align-items: center;
  279. font-weight: bold;
  280. font-size: 16px;
  281. color: #222222;
  282. }
  283. .close-Icon {
  284. width: 24px;
  285. height: 24px;
  286. margin-right: 100px;
  287. }
  288. .right-Icon {
  289. width: 16px;
  290. height: 16px;
  291. margin-left: 5px;
  292. }
  293. .overlay {
  294. position: fixed;
  295. top: 0;
  296. left: 0;
  297. width: 100%;
  298. height: 100%;
  299. background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  300. z-index: 1000; /* 确保遮罩层在顶部 */
  301. transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
  302. display: none;
  303. }
  304. .prize-content {
  305. width: fit-content;
  306. margin: -96% auto 0
  307. }
  308. #grid-container {
  309. display: grid;
  310. grid-template-columns: repeat(3, 1fr); /* 创建3列,每列等宽 */
  311. gap: 10px; /* 格子之间的间距 */
  312. padding: 10px;
  313. }
  314. .grid-item {
  315. width: 78px; /* 使图片宽度适应格子 */
  316. height: 78px; /* 保持图片原始宽高比 */
  317. position: relative; /* 为了让标题能够绝对定位 */
  318. overflow: hidden; /* 确保图片不会溢出格子 */
  319. background-image: url(./img/prize-bg.png);
  320. display: flex;
  321. justify-content: center;
  322. align-items: center;
  323. background-size: cover;
  324. flex-direction: column;
  325. padding-top: 8px;
  326. transition: transform 0.3s, opacity 0.3s; /* 平滑过渡效果 */
  327. }
  328. .grid-item img {
  329. width: 48px; /* 使图片宽度适应格子 */
  330. height: 48px; /* 保持图片原始宽高比 */
  331. display: block; /* 移除图片下方的默认空间 */
  332. }
  333. .grid-item-title {
  334. font-weight: 400;
  335. font-size: 10px;
  336. color: #CC745A;
  337. width: 70px;
  338. white-space: nowrap;
  339. overflow: hidden;
  340. text-overflow: ellipsis;
  341. text-align: center;
  342. }
  343. /* ... 其他样式保持不变 ... */
  344. .rotating {
  345. animation: rotateGrid 3s infinite linear;
  346. }
  347. @keyframes rotateGrid {
  348. from {
  349. transform: rotate(0deg);
  350. }
  351. to {
  352. transform: rotate(360deg);
  353. }
  354. }
  355. .actives {
  356. border: 2px solid #df2727;
  357. border-radius: 15px;
  358. }
  359. .lottery-tip {
  360. text-align: center;
  361. font-size: 14px;
  362. color: #FFFFFF;
  363. font-weight: 600;
  364. }
  365. .dialog {
  366. position: fixed;
  367. top: 0;
  368. left: 0;
  369. width: 100%;
  370. height: 100%;
  371. background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  372. z-index: 1000; /* 确保遮罩层在顶部 */
  373. transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
  374. display: none;
  375. }
  376. .dialog-body {
  377. width: 100%;
  378. z-index: 1001; /* 确保遮罩层在顶部 */
  379. display: flex;
  380. flex-direction: column;
  381. align-items: center;
  382. justify-content: center;
  383. }
  384. .dialog-tip {
  385. width: 100%;
  386. height: 100px;
  387. }
  388. .dialog-bg {
  389. width: 295px;
  390. height: 251px;
  391. position: relative;
  392. }
  393. .prize-msg {
  394. position: absolute;
  395. text-align: center;
  396. }
  397. .money-title {
  398. font-weight: 500;
  399. font-size: 16px;
  400. color: #FF4E4E;
  401. padding-top: 90px;
  402. padding-bottom: 10px;
  403. }
  404. .money-content {
  405. margin-bottom: 30px;
  406. height: 60px;
  407. display: flex;
  408. justify-content: center;
  409. align-items: center;
  410. }
  411. .prize-money {
  412. font-weight: bold;
  413. font-size: 60px;
  414. color: #FF4E4E;
  415. }
  416. .prize-unit {
  417. font-weight: 500;
  418. font-size: 16px;
  419. color: #FF4E4E;
  420. padding-left: 10px;
  421. padding-top: 28px;
  422. }
  423. .dialog-btn {
  424. width: 235px;
  425. height: 52px;
  426. margin-bottom: 10px;
  427. }
  428. .money-tip {
  429. font-weight: 400;
  430. font-size: 12px;
  431. color: #999999;
  432. margin-bottom: 15px;
  433. }
  434. .goods-img {
  435. width: 100px;
  436. height: 100px;
  437. margin: 70px 0 10px;
  438. }
  439. .goods-name {
  440. font-weight: 500;
  441. font-size: 16px;
  442. color: #222222;
  443. margin-bottom: 20px;
  444. }
  445. .dialog-close {
  446. width: 30px;
  447. height: 30px;
  448. margin-top: 20px;
  449. }
  450. .mui-poppicker {
  451. z-index: 1002 !important;
  452. }
  453. .event-notice {
  454. width: 30px;
  455. height: 84px;
  456. background: rgba(255,255,255,0.5);
  457. border-radius: 15px 0px 0px 15px;
  458. border: 1px solid #FFFFFF;
  459. font-weight: 500;
  460. font-size: 14px;
  461. color: #FF4E4E;
  462. position: absolute;
  463. right: 0;
  464. top: 20%;
  465. writing-mode: vertical-rl;
  466. text-align: center;
  467. padding-right: 4px;
  468. }
  469. .notice-body {
  470. width: 80%;
  471. z-index: 1001;
  472. height: 500px;
  473. overflow-y: auto;
  474. background: #FFF;
  475. margin: 40px;
  476. border-radius: 20px;
  477. padding: 20px;
  478. font-size: 14px;
  479. border: 4px solid #eb845a;
  480. }
  481. .bg_content {
  482. height: calc(100vh + 44rem);
  483. width: 100vw;
  484. background: url('./img/blessing.png');
  485. background-size: cover;
  486. margin-top: -44rem;
  487. }
  488. .show_box{
  489. position: absolute;
  490. top: 198rem;
  491. //background: #FFFFFF;
  492. left: 15rem;
  493. right: 15rem;
  494. height: 290rem;
  495. }
  496. .show_box .show_item{
  497. width: 20rem;
  498. height: 20rem;
  499. position: relative;
  500. top: 15rem;
  501. left: 15rem;
  502. display: none;
  503. }
  504. .show_box .show_item.add_animation_item{
  505. display: block;
  506. animation: hiddenAvatarItem 0.8s ease-out 2.3s forwards
  507. }
  508. .show_box .show_item .avatar_box{
  509. width: 20rem;
  510. height: 20rem;
  511. border-radius: 15rem;
  512. overflow: hidden;
  513. position: absolute;
  514. top: 0;
  515. left: 0;
  516. z-index: 2;
  517. transform: scale(1);
  518. display: flex;
  519. align-items: center;
  520. }
  521. .show_box .show_item.add_animation_item .avatar_box{
  522. animation: showAvatarItem 0.3s ease-out 2s forwards;
  523. }
  524. .show_box .show_item .avatar_box .avatar{
  525. width: 20rem;
  526. height: 20rem;
  527. object-fit: cover;
  528. }
  529. .show_box .show_item .info_box{
  530. position: absolute;
  531. top: -15rem;
  532. left: -15rem;
  533. z-index: 1;
  534. background: rgba(255,255,255,0.8);
  535. border-radius: 15rem;
  536. border: 1rem solid #FFFFFF;
  537. width: 240rem;
  538. padding: 15rem;
  539. box-sizing: border-box;
  540. }
  541. .show_box .show_item.add_animation_item .info_box{
  542. animation: hiddenItem 0.3s ease-out 2s forwards;
  543. }
  544. .show_box .show_item.show_img_item .info_box{
  545. top: -175rem;
  546. left: -15rem;
  547. }
  548. .show_box .show_item.show_img_item.add_animation_item .info_box{
  549. animation: hiddenImgItem 0.3s ease-out 2s forwards;
  550. }
  551. @keyframes showItem {
  552. 0% {
  553. opacity: 0;
  554. }
  555. 100% {
  556. opacity: 1;
  557. }
  558. }
  559. @keyframes showAvatarItem {
  560. 0% {
  561. transform: scale(1);
  562. }
  563. 100% {
  564. transform: scale(1.5);
  565. }
  566. }
  567. @keyframes hiddenAvatarItem {
  568. 0% {
  569. transform: scale(1.5);
  570. opacity: 1;
  571. }
  572. 100% {
  573. transform: scale(1.5);
  574. opacity: 0;
  575. top: 135rem;
  576. left: 172rem;
  577. }
  578. }
  579. @keyframes hiddenItem {
  580. 0% {
  581. transform: scale(1);
  582. top: -15rem;
  583. left: -15rem;
  584. }
  585. 100% {
  586. transform: scale(0);
  587. left:-110rem;
  588. top: -30rem;
  589. }
  590. }
  591. @keyframes hiddenImgItem {
  592. 0% {
  593. transform: scale(1);
  594. top: -175rem;
  595. left: -15rem;
  596. }
  597. 100% {
  598. transform: scale(0);
  599. left:-110rem;
  600. top: -115rem;
  601. }
  602. }
  603. .show_box .show_item .info_box .img_box{
  604. width: 210rem;
  605. height: 150rem;
  606. border-radius: 15rem;
  607. overflow: hidden;
  608. margin-bottom: 10rem;
  609. display: none;
  610. }
  611. .show_box .show_item.show_img_item .info_box .img_box{
  612. display: block;
  613. }
  614. .show_box .show_item .info_box .img_box .info_img{
  615. width: 210rem;
  616. height: 150rem;
  617. object-fit: cover;
  618. }
  619. .show_box .show_item .info_box .info_text{
  620. }
  621. .show_box .show_item .info_box .info_text .info_name{
  622. font-weight: 500;
  623. font-size: 14rem;
  624. color: #222222;
  625. line-height: 20rem;
  626. padding-left: 25rem;
  627. margin-bottom: 5rem;
  628. height: 20rem;
  629. }
  630. .show_box .show_item .info_box .info_text .info_dsc{
  631. font-weight: 400;
  632. font-size: 12rem;
  633. color: #222222;
  634. line-height: 17rem;
  635. }
  636. .send_btn {
  637. width: 345rem;
  638. position: fixed;
  639. bottom: 50rem;
  640. left: 50%;
  641. transform: translateX(-50%);
  642. }
  643. .dialog_text {
  644. position: fixed;
  645. top: 0;
  646. left: 0;
  647. width: 100%;
  648. height: 100%;
  649. background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  650. z-index: 1000; /* 确保遮罩层在顶部 */
  651. transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
  652. display: none;
  653. }
  654. .dialog-body {
  655. width: 100%;
  656. height: 100vh;
  657. z-index: 1001; /* 确保遮罩层在顶部 */
  658. display: flex;
  659. flex-direction: column;
  660. align-items: center;
  661. justify-content: center;
  662. }
  663. .text_bg {
  664. background: url('./img/dialog-text.png');
  665. background-size: cover;
  666. width: 100vw;
  667. height: 368rem;
  668. }
  669. .close-text {
  670. width: 24rem;
  671. height: 24rem;
  672. float: right;
  673. margin-right: 25rem;
  674. margin-top: 25rem;
  675. }
  676. .textarea_style {
  677. background-color: rgba(255, 255, 255, 0);
  678. border: unset;
  679. height: 180rem;
  680. padding: 0 35rem;
  681. width: 100%;
  682. margin: 0;
  683. }
  684. .photo-btn {
  685. width: 80rem;
  686. height: 80rem;
  687. margin-top: 18rem;
  688. margin-right: 35rem;
  689. }
  690. .send_text {
  691. width: 225rem;
  692. height: 52rem;
  693. background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
  694. border-radius: 30rem;
  695. border: 2rem solid #FFFFFF;
  696. font-weight: 800;
  697. font-size: 16px;
  698. color: #222222;
  699. margin-top: 15rem;
  700. }
  701. .img_list {
  702. width: 100%;
  703. overflow-x: auto;
  704. padding: 0 35rem;
  705. }
  706. .imageGallery {
  707. display: flex;
  708. overflow-x: auto;
  709. }
  710. .imageGallery img{
  711. width: 80rem;
  712. height: 80rem;
  713. margin-top: 18rem;
  714. margin-right: 35rem;
  715. }
  716. </style>
  717. <body>
  718. <div id="collectPage">
  719. <div class="bg_content">
  720. <div class="show_box">
  721. <div id="showItem" class="show_item">
  722. <div class="avatar_box">
  723. <img id="avatar" class="avatar" src="./img/prize-bg.png"/>
  724. </div>
  725. <div class="info_box">
  726. <div class="img_box">
  727. <img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
  728. </div>
  729. <div class="info_text">
  730. <div id="infoName" class="info_name">不爱吃甜:</div>
  731. <div id="infoDsc" class="info_dsc">不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜</div>
  732. </div>
  733. </div>
  734. </div>
  735. </div>
  736. <img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
  737. </div>
  738. <div id="dialogText" class="dialog_text">
  739. <div class="dialog-body">
  740. <div class="text_bg">
  741. <img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
  742. <textarea class="textarea_style" id="textarea"></textarea>
  743. <div class="img_list">
  744. <div id="imageGallery" class="imageGallery">
  745. <img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" onclick="uploadImage()" />
  746. <input type="file" id="uploadfile" style="display: none;" multiple accept='image/*'>
  747. </div>
  748. </div>
  749. </div>
  750. <button class="send_text" onclick="handleSendText()">发送</button>
  751. </div>
  752. </div>
  753. </div>
  754. <div id="lotteryPage">
  755. <img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
  756. <div class="event-notice" id="eventNotice">
  757. <span>活动须知</span>
  758. </div>
  759. <div class="prize-content">
  760. <div id="grid-container">
  761. </div>
  762. </div>
  763. <div class="btn">
  764. <img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
  765. </div>
  766. <div class="lottery-tip" id="lotteryId"></div>
  767. <div class="rule">
  768. <div class="rule-body">
  769. <div class="tabs">
  770. <button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
  771. <button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
  772. </div>
  773. <div id="tab1" class="tab-content">
  774. </div>
  775. <div id="tab2" class="tab-content" style="display:none;">
  776. <div class="record-list" id="recordList">
  777. </div>
  778. </div>
  779. </div>
  780. </div>
  781. <div id="dialog" class="dialog">
  782. <div id="dialog-body" class="dialog-body">
  783. <img class="dialog-tip" src="./img/dialog-tip.png" />
  784. <img class="dialog-bg" src="./img/dialog-bg.png" />
  785. <div class="prize-msg" id="prize-msg-money">
  786. <div class="money-title">微信红包</div>
  787. <div class="money-content">
  788. <span class="prize-money" id="prize-money"></span>
  789. <span class="prize-unit">元</span>
  790. </div>
  791. <img class="dialog-btn" id="dialog-btn-money" src="./img/dialog-btn.png" />
  792. <div class="money-tip">红包到账会有延迟情况,请以实际为准</div>
  793. </div>
  794. <div class="prize-msg" id="prize-msg-goods">
  795. <img class="goods-img" id="goods-img" src="" />
  796. <div class="goods-name" id="goods-name"></div>
  797. <img class="dialog-btn" id="dialog-btn-goods" src="./img/dialog-btn.png" />
  798. </div>
  799. <img class="dialog-close" id="dialog-close" src="./img/dialog-close.png" />
  800. </div>
  801. </div>
  802. <div id="notice" class="dialog">
  803. <div class="notice-body" id="notice-body">
  804. <div>以下隐私协议是本产品对用户隐私保护的许诺,请您务必仔细阅读本协议,以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
  805. 为了给您提供更准确、更有针对性的服务,本产品可能会以如下方式,使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息,在未征得您许可的情况下,不会将这些信息对外公开或向第三方提供。<br />
  806. 请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范,我们不承担因违反上述管理规范所导致的任何责任。<br />
  807. 一、您已经认真阅读参与的活动信息,自愿参加相关活动。您自愿并乐意将活动链接、海报、文案等信息转发分享到微信朋友圈、微信群、微信聊天等渠道,并不是因为诱导的情况下参与相关活动、分享相关活动。<br />
  808. 二、您自愿选择服务或提供信息的情况下收集您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),并将这些信息进行整合,以便向您提供更好的用户服务。<br />
  809. 三、保有您的使用记录在如下情况下,本产品会遵照您的意愿或法律的规定披露您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),由此引发的问题将由您个人承担: <br />
  810. 1)事先获得您的授权<br />
  811. 2)只有获取您的个人资料,才能提供您所要求的服务 <br />
  812. 3)根据有关的法律法规要求<br />
  813. 4)按照相关政府主管部门的要求 <br />
  814. 5)为维护本产品的合法权益<br />
  815. 6)您同意让第三方共享资料<br />
  816. 7)我们发现您违反了本产品的服务条款或使用规定 <br />
  817. 8)我们需要向代表我们提供产品或服务的公司提供资料 (除非我们另行通知您,否则这些公司无权使用您的身份识别资料)<br />
  818. 四、本《隐私协议》不适用于以下情况: <br />
  819. 1)通过我们的服务而接入的第三方服务(包括任何第三方网站)收集的信息。本政策仅适用于我们所收集的信息,并不适用于任何第三方提供的服务或第三方的信息使用规则,我们对任何第三方使用由您提供的信息不承担任何责任。<br />
  820. 2)通过在我们服务中进行广告服务的其他公司或机构所收集的信息。<br />
  821. </div>
  822. </div>
  823. </div>
  824. <div id="overlay" class="overlay">
  825. <div id="popForm" class="pop-form">
  826. <div class="pop-title">
  827. <img class="close-Icon" id="closeIcon" src="./img/close.png" mode="widthFix" />
  828. <span>填写收货地址</span>
  829. </div>
  830. <form class="mui-input-group">
  831. <div class="mui-input-row">
  832. <label>姓名:</label>
  833. <input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
  834. </div>
  835. <div class="mui-input-row">
  836. <label>微信号:</label>
  837. <input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
  838. </div><div class="mui-input-row">
  839. <label>手机号:</label>
  840. <input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
  841. </div>
  842. <div class="mui-input-row">
  843. <label>地区:</label>
  844. <div class="city-data" id="showCityPicker">
  845. <div class="no-data" id="placeholderCity">
  846. <span>请选择地区</span>
  847. <img class="right-Icon" id="city-rightIcon" src="" mode="widthFix" />
  848. </div>
  849. <div id="province"></div>
  850. <div id="city"></div>
  851. </div>
  852. </div>
  853. <div class="mui-input-row">
  854. <label>详细地址:</label>
  855. <input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
  856. </div>
  857. <div class="mui-input-row">
  858. <label>备注:</label>
  859. <input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
  860. </div>
  861. <div class="mui-button-row">
  862. <button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
  863. </div>
  864. </form>
  865. </div>
  866. </div>
  867. </div>
  868. <script>
  869. let h5Type = 20
  870. let mpClientId = ''
  871. let credentials = {
  872. bucket: '',
  873. Authorization: '',
  874. secretId: '',
  875. serverDomain: ''
  876. }
  877. let imgList = []
  878. var itemList = []
  879. var itemIndex = 0
  880. function uploadImage() {
  881. let uploaInput = document.getElementById('uploadfile');
  882. document.getElementById('uploadfile').click();
  883. // 当用户上传时触发事件
  884. uploaInput.onchange=function(){
  885. readFile(this);
  886. }
  887. //处理图片并添加都dom中的函数
  888. let readFile=function(obj){
  889. // 获取input里面的文件组
  890. let fileList=obj.files;
  891. //对文件组进行遍历,可以到控制台打印出fileList去看看
  892. for(let i=0;i<fileList.length;i++){
  893. var formData = new FormData();
  894. formData.append('path', fileList[i].name)
  895. formData.append('file', fileList[i])
  896. let url = credentials.serverDomain+ '/open/v1/file/upload'
  897. mui.ajax(url, {
  898. data: formData,
  899. processData: false,
  900. contentType: false,
  901. type:'post',
  902. headers: {
  903. 'bucket': credentials.bucket,
  904. 'Authorization': credentials.authorization,
  905. 'secretId': credentials.secretId,
  906. },
  907. success:function(res){
  908. imgList.push(res.data.url)
  909. const gallery = document.getElementById('imageGallery');
  910. const photoBtn = document.getElementById('photoBtn');
  911. // imgList.forEach( item=> { // 假设data是一个包含图片URL的数组
  912. const img = document.createElement('img');
  913. img.src = res.data.url; // 假设每个图片对象都有一个url属性
  914. // gallery.appendChild(img); // 将图片添加到div中
  915. gallery.insertBefore(img,photoBtn);
  916. // });
  917. console.log('sdd', imgList);
  918. },
  919. error:function(error){
  920. //异常处理;
  921. console.log(error);
  922. }
  923. });
  924. }
  925. }
  926. }
  927. window.onload = function() {
  928. if (getQueryParam('openId')) {
  929. if(!getQueryParam('externalUserid')) {
  930. mui.alert('无权限访问', '提示', '确定');
  931. } else {
  932. if (h5Type == 19) {
  933. showCityLevel();
  934. raffleInfo();
  935. raffleRecord();
  936. } else if (h5Type == 20) {
  937. // 获取腾讯COS对象存储的实例对象
  938. getCosObj();
  939. findCollectList()
  940. }
  941. }
  942. } else {
  943. // 走授权操作
  944. getAuth();
  945. }
  946. document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
  947. };
  948. // 公众号授权,获取code
  949. function getAuth() {
  950. // 获取url上的code
  951. let code = getQueryParam('code')
  952. if (code) {
  953. let bId = getQueryParam('bId')
  954. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-client/p/getInfoByh5Code',{
  955. data:{
  956. code: code,
  957. bId: bId,
  958. },
  959. dataType:'json',//服务器返回json格式数据
  960. type:'get',//HTTP请求类型
  961. success:function(res){
  962. h5Type = res.data.h5Type
  963. if (h5Type == 19) {
  964. document.getElementById('collectPage').style.display = "none"
  965. document.getElementById('lotteryPage').style.display = "block"
  966. if (res.data.externalUserid) {
  967. showCityLevel();
  968. } else {
  969. // 进行下一步企微授权
  970. gerQwAuth(bId, res.data.openId);
  971. }
  972. } else if (h5Type == 20){
  973. document.getElementById('collectPage').style.display = "block"
  974. document.getElementById('lotteryPage').style.display = "none"
  975. mpClientId = res.data.mpClientId
  976. // if (!res.data.externalUserid) {
  977. // // 进行下一步企微授权
  978. // gerQwAuth(bId, res.data.openId);
  979. // }
  980. }
  981. },
  982. error:function(error){
  983. //异常处理;
  984. console.log(error);
  985. }
  986. });
  987. } else {
  988. let redirect_uri = window.location.href
  989. // code 不存在,走微信网页授权逻辑
  990. let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx99ec0d0828a4d2d3&redirect_uri=${redirect_uri}&scope=snsapi_userinfo&state=STATE#wechat_redirect`
  991. window.location.replace(url)
  992. }
  993. };
  994. // 企微授权
  995. function gerQwAuth (bId, openId) {
  996. let link = window.location.href
  997. mui.ajax('http://test.wefanbot.com:18993/p/insuite/p/getOAUrl',{
  998. data:{
  999. bId: bId,
  1000. openId: openId,
  1001. },
  1002. dataType:'json',//服务器返回json格式数据
  1003. type:'get',//HTTP请求类型
  1004. success:function(res){
  1005. if (res.data) {
  1006. window.location.replace(res.data)
  1007. }
  1008. },
  1009. error:function(error){
  1010. //异常处理;
  1011. console.log(error);
  1012. }
  1013. });
  1014. };
  1015. function getCosObj() {
  1016. mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/p/getAuthorization',{
  1017. data:{
  1018. },
  1019. dataType:'json',//服务器返回json格式数据
  1020. type:'post',//HTTP请求类型
  1021. headers:{'Content-Type':'application/json'},
  1022. success:function(res){
  1023. credentials = res.data.info
  1024. // 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
  1025. credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
  1026. console.log('credentials2', credentials);
  1027. },
  1028. error:function(error){
  1029. //异常处理;
  1030. console.log(error);
  1031. }
  1032. });
  1033. };
  1034. // 发送祝福
  1035. function handleSendText() {
  1036. let openId = getQueryParam('openId')
  1037. let textareaResult = document.getElementById("textarea").value;
  1038. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/add', {
  1039. data:{
  1040. mpClientId: mpClientId,
  1041. openId: openId,
  1042. content: textareaResult,
  1043. imgList: imgList,
  1044. },
  1045. dataType:'json',//服务器返回json格式数据
  1046. type:'post',//HTTP请求类型
  1047. headers:{'Content-Type':'application/json'},
  1048. success:function(res){
  1049. if (res.code == 1) {
  1050. mui.toast('发送成功');
  1051. document.getElementById('dialogText').style.display = 'none';
  1052. imgList = []
  1053. } else {
  1054. mui.toast(res.msg);
  1055. }
  1056. },
  1057. error:function(error){
  1058. //异常处理;
  1059. console.log(error);
  1060. }
  1061. });
  1062. };
  1063. // 获取用户故事收集列表
  1064. function findCollectList() {
  1065. let openId = getQueryParam('openId')
  1066. let textareaResult = document.getElementById("textarea").value;
  1067. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/findCollectList', {
  1068. data:{
  1069. },
  1070. dataType:'json',//服务器返回json格式数据
  1071. type:'get',//HTTP请求类型
  1072. success:function(res){
  1073. itemList = res.data||[]
  1074. console.log(itemList)
  1075. onShowItem()
  1076. },
  1077. error:function(error){
  1078. //异常处理;
  1079. console.log(error);
  1080. }
  1081. });
  1082. };
  1083. function getRandomArbitrary(min, max) {
  1084. return Math.floor(Math.random() * (max - min) + min);
  1085. }
  1086. function showItem(data){
  1087. var showItem = document.getElementById('showItem')
  1088. var infoName = document.getElementById('infoName')
  1089. var infoDsc = document.getElementById('infoDsc')
  1090. var avatar = document.getElementById('avatar')
  1091. avatar.src = data.avatar
  1092. infoName.innerText = data.clientName
  1093. infoDsc.innerText = data.content
  1094. var X = getRandomArbitrary(15,125)
  1095. if(data.imgList&&data.imgList.length){//有图片
  1096. showItem.classList.add("show_img_item")
  1097. var infoImg = document.getElementById('infoImg')
  1098. infoImg.src = data.imgList[0]
  1099. var Y = getRandomArbitrary(175,208)
  1100. }else{//无图片
  1101. showItem.classList.remove("show_img_item")
  1102. var Y = getRandomArbitrary(15,157)
  1103. }
  1104. showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
  1105. showItem.classList.add("add_animation_item")
  1106. setTimeout(()=>{
  1107. showItem.classList.remove("add_animation_item")
  1108. },3500)
  1109. }
  1110. function onShowItem(){
  1111. console.log(itemIndex)
  1112. if(itemList.length){
  1113. var data = itemList[itemIndex]
  1114. showItem(data)
  1115. if(itemIndex<itemList.length-1){
  1116. itemIndex++
  1117. }else{
  1118. itemIndex = 0
  1119. }
  1120. setTimeout(()=>{
  1121. onShowItem()
  1122. },4000)
  1123. }
  1124. }
  1125. document.getElementById('sendBtn').addEventListener('click', function() {
  1126. document.getElementById('dialogText').style.display = 'block';
  1127. });
  1128. document.getElementById('closeText').addEventListener('click', function() {
  1129. document.getElementById('dialogText').style.display = 'none';
  1130. imgList = []
  1131. });
  1132. // 截取url中的数据
  1133. function getQueryParam(paramName) {
  1134. // 获取当前URL的查询字符串部分
  1135. const queryString = window.location.search;
  1136. // 创建一个URLSearchParams对象
  1137. const urlParams = new URLSearchParams(queryString);
  1138. // 返回指定参数的值,如果不存在则返回null
  1139. return urlParams.get(paramName);
  1140. };
  1141. // 城市数据
  1142. function showCityLevel() {
  1143. var picker = new mui.PopPicker({
  1144. layer: 2,
  1145. });
  1146. mui.ajax('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json',{
  1147. data:{
  1148. },
  1149. dataType:'json',//服务器返回json格式数据
  1150. type:'get',//HTTP请求类型
  1151. success:function(res){
  1152. picker.setData(res)
  1153. },
  1154. error:function(error){
  1155. //异常处理;
  1156. console.log(error);
  1157. }
  1158. });
  1159. let provinceResult = document.getElementById('province');
  1160. let cityResult = document.getElementById('city');
  1161. document.getElementById("showCityPicker").addEventListener('click', function(event) {
  1162. event.stopPropagation();
  1163. // 默认第一层显示第1项;第二层显示第2项
  1164. picker.pickers[0].setSelectedIndex(0);
  1165. picker.pickers[1].setSelectedIndex(2);
  1166. picker.show(function(selectItems) {
  1167. document.getElementById('placeholderCity').style.display = "none"
  1168. var text1 = selectItems[0].text;
  1169. var text2 = selectItems[1].text;
  1170. provinceResult.innerText = text1
  1171. cityResult.innerText = text2
  1172. })
  1173. });
  1174. };
  1175. let lotteryStatus = '' // 抽奖活动状态
  1176. let gridList = []; // 用于存储所有格子数据
  1177. let gridItems = []; // 用于存储所有格子
  1178. let currentIndex = 0; // 当前活动的格子索引
  1179. let stopRotation = false; // 控制是否停止轮询的变量
  1180. let remainingTimes = 0
  1181. // 获取抽奖信息
  1182. function raffleInfo() {
  1183. let openId = getQueryParam('openId')
  1184. let raffleId = getQueryParam('bId')
  1185. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId',{
  1186. data:{
  1187. openId: openId,
  1188. raffleId: raffleId,
  1189. },
  1190. dataType:'json',//服务器返回json格式数据
  1191. type:'get',//HTTP请求类型
  1192. success:function(res){
  1193. lotteryStatus = res.data.status
  1194. gridList = res.data.prizes
  1195. document.getElementById("tab1").innerHTML = res.data.activityInfo
  1196. remainingTimes = res.data.raffleNum-res.data.useNum
  1197. document.getElementById("lotteryId").innerHTML = `已抽奖${res.data.useNum}次,还剩${res.data.raffleNum-res.data.useNum}次机会`
  1198. const container = document.getElementById('grid-container');
  1199. const buttons = document.getElementById('lottery-button');
  1200. container.innerHTML = '';
  1201. for (let i = 0; i < 9; i++) {
  1202. // 创建一个新的div元素作为格子
  1203. const gridItem = document.createElement('div');
  1204. gridItem.classList.add('grid-item');
  1205. // 创建图片元素并添加到格子中
  1206. const img = document.createElement('img');
  1207. img.src = res.data.prizes[i].img; // 设置图片源
  1208. img.alt = `图片 ${i + 1}`; // 设置图片的替代文本
  1209. gridItem.appendChild(img);
  1210. // 创建标题元素并添加到格子中
  1211. const title = document.createElement('div');
  1212. title.classList.add('grid-item-title');
  1213. title.textContent = res.data.prizes[i].name; // 设置标题文本
  1214. gridItem.appendChild(title);
  1215. // 将格子添加到容器中
  1216. container.appendChild(gridItem);
  1217. }
  1218. gridItems = []
  1219. container.querySelectorAll('.grid-item').forEach(item => {
  1220. gridItems.push(item);
  1221. });
  1222. buttons.addEventListener('click', function() {
  1223. handleLottery();
  1224. })
  1225. },
  1226. error:function(error){
  1227. //异常处理;
  1228. console.log(error);
  1229. }
  1230. });
  1231. };
  1232. // 点击抽奖
  1233. function handleLottery() {
  1234. if (!remainingTimes) {
  1235. mui.toast('抽奖次数已用完');
  1236. return false;
  1237. }
  1238. const gridContainer = document.getElementById('grid-container');
  1239. if (lotteryStatus === -1) {
  1240. mui.toast('活动已结束');
  1241. } else if (lotteryStatus === 0) {
  1242. mui.toast('活动未开始');
  1243. } else if (lotteryStatus === 1) {
  1244. stopRotation = false
  1245. rotateActive();
  1246. let externalUserid = getQueryParam('externalUserid')
  1247. let openId = getQueryParam('openId')
  1248. let raffleId = getQueryParam('bId')
  1249. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/lottery',{
  1250. data:{
  1251. externalUserid: externalUserid,
  1252. openId: openId,
  1253. raffleId: raffleId,
  1254. },
  1255. dataType:'json',//服务器返回json格式数据
  1256. type:'get',//HTTP请求类型
  1257. success:function(res){
  1258. if (res.data) {
  1259. setTimeout(() => {
  1260. // 停止轮询
  1261. stopRotation = true;
  1262. // 立即将 active 类应用到目标格子上
  1263. gridItems.forEach(item => item.classList.remove('actives'));
  1264. gridList.forEach((item, index) => {
  1265. if (res.data.id === item.id) {
  1266. gridItems[index].classList.add('actives');
  1267. }
  1268. });
  1269. if (res.data.acceptType === 0 || res.data.acceptType === 1) {
  1270. document.getElementById('dialog').style.display = 'flex';
  1271. document.getElementById('prize-msg-goods').style.display = 'block';
  1272. document.getElementById('prize-msg-money').style.display = 'none';
  1273. document.getElementById("goods-img").src = res.data.img
  1274. document.getElementById("goods-name").innerHTML = res.data.name
  1275. } else if (res.data.acceptType === 2) {
  1276. document.getElementById('dialog').style.display = 'flex';
  1277. document.getElementById('prize-msg-goods').style.display = 'none';
  1278. document.getElementById('prize-msg-money').style.display = 'block';
  1279. document.getElementById("prize-money").innerHTML = res.data.money
  1280. }
  1281. raffleInfo()
  1282. raffleRecord()
  1283. currentIndex = 0
  1284. }, 2000); // 假设接口调用需要2秒
  1285. } else {
  1286. stopRotation = true;
  1287. gridItems.forEach(item => item.classList.remove('actives'));
  1288. currentIndex = 0
  1289. mui.toast(res.msg);
  1290. }
  1291. },
  1292. error:function(error){
  1293. //异常处理;
  1294. console.log(error);
  1295. }
  1296. });
  1297. }
  1298. };
  1299. // 轮询动画函数
  1300. function rotateActive() {
  1301. // 移除上一个格子的 active 类
  1302. if (gridItems[currentIndex]) {
  1303. gridItems[currentIndex].classList.remove('actives');
  1304. }
  1305. // 更新当前索引,循环到第一个格子如果超出范围
  1306. currentIndex = (currentIndex + 1) % gridItems.length;
  1307. // 应用 active 类到新的格子
  1308. gridItems[currentIndex].classList.add('actives');
  1309. // 递归调用以继续动画,直到接口调用完成
  1310. if (!stopRotation) {
  1311. setTimeout(rotateActive, 100); // 假设每个格子显示 500 毫秒
  1312. }
  1313. };
  1314. // 获取抽奖记录
  1315. function raffleRecord() {
  1316. let openId = getQueryParam('openId')
  1317. let raffleId = getQueryParam('bId')
  1318. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleRecord',{
  1319. data:{
  1320. openId: openId,
  1321. raffleId: raffleId,
  1322. page: 1,
  1323. pageCount: 1000,
  1324. },
  1325. dataType:'json',//服务器返回json格式数据
  1326. type:'post',//HTTP请求类型
  1327. headers:{'Content-Type':'application/json'},
  1328. success:function(res){
  1329. const recordList = document.getElementById('recordList');
  1330. recordList.innerHTML = ''
  1331. res.data.records.forEach(record => {
  1332. recordList.innerHTML += `
  1333. <div class="record-item">
  1334. <img class="prize-img" src="${record.img}" mode="widthFix" />
  1335. <div>
  1336. <div class="prize-name">${record.name}</div>
  1337. <div class="prize-time">${timeFormat(record.raffleTime)}</div>
  1338. </div>
  1339. <button id="toggleButton" ${record.status ? 'disabled' : ''} class="get-btn" onclick="handleOpenForm(${record.id})">${record.status ? '已领取' : '领取'}</button>
  1340. </div>`
  1341. });
  1342. },
  1343. error:function(error){
  1344. //异常处理;
  1345. console.log(error);
  1346. }
  1347. });
  1348. };
  1349. let recordId = ''
  1350. function handleOpenForm(id) {
  1351. recordId = id
  1352. document.getElementById('overlay').style.display = 'flex';
  1353. var div = document.getElementById('popForm');
  1354. div.classList.add('show');
  1355. };
  1356. // 切换tab
  1357. function changeTab(evt, tabName) {
  1358. // 获取所有tab链接,并移除激活类
  1359. var i, tabcontent, tablinks;
  1360. tabcontent = document.getElementsByClassName("tab-content");
  1361. for (i = 0; i < tabcontent.length; i++) {
  1362. tabcontent[i].style.display = "none";
  1363. }
  1364. tablinks = document.getElementsByClassName("tab-link");
  1365. for (i = 0; i < tablinks.length; i++) {
  1366. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1367. }
  1368. // 显示当前tab内容,并添加激活类到链接
  1369. document.getElementById(tabName).style.display = "block";
  1370. evt.currentTarget.className += " active";
  1371. };
  1372. function handleSave() {
  1373. let nameResult = document.getElementById('name').value;
  1374. let wxAccountResult = document.getElementById('wxAccount').value
  1375. let phone = document.getElementById("phone").value;
  1376. let provinceResult = document.getElementById('province');
  1377. let cityResult = document.getElementById('city');
  1378. let addressResult = document.getElementById("address").value;
  1379. let remarkResult = document.getElementById("remark").value;
  1380. if (!nameResult){
  1381. mui.toast("请填写姓名");
  1382. } else if (!phone){
  1383. mui.toast("请输入手机号");
  1384. } else if (!provinceResult.innerText){
  1385. mui.toast('请选择城市');
  1386. } else {
  1387. mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleForm',{
  1388. data:{
  1389. name: nameResult,
  1390. wxAccount: wxAccountResult,
  1391. phone: phone,
  1392. province: provinceResult.innerText || '',
  1393. city: cityResult.innerText || '',
  1394. address: addressResult,
  1395. remark: remarkResult,
  1396. recordId: recordId
  1397. },
  1398. dataType:'json',//服务器返回json格式数据
  1399. type:'post',//HTTP请求类型
  1400. timeout:10000,//超时时间设置为10秒;
  1401. headers:{'Content-Type':'application/json'},
  1402. success:function(res){
  1403. if (res.code === 1) {
  1404. mui.toast("提交成功!");
  1405. document.getElementById('overlay').style.display = 'none';
  1406. var div = document.getElementById('popForm');
  1407. div.classList.remove('show');
  1408. raffleRecord()
  1409. } else {
  1410. mui.toast(res.msg);
  1411. }
  1412. },
  1413. error:function(error){
  1414. //异常处理;
  1415. console.log(error);
  1416. mui.toast(error);
  1417. }
  1418. });
  1419. }
  1420. };
  1421. document.getElementById('closeIcon').addEventListener('click', function() {
  1422. document.getElementById('overlay').style.display = 'none';
  1423. var div = document.getElementById('popForm');
  1424. div.classList.remove('show');
  1425. });
  1426. if (document.getElementById('dialog-btn-money')) {
  1427. document.getElementById('dialog-btn-money').addEventListener('click', function() {
  1428. document.getElementById('dialog').style.display = 'none';
  1429. gridItems[currentIndex].classList.remove('actives');
  1430. });
  1431. }
  1432. if (document.getElementById('dialog-btn-goods')) {
  1433. document.getElementById('dialog-btn-goods').addEventListener('click', function() {
  1434. document.getElementById('dialog').style.display = 'none';
  1435. gridItems[currentIndex].classList.remove('actives');
  1436. });
  1437. }
  1438. document.getElementById('dialog-close').addEventListener('click', function() {
  1439. document.getElementById('dialog').style.display = 'none';
  1440. gridItems[currentIndex].classList.remove('actives');
  1441. });
  1442. document.getElementById('eventNotice').addEventListener('click', function() {
  1443. document.getElementById('notice').style.display = 'block';
  1444. });
  1445. document.getElementById('notice').addEventListener('click', function() {
  1446. var div = document.getElementById('notice-body');
  1447. // 检查点击事件的目标是否不是div本身或其子元素
  1448. if (!div.contains(event.target)) {
  1449. document.getElementById('notice').style.display = 'none';
  1450. }
  1451. });
  1452. function timeFormat (time, format = 'yyyy-MM-dd hh:mm:ss') {
  1453. if (time === undefined || time === '' || time === null) {
  1454. return '/'
  1455. } else {
  1456. const date = new Date(time)
  1457. const o = {
  1458. 'M+': date.getMonth() + 1,
  1459. 'd+': date.getDate(),
  1460. 'h+': date.getHours(),
  1461. 'm+': date.getMinutes(),
  1462. 's+': date.getSeconds(),
  1463. 'q+': Math.floor((date.getMonth() + 3) / 3),
  1464. 'S': date.getMilliseconds()
  1465. }
  1466. if (/(y+)/.test(format)) {
  1467. format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  1468. }
  1469. for (let k in o) {
  1470. if (new RegExp('(' + k + ')').test(format)) {
  1471. format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  1472. }
  1473. }
  1474. return format
  1475. }
  1476. }
  1477. </script>
  1478. </body>
  1479. </html>