465 lines
16 KiB
JavaScript
465 lines
16 KiB
JavaScript
let browser = checkVersion()
|
|
let urlPrefix = getUrlPrefix();//判斷正式環境或者測試環境
|
|
|
|
const toastMsg = (content = '操作完成', time = 2) => {
|
|
layer.open({
|
|
content,
|
|
skin: 'msg',
|
|
time
|
|
});
|
|
}
|
|
|
|
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'))
|
|
|
|
// 小動物數組
|
|
let animalArr = [
|
|
{
|
|
animalPic: './image/animal/1.png',
|
|
animalName: '小熊'
|
|
},
|
|
{
|
|
animalPic: './image/animal/2.png',
|
|
animalName: '小兔'
|
|
},
|
|
{
|
|
animalPic: './image/animal/3.png',
|
|
animalName: '小狗'
|
|
},
|
|
{
|
|
animalPic: './image/animal/4.png',
|
|
animalName: '小貓'
|
|
},
|
|
{
|
|
animalPic: './image/animal/5.png',
|
|
animalName: '小猴'
|
|
},
|
|
{
|
|
animalPic: './image/animal/6.png',
|
|
animalName: '小羊'
|
|
},
|
|
{
|
|
animalPic: './image/animal/7.png',
|
|
animalName: '小虎'
|
|
},
|
|
{
|
|
animalPic: './image/animal/8.png',
|
|
animalName: '小雞'
|
|
},
|
|
{
|
|
animalPic: './image/animal/9.png',
|
|
animalName: '小牛'
|
|
},
|
|
{
|
|
animalPic: './image/animal/10.png',
|
|
animalName: '小豬'
|
|
}
|
|
]
|
|
|
|
$(function () {
|
|
getInfoFromClient()
|
|
setTimeout(() => {
|
|
getUserInfo()
|
|
}, 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
|
|
}
|
|
|
|
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 (!limitPurchaseSwitch) {
|
|
if (currentNum <= MAX_NUM) {
|
|
$(this).addClass('active')
|
|
$('.prob').html(`獲得${giftName}的概率為${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(`獲得${giftName}的概率為${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(`獲得${giftName}的概率為${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(() => {
|
|
$('.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(() => {
|
|
page = 0;
|
|
$('.dropload-refresh').css({ display: 'block' })
|
|
$('.dropload-down').hide()
|
|
prizeRecord = [];
|
|
$('.dom').hide();
|
|
prizeRecordFun()
|
|
$('.table-shade').show()
|
|
})
|
|
|
|
// 跳轉充值頁面
|
|
$('.go-to-recharge, .recharge-icon').click(() => {
|
|
if (browser.app) {
|
|
if (browser.android) {
|
|
// window.androidJsObj.openChargePage()
|
|
tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
|
|
} else if (browser.ios) {
|
|
window.webkit.messageHandlers.openChargePage.postMessage(null)
|
|
}
|
|
} 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 == 10 ? '初級頭飾' : (diamondNum == 100 ? '中級頭飾' : '高級頭飾')
|
|
$('.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')) {
|
|
let leftDays;
|
|
if (window.sessionStorage.getItem('leftDays') != null) {
|
|
leftDays = window.sessionStorage.getItem('leftDays') - currentNum
|
|
} else {
|
|
leftDays = userSelectInfo.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
|
|
}
|
|
window.sessionStorage.setItem('leftDays', leftDays)
|
|
|
|
$('.shade-mask-recharge').hide()
|
|
if (userDiamonds < diamondNum * currentNum) {
|
|
$('.not-enough').show()
|
|
return
|
|
}
|
|
draw()
|
|
});
|
|
})
|
|
|
|
|
|
//中獎記錄請求
|
|
function prizeRecordFun () {
|
|
var dropload = $('.table-wrap').dropload({
|
|
scrollArea: $('.table-wrap'),
|
|
loadDownFn: function (me) {
|
|
var result = '';
|
|
if (!requestStatus) {
|
|
requestStatus = true;
|
|
page++;
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/seekElfin/record/page?current=' + page + '&size=' + size,
|
|
data: {
|
|
uid: pubInfo.uid,
|
|
},
|
|
success: function (res) {
|
|
requestStatus = false;
|
|
if (res.code == 200) {
|
|
prizeRecord = res.data.records;
|
|
var arrLen = res.data.records.length;
|
|
if (arrLen < size) {
|
|
page = 0;
|
|
me.lock(); // 鎖定
|
|
me.noData(); // 無數據
|
|
}
|
|
if (arrLen > 0) {
|
|
result = prizeRecordDom();
|
|
$('.table').append(result)// 插入數據到頁面，放到最後面
|
|
me.resetload();// 每次數據加載完，必須重置
|
|
} else {// 如果沒有數據
|
|
me.resetload();
|
|
me.lock(); // 鎖定
|
|
me.noData(); // 無數據
|
|
console.log($('.rule_record .conent .table tr').length)
|
|
if (page == 0 && $('.rule_record .conent .table tr').length == 1) {
|
|
$('.dropload-noData').remove();
|
|
$('.table').css({ display: 'none' })
|
|
$('.noData').css({ display: 'block' })
|
|
}
|
|
}
|
|
}
|
|
},
|
|
error: function (res) {
|
|
$('.dropload-down').hide()
|
|
requestStatus = false;
|
|
console.log(res, '報錯啦');
|
|
me.lock(); // 鎖定
|
|
me.noData(); // 無數據
|
|
me.resetload();// 即使加載出錯，也得重置
|
|
$('.table').css({ display: 'none' })
|
|
$('.noData').css({ display: 'block' })
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
console.log('dropload-----', dropload);
|
|
};
|
|
|
|
// 中獎記錄渲染
|
|
function prizeRecordDom () {
|
|
let result = ''
|
|
prizeRecord.forEach((res, i) => {
|
|
// console.log(res);
|
|
result += `
|
|
<tr class='dom'>
|
|
<td>${res.prodName}</td>
|
|
<td style="max-width: 1rem;"><span>${res.selectdNo}</span></td>
|
|
<td>${res.drawNum == undefined ? 0 : res.drawNum}</td>
|
|
<td>${res.win ? '是，' + res.giftName : '否'}</td>
|
|
<td>${dateFormat(res.createTime, "yyyy.MM.dd hh:mm:ss")}</td>
|
|
</tr>`
|
|
});
|
|
return result
|
|
};
|
|
|
|
// 獲取用戶信息
|
|
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('./image/animate.svga', function (videoItem) {
|
|
// player.loops = 1;
|
|
player.clearsAfterStop = false;
|
|
player.setVideoItem(videoItem);
|
|
player.startAnimation();
|
|
})
|
|
}
|
|
|
|
const renderResult = () => {
|
|
let index = result.drawNum
|
|
$('.result-content img').attr('src', animalArr[index].animalPic)
|
|
$('.result-content p span').html(animalArr[index].animalName)
|
|
$('.result-content div span').eq(0).html(result.receiveGiftPrice)
|
|
$('.result-content div span').eq(1).html(result.receiveGiftName)
|
|
if (result.win) {
|
|
$('.result-content').addClass('success')
|
|
$('.prob').hide()
|
|
$('.desc').addClass('success')
|
|
$('.desc').html(`
|
|
成功找到小精靈！</br>
|
|
<span>小精靈將送你價值${result.receiveGiftPrice}鉆石的</br>${result.receiveGiftName}</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()
|
|
}
|
|
|
|
|
|
//返回頁面 重新請求接口
|
|
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); |