完全前后端分离的项目
结构目录如下
<template> <div id="luckyDraw-container" :style="{background: 'url('+backgroundUrl+') no-repeat left top / 100% 100%'}"> <div class="getFocusMargin" @click="getFocusMargin()" style="display: none"></div> <section class="section-wrap"> <div class="luckyDrawInfoRuleBtn unsigned" id="luckyDrawInfoRuleBtn"></div> <div class="section-right fl"> <!--领取成功--> <div class="activityStart boxs" id="activityStart"></div> <div class="activityEnd boxs" id="activityEnd"></div> <div class="gift-succ-box boxs" id="gift-succ-box"></div> <div class="gift-error-box boxs" id="gift-error-box"></div> <div class="gift-error-user-box boxs" id="gift-error-user-box"></div> <div class="otherBtns clf"> <div class="rules fl"> <div class="rules-btn" id="rules-btn"></div> <div class="rules-box boxs" id="rules-box"> <div class="rules-txt-box"> <p class="rules-txt"></p> <div class="rules-bar"> <div class="bar"></div> </div> </div> </div> </div> </div> </div> </section> <div class="gift-error-empty-box" id="gift-error-empty-box"><p>领取失败,请稍候重试</p></div> <div class="loading"><img src="./../assets/img/timg.gif">领取中</div> <div class="modalbg"></div> <input type="hidden" id="pagename" value="pgtitle=买赠H5;pgcate=10004"> </div> </template> <script type="text/javascript"> import './../assets/css/home.css' export default { name: 'luckyDraw-container', data () { return { selected: '', actID: '', backgroundUrl: require('./../assets/img/activityBg.jpg'), // dataURL: 'http://10.200.96.77/api/ats/activity', dataURL: 'https://121212121/api/ats/activity', //rulesData: '  敬请期待<br/>', limit_num :2, moveRight: { "sectionReceive": "luckyDrawInfoRuleBtn","sectionHaveReceived": "luckyDrawInfoRuleBtn" }, moveLeft: { "luckyDrawInfoRuleBtn": "sectionReceive" }, moveUp: { }, moveDown: { }, } }, watch:{ input1(newVal,oldVal){ } }, beforeCreate: function () { }, created: function () { var _v = this; var userName = AndroidWebView.getUserName(); var macAdress = AndroidWebView.getMacAdress(); var superTvToken = AndroidWebView.getSuperTvToken(); var phoneNum = AndroidWebView.getPhoneNum(); // var macAdress = 'B8:3D:4E:AA:57:D1'; // var userName = '11111_180827s50'; // var superTvToken = 'B0r3OLMcheQrIBeVZf%2B1o3cxpNv0F7IeECBSHgKPcRP4ufbNccNwmIIJdS%2FqDVuQ9PZem7UogR8WxW%2Bbnz2AzutyfMfqJB5FNzk39FIIG5sz1FxwuyGk2Kv6LbyrMV3OwCzZiwwqddnGO71x2ffgLD0fDADk0uN16pfxdWG7IXc%3D'; // var phoneNum = ''; _v.macAdress = macAdress; _v.username = userName; _v.token = superTvToken; _v.phoneNum = phoneNum; }, mounted: function () { this.page = 0; var _v = this; _v.getImgBgH(); if (_v.macAdress) { function getParam(key) { return decodeURIComponent((new RegExp('[?|&]' + key + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; } var actID = getParam('actID'); _v.actID = actID; var prizeConfigID = getParam('prizeConfigID'); _v.prizeConfigID = prizeConfigID; var topicid = getParam('topicid'); _v.topicid = topicid; //获取抽奖相关信息 _v.$http.jsonp(_v.dataURL + '/activity_4000_getEncourageRule', { params: { actId: _v.actID, format: 'jsonp', cb: 'callback' }, jsonp: 'callback', jsonpCallback: 'callback' }).then(function (res) { if (res.data.statuSCode == 10000) { var oData = res.data.result; _v.tips = oData.tips; _v.startTime = oData.startTime; _v.endTime = oData.endTime; var nowTime = new Date(); var startTimeStr = _v.startTime; var endTimeStr = _v.endTime; var nowTimeStr = nowTime.getTime(); if (nowTimeStr < startTimeStr) { console.log('未开始'); _v.activityStatus = 0; $('.modalbg').show(); $('.activityStart').show(); _v.onFocus("activityStart"); _v.area = -1; } else if (nowTimeStr > endTimeStr) { console.log('已结束'); _v.activityStatus = 2; $('.modalbg').show(); $('.activityEnd').show(); _v.onFocus("activityEnd"); _v.lostFocus('sectionReceive'); _v.area = -1; } //活动规则 if (oData.description) { $('.rules-txt').html(oData.description); // $('.rules-txt').append(oData.description); } } else if(res.data.statuSCode == 10009) { console.log('未开始'); _v.activityStatus = 0; $(".section-wrap").hide(); $('.modalbg').show(); $('.activityStart').show(); _v.onFocus("activityStart"); _v.area = -1; } else { $(".section-wrap").hide(); this.comError(res.data.statuSCode); } }); _v.$http.jsonp(_v.dataURL + '/activity_4002_getIsExchange', { params: { actId: _v.actID, mac: _v.macAdress, format: 'jsonp', cb: 'cb' }, jsonp: 'cb', jsonpCallback: 'cb' }).then(function (res) { if (res.data.statuSCode == 10000) { var oData = res.data.result; if (oData.is_exchange==1) { this.changeStatus(); _v.onFocus("sectionHaveReceived"); _v.area = 0; } else { $(".section-wrap").prepend('<div class="sectionReceive unsigned" id="sectionReceive"></div>'); _v.onFocus("sectionReceive"); _v.area = 0; _v.move0 = "sectionReceive"; } this.sign = oData.sign; } else if(res.data.statuSCode == 10007) { $('.gift-error-empty-box').html("<p>抱歉,您的设备暂不支持参与本次活动哦!如有疑问,请联系客服:400-001-2007</p>"); $(".section-wrap").hide(); $('.gift-error-empty-box').show(); this.lostFocus('sectionReceive'); this.onFocus("gift-error-empty-box"); this.area = -1; } else { $(".section-wrap").hide(); this.comError(res.data.statuSCode); } }); window.document.onkeydown = _v.keyHandler; } else { console.log("null"); } }, methods: { getFocusMargin(){ // this.getFocus(); var move = $(".getFocusMargin").attr("data-move"); if(move!="") { this.move0 = move; } console.log(move+" done"); }, //得到焦点 onFocus(_class) { $('.' + _class).addClass('_foc'); }, //失去焦点 lostFocus(_class) { $('.' + _class).removeClass('_foc'); }, //键盘事件 keyHandler(event){ var keyCode = event.which ? event.which : event.keyCode; if ($('.rules-box').is(":visible")) { this.area = -1; } else if ($('.gift-succ-box').is(":visible")) { this.area = -1; } else if ($('.gift-error-box').is(":visible")) { this.area = -1; } else if ($('.gift-error-user-box').is(":visible")) { this.area = -1; } else if ($('.activityEnd').is(":visible")) { this.area = -1; } else if ($('.activityStart').is(":visible")) { this.area = -1; } else if (this.bRotate) { this.area = -1; } else { this.area = 0; } $('.tips').hide(); switch (keyCode) { case 37: this.move_left(); break; case 38: this.move_up(); break; case 39: this.move_right(); break; case 40: this.move_down(); break; case 13: event.preventDefault(); this.key_ok(); break; case 8: this.goback(); break; default: break; } }, getPageScrollTop(status){ var p = this.page; if(status==1) { this.page = this.page + 1; } else { this.page = this.page - 1; } if (pageScrollTop[this.page] != undefined) { $(document).scrollTop(pageScrollTop[this.page]); } else { this.page = p; } }, getImgBgH(){ // 图片地址 var img_url = this.backgroundUrl; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if(img.height>0){ clearInterval(set); // var element = window.document.documentElement.clientWidth / 7.2; var h = img.height /266.667 + "rem"; $("#luckyDraw-container").css("height", h); $("html, body").css("height", h); var dh = $(document).height(); var wh = $(window).height(); var p = Math.ceil(dh/wh); var scrollTop = []; for(var i=0; i<p; i++) { if(i==p-1) { scrollTop[i] = (wh*p-dh)+i*wh; } else { scrollTop[i] = wh*i; } } pageScrollTop = scrollTop; } }; var set = setInterval(check,40); }, //关闭弹窗 goback(){ console.log(this.area); if (this.area == -1) { var _id = $('._foc')[0].id; console.log(_id); //规则 if (_id == 'luckyDrawInfoRuleBtn') { $('.modalbg').hide(); $('.rules-box').hide(); this.onFocus("rules-btn"); this.lostFocus('rules-box'); this.area = 0; //领取成功返回 } else if (_id == 'gift-succ-box') { $('.modalbg').hide(); $('.gift-succ-box').hide(); this.onFocus("sectionHaveReceived"); this.lostFocus('gift-succ-box'); this.area = 0; } else if (_id == 'gift-error-user-box') { $('.modalbg').hide(); $('.gift-error-user-box').hide(); this.onFocus("sectionReceive"); this.lostFocus('gift-error-user-box'); this.area = 0; } else if (_id == 'gift-error-box') { $('.modalbg').hide(); $('.gift-error-box').hide(); this.onFocus("sectionHaveReceived"); this.lostFocus('gift-error-box'); this.area = 0; } else if (_id == 'activityEnd') { $('.modalbg').hide(); $('.activityEnd').hide(); this.onFocus("sectionReceive"); this.lostFocus('activityEnd'); this.area = 0; } else if (_id == 'activityStart') { console.log('activityStart'); } } // ; // $('.wheel-center-btn').rotate({ // angle: 0, // animateTo: 0, // duration: 0 // }); $('.wheel-box .sector').css({'transform': 'rotate(0deg)'}); }, //确认点击事件 key_ok(){ if (this.area == 0 && $('._foc')[0]!=undefined) { var _id = $('._foc')[0].id; //领取 if (_id == 'sectionReceive') { if(this.username) { this.receive(); } else { var jump = { // 'action_uri': 'pptv://usercenter', 'package_name': 'com.pptv.usercenter', 'package_class': 'com.pptv.usercenter.activity.LoginActivity' }; var jumpParams = { 'position': -1, 'jump': jump }; AndroidWebView.showInfoFromJs(JSON.stringify(jumpParams)); // AndroidWebView.close(); } } else if (_id == 'sectionHaveReceived') { $('.modalbg').show(); $('.gift-error-box').show(); this.lostFocus('sectionHaveReceived'); this.onFocus("gift-error-box"); this.area = -1; //活动规则 } else if (_id == 'luckyDrawInfoRuleBtn') { $('.modalbg').show(); $('.rules-box').show(); this.lostFocus('rules-btn'); this.onFocus("rules-box"); var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); if (textH - boxH > 0) { $('.rules-bar .bar').show(); if ((textH - boxH) >= 100) { var barNum = Math.ceil((textH - boxH) / 100 + 1.2); $('.rules-bar .bar').height(boxH / barNum); } else { $('.rules-bar .bar').height(boxH - 100); } } else { $('.rules-bar .bar').hide(); } if ($('.rules-txt')[0].style.webkitTransform !== undefined) { $('.rules-txt').css('webkitTransform', 'translateY(0px)'); $('.rules-bar .bar').css('webkitTransform', 'translateY(0px)'); } else { $('.rules-txt').css('transform', 'translateY(0px)'); $('.rules-bar .bar').css('transform', 'translateY(0px)'); } this.area = -1; } } }, //改变状态 changeStatus() { $(".sectionHaveReceived").remove(); $(".sectionReceive").remove(); $(".section-wrap").prepend('<div class="sectionHaveReceived unsigned" id="sectionHaveReceived"></div>'); this.moveLeft["luckyDrawInfoRuleBtn"] = "sectionHaveReceived"; this.move0 = "sectionHaveReceived"; }, receive() { var _v=this; _v.$http.post(this.dataURL+'/activity_4001_encourageExchange', { mac : _v.macAdress, actId:_v.actID, phoneNum:_v.phoneNum, sign:_v.sign, token:_v.token, username:_v.username, },{ emulateJSON: true, before:function () { $(".loading").show(); this.lostFocus('sectionReceive'); this.area = -1; } }).then(function (res) { $(".loading").hide(); this.onFocus("sectionReceive"); this.area = 0; if(res.data.statuSCode==10000){ $('.modalbg').show(); $('.gift-succ-box').show(); this.lostFocus('sectionReceive'); this.onFocus("gift-succ-box"); this.changeStatus(); this.area = -1; } else if(res.data.statuSCode==10012) { $('.modalbg').show(); $('.gift-error-user-box').show(); this.lostFocus('sectionReceive'); this.onFocus("gift-error-user-box"); this.area = -1; } else if(res.data.statuSCode==10001) { ('.gift-error-empty-box').html("<p>领取失败,请稍候重试</p>"); $('.gift-error-empty-box').show(); this.lostFocus('sectionReceive'); this.onFocus("gift-error-empty-box"); this.area = -1; } else { this.comError(res.data.statuSCode); } }),function(){ }; }, comError(status) { $('.gift-error-empty-box').html("<p>哎呀,活动太火爆了,我们的攻城狮哥哥正在抓紧修复。(#" + status + ")</p>"); $('.gift-error-empty-box').show(); this.lostFocus('sectionReceive'); this.onFocus("gift-error-empty-box"); this.area = -1; }, move_right() { var _v = this; switch (_v.area) { case -1: break; case 0: if (_v.moveRight[_v.move0] != undefined) { _v.lostFocus(_v.move0); _v.move0 = _v.moveRight[_v.move0]; _v.onFocus(_v.move0); } break; default: break; } }, move_left() { var _v = this; switch (_v.area) { case -1: break; case 0: if (_v.moveLeft[_v.move0] != undefined) { _v.lostFocus(_v.move0); _v.move0 = _v.moveLeft[_v.move0]; _v.onFocus(_v.move0); } break; default: break; } }, move_up() { var _v = this; // console.log(_v.area); switch (_v.area) { case -1: var _id = $('._foc')[0].id; if (_id == 'luckyDrawInfoRuleBtn') { var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); var rulesbarH = $('.rules-bar').height(); var barH = $('.rules-bar .bar').height(); var barNm = Math.ceil((textH - boxH) / 100 + 1.2); if (barNm == 2) { var barmove = rulesbarH - barH; } else { var barmove = Math.floor(rulesbarH / barNm); } if ($('.rules-txt')[0].style.webkitTransform !== undefined) { var newRulesTransY = $('.rules-txt')[0].style.webkitTransform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.webkitTransform.replace(/[^0-9]/g, ''); if (newRulesTransY >= 100) { $('.rules-txt').css('webkitTransform', 'translateY(' + -(newRulesTransY - 100) + 'px)'); $('.rules-bar .bar').css('webkitTransform', 'translateY(' + (parseInt(barmoveY) - barmove) + 'px)'); } else { return; } } else { var newRulesTransY = $('.rules-txt')[0].style.transform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.transform.replace(/[^0-9]/g, ''); if (newRulesTransY >= 100) { $('.rules-txt').css('transform', 'translateY(' + -(newRulesTransY - 100) + 'px)'); $('.rules-bar .bar').css('transform', 'translateY(' + (parseInt(barmoveY) - barmove) + 'px)'); } else { return; } } } break; case 0: if (_v.moveUp[_v.move0] != undefined) { _v.lostFocus(_v.move0); _v.move0 = _v.moveUp[_v.move0]; _v.onFocus(_v.move0); } else { this.getPageScrollTop(0); } break; default: break; } }, move_down() { var _v = this; switch (_v.area) { case -1: var _id = $('._foc')[0].id; if (_id == 'luckyDrawInfoRuleBtn') { //console.log('规则滑动'); var boxH = $('.rules-txt-box').height(); var textH = $('.rules-txt').height(); var rulesbarH = $('.rules-bar').height(); var barH = $('.rules-bar .bar').height(); var barNm = Math.ceil((textH - boxH) / 100 + 1.2); if (barNm == 2) { var barmove = rulesbarH - barH; } else { var barmove = Math.floor(rulesbarH / barNm); } if ($('.rules-txt')[0].style.webkitTransform !== undefined) { var newRulesTransY = $('.rules-txt')[0].style.webkitTransform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.webkitTransform.replace(/[^0-9]/g, ''); if (newRulesTransY >= (textH - boxH)) { return; } if (textH > boxH) { $('.rules-txt').css('webkitTransform', 'translateY(' + -(parseInt(newRulesTransY) + 100) + 'px)'); $('.rules-bar .bar').css('webkitTransform', 'translateY(' + (parseInt(barmoveY) + barmove) + 'px)'); } } else { var newRulesTransY = $('.rules-txt')[0].style.transform.replace(/[^0-9]/g, ''); var barmoveY = $('.rules-bar .bar')[0].style.transform.replace(/[^0-9]/g, ''); if (newRulesTransY >= (textH - boxH)) { return; } if (textH > boxH) { $('.rules-txt').css('transform', 'translateY(' + -(parseInt(newRulesTransY) + 100) + 'px)'); $('.rules-bar .bar').css('transform', 'translateY(' + (parseInt(barmoveY) + barmove) + 'px)'); } } } break; case 0: if (_v.moveDown[_v.move0] != undefined) { _v.lostFocus(_v.move0); _v.move0 = _v.moveDown[_v.move0]; _v.onFocus(_v.move0); } else { this.getPageScrollTop(1); } break; default: break; } }, } } !(function (win) { var setBasicFontSize = function () { var element = win.document.documentElement; element.style.fontSize = element.clientWidth / 7.2 + 'px'; }; setBasicFontSize(); win.addEventListener("DOMContentLoaded", setBasicFontSize, false); win.addEventListener("resize", setBasicFontSize, false); })(window); </script> <style scoped> #luckyDraw-container { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; /*height: 6.87374140782324rem;*/ } </style>