1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <link href="css/mui.css" rel="stylesheet" />
- <link href="css/mui.picker.css" rel="stylesheet" />
- <link href="css/mui.poppicker.css" rel="stylesheet" />
- <script src="js/mui.js"></script>
- <script src="js/mui.picker.js"></script>
- <script src="js/mui.poppicker.js"></script>
- <!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
- <script>
- var vConsole = new window.VConsole();
- </script> -->
- <script type="text/javascript">
- mui.init()
- (function flexible (window, document) {
- let docEl = document.documentElement
- let dpr = window.devicePixelRatio || 1
-
- // adjust body font size
- function setBodyFontSize () {
- if (document.body) {
- document.body.style.fontSize = (12 * dpr) + 'px'
- } else {
- document.addEventListener('DOMContentLoaded', setBodyFontSize)
- }
- }
- setBodyFontSize()
-
- // set 1rem = viewWidth / 10
- function setRemUnit () {
- let rem = docEl.clientWidth / 375
- docEl.style.fontSize = rem + 'px'
- }
-
- setRemUnit()
-
- // reset rem unit on page resize
- window.addEventListener('resize', setRemUnit)
- window.addEventListener('pageshow', function(e) {
- if (e.persisted) {
- setRemUnit()
- }
- })
-
- // detect 0.5px supports
- if (dpr >= 2) {
- let fakeBody = document.createElement('body')
- let testElement = document.createElement('div')
- testElement.style.border = '.5px solid transparent'
- fakeBody.appendChild(testElement)
- docEl.appendChild(fakeBody)
- if (testElement.offsetHeight === 1) {
- docEl.classList.add('hairlines')
- }
- docEl.removeChild(fakeBody)
- }
- }(window, document));
- (function() {
- if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
- handleFontSize()
- } else {
- if (document.addEventListener) {
- document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
- } else if (document.attachEvent) {
- document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
- }
- }
- function handleFontSize () {
- // 设置网页字体为默认大小
- WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
- // 重写设置网页字体大小的事件
- WeixinJSBridge.on('menu:setfont', function() {
- WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
- })
- }
- })()
- </script>
- </head>
- <style type="text/css">
- body {
- margin: 0;
- background: #FFFFFF;
- }
- #lotteryPage,#collectPage{
- display: none;
- }
- .bg-img {
- width: 100%;
- height: 100%;
- }
- .btn {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .btn-img {
- width: 290px;
- }
- .rule {
- width: 100%;
- height: 509px;
- padding: 65px 15px 40px;
- background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
- margin-top: -60px;
- }
- .rule-body {
- height: 404px;
- background: #FEE8D0;
- border-radius: 20px;
- padding: 20px;
- }
- .tabs {
- display: flex;
- justify-content: space-around;
- align-items: center;
- padding: 0 2px;
- margin: 0 auto;
- width: 255px;
- height: 34px;
- background: rgba(255, 125, 97, 0.2);
- border-radius: 17px 17px 17px 17px;
- }
- .tab-link {
- border: none;
- outline: none;
- cursor: pointer;
- transition: 0.3s;
- color: #FF765B;
- background: unset;
- width: 125px;
- height: 30px;
- border-radius: 17px
- }
- .tab-link:active {
- background: rgba(255, 125, 97, 0.2);
- }
-
- .tab-link.active {
- background: #FFFFFF;
- }
-
- .tab-content {
- p {
- font-weight: 400;
- font-size: 14px;
- color: #CB4E35;
- margin-top: 20px;
- }
- }
- .record-list {
- overflow-y: auto;
- height: 300px;
- margin-top: 18px;
- }
- .record-item {
- width: 315px;
- height: 72px;
- background: #FEDFC9;
- border-radius: 10px;
- padding: 9px 10px 8px;
- display: flex;
- align-items: center;
- margin: 0 auto 10px;
- }
- .prize-img {
- width: 55px;
- height: 55px;
- border-radius: 10px;
- margin-right: 8px;
- }
- .get-btn {
- width: 72px;
- height: 30px;
- background: #FF4646;
- border-radius: 17px;
- font-size: 14px;
- color: #FFFFFF;
- margin-left: 30px;
- }
- .prize-name {
- font-weight: 500;
- color: #FF4646;
- }
- .prize-time {
- font-size: 12px;
- color: #FF6767;
- }
- .mui-input-group {
- padding-top: 15px;
- }
- .mui-input-group:before {
- background: none;
- }
- .mui-input-group:after {
- background: none;
- }
- .mui-input-group .mui-input-row:after {
- background: none;
- }
- .mui-input-group .mui-input-row {
- height: 60px;
- }
- ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
- font-weight: 400;
- font-size: 14px;
- color: #CCCCCC;
- float: right;
- }
- ::-moz-placeholder { /* Firefox 19+ */
- font-weight: 400;
- font-size: 14px;
- color: #CCCCCC;
- float: right;
- }
- :-ms-input-placeholder { /* IE 10+ */
- font-weight: 400;
- font-size: 14px;
- color: #CCCCCC;
- float: right;
- }
- :-moz-placeholder { /* Firefox 18- */
- font-weight: 400;
- font-size: 14px;
- color: #CCCCCC;
- float: right;
- }
- .mui-input-clear {
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- text-align: right;
- padding: 10px 0;
- padding-right: 30px !important;
- }
- .mui-input-row label {
- font-weight: 500;
- font-size: 14px;
- color: #666666;
- }
- .save-btn {
- width: 305px;
- height: 52px;
- background: #FF4646;
- border-radius: 20px;
- border: none;
- font-weight: 500;
- font-size: 16px;
- color: #FFFFFF;
- }
- .pop-form {
- width: 100%;
- background-color: #FFFFFF;
- height: 524px; /* 根据需要调整高度 */
- position: fixed; /* 或 absolute,根据需要定位 */
- bottom: -524px; /* 初始位置在可视区域外 */
- transition: bottom 0.5s ease-in-out; /* 平滑过渡效果 */
- left: 0;
- z-index: 1001; /* 确保在遮罩层之上 */
- box-sizing: border-box;
- padding: 24px 25px 44px 15px;
- border-radius: 15px 15px 0px 0px;
- }
- .city-data {
- float: right;
- width: 65%;
- height: 40px;
- padding: 10px 30px 10px 10px;
- display: flex;
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- justify-content: flex-end;
- }
- .no-data {
- width: 100%;
- font-weight: 400;
- font-size: 14px;
- color: #CCCCCC;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- }
- .pop-form.show {
- bottom: 0; /* 显示时位置 */
- }
- .pop-title {
- display: flex;
- align-items: center;
- font-weight: bold;
- font-size: 16px;
- color: #222222;
- }
- .close-Icon {
- width: 24px;
- height: 24px;
- margin-right: 100px;
- }
- .right-Icon {
- width: 16px;
- height: 16px;
- margin-left: 5px;
- }
- .overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
- z-index: 1000; /* 确保遮罩层在顶部 */
- transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
- display: none;
- }
- .prize-content {
- width: fit-content;
- margin: -96% auto 0
-
- }
- #grid-container {
- display: grid;
- grid-template-columns: repeat(3, 1fr); /* 创建3列,每列等宽 */
- gap: 10px; /* 格子之间的间距 */
- padding: 10px;
- }
-
- .grid-item {
- width: 78px; /* 使图片宽度适应格子 */
- height: 78px; /* 保持图片原始宽高比 */
- position: relative; /* 为了让标题能够绝对定位 */
- overflow: hidden; /* 确保图片不会溢出格子 */
- background-image: url(./img/prize-bg.png);
- display: flex;
- justify-content: center;
- align-items: center;
- background-size: cover;
- flex-direction: column;
- padding-top: 8px;
- transition: transform 0.3s, opacity 0.3s; /* 平滑过渡效果 */
- }
-
- .grid-item img {
- width: 48px; /* 使图片宽度适应格子 */
- height: 48px; /* 保持图片原始宽高比 */
- display: block; /* 移除图片下方的默认空间 */
- }
-
- .grid-item-title {
- font-weight: 400;
- font-size: 10px;
- color: #CC745A;
- width: 70px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-align: center;
- }
- /* ... 其他样式保持不变 ... */
-
- .rotating {
- animation: rotateGrid 3s infinite linear;
- }
-
- @keyframes rotateGrid {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
-
- .actives {
- border: 2px solid #df2727;
- border-radius: 15px;
- }
- .lottery-tip {
- text-align: center;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: 600;
- }
- .dialog {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
- z-index: 1000; /* 确保遮罩层在顶部 */
- transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
- display: none;
- }
- .dialog-body {
- width: 100%;
- z-index: 1001; /* 确保遮罩层在顶部 */
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .dialog-tip {
- width: 100%;
- height: 100px;
- }
- .dialog-bg {
- width: 295px;
- height: 251px;
- position: relative;
- }
- .prize-msg {
- position: absolute;
- text-align: center;
- }
- .money-title {
- font-weight: 500;
- font-size: 16px;
- color: #FF4E4E;
- padding-top: 90px;
- padding-bottom: 10px;
- }
- .money-content {
- margin-bottom: 30px;
- height: 60px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .prize-money {
- font-weight: bold;
- font-size: 60px;
- color: #FF4E4E;
- }
- .prize-unit {
- font-weight: 500;
- font-size: 16px;
- color: #FF4E4E;
- padding-left: 10px;
- padding-top: 28px;
- }
- .dialog-btn {
- width: 235px;
- height: 52px;
- margin-bottom: 10px;
- }
- .money-tip {
- font-weight: 400;
- font-size: 12px;
- color: #999999;
- margin-bottom: 15px;
- }
- .goods-img {
- width: 100px;
- height: 100px;
- margin: 70px 0 10px;
- }
- .goods-name {
- font-weight: 500;
- font-size: 16px;
- color: #222222;
- margin-bottom: 20px;
- }
- .dialog-close {
- width: 30px;
- height: 30px;
- margin-top: 20px;
- }
- .mui-poppicker {
- z-index: 1002 !important;
- }
- .event-notice {
- width: 30px;
- height: 84px;
- background: rgba(255,255,255,0.5);
- border-radius: 15px 0px 0px 15px;
- border: 1px solid #FFFFFF;
- font-weight: 500;
- font-size: 14px;
- color: #FF4E4E;
- position: absolute;
- right: 0;
- top: 20%;
- writing-mode: vertical-rl;
- text-align: center;
- padding-right: 4px;
- }
- .notice-body {
- width: 80%;
- z-index: 1001;
- height: 500px;
- overflow-y: auto;
- background: #FFF;
- margin: 40px;
- border-radius: 20px;
- padding: 20px;
- font-size: 14px;
- border: 4px solid #eb845a;
- }
- .bg_content {
- height: calc(100vh + 44rem);
- width: 100vw;
- background: url('./img/blessing.png');
- background-size: cover;
- margin-top: -44rem;
- }
- .show_box{
- position: absolute;
- top: 154rem;
- /* background: #FFFFFF; */
- left: 15rem;
- right: 15rem;
- height: 290rem;
- }
- .show_box .show_item{
- width: 20rem;
- height: 20rem;
- position: relative;
- display: none;
- opacity: 1;
- }
- .show_box .show_item.add_animation_item{
- display: block;
- animation: showItem 0.4s linear forwards,hiddenAvatarItem 0.8s linear 2.7s forwards
- }
- .show_box .show_item .avatar_box{
- width: 20rem;
- height: 20rem;
- border-radius: 15rem;
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- z-index: 2;
- transform: scale(1);
- display: flex;
- align-items: center;
- }
- .show_box .show_item.add_animation_item .avatar_box{
- animation: showAvatarItem 0.3s linear 2.4s forwards;
- }
- .show_box .show_item .avatar_box .avatar{
- width: 20rem;
- height: 20rem;
- object-fit: cover;
- }
- .show_box .show_item .info_box{
- position: absolute;
- top: -15rem;
- left: -15rem;
- z-index: 1;
- background: rgba(255,255,255,0.7);
- border-radius: 15rem;
- border: 1rem solid #FFFFFF;
- width: 240rem;
- padding: 15rem;
- box-sizing: border-box;
- }
- .show_box .show_item.add_animation_item .info_box{
- animation: hiddenItem 0.3s linear 2.4s forwards;
- }
- .show_box .show_item.show_img_item .info_box{
- top: -175rem;
- left: -15rem;
- }
- .show_box .show_item.show_img_item.add_animation_item .info_box{
- animation: hiddenImgItem 0.3s linear 2.4s forwards;
- }
-
- @keyframes showItem {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes showAvatarItem {
- 0% {
- transform: scale(1);
- }
- 100% {
- transform: scale(2);
- }
- }
- @keyframes hiddenAvatarItem {
- 0% {
- transform: scale(2);
- opacity: 1;
- }
- 100% {
- transform: scale(1);
- opacity: 0;
- top: 135rem;
- left: 172rem;
- }
- }
- @keyframes hiddenItem {
- 0% {
- transform: scale(1);
- top: -15rem;
- left: -15rem;
- }
- 100% {
- transform: scale(0);
- left:-110rem;
- top: -30rem;
- }
- }
- @keyframes hiddenImgItem {
- 0% {
- transform: scale(1);
- top: -175rem;
- left: -15rem;
- }
- 100% {
- transform: scale(0);
- left:-110rem;
- top: -115rem;
- }
- }
-
- .show_box .show_item .info_box .img_box{
- width: 210rem;
- height: 150rem;
- border-radius: 15rem;
- overflow: hidden;
- margin-bottom: 10rem;
- display: none;
- }
- .show_box .show_item.show_img_item .info_box .img_box{
- display: block;
- }
- .show_box .show_item .info_box .img_box .info_img{
- width: 210rem;
- height: 150rem;
- object-fit: cover;
- }
- .show_box .show_item .info_box .info_text{
-
- }
- .show_box .show_item .info_box .info_text .info_name{
- font-weight: 500;
- font-size: 14rem;
- color: #222222;
- line-height: 20rem;
- padding-left: 25rem;
- margin-bottom: 5rem;
- height: 20rem;
- }
- .show_box .show_item .info_box .info_text .info_dsc{
- font-weight: 400;
- font-size: 12rem;
- color: #222222;
- line-height: 17rem;
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 5;
- overflow: hidden;
- }
- .show_box .show_item.show_img_item .info_box .info_text .info_dsc{
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- }
- .send_btn {
- width: 345rem;
- position: fixed;
- bottom: 50rem;
- left: 50%;
- transform: translateX(-50%);
- }
- .dialog_text {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
- z-index: 1000; /* 确保遮罩层在顶部 */
- transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
- display: none;
- }
- .dialog-body {
- width: 100%;
- height: 100vh;
- z-index: 1001; /* 确保遮罩层在顶部 */
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .text_bg {
- background: url('./img/dialog-text.png');
- background-size: cover;
- width: 100vw;
- height: 368rem;
- }
- .close-text {
- width: 24rem;
- height: 24rem;
- float: right;
- margin-right: 25rem;
- margin-top: 25rem;
- }
- .textarea_style {
- background-color: rgba(255, 255, 255, 0);
- border: unset;
- height: 180rem;
- padding: 0 35rem;
- width: 100%;
- margin: 0;
- }
- .photo-btn {
- width: 80rem;
- height: 80rem;
- margin-top: 18rem;
- margin-right: 35rem;
- }
- .send_text {
- width: 225rem;
- height: 52rem;
- background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
- border-radius: 30rem;
- border: 2rem solid #FFFFFF;
- font-weight: 800;
- font-size: 16px;
- color: #222222;
- margin-top: 15rem;
- }
- .img_list {
- width: 100%;
- overflow-x: auto;
- padding: 0 35rem;
- }
- .imageGallery {
- display: flex;
- overflow-x: auto;
- }
- .imageGallery img{
- width: 80rem;
- height: 80rem;
- margin-top: 18rem;
- margin-right: 35rem;
- }
- .upload-class {
- min-width: 80rem;
- height: 80rem;
- line-height: 80rem;
- font-size: 14px;
- border: 1px solid #c1bfa9;
- border-radius: 10rem;
- text-align: center;
- margin-top: 18rem;
- margin-right: 35rem;
- color: #999;
- }
- </style>
- <body>
- <div id="collectPage">
- <div class="bg_content">
- <div class="show_box">
- <div id="showItem" class="show_item">
- <div class="avatar_box">
- <img id="avatar" class="avatar" src="./img/prize-bg.png"/>
- </div>
- <div class="info_box">
- <div class="img_box">
- <img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
- </div>
- <div class="info_text">
- <div id="infoName" class="info_name"></div>
- <div id="infoDsc" class="info_dsc"></div>
- </div>
- </div>
- </div>
- </div>
- <img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
- </div>
- <div id="dialogText" class="dialog_text">
- <div class="dialog-body">
- <div class="text_bg">
- <img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
- <textarea class="textarea_style" id="textarea" placeHolder="说出您和宝骏汽车的故事,为宝骏云海新车上市送上祝福"></textarea>
- <div class="img_list">
- <div id="imageGallery" class="imageGallery">
- <img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" onclick="uploadImage()" />
- <input type="file" id="uploadfile" style="display: none;" multiple accept='image/*'>
- </div>
- </div>
- </div>
- <button class="send_text" onclick="handleSendText()">发送</button>
- </div>
- </div>
- </div>
- <div id="lotteryPage">
- <img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
- <div class="event-notice" id="eventNotice">
- <span>活动须知</span>
- </div>
- <div class="prize-content">
- <div id="grid-container">
-
- </div>
- </div>
- <div class="btn">
- <img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
- </div>
- <div class="lottery-tip" id="lotteryId"></div>
- <div class="rule">
- <div class="rule-body">
- <div class="tabs">
- <button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
- <button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
- </div>
- <div id="tab1" class="tab-content">
- </div>
- <div id="tab2" class="tab-content" style="display:none;">
- <div class="record-list" id="recordList">
- </div>
- </div>
- </div>
- </div>
- <div id="dialog" class="dialog">
- <div id="dialog-body" class="dialog-body">
- <img class="dialog-tip" src="./img/dialog-tip.png" />
- <img class="dialog-bg" src="./img/dialog-bg.png" />
- <div class="prize-msg" id="prize-msg-money">
- <div class="money-title">微信红包</div>
- <div class="money-content">
- <span class="prize-money" id="prize-money"></span>
- <span class="prize-unit">元</span>
- </div>
- <img class="dialog-btn" id="dialog-btn-money" src="./img/dialog-btn.png" />
- <div class="money-tip">红包到账会有延迟情况,请以实际为准</div>
- </div>
- <div class="prize-msg" id="prize-msg-goods">
- <img class="goods-img" id="goods-img" src="" />
- <div class="goods-name" id="goods-name"></div>
- <img class="dialog-btn" id="dialog-btn-goods" src="./img/dialog-btn.png" />
- </div>
- <img class="dialog-close" id="dialog-close" src="./img/dialog-close.png" />
- </div>
- </div>
- <div id="notice" class="dialog">
- <div class="notice-body" id="notice-body">
- <div>以下隐私协议是本产品对用户隐私保护的许诺,请您务必仔细阅读本协议,以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
- 为了给您提供更准确、更有针对性的服务,本产品可能会以如下方式,使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息,在未征得您许可的情况下,不会将这些信息对外公开或向第三方提供。<br />
- 请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范,我们不承担因违反上述管理规范所导致的任何责任。<br />
- 一、您已经认真阅读参与的活动信息,自愿参加相关活动。您自愿并乐意将活动链接、海报、文案等信息转发分享到微信朋友圈、微信群、微信聊天等渠道,并不是因为诱导的情况下参与相关活动、分享相关活动。<br />
- 二、您自愿选择服务或提供信息的情况下收集您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),并将这些信息进行整合,以便向您提供更好的用户服务。<br />
- 三、保有您的使用记录在如下情况下,本产品会遵照您的意愿或法律的规定披露您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),由此引发的问题将由您个人承担: <br />
- 1)事先获得您的授权<br />
- 2)只有获取您的个人资料,才能提供您所要求的服务 <br />
- 3)根据有关的法律法规要求<br />
- 4)按照相关政府主管部门的要求 <br />
- 5)为维护本产品的合法权益<br />
- 6)您同意让第三方共享资料<br />
- 7)我们发现您违反了本产品的服务条款或使用规定 <br />
- 8)我们需要向代表我们提供产品或服务的公司提供资料 (除非我们另行通知您,否则这些公司无权使用您的身份识别资料)<br />
- 四、本《隐私协议》不适用于以下情况: <br />
- 1)通过我们的服务而接入的第三方服务(包括任何第三方网站)收集的信息。本政策仅适用于我们所收集的信息,并不适用于任何第三方提供的服务或第三方的信息使用规则,我们对任何第三方使用由您提供的信息不承担任何责任。<br />
- 2)通过在我们服务中进行广告服务的其他公司或机构所收集的信息。<br />
- </div>
- </div>
- </div>
- <div id="overlay" class="overlay">
- <div id="popForm" class="pop-form">
- <div class="pop-title">
- <img class="close-Icon" id="closeIcon" src="./img/close.png" mode="widthFix" />
- <span>填写收货地址</span>
- </div>
- <form class="mui-input-group">
- <div class="mui-input-row">
- <label>姓名:</label>
- <input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
- </div>
- <div class="mui-input-row">
- <label>微信号:</label>
- <input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
- </div><div class="mui-input-row">
- <label>手机号:</label>
- <input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
- </div>
- <div class="mui-input-row">
- <label>地区:</label>
- <div class="city-data" id="showCityPicker">
- <div class="no-data" id="placeholderCity">
- <span>请选择地区</span>
- <img class="right-Icon" id="city-rightIcon" src="" mode="widthFix" />
- </div>
- <div id="province"></div>
- <div id="city"></div>
- </div>
- </div>
- <div class="mui-input-row">
- <label>详细地址:</label>
- <input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
- </div>
- <div class="mui-input-row">
- <label>备注:</label>
- <input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
- </div>
- <div class="mui-button-row">
- <button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <script>
- let h5Type = null
- let credentials = {
- bucket: '',
- Authorization: '',
- secretId: '',
- serverDomain: ''
- }
- let imgList = []
- var itemList = []
- var itemIndex = 0
- var itemTimer = null
- function uploadImage() {
- let uploaInput = document.getElementById('uploadfile');
- document.getElementById('uploadfile').click();
- // 当用户上传时触发事件
- uploaInput.onchange=function(){
- readFile(this);
- }
- //处理图片并添加都dom中的函数
- let readFile=function(obj){
- // 获取input里面的文件组
- let fileList=obj.files;
- //对文件组进行遍历,可以到控制台打印出fileList去看看
- for(let i=0;i<fileList.length;i++){
- var formData = new FormData();
- formData.append('path', fileList[i].name)
- formData.append('file', fileList[i])
- // 显示上传中状态
-
- const gallery = document.getElementById('imageGallery');
- const photoBtn = document.getElementById('photoBtn');
- const upload = document.createElement('div');
- upload.className = 'upload-class';
- upload.innerHTML = '上传中...'
- gallery.insertBefore(upload,photoBtn);
- let url = credentials.serverDomain+ '/open/v1/file/upload'
- mui.ajax(url, {
- data: formData,
- processData: false,
- contentType: false,
- type:'post',
- headers: {
- 'bucket': credentials.bucket,
- 'Authorization': credentials.authorization,
- 'secretId': credentials.secretId,
- },
- success:function(res){
- imgList.push(res.data.url)
- const img = document.createElement('img');
- img.className = 'upload-img';
- img.src = res.data.url;
- gallery.insertBefore(img,photoBtn);
- gallery.removeChild(upload);
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- }
- }
- }
- window.onload = function() {
- if (getQueryParam('openId')) {
- if(!getQueryParam('externalUserid')) {
- mui.alert('无权限访问', '提示', '确定');
- } else {
- h5Type = getQueryParam('h5Type')
- if (h5Type == 19) {
- showCityLevel();
- raffleInfo();
- raffleRecord();
- document.getElementById('lotteryPage').style.display = "block"
- } else if (h5Type == 20) {
- findCollectList()
- document.getElementById('collectPage').style.display = "block"
- }
- }
- } else {
- // 走授权操作
- getAuth();
- }
- document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
- };
- // 公众号授权,获取code
- function getAuth() {
- // 获取url上的code
- let code = getQueryParam('code')
- if (code) {
- let bId = getQueryParam('bId')
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-client/p/getInfoByh5Code',{
- data:{
- code: code,
- bId: bId,
- },
- dataType:'json',//服务器返回json格式数据
- type:'get',//HTTP请求类型
- success:function(res){
- h5Type = res.data.h5Type
- if (h5Type == 19) {
- document.getElementById('collectPage').style.display = "none"
- document.getElementById('lotteryPage').style.display = "block"
- // if (!res.data.externalUserid) {
- // 进行下一步企微授权
- gerQwAuth(bId, res.data.openId);
- // }
- } else if (h5Type == 20){
- document.getElementById('collectPage').style.display = "block"
- document.getElementById('lotteryPage').style.display = "none"
- // if (!res.data.externalUserid) {
- // 进行下一步企微授权
- gerQwAuth(bId, res.data.openId);
- // }
- }
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- } else {
- let redirect_uri = window.location.href
- // code 不存在,走微信网页授权逻辑
- let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx99ec0d0828a4d2d3&redirect_uri=${redirect_uri}&scope=snsapi_userinfo&state=STATE#wechat_redirect`
- window.location.replace(url)
- }
- };
- // 企微授权
- function gerQwAuth (bId, openId) {
- let link = window.location.href
- mui.ajax('https://wlapi.wefanbot.com/p/insuite/p/getOAUrl',{
- data:{
- bId: bId,
- openId: openId,
- },
- dataType:'json',//服务器返回json格式数据
- type:'get',//HTTP请求类型
- success:function(res){
- if (res.data) {
- window.location.replace(res.data)
- }
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- };
- function getCosObj() {
- mui.ajax('https://saasapi.wefango.com/scrm/v1/oss/p/getAuthorization',{
- data:{
- },
- dataType:'json',//服务器返回json格式数据
- type:'post',//HTTP请求类型
- headers:{'Content-Type':'application/json'},
- success:function(res){
- credentials = res.data.info
- // 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
- credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
- console.log('credentials2', credentials);
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- };
- // 发送祝福
- function handleSendText() {
- let bId = getQueryParam('bId')
- let openId = getQueryParam('openId')
- let textareaResult = document.getElementById("textarea").value;
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-collect/p/add', {
- data:{
- bId: bId,
- openId: openId,
- content: textareaResult,
- imgList: imgList,
- },
- dataType:'json',//服务器返回json格式数据
- type:'post',//HTTP请求类型
- headers:{'Content-Type':'application/json'},
- success:function(res){
- if (res.code == 1) {
- mui.toast('发送成功');
- document.getElementById('dialogText').style.display = 'none';
- imgList = []
- document.getElementById("textarea").value = "";
- findCollectList()
- const gallery = document.getElementById('imageGallery');
- // 遍历gallery的所有子元素
- var imgsToRemove = gallery.querySelectorAll('img.upload-img');
- // 遍历找到的元素并移除它们
- imgsToRemove.forEach(function(img) {
- gallery.removeChild(img);
- });
- } else {
- mui.toast(res.msg);
- }
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- };
- // 获取用户故事收集列表
- function findCollectList() {
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-collect/p/findCollectList', {
- data:{
- },
- dataType:'json',//服务器返回json格式数据
- type:'get',//HTTP请求类型
- success:function(res){
- itemList = res.data||[]
- itemIndex = 0
- onShowItem()
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- };
- function getRandomArbitrary(min, max) {
- return Math.floor(Math.random() * (max - min) + min);
- }
- function showItem(data){
- var showItem = document.getElementById('showItem')
- var infoName = document.getElementById('infoName')
- var infoDsc = document.getElementById('infoDsc')
- var avatar = document.getElementById('avatar')
- avatar.src = data.avatar
- infoName.innerText = data.clientName
- infoDsc.innerText = data.content
- var X = getRandomArbitrary(15,125)
- if(data.imgList&&data.imgList.length){//有图片
- showItem.classList.add("show_img_item")
- var infoImg = document.getElementById('infoImg')
- infoImg.src = data.imgList[0]
- var Y = getRandomArbitrary(175,208)
- }else{//无图片
- showItem.classList.remove("show_img_item")
- var Y = getRandomArbitrary(15,157)
- }
- showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
- showItem.classList.add("add_animation_item")
- setTimeout(()=>{
- showItem.classList.remove("add_animation_item")
- },3500)
- }
- function onShowItem(){
- if(itemTimer){
- clearTimeout(itemTimer)
- itemTimer = null
- }
- if(itemList.length){
- var data = itemList[itemIndex]
- showItem(data)
- if(itemIndex<itemList.length-1){
- itemIndex++
- }else{
- itemIndex = 0
- }
- itemTimer = setTimeout(()=>{
- onShowItem()
- },4000)
- }
- }
- document.getElementById('sendBtn').addEventListener('click', function() {
- document.getElementById('dialogText').style.display = 'block';
- if(itemTimer){
- clearTimeout(itemTimer)
- itemTimer = null
- }
- // 获取腾讯COS对象存储的实例对象
- getCosObj();
- });
- document.getElementById('closeText').addEventListener('click', function() {
- document.getElementById('dialogText').style.display = 'none';
- imgList = []
- const gallery = document.getElementById('imageGallery');
- // 遍历gallery的所有子元素
- var imgsToRemove = gallery.querySelectorAll('img.upload-img');
- // 遍历找到的元素并移除它们
- imgsToRemove.forEach(function(img) {
- gallery.removeChild(img);
- });
- document.getElementById("textarea").value = "";
- onShowItem()
- });
- // 截取url中的数据
- function getQueryParam(paramName) {
- // 获取当前URL的查询字符串部分
- const queryString = window.location.search;
- // 创建一个URLSearchParams对象
- const urlParams = new URLSearchParams(queryString);
- // 返回指定参数的值,如果不存在则返回null
- return urlParams.get(paramName);
- };
- // 城市数据
- function showCityLevel() {
- var picker = new mui.PopPicker({
- layer: 2,
- });
- mui.ajax('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json',{
- data:{
- },
- dataType:'json',//服务器返回json格式数据
- type:'get',//HTTP请求类型
- success:function(res){
- picker.setData(res)
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- let provinceResult = document.getElementById('province');
- let cityResult = document.getElementById('city');
- document.getElementById("showCityPicker").addEventListener('click', function(event) {
- event.stopPropagation();
- // 默认第一层显示第1项;第二层显示第2项
- picker.pickers[0].setSelectedIndex(0);
- picker.pickers[1].setSelectedIndex(2);
- picker.show(function(selectItems) {
- document.getElementById('placeholderCity').style.display = "none"
- var text1 = selectItems[0].text;
- var text2 = selectItems[1].text;
- provinceResult.innerText = text1
- cityResult.innerText = text2
- })
- });
- };
- let lotteryStatus = '' // 抽奖活动状态
- let gridList = []; // 用于存储所有格子数据
- let gridItems = []; // 用于存储所有格子
- let currentIndex = 0; // 当前活动的格子索引
- let stopRotation = false; // 控制是否停止轮询的变量
- let remainingTimes = 0
- // 获取抽奖信息
- function raffleInfo() {
- let openId = getQueryParam('openId')
- let raffleId = getQueryParam('bId')
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId',{
- data:{
- openId: openId,
- raffleId: raffleId,
- },
- dataType:'json',//服务器返回json格式数据
- type:'get',//HTTP请求类型
- success:function(res){
- lotteryStatus = res.data.status
- gridList = res.data.prizes
- document.getElementById("tab1").innerHTML = res.data.activityInfo
- remainingTimes = res.data.raffleNum-res.data.useNum
- document.getElementById("lotteryId").innerHTML = `已抽奖${res.data.useNum}次,还剩${res.data.raffleNum-res.data.useNum}次机会`
- const container = document.getElementById('grid-container');
- const buttons = document.getElementById('lottery-button');
- container.innerHTML = '';
- for (let i = 0; i < 9; i++) {
- // 创建一个新的div元素作为格子
- const gridItem = document.createElement('div');
- gridItem.classList.add('grid-item');
-
- // 创建图片元素并添加到格子中
- const img = document.createElement('img');
- img.src = res.data.prizes[i].img; // 设置图片源
- img.alt = `图片 ${i + 1}`; // 设置图片的替代文本
- gridItem.appendChild(img);
-
- // 创建标题元素并添加到格子中
- const title = document.createElement('div');
- title.classList.add('grid-item-title');
- title.textContent = res.data.prizes[i].name; // 设置标题文本
- gridItem.appendChild(title);
-
- // 将格子添加到容器中
- container.appendChild(gridItem);
- }
- gridItems = []
- container.querySelectorAll('.grid-item').forEach(item => {
- gridItems.push(item);
- });
-
- buttons.addEventListener('click', function() {
- handleLottery();
- })
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- };
- // 点击抽奖
- function handleLottery() {
- if (!remainingTimes) {
- mui.toast('抽奖次数已用完');
- return false;
- }
- const gridContainer = document.getElementById('grid-container');
- if (lotteryStatus === -1) {
- mui.toast('活动已结束');
- } else if (lotteryStatus === 0) {
- mui.toast('活动未开始');
- } else if (lotteryStatus === 1) {
- stopRotation = false
- rotateActive();
- let externalUserid = getQueryParam('externalUserid')
- let openId = getQueryParam('openId')
- let raffleId = getQueryParam('bId')
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/lottery',{
- data:{
- externalUserid: externalUserid,
- openId: openId,
- raffleId: raffleId,
- },
- dataType:'json',//服务器返回json格式数据
- type:'get',//HTTP请求类型
- success:function(res){
- if (res.data) {
- setTimeout(() => {
- // 停止轮询
- stopRotation = true;
-
- // 立即将 active 类应用到目标格子上
- gridItems.forEach(item => item.classList.remove('actives'));
- gridList.forEach((item, index) => {
- if (res.data.id === item.id) {
- gridItems[index].classList.add('actives');
- }
- });
- if (res.data.acceptType === 0 || res.data.acceptType === 1) {
- document.getElementById('dialog').style.display = 'flex';
- document.getElementById('prize-msg-goods').style.display = 'block';
- document.getElementById('prize-msg-money').style.display = 'none';
- document.getElementById("goods-img").src = res.data.img
- document.getElementById("goods-name").innerHTML = res.data.name
- } else if (res.data.acceptType === 2) {
- document.getElementById('dialog').style.display = 'flex';
- document.getElementById('prize-msg-goods').style.display = 'none';
- document.getElementById('prize-msg-money').style.display = 'block';
- document.getElementById("prize-money").innerHTML = res.data.money
- }
- raffleInfo()
- raffleRecord()
- currentIndex = 0
- }, 2000); // 假设接口调用需要2秒
- } else {
- stopRotation = true;
- gridItems.forEach(item => item.classList.remove('actives'));
- currentIndex = 0
- mui.toast(res.msg);
- }
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- }
- };
- // 轮询动画函数
- function rotateActive() {
- // 移除上一个格子的 active 类
- if (gridItems[currentIndex]) {
- gridItems[currentIndex].classList.remove('actives');
- }
-
- // 更新当前索引,循环到第一个格子如果超出范围
- currentIndex = (currentIndex + 1) % gridItems.length;
-
- // 应用 active 类到新的格子
- gridItems[currentIndex].classList.add('actives');
-
- // 递归调用以继续动画,直到接口调用完成
- if (!stopRotation) {
- setTimeout(rotateActive, 100); // 假设每个格子显示 500 毫秒
- }
- };
- // 获取抽奖记录
- function raffleRecord() {
- let openId = getQueryParam('openId')
- let raffleId = getQueryParam('bId')
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleRecord',{
- data:{
- openId: openId,
- raffleId: raffleId,
- page: 1,
- pageCount: 1000,
- },
- dataType:'json',//服务器返回json格式数据
- type:'post',//HTTP请求类型
- headers:{'Content-Type':'application/json'},
- success:function(res){
- const recordList = document.getElementById('recordList');
- recordList.innerHTML = ''
- res.data.records.forEach(record => {
- recordList.innerHTML += `
- <div class="record-item">
- <img class="prize-img" src="${record.img}" mode="widthFix" />
- <div>
- <div class="prize-name">${record.name}</div>
- <div class="prize-time">${timeFormat(record.raffleTime)}</div>
- </div>
- <button id="toggleButton" ${record.status ? 'disabled' : ''} class="get-btn" onclick="handleOpenForm(${record.id})">${record.status ? '已领取' : '领取'}</button>
- </div>`
- });
- },
- error:function(error){
- //异常处理;
- console.log(error);
- }
- });
- };
- let recordId = ''
- function handleOpenForm(id) {
- recordId = id
- document.getElementById('overlay').style.display = 'flex';
- var div = document.getElementById('popForm');
- div.classList.add('show');
- };
- // 切换tab
- function changeTab(evt, tabName) {
- // 获取所有tab链接,并移除激活类
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tab-content");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
- tablinks = document.getElementsByClassName("tab-link");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
-
- // 显示当前tab内容,并添加激活类到链接
- document.getElementById(tabName).style.display = "block";
- evt.currentTarget.className += " active";
- };
- function handleSave() {
- let nameResult = document.getElementById('name').value;
- let wxAccountResult = document.getElementById('wxAccount').value
- let phone = document.getElementById("phone").value;
- let provinceResult = document.getElementById('province');
- let cityResult = document.getElementById('city');
- let addressResult = document.getElementById("address").value;
- let remarkResult = document.getElementById("remark").value;
- if (!nameResult){
- mui.toast("请填写姓名");
- } else if (!phone){
- mui.toast("请输入手机号");
- } else if (!provinceResult.innerText){
- mui.toast('请选择城市');
- } else {
- mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleForm',{
- data:{
- name: nameResult,
- wxAccount: wxAccountResult,
- phone: phone,
- province: provinceResult.innerText || '',
- city: cityResult.innerText || '',
- address: addressResult,
- remark: remarkResult,
- recordId: recordId
- },
- dataType:'json',//服务器返回json格式数据
- type:'post',//HTTP请求类型
- timeout:10000,//超时时间设置为10秒;
- headers:{'Content-Type':'application/json'},
- success:function(res){
- if (res.code === 1) {
- mui.toast("提交成功!");
- document.getElementById('overlay').style.display = 'none';
- var div = document.getElementById('popForm');
- div.classList.remove('show');
- raffleRecord()
- } else {
- mui.toast(res.msg);
- }
- },
- error:function(error){
- //异常处理;
- console.log(error);
- mui.toast(error);
- }
- });
- }
- };
- document.getElementById('closeIcon').addEventListener('click', function() {
- document.getElementById('overlay').style.display = 'none';
- var div = document.getElementById('popForm');
- div.classList.remove('show');
- });
- if (document.getElementById('dialog-btn-money')) {
- document.getElementById('dialog-btn-money').addEventListener('click', function() {
- document.getElementById('dialog').style.display = 'none';
- gridItems[currentIndex].classList.remove('actives');
- });
- }
- if (document.getElementById('dialog-btn-goods')) {
- document.getElementById('dialog-btn-goods').addEventListener('click', function() {
- document.getElementById('dialog').style.display = 'none';
- gridItems[currentIndex].classList.remove('actives');
- });
- }
- document.getElementById('dialog-close').addEventListener('click', function() {
- document.getElementById('dialog').style.display = 'none';
- gridItems[currentIndex].classList.remove('actives');
- });
- document.getElementById('eventNotice').addEventListener('click', function() {
- document.getElementById('notice').style.display = 'block';
- });
- document.getElementById('notice').addEventListener('click', function() {
- var div = document.getElementById('notice-body');
- // 检查点击事件的目标是否不是div本身或其子元素
- if (!div.contains(event.target)) {
- document.getElementById('notice').style.display = 'none';
- }
- });
- function timeFormat (time, format = 'yyyy-MM-dd hh:mm:ss') {
- if (time === undefined || time === '' || time === null) {
- return '/'
- } else {
- const date = new Date(time)
- const o = {
- 'M+': date.getMonth() + 1,
- 'd+': date.getDate(),
- 'h+': date.getHours(),
- 'm+': date.getMinutes(),
- 's+': date.getSeconds(),
- 'q+': Math.floor((date.getMonth() + 3) / 3),
- 'S': date.getMilliseconds()
- }
- if (/(y+)/.test(format)) {
- format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
- }
- for (let k in o) {
- if (new RegExp('(' + k + ')').test(format)) {
- format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
- }
- }
- return format
- }
- }
- </script>
- </body>
- </html>
|