签到有礼封装 · SpeedBH v8团队开发辅助文档

# 警告框封装 * 调用方法 ~~~ $(document).ready(function(){ signBody() signLists() }); ~~~ * 签到 ~~~ function signBody(){ let html = `<div class="signPage" id="signAlert">` + `<div class="signBody" id="signBody">` + `<img src="html/style/img/user/sign.png">` + `<div class="signTop">` + `<img src="html/style/img/user/signlogo.png" >` + `<div class="signwram">已连续签到<label id="totalDay"></label>天</div>` + `</div>` + `<div class="signCont" id="signCont"></div>` + `<div class="signBtn">` + `<a class="nocheck" id="nocheck" onclick='nocheck()'>立即签到</a>` + `<a class="check" id="check">今日已签到</a>` + `<span>连续签到赢大奖漏签重置签到奖励</span>` + `</div>` + `</div>` + `</div>` $('body').append(html) // 渲染签到列表数据 signLists() // 点击空白处隐藏弹框 hideSign() // 插入样式 signCss() } ~~~ * 签到样式 ~~~ // 签到列表1-6天 function signStyle(o){ let html1 = '' // console.log(o.status) html1 = `<div class="signItem check${o.status}" onclick=sign(this)> <span>第${o.daily}天</span> <img src="html/style/img/user/nosign.png" > <label>${o.score} 积分</label> </div>` return html1 } // 签到列表7天 function signStyle2(o){ let html2 = '' html2 = `<div class="signItems check${o.status}"> <div class="signCol"> <span>第${o.daily}天</span> <label>${o.score}积分</label> </div> <img src="html/style/img/user/gift.png" class="gift"> </div>` return html2 } ~~~ * 签到列表API ~~~ function signLists(){ let data = {} data.u_id = u_id//传入u_id net('sign/list',data,'signList')//签到列表API } function signList(o){ console.log(o) if(o.succeed == 0){ warmFalse(o.msg) }else{ let html = '' for(let i in o.list){ if(i==o.list.length-1){ html = html+signStyle2(o.list[i]) }else{ html = html+signStyle(o.list[i]) } } $('#totalDay').html(o.now) $('#signCont').html(html) // $('#signCont').append(html) signCss() if(o.is_sign == 0){ $('#nocheck').show() $('#check').hide() }else{ $('.signItem').removeAttr('onclick') $('#nocheck').hide() $('#check').show() } } } ~~~ * 点击列表签到 ~~~ function sign(which){ let data = {} data.u_id = u_id net('sign/sign',data,'signNow') } function signNow(o){ // console.log(o) if(o.succeed == 0){ warmFalse(o.msg) }else{ signLists() } } ~~~ * 点击立即签到 ~~~ function nocheck(){ let data = {} data.u_id = u_id net('sign/sign',data,'signNow') } ~~~ * 点击空白处隐藏签到框 ~~~ function hideSign(){ $("#signAlert").bind("click", function(){ // $("#signAlert").hide(); $("#signAlert").remove() }) $("#signBody").bind("click", function(){ $("#signAlert").show(); event.stopPropagation(); }) } ~~~ * 签到框css ~~~ function signCss(){ $('.signPage').css({ 'position': 'absolute','width': '100%','height': '100%','position': 'fixed','top': '0','left': '0','right': '0','bottom': '0', 'overflow': 'auto','background-color': 'rgb(0,0,0,.4)','z-index': '40' }) $('.signBody').css({ 'position': 'fixed','top': '50%','left': '50%','width': '480px','height': '570px','margin-left': '-240px','margin-top': '-285px', 'background-color': '#fff','border-radius': '10px','z-index': '60','box-shadow': '0 0 5px 4px rgba(202,131,69,0.25)' }) $('.signBody>img').css({ 'position': 'absolute','top': '-60px','left': '50%','width': '152px','height': '118px','margin-left': '-76px','display': 'block' }) $('.signTop').css({ 'width': '100%','height': '229px','background': "url('html/style/img/user/signbg.png')",'display': 'flex', 'justify-content': 'center','align-items': 'center','flex-direction': 'column' }) $('.signTop img').css({ 'height': '61px','display': 'block' }) $('.signwram').css({ 'width': '160px','height': '40px','line-height': '40px','text-align': 'center','margin-top': '10px', 'background': 'linear-gradient(96deg,rgba(252,100,40,.69),#f44f29)','border-radius': '20px','font-size': '16px','opacity': '0.5','color': '#fff' }) $('.signwram label').css({ 'margin-left': '5px','color': '#fff63f' }) $('.signCont').css({ 'padding': '20px 30px','display': 'flex','flex-wrap': 'wrap','justify-content': 'space-between' }) $('.signItem').css({ 'position': 'relative','width': '90px','height': '90px','margin-bottom': '15px','display': 'flex','flex-direction': 'column','justify-items': 'center', 'justify-content': 'space-between','padding':' 8px 25px','box-sizing': 'border-box','background-color': '#f5f7fb','border-radius': '5px','cursor': 'pointer' }) $('.signItem span').css({ 'color': '#333','font-size': '14px' }) $('.signItem img').css({ 'display': 'block','width': '37px','height': '37px','border-radius': '50%' }) $('.signItem label').css({ 'color': '#999','font-size': '12px' }) $('.signItems').css({ 'width': '200px','display': 'flex','height': '90px','margin-bottom': '15px','justify-content': 'space-between','align-items': 'center','padding': '8px 25px', 'box-sizing': 'border-box','border-radius': '5px','cursor': 'pointer','background-color': '#f5f7fb','position': 'relative' }) $('.signCol').css({ 'display': 'flex','flex-direction': 'column','justify-content': 'space-around','align-items': 'center','flex': '1','text-align': 'center' }) $('.signCol span').css({ 'color': '#333','font-size': '14px' }) $('.signCol label').css({ 'margin-top': '10px','color': '#999','font-size': '12px' }) $('.gift').css({ 'width': '68px','height': '72px','display': 'block' }) $('.signBtn').css({ 'display': 'flex','flex-direction': 'column','align-items': 'center' }) $('.signBtn a').css({ 'display': 'block','width': '250px','height': '40px','line-height': '40px','font-size': '16px','box-shadow': '0 2px 9px 0 rgba(214,184,150,.5)', 'border-radius': '20px','cursor': 'pointer','text-align': 'center','border': 'solid 1px #f39800' }) $('.signBtn .nocheck').css({ 'background': 'linear-gradient(307deg,#fbb323,#f57c0f)','color':'#fff' }) $('.signBtn .check').css({ 'color': '#f7a51c','background-color': '#fff' }) $('.signBtn span').css({ 'font-size': '12px','color':' #999','margin-top': '10px' }) // 已签到 $('.signCont .check1').css({ 'background-color':'#f7a51c' }) $('.signCont .check1 span').css({ 'color': '#fff' }) $('.signCont .check1 label').css({ 'color': '#fff' }) $('#nocheck').css({ 'display': 'none' }) $('#check').css({ 'display': 'none' }) } ~~~