VUE全家桶
完全前后端分离的项目
结构目录如下
<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>