index.html 45 KB

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