moliparty/peko-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

peko

Browse Source
This commit is contained in:
qf
2022-09-08 18:22:18 +08:00
commit 3cf89feaa0
2375 changed files with 193430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
view/peko/modules/spirit/js/main.js Normal file
View File

@@ -0,0 +1,465 @@
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);