390 lines
12 KiB
JavaScript
390 lines
12 KiB
JavaScript
const urlPrefix = getUrlPrefix()
|
|
const browser = checkVersion();
|
|
if(EnvCheck() === 'test') new VConsole
|
|
// 封装layer消息提醒框
|
|
let layerIndex
|
|
const showLoading = () => {
|
|
layer.open({
|
|
type: 2,
|
|
shadeClose: false,
|
|
content: '加载中...',
|
|
success(e){
|
|
layerIndex = $(e).attr('index')
|
|
}
|
|
})
|
|
}
|
|
const hideLoading = (index) => {
|
|
// layer.closeAll()
|
|
layer.close(index)
|
|
}
|
|
const toastMsg = (content = '操作完成', time = 2) => {
|
|
layer.open({
|
|
content,
|
|
time,
|
|
skin: 'msg'
|
|
})
|
|
}
|
|
|
|
let leftBattery = 0
|
|
let batteryCanBuy = 0
|
|
let chargeAmount = 0
|
|
|
|
let t //抽奖动画定时器
|
|
let num //点亮次数
|
|
let isAnimateOver = true //动画结束才可进行下次抽奖
|
|
let tenList = [] //点亮10次 奖品列表
|
|
|
|
//获取用户活动数据
|
|
const getData = () => {
|
|
showLoading()
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/bulbActivity/query',
|
|
success(res) {
|
|
hideLoading(layerIndex)
|
|
if (res.code === 200) {
|
|
let data = res.data
|
|
|
|
leftBattery = data.batteryBought //剩余电池
|
|
batteryCanBuy = data.batteryCanBuy //可领取电池
|
|
chargeAmount = data.chargeAmount //累充
|
|
|
|
$('.leftBulb').html(leftBattery) //剩余电池
|
|
$('.accumulated > span').html(chargeAmount) //累充
|
|
$('.canget > span').html(batteryCanBuy) //可领取
|
|
data.batteryCanBuy ? $('.btn-right').html('<img src="./images/btn.png" alt="">') : $('.btn-right').html('<img src="./images/btn-disable.png" alt="">')
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
hideLoading(layerIndex)
|
|
toastMsg('网络错误')
|
|
}
|
|
})
|
|
}
|
|
|
|
//领取电池
|
|
const getBattery = () => {
|
|
showLoading()
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/bulbActivity/buyBattery',
|
|
async: false,
|
|
success(res) {
|
|
hideLoading(layerIndex)
|
|
if (res.code === 200) {
|
|
toastMsg('领取成功')
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
hideLoading(layerIndex)
|
|
toastMsg('网络错误')
|
|
}
|
|
})
|
|
}
|
|
|
|
//点亮灯泡
|
|
const lightBulb = (num) => {
|
|
showLoading()
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/bulbActivity/lightBulb',
|
|
async: false, //这里需要同步
|
|
data:{
|
|
num
|
|
},
|
|
success(res) {
|
|
hideLoading(layerIndex)
|
|
if (res.code === 200) {
|
|
let index = res.data.indexList[0]
|
|
let isTen = res.data.indexList.length > 1 ? true : false
|
|
if(isTen) {
|
|
tenList = res.data.indexList
|
|
operateTenList()
|
|
}
|
|
|
|
if (index >= 4) {
|
|
switch (index) {
|
|
case 4: index = 7; break;
|
|
case 5: index = 6; break;
|
|
case 6: index = 5; break;
|
|
case 7: index = 4; break;
|
|
}
|
|
}
|
|
|
|
renderAnimatiton(index, isTen)
|
|
isAnimateOver = !isAnimateOver
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
hideLoading(layerIndex)
|
|
toastMsg('网络错误')
|
|
}
|
|
})
|
|
}
|
|
//处理 抽奖10次 返回的数据
|
|
let tenAward = [
|
|
{name: '幸运铭牌', num: 0},
|
|
{name: '星光头饰', num: 0},
|
|
{name: '幸运头饰', num: 0},
|
|
{name: '度假头饰', num: 0},
|
|
{name: '机车座驾', num: 0},
|
|
{name: '宝马跑车', num: 0}
|
|
]
|
|
const operateTenList = () => {
|
|
tenList.map((item)=>{
|
|
switch(item){
|
|
case 0:
|
|
tenAward[2].num++
|
|
break
|
|
case 1: case 6:
|
|
tenAward[0].num++
|
|
break
|
|
case 2:
|
|
tenAward[5].num++
|
|
break
|
|
case 3:
|
|
tenAward[4].num++
|
|
break
|
|
case 4:
|
|
tenAward[3].num++
|
|
break
|
|
case 5: case 7:
|
|
tenAward[1].num++
|
|
break
|
|
}
|
|
})
|
|
tenAward = tenAward.filter((item) => {
|
|
return item.num > 0
|
|
})
|
|
// console.log(tenAward);
|
|
}
|
|
|
|
//抽奖动画
|
|
let x = 30, count = 0, speed = 500, stepToChangeSpeed = 2
|
|
let awardList = [
|
|
{name:'幸运头饰x1天', img: './images/0.png'},
|
|
{name:'幸运铭牌x1天', img: './images/1.png'},
|
|
{name:'宝马跑车x1天', img: './images/2.png'},
|
|
{name:'机车座驾x1天', img: './images/3.png'},
|
|
{name:'星光头饰x1天', img: './images/4.png'},
|
|
{name:'幸运铭牌x1天', img: './images/1.png'},
|
|
{name:'星光头饰x1天', img: './images/4.png'},
|
|
{name:'度假头饰x1天', img: './images/5.png'}
|
|
]
|
|
const renderAnimatiton = (index, isTen) => {
|
|
$('.circle').css('display', 'block')
|
|
t = setTimeout(() => {
|
|
count++
|
|
|
|
if (Math.floor(count / 4) % 2 === 0) {
|
|
x += 77
|
|
$('.circle').css('transform', `translate(${x * 2 / 75}rem, 15.6rem)`)
|
|
} else {
|
|
$('.circle').css('transform', `translate(${x * 2 / 75}rem, ${680 * 2 / 75}rem)`)
|
|
x -= 77
|
|
}
|
|
|
|
if (count === stepToChangeSpeed || count === stepToChangeSpeed * 14) speed = 400
|
|
if (count === stepToChangeSpeed * 2 || count === stepToChangeSpeed * 13) speed = 300
|
|
if (count === stepToChangeSpeed * 3 || count === stepToChangeSpeed * 12) speed = 200
|
|
if (count === stepToChangeSpeed * 4) speed = 100
|
|
|
|
if (count >= stepToChangeSpeed * 16) {
|
|
speed = 550
|
|
if (count === stepToChangeSpeed * 16 + index) {
|
|
let contentHtml = ''
|
|
if(isTen){
|
|
let str = tenAward.map((item)=>{
|
|
return `<div class="desc">点亮灯泡幸运获得${item.name}x${item.num}天</div>`
|
|
}).join('')
|
|
contentHtml = `
|
|
<div class="content-wrap">
|
|
${str}
|
|
</div>
|
|
<div class="know"><img src="./images/know.png" alt=""></div>
|
|
`
|
|
setTimeout(()=>{
|
|
$('.shade-mask > .mask-content-ten').html(contentHtml).fadeIn().siblings('.mask-content').css('display', 'none')
|
|
$('.shade-mask').fadeIn(200)
|
|
$('.circle').css('display', 'none')
|
|
}, 1000)
|
|
}else{
|
|
contentHtml = `
|
|
<div class="award"><img src="${awardList[index].img}" alt=""></div>
|
|
<div class="desc">点亮灯泡幸运获得${awardList[index].name}</div>
|
|
<div class="know"><img src="./images/know.png" alt=""></div>
|
|
`
|
|
setTimeout(()=>{
|
|
$('.shade-mask > .mask-content').html(contentHtml).fadeIn().siblings('.mask-content-ten').css('display', 'none')
|
|
$('.shade-mask').fadeIn(200)
|
|
$('.circle').css('display', 'none')
|
|
}, 1000)
|
|
}
|
|
|
|
return
|
|
}
|
|
}
|
|
|
|
renderAnimatiton(index, isTen)
|
|
}, speed)
|
|
}
|
|
|
|
//获奖记录
|
|
let recordList = [] //总获奖记录列表
|
|
const getRecordList = () => {
|
|
showLoading()
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/bulbActivity/recordStats',
|
|
success(res) {
|
|
hideLoading(layerIndex)
|
|
if (res.code === 200) {
|
|
recordList = res.data
|
|
renderRecordList()
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
hideLoading(layerIndex)
|
|
toastMsg('网络错误')
|
|
}
|
|
})
|
|
}
|
|
|
|
const renderRecordList = () => {
|
|
recordList.map((item) => {
|
|
switch(item.position){
|
|
case 0:
|
|
$('li:eq(2) .count').html(`x${item.num}天`)
|
|
break
|
|
case 1: case 6:
|
|
$('li:eq(0) .count').html(`x${item.num}天`)
|
|
break
|
|
case 2:
|
|
$('li:eq(5) .count').html(`x${item.num}天`)
|
|
break
|
|
case 3:
|
|
$('li:eq(4) .count').html(`x${item.num}天`)
|
|
break
|
|
case 4:
|
|
$('li:eq(3) .count').html(`x${item.num}天`)
|
|
break
|
|
case 5: case 7:
|
|
$('li:eq(1) .count').html(`x${item.num}天`)
|
|
break
|
|
}
|
|
})
|
|
}
|
|
|
|
$(function () {
|
|
//埋点测试
|
|
if(browser.app){
|
|
_hmt.push(['_trackEvent', 'client', 'click', 'choujiang']);
|
|
}
|
|
|
|
getInfoFromClient()
|
|
setTimeout(() => {
|
|
getData()
|
|
}, 50)
|
|
|
|
//点击立即充值
|
|
$('.recharge').on('click', function () {
|
|
if(browser.app){
|
|
if(browser.android){
|
|
window.androidJsObj.openChargePage()
|
|
}else if(browser.ios){
|
|
window.webkit.messageHandlers.openChargePage.postMessage(null)
|
|
}
|
|
}else{
|
|
toastMsg('请在app内打开')
|
|
}
|
|
})
|
|
|
|
//返回页面 重新请求接口
|
|
var hiddenProperty = 'hidden' in document ? 'hidden' :
|
|
'webkitHidden' in document ? 'webkitHidden' :
|
|
'mozHidden' in document ? 'mozHidden' : null;
|
|
|
|
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
|
|
var onVisibilityChange = function () {
|
|
if(!document[hiddenProperty]) getData()
|
|
}
|
|
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
|
|
|
|
//点击领取按钮
|
|
$('.btn-right').on('click', function () {
|
|
getBattery()
|
|
getData()
|
|
})
|
|
|
|
//点击点亮按钮
|
|
$('.btn-light').on('click', 'div', function () {
|
|
//判断上一次动画是否已经结束
|
|
if(isAnimateOver){
|
|
clearTimeout(t)
|
|
x = 30, count = 0, speed = 500
|
|
$('.circle').css('transform', `translate(0.8rem, 15.6rem)`)
|
|
|
|
if ($(this).index()) {
|
|
//点亮10次
|
|
if (leftBattery >= 10) {
|
|
num = 10
|
|
lightBulb(num)
|
|
getData()
|
|
} else {
|
|
toastMsg('剩余电池不足~')
|
|
}
|
|
} else {
|
|
//点亮1次
|
|
if (leftBattery >= 1) {
|
|
num = 1
|
|
lightBulb(num)
|
|
getData()
|
|
} else {
|
|
toastMsg('剩余电池不足~')
|
|
}
|
|
}
|
|
}else{
|
|
toastMsg('<p>连续点击会坏的哟~</p>点亮结束后才可以再次点击')
|
|
}
|
|
})
|
|
|
|
//点击 知道啦
|
|
$(document).on('click', '.know', function(){
|
|
$('.shade-mask').fadeOut(200)
|
|
//还原抽10次的数组
|
|
tenAward = [
|
|
{name: '幸运铭牌', num: 0},
|
|
{name: '星光头饰', num: 0},
|
|
{name: '幸运头饰', num: 0},
|
|
{name: '度假头饰', num: 0},
|
|
{name: '机车座驾', num: 0},
|
|
{name: '宝马跑车', num: 0}
|
|
]
|
|
|
|
isAnimateOver = !isAnimateOver
|
|
})
|
|
|
|
//点击获奖记录
|
|
$('.record').on('click', function () {
|
|
getRecordList()
|
|
$('.record-shade-mask').fadeIn(200)
|
|
$('body').css('overflow', 'hidden')
|
|
})
|
|
|
|
//关闭弹窗
|
|
$('.close,.record-shade-mask').click(()=>{
|
|
$('.record-shade-mask').fadeOut(200)
|
|
$('body').css('overflow', 'auto')
|
|
})
|
|
$('.record-shade-mask .mask-content').click((e)=>{
|
|
e.stopPropagation()
|
|
})
|
|
}) |