610 lines
21 KiB
JavaScript
610 lines
21 KiB
JavaScript
let browser = checkVersion()
|
|
let urlPrefix = getUrlPrefix();//判斷正式環境或者測試環境
|
|
|
|
const toastMsg = (content = '操作完成', time = 2) => {
|
|
layer.open({
|
|
content,
|
|
skin: 'msg',
|
|
time
|
|
});
|
|
}
|
|
const showLoading = (content = '加載中...') => {
|
|
layer.open({
|
|
type: 2,
|
|
shadeClose: false,
|
|
content,
|
|
success(e) {
|
|
layerIndex = $(e).attr('index')
|
|
}
|
|
})
|
|
}
|
|
const hideLoading = (index) => {
|
|
layer.close(index)
|
|
}
|
|
|
|
let roomId = null;
|
|
let userDiamonds = 0 //用戶鉆石數量
|
|
const MAX_NUM = 9 //後臺限購關閉時最大選擇數
|
|
let currentNum = 0
|
|
let time = null;
|
|
let cardID = [];
|
|
let requestStatus = false;
|
|
let prizeRecord = [];//中獎記錄
|
|
var page = 0;// 頁數
|
|
var size = 10;// 每頁展示n個
|
|
let selectDays = window.sessionStorage.getItem('selectDays')
|
|
let userSelectInfo = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
|
|
// let { diamondNum, selectSrc, prodID, limitPurchaseSwitch, giftName } = JSON.parse(window.sessionStorage.getItem('userSelectInfo'))
|
|
var limitPurchaseSwitch;
|
|
var giftNameArr = [];
|
|
var giftName = [];
|
|
var diamondNum = 500;
|
|
let prodIDArr = [];
|
|
var selectSrcArr = [];
|
|
var selectSrc = [];
|
|
var remainDayArr = [];
|
|
var userRemainDay;
|
|
var prodID;
|
|
var prodRewardPriceArr = [];
|
|
var prodRewardPrice;
|
|
// 小動物數組
|
|
let animalArr = [
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal1.png',
|
|
animalName: '小熊'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal2.png',
|
|
animalName: '小兔'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal3.png',
|
|
animalName: '小狗'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal4.png',
|
|
animalName: '小貓'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal5.png',
|
|
animalName: '小猴'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal6.png',
|
|
animalName: '小羊'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal7.png',
|
|
animalName: '小虎'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal8.png',
|
|
animalName: '小雞'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal9.png',
|
|
animalName: '小牛'
|
|
},
|
|
{
|
|
animalPic: 'https://img.pekolive.com/elfin-animal10.png',
|
|
animalName: '小豬'
|
|
}
|
|
]
|
|
|
|
$(function () {
|
|
getInfoFromClient()
|
|
setTimeout(() => {
|
|
getUserInfo();
|
|
headwearFun();
|
|
getLimitInfo();
|
|
}, 50)
|
|
if (EnvCheck() == 'test') {
|
|
new VConsole();
|
|
}
|
|
|
|
if (browser.app) {
|
|
if (browser.android) {
|
|
roomId = window.androidJsObj.getRoomUid()
|
|
} else {
|
|
window.webkit.messageHandlers.getRoomUid.postMessage(null)
|
|
setTimeout(() => {
|
|
roomId = pubInfo.roomUid;
|
|
console.log(roomId)
|
|
}, 200);
|
|
}
|
|
} else {
|
|
roomId = 1351326
|
|
}
|
|
console.log(window.screen.height);
|
|
if (window.screen.height > 667) {
|
|
$('.explore').css('margin', '0.8rem auto 0rem')
|
|
} else if (window.screen.height < 667) {
|
|
$('html,body').css('height', "18rem")
|
|
}
|
|
// 獲取頭飾限購信息
|
|
function getLimitInfo() {
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/seekElfin/limit/purchase/display',
|
|
success: function (res) {
|
|
if (res.code == 200) {
|
|
limitPurchaseSwitch = res.data.limitPurchaseSwitch
|
|
if (limitPurchaseSwitch) {
|
|
list = res.data.list
|
|
let str = ''
|
|
list.map((item) => {
|
|
remainDayArr.push(item.remainDay)
|
|
})
|
|
userRemainDay = [remainDayArr[0]]
|
|
}
|
|
}
|
|
},
|
|
error: function (res) {
|
|
console.log(res, '報錯啦');
|
|
}
|
|
})
|
|
}
|
|
// 獲取頭飾請求
|
|
function headwearFun() {
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/seekElfin/product/list',
|
|
data: {
|
|
uid: pubInfo.uid
|
|
},
|
|
success: function (res) {
|
|
if (res.code == 200) {
|
|
res.data.forEach((res, index) => {
|
|
$('.tabBox div').eq(index).find('b').html(res.prodNeedPrice)
|
|
if (res.prodId == 1) {
|
|
prodIDArr[0] = res.prodId
|
|
prodRewardPriceArr[0] = res.prodRewardPrice
|
|
prodID = res.prodId
|
|
diamondNum = res.prodNeedPrice
|
|
prodRewardPrice = res.prodRewardPrice
|
|
} else if (res.prodId == 2) {
|
|
prodIDArr[1] = res.prodId
|
|
prodRewardPriceArr[1] = res.prodRewardPrice
|
|
|
|
} else {
|
|
prodIDArr[2] = res.prodId
|
|
prodRewardPriceArr[2] = res.prodRewardPrice
|
|
|
|
}
|
|
})
|
|
console.log('prodIDArr', prodIDArr);
|
|
console.log('prodRewardPriceArr', prodRewardPriceArr);
|
|
headwearArr = res.data;
|
|
// 設置頭飾
|
|
headwearArr.map((item, index) => {
|
|
giftNameArr[index] = item.giftName;
|
|
selectSrcArr[index] = item.headwearPic;
|
|
selectSrc = selectSrcArr[0];
|
|
giftName = giftNameArr[0];
|
|
})
|
|
console.log('giftNameArr', giftNameArr);
|
|
} else if (res.code == 80002) {
|
|
isNeedUpgrade = true
|
|
return toastMsg('當前版本過低，請前往升級最高版本使用~')
|
|
}
|
|
},
|
|
error: function (res) {
|
|
console.log(res, '報錯啦');
|
|
}
|
|
})
|
|
|
|
}
|
|
// tab切换
|
|
$('.tabBox div').click(function () {
|
|
var index = $(this).index();
|
|
$(this).addClass('active').siblings().removeClass('active');
|
|
diamondNum = Number($(this).children('span').children('b').html());
|
|
// diamondNum = index == 0 ? 500 : index == 1 ? 5000 : 50000
|
|
selectSrc = selectSrcArr[index];
|
|
giftName = giftNameArr[index];
|
|
userRemainDay = remainDayArr[index];
|
|
prodID = prodIDArr[index];
|
|
prodRewardPrice = prodRewardPriceArr[index];
|
|
$('.prob').html(`獲得${prodRewardPrice}钻的概率為${currentNum * 10}%`)
|
|
$('.select-area .desc').hide();
|
|
})
|
|
const animation = () => {
|
|
$('.select-area')
|
|
.animate({ scale: 0.25 }, 0)
|
|
.animate({ scale: 1.0, opacity: 1.0 }, 2000, function () {
|
|
$('.desc, .prob').show()
|
|
$('.select-area').on('click', 'div', function () {
|
|
if ($('.explore').hasClass('again')) {
|
|
return;
|
|
} else {
|
|
let index = $(this).index()
|
|
if (!$(this).hasClass('active')) {
|
|
currentNum++
|
|
if (true) {//!limitPurchaseSwitch
|
|
if (currentNum <= MAX_NUM) {
|
|
$(this).addClass('active')
|
|
$('.prob').html(`獲得${prodRewardPrice}钻的概率為${currentNum * 10}%`)
|
|
$('.prob').show()
|
|
$('.desc').hide()
|
|
cardID.push(index)
|
|
} else {
|
|
currentNum = MAX_NUM
|
|
}
|
|
} else {
|
|
if (window.sessionStorage.getItem('leftDays') != null) {
|
|
if (window.sessionStorage.getItem('leftDays') <= 0) {
|
|
console.log('leftDays', window.sessionStorage.getItem('leftDays'));
|
|
toastMsg('該頭飾已達限購上限')
|
|
setTimeout(() => {
|
|
sessionStorage.clear()
|
|
history.go(-1)
|
|
}, 1000)
|
|
return;
|
|
}
|
|
console.log('leftDays', window.sessionStorage.getItem('leftDays'));
|
|
userRemainDay = window.sessionStorage.getItem('leftDays') > MAX_NUM ? MAX_NUM : window.sessionStorage.getItem('leftDays')
|
|
} else {
|
|
userRemainDay = userSelectInfo.userRemainDay > MAX_NUM ? MAX_NUM : userSelectInfo.userRemainDay
|
|
}
|
|
|
|
if (currentNum <= userRemainDay) {
|
|
$(this).addClass('active')
|
|
$('.prob').html(`獲得${diamondNum * 10}钻的概率為${currentNum * 10}%`)
|
|
$('.prob').show()
|
|
$('.desc').hide()
|
|
cardID.push(index)
|
|
} else {
|
|
if (userRemainDay < MAX_NUM) {
|
|
toastMsg('選擇數量不能超過限購天數')
|
|
}
|
|
currentNum = userRemainDay
|
|
}
|
|
console.log('cardID', cardID);
|
|
}
|
|
} else {
|
|
currentNum--
|
|
$(this).removeClass('active')
|
|
$('.prob').html(`獲得${prodRewardPrice}钻的概率為${currentNum * 10}%`)
|
|
const currentIndex = cardID.indexOf(index)
|
|
cardID.splice(currentIndex, 1)
|
|
console.log(cardID);
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
animation()
|
|
|
|
// 打開介紹彈窗
|
|
$('.introduction-btn').on('click', function () {
|
|
$('.shade-mask').show()
|
|
$('body').css('overflow', 'hidden')
|
|
})
|
|
// 關閉彈窗
|
|
$('.shade-mask').on('click', () => {
|
|
$('.shade-mask').hide()
|
|
$('body').css('overflow', 'auto')
|
|
})
|
|
$('.shade-content').click((e) => {
|
|
e.stopPropagation()
|
|
})
|
|
$('.close-record').click(() => {
|
|
bodyScroolFun(false)
|
|
requestStatus = false;
|
|
$('.table-shade').hide()
|
|
})
|
|
$('.result-shade').on('click', () => {
|
|
$('.result-shade').hide()
|
|
})
|
|
$('.result-content').click((e) => {
|
|
e.stopPropagation()
|
|
})
|
|
$('.not-enough').click(() => {
|
|
$('.not-enough').hide()
|
|
})
|
|
$('.not-enough-content').click((e) => {
|
|
e.stopPropagation()
|
|
})
|
|
// 關閉青少年 未成年提示彈窗
|
|
$('.know').on('click', () => {
|
|
$('.shade-mask-teen').hide()
|
|
})
|
|
// 關閉認證彈窗
|
|
$('.button-cancel, .button-agree').on('click', function () {
|
|
$(this).parents('.identity-mask').hide();
|
|
});
|
|
// 記錄
|
|
$('.record-btn').click(() => {
|
|
bodyScroolFun(true)
|
|
page = 0;
|
|
// $('.dropload-refresh').css({ display: 'block' })
|
|
// $('.dropload-down').hide()
|
|
// $('.dom').hide();
|
|
$('.table li').remove();
|
|
prizeRecord = [];
|
|
prizeRecordFun()
|
|
$('.table-shade').show()
|
|
})
|
|
|
|
// 跳轉充值頁面
|
|
$('.go-to-recharge, .recharge-icon').click(() => {
|
|
if (browser.app) {
|
|
if (browser.android) {
|
|
window.androidJsObj.openChargePage(7);
|
|
} else if (browser.ios) {
|
|
window.webkit.messageHandlers.chargePayClickPage.postMessage(7);
|
|
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
|
|
}
|
|
} else {
|
|
toastMsg('請在app內打開')
|
|
}
|
|
|
|
$('.not-enough').hide()
|
|
})
|
|
|
|
$('.canSelect span').html(selectDays ? selectDays : 0)
|
|
|
|
$('.explore').on('click', function () {
|
|
if (currentNum == 0) {
|
|
toastMsg('請選擇小動物~')
|
|
}
|
|
// else if (selectDays != currentNum && !$(this).hasClass('again')) {
|
|
// let headwearName = diamondNum == 1000 ? '初級探訪' : (diamondNum == 10000 ? '中級探訪' : '高級探訪')
|
|
// $('.planet-num span').html(currentNum)
|
|
// $('.headwear img').attr('src', selectSrc)
|
|
// $('.headwear-day').html(`${headwearName}${currentNum}天`)
|
|
// $('.headwear-price span').html(diamondNum * currentNum)
|
|
// $('.shade-mask-recharge').show()
|
|
// }
|
|
// else if (selectDays == currentNum && !$(this).hasClass('again')) {
|
|
else if (!$(this).hasClass('again')) {
|
|
let leftDays;
|
|
if (window.sessionStorage.getItem('leftDays') != null) {
|
|
leftDays = window.sessionStorage.getItem('leftDays') - currentNum
|
|
} else {
|
|
// leftDays = userSelectInfo.userRemainDay - currentNum
|
|
leftDays = userRemainDay - currentNum
|
|
}
|
|
window.sessionStorage.setItem('leftDays', leftDays)
|
|
if (userDiamonds < diamondNum * currentNum) {
|
|
return $('.not-enough').show()
|
|
}
|
|
draw()
|
|
} else if ($(this).hasClass('again')) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
// 關閉支付彈窗
|
|
$('.shade-mask-recharge').click(function () {
|
|
$(this).hide()
|
|
})
|
|
$('.shade-content-recharge').click(function (e) {
|
|
e.stopPropagation()
|
|
})
|
|
|
|
|
|
$('.no-explore').on('click', function () {
|
|
sessionStorage.clear()
|
|
history.go(-1)
|
|
})
|
|
|
|
// 抽獎支付按鈕點擊事件
|
|
// $('.recharge-btn').click(function () {
|
|
// let leftDays;
|
|
// if (window.sessionStorage.getItem('leftDays') != null) {
|
|
// leftDays = window.sessionStorage.getItem('leftDays') - currentNum
|
|
// } else {
|
|
// // leftDays = userSelectInfo.userRemainDay - currentNum
|
|
// leftDays = userRemainDay - currentNum
|
|
// }
|
|
// window.sessionStorage.setItem('leftDays', leftDays)
|
|
|
|
// $('.shade-mask-recharge').hide()
|
|
// if (userDiamonds < diamondNum * currentNum) {
|
|
// $('.not-enough').show()
|
|
// return
|
|
// }
|
|
// draw()
|
|
// });
|
|
})
|
|
|
|
|
|
//中獎記錄請求
|
|
function prizeRecordFun() {
|
|
showLoading()
|
|
var result = '';
|
|
if (!requestStatus) {
|
|
requestStatus = true;
|
|
page++;
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/seekElfin/record/page',
|
|
data: {
|
|
uid: pubInfo.uid,
|
|
current: page,
|
|
size: size,
|
|
},
|
|
success: function (res) {
|
|
if (res.code == 200) {
|
|
prizeRecord = res.data.records;
|
|
var arrLen = res.data.records.length;
|
|
if (arrLen > 0) {
|
|
requestStatus = false;
|
|
result = prizeRecordDom();
|
|
$('.table').append(result)
|
|
if(arrLen <10){
|
|
$('.table').append(`<li class="dropload-noData">沒有更多了</li>`)
|
|
$('.table .dropload-noData').show()
|
|
}
|
|
} else {// 如果沒有數據
|
|
requestStatus = true
|
|
if (page == 1) {
|
|
$('.table').append(`<li class="dropload-noData">暫無數據</li>`)
|
|
$('.table .dropload-noData').show()
|
|
}else {
|
|
$('.table .dropload-noData').remove()
|
|
$('.table').append(`<li class="dropload-noData">沒有更多了</li>`)
|
|
$('.table .dropload-noData').show()
|
|
}
|
|
}
|
|
}
|
|
|
|
hideLoading(layerIndex)
|
|
},
|
|
error: function (res) {
|
|
// $('.dropload-down').hide()
|
|
requestStatus = false;
|
|
console.log(res, '報錯啦');
|
|
$('.table').css({ display: 'none' })
|
|
// $('.noData').css({ display: 'block' })
|
|
hideLoading(layerIndex)
|
|
}
|
|
})
|
|
}
|
|
|
|
};
|
|
|
|
// 中獎記錄渲染
|
|
function prizeRecordDom() {
|
|
let result = ''
|
|
prizeRecord.forEach((res, i) => {
|
|
// console.log(res);
|
|
result += `
|
|
<li class='dom'>
|
|
<div>${res.prodName}</div>
|
|
<div><span>${res.selectdNo}</span></div>
|
|
<div>${res.drawNum == undefined ? 0 : res.drawNum}</div>
|
|
<div>${res.win ? '是' : '否'}<p>${res.win ? res.receiveGoldNum + '鉆' : ''}</p></div>
|
|
<div>${dateFormat(res.createTime, "yyyy.MM.dd")}<p>${dateFormat(res.createTime, "hh:mm:ss")}</p></div>
|
|
</li>`
|
|
});
|
|
return result
|
|
};
|
|
|
|
// 记录监听滚动
|
|
$('.table-content .table-wrap .table').scroll(function () {
|
|
let scrollTop = $(this).scrollTop()
|
|
let scrollHeight = $('.table-content .table-wrap .table')[0].scrollHeight
|
|
let ulHeight = $(this).innerHeight()
|
|
if (scrollTop + ulHeight + 100 >= scrollHeight) {
|
|
if (!requestStatus) {
|
|
prizeRecordFun();
|
|
}
|
|
}
|
|
})
|
|
// 獲取用戶信息
|
|
const getUserInfo = () => {
|
|
networkRequest({
|
|
type: 'POST',
|
|
url: urlPrefix + '/seekElfin/user/info',
|
|
data: {
|
|
uid: pubInfo.uid
|
|
},
|
|
success: function (res) {
|
|
if (res.code == 200) {
|
|
userDiamonds = res.data.diamonds
|
|
$('.mine .avatar img').attr('src', res.data.avatar)
|
|
$('.mine .nick').html(res.data.nick.length > 8 ? res.data.nick.slice(0, 8) + '...' : res.data.nick)
|
|
$('.mine .diamond-num span').html(res.data.diamonds)
|
|
}
|
|
},
|
|
error: function (res) {
|
|
console.log(res, '報錯啦');
|
|
}
|
|
})
|
|
}
|
|
|
|
const draw = () => {
|
|
playAnimate()
|
|
const prodId = prodID;
|
|
const roomUid = roomId;
|
|
const cardList = cardID;
|
|
networkRequest({
|
|
type: 'POST',
|
|
url: urlPrefix + '/seekElfin/draw',
|
|
data: JSON.stringify({
|
|
prodId,
|
|
selectedNo: cardList,
|
|
roomUid,
|
|
}),
|
|
headers: { 'Content-Type': 'application/json;charset=utf8' },
|
|
success: function (res) {
|
|
if (res.code == 200) {
|
|
getUserInfo()
|
|
setTimeout(() => {
|
|
$('.svga').hide()
|
|
result = res.data
|
|
console.log('結果', res.data);
|
|
renderResult()
|
|
}, 1000)
|
|
}
|
|
},
|
|
error: function (res) {
|
|
console.log(res, '報錯啦');
|
|
}
|
|
})
|
|
}
|
|
|
|
// 播放過場動畫
|
|
const playAnimate = () => {
|
|
$('.explore').addClass('again')
|
|
$('.shade-mask-recharge').hide()
|
|
$('.svga').show()
|
|
let player = new SVGA.Player('.svga');
|
|
let parser = new SVGA.Parser('.svga');
|
|
parser.load('https://img.pekolive.com/elfin-animate.svga', function (videoItem) {
|
|
// player.loops = 1;
|
|
player.clearsAfterStop = false;
|
|
player.setVideoItem(videoItem);
|
|
player.startAnimation();
|
|
})
|
|
}
|
|
|
|
const renderResult = () => {
|
|
let index = result.drawNum
|
|
$('.result-content .animal').attr('src', animalArr[index].animalPic)
|
|
$('.result-content p span').html(animalArr[index].animalName)
|
|
$('.result-content .awardD span').html(result.receiveGoldNum)
|
|
$('.result-content .headwear').attr('src', result.headwearPic)
|
|
$('.result-content .indate').html(`${result.headwearName}${result.headwearDays}天`)
|
|
|
|
if (result.win) {
|
|
$('.result-content').addClass('success')
|
|
$('.prob').hide()
|
|
$('.desc').addClass('success')
|
|
$('.desc').html(`
|
|
成功找到小精靈！</br>
|
|
<span>小精靈將送你${result.receiveGiftPrice}鉆石</span>
|
|
`).show()
|
|
} else {
|
|
$('.result-content').addClass('fail')
|
|
$('.prob').hide()
|
|
$('.desc').addClass('fail')
|
|
$('.desc').html('很遺憾未能找到小精靈</br>下次再接再厲哦！').show()
|
|
$('.select-area div').eq(index).find('.default').hide().siblings('.fail').show()
|
|
}
|
|
$('.result-shade').show()
|
|
}
|
|
|
|
// 控制body是否可以滑动
|
|
function bodyScroolFun(bool) {
|
|
if (bool) {
|
|
$('body').css('overflow', 'hidden');
|
|
} else {
|
|
$('body').css('overflow', 'auto');
|
|
|
|
}
|
|
}
|
|
|
|
//返回頁面 重新請求接口
|
|
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]) {
|
|
getUserInfo()
|
|
}
|
|
}
|
|
document.addEventListener(visibilityChangeEvent, onVisibilityChange); |