355 lines
12 KiB
JavaScript
355 lines
12 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
||
let browser = checkVersion()
|
||
let env = EnvCheck();
|
||
if (env == 'test') {
|
||
new VConsole();
|
||
}
|
||
|
||
// 封裝layer消息提醒框
|
||
let layerIndex
|
||
const showLoading = (content = '加載中...') => {
|
||
layer.open({
|
||
type: 2,
|
||
shadeClose: false,
|
||
content,
|
||
success (e) {
|
||
layerIndex = $(e).attr('index')
|
||
}
|
||
})
|
||
}
|
||
const hideLoading = (index) => {
|
||
layer.close(index)
|
||
}
|
||
const toastMsg = (content = '操作完成', time = 2) => {
|
||
layer.open({
|
||
content,
|
||
time,
|
||
skin: 'msg'
|
||
})
|
||
}
|
||
|
||
// 獲取用戶信息
|
||
let isGetUserInfoInterFace //是否獲取到個人信息接口
|
||
const getUserInfo = (param) => {
|
||
showLoading('獲取個人信息中...')
|
||
networkRequest({
|
||
type: 'GET',
|
||
url: urlPrefix + '/activities/draw/queryTicketNum',
|
||
data: {
|
||
uid: pubInfo.uid
|
||
},
|
||
timeout: 8000, //超时时间设置，单位毫秒
|
||
complete: function (XMLHttpRequest, status) {//请求完成后最终执行参数
|
||
if (status == 'timeout') {//超时,status还有success,error等值的情况
|
||
//这里我使用的是layer中的弹出框（当然也可以用其他的）
|
||
hideLoading(layerIndex)
|
||
toastMsg('请求连接超时')
|
||
}
|
||
},
|
||
success (res) {
|
||
if (res.code === 200) {
|
||
isGetUserInfoInterFace = true
|
||
isShow()
|
||
$('.mine').find('.avatar img').attr('src', res.data.avatar)
|
||
if (!res.data.nick) {
|
||
res.data.nick = '未知'
|
||
}
|
||
if (res.data.nick.length > 10) {
|
||
res.data.nick = res.data.nick.substring(0, 10) + '...'
|
||
}
|
||
$('.mine').find('.nick').html(res.data.nick)
|
||
$('.mine').find('.diamond-num span').html(res.data.userPurse.diamonds)
|
||
if (param) {
|
||
$('.mine').find('.meteor-num span')[0].innerHTML = parseInt($('.mine').find('.meteor-num span')[0].innerHTML) + param
|
||
} else {
|
||
$('.mine').find('.meteor-num span').html(res.data.num)
|
||
}
|
||
getListPack()
|
||
} else {
|
||
toastMsg(res.message)
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error (err) {
|
||
toastMsg('網絡錯誤')
|
||
hideLoading(layerIndex)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 獲取禮包信息
|
||
let isGetListPackInterFace //是否獲取到禮包接口
|
||
let listPack = []
|
||
const getListPack = () => {
|
||
showLoading('獲取禮包信息中...')
|
||
networkRequest({
|
||
type: 'POST',
|
||
url: urlPrefix + '/activities/draw/getPackList',
|
||
data: {
|
||
uid: pubInfo.uid
|
||
},
|
||
timeout: 8000, //超时时间设置，单位毫秒
|
||
complete: function (XMLHttpRequest, status) {//请求完成后最终执行参数
|
||
if (status == 'timeout') {//超时,status还有success,error等值的情况
|
||
//这里我使用的是layer中的弹出框（当然也可以用其他的）
|
||
hideLoading(layerIndex)
|
||
toastMsg('请求连接超时')
|
||
}
|
||
},
|
||
success (res) {
|
||
if (res.code === 200) {
|
||
isGetListPackInterFace = true
|
||
isShow()
|
||
listPack = res.data
|
||
renderList()
|
||
} else {
|
||
toastMsg(res.message)
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error () {
|
||
toastMsg('網絡錯誤')
|
||
hideLoading(layerIndex)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 渲染禮包
|
||
let arrTips = [
|
||
'獲得信物1個',
|
||
'獲得信物10個',
|
||
'獲得信物100個',
|
||
'獲得信物1000個',
|
||
]
|
||
const renderList = () => {
|
||
listPack.map((item, index) => {
|
||
let $li = $('ul.buy-area li').eq(index)
|
||
$li.find('.headwear-name').html(item.name)
|
||
$li.find('.headwear-price').html(item.sellingPrice + '鉆石/天')
|
||
$li.find('.headwear-award').html(arrTips[index])
|
||
|
||
$('.content span').eq(index).html(item.name)
|
||
|
||
let currentBuyBtn = $('.buy-btn').eq(index)
|
||
currentBuyBtn.data('name', item.name)
|
||
currentBuyBtn.data('day', 1)
|
||
currentBuyBtn.data('gold', item.sellingPrice)
|
||
currentBuyBtn.data('giftId', item.id)
|
||
currentBuyBtn.data('ticketNum', item.ticketNum)
|
||
})
|
||
}
|
||
|
||
//只有兩個接口都請求到數據，才渲染默認頁面
|
||
const isShow = () => {
|
||
if (isGetListPackInterFace && isGetUserInfoInterFace) {
|
||
hideLoading(layerIndex)
|
||
$('.wrap').show()
|
||
} else {
|
||
showLoading('加載中...')
|
||
}
|
||
}
|
||
|
||
$(function () {
|
||
getInfoFromClient()
|
||
setTimeout(function () {
|
||
getUserInfo()
|
||
}, 500)
|
||
|
||
// 點擊玩法介紹按鈕
|
||
$('.rule-btn').on('click', function () {
|
||
$('.shade').fadeIn(300)
|
||
$('.rule-mask').fadeIn(300)
|
||
$('body').css('overflow', 'hidden')
|
||
})
|
||
// 關閉規則彈窗
|
||
$('.rule-mask .cancel').on('click', function () {
|
||
$('.shade').fadeOut(300)
|
||
$('.rule-mask').fadeOut(300)
|
||
$('body').css('overflow', 'auto')
|
||
})
|
||
$('.shade').on('click', function () {
|
||
$('.shade').hide()
|
||
$('.rule-mask').hide()
|
||
$('.shade-mask-success').hide()
|
||
$('.shade-mask-no-money').hide()
|
||
$('body').css('overflow', 'auto')
|
||
})
|
||
$('.rule-mask').on('click', function (e) {
|
||
e.stopPropagation()
|
||
})
|
||
|
||
// 監聽購買按鈕點擊事件
|
||
$('ul.buy-area').on('click', '.buy-btn', function () {
|
||
console.log($(this).data());
|
||
if (!$(this).data('name') || !$(this).data('day') || !$(this).data('gold') || !$(this).data('giftId')) {
|
||
toastMsg('禮包信息不完整')
|
||
return
|
||
}
|
||
|
||
giftObj = {}
|
||
giftObj['name'] = $(this).data('name')
|
||
giftObj['day'] = $(this).data('day')
|
||
giftObj['gold'] = $(this).data('gold')
|
||
giftObj['giftId'] = $(this).data('giftId')
|
||
giftObj['num'] = 1
|
||
giftObj['ticketNum'] = $(this).data('ticketNum')
|
||
|
||
|
||
$('.shade-mask-buy').find('.title span').html(giftObj['name'])
|
||
$('.shade-mask-buy').find('.buy-day span').html(giftObj['day'])
|
||
$('.shade-mask-buy').find('.buy-price span').html(giftObj['gold'])
|
||
$('.shade-mask-buy').find('.inputNum').val(giftObj['num'])
|
||
$('.shade-mask-buy').fadeIn(50)
|
||
$('body').css('overflow', 'hidden')
|
||
})
|
||
// 關閉購買彈窗
|
||
$('.buy-confirm-btn .cancel').on('click', function () {
|
||
$('.shade-mask-buy').fadeOut(50)
|
||
$('body').css('overflow', 'auto')
|
||
})
|
||
$('.shade-mask-buy').on('click', function () {
|
||
$('.shade-mask-buy').fadeOut(50)
|
||
$('body').css('overflow', 'auto')
|
||
})
|
||
$('.shade-content-buy').on('click', function (e) {
|
||
e.stopPropagation()
|
||
})
|
||
// 增加購買數量
|
||
$('.increase').on('click', function () {
|
||
if (giftObj['num'] < 999) {
|
||
giftObj['num']++;
|
||
giftObj['day']++;
|
||
let allPrice = giftObj['num'] * giftObj['gold'];
|
||
$('.inputNum').val(giftObj['num'])
|
||
$('.buy-day span').html(giftObj['day'])
|
||
$('.buy-price span').html(allPrice)
|
||
} else {
|
||
toastMsg('單次購買數量最多為999')
|
||
}
|
||
})
|
||
// 減少購買數量
|
||
$('.decrease').on('click', function () {
|
||
if ($('.inputNum').val() > 0) {
|
||
giftObj['num']--;
|
||
giftObj['day']--;
|
||
let allPrice = giftObj['num'] * giftObj['gold'];
|
||
$('.inputNum').val(giftObj['num'])
|
||
$('.buy-day span').html(giftObj['day'])
|
||
$('.buy-price span').html(allPrice)
|
||
} else {
|
||
toastMsg('最少購買數量為1')
|
||
}
|
||
})
|
||
// 手動輸入購買數量
|
||
$('.inputNum').on('input', function () {
|
||
let exp = /^[0-9]+$/
|
||
if (!exp.test($(this).val())) {
|
||
toastMsg('請輸入數字')
|
||
return
|
||
}
|
||
if ($(this).val() > 999) {
|
||
giftObj['num'] = 999
|
||
} else {
|
||
giftObj['num'] = $(this).val()
|
||
}
|
||
giftObj['day'] = giftObj['num'];
|
||
let allPrice = giftObj['num'] * giftObj['gold'];
|
||
$('.inputNum').val(giftObj['num'])
|
||
$('.buy-day span').html(giftObj['day'])
|
||
$('.buy-price span').html(allPrice)
|
||
})
|
||
// 確認購買
|
||
let lock = false
|
||
$('.confirm').on('click', function () {
|
||
let exp = /^[0-9]+$/
|
||
if (!exp.test($('.inputNum').val())) {
|
||
toastMsg('請輸入數字')
|
||
$('.inputNum').val(1)
|
||
return
|
||
}
|
||
if ($('.inputNum').val() == 0) {
|
||
return toastMsg('最少購買數量為1')
|
||
}
|
||
if (!lock) {
|
||
lock = true
|
||
networkRequest({
|
||
type: 'POST',
|
||
url: urlPrefix + '/activity/pack/buy',
|
||
data: {
|
||
uid: pubInfo.uid,
|
||
packId: giftObj.giftId,
|
||
packNum: giftObj.num,
|
||
ticket: pubInfo.ticket
|
||
},
|
||
success (res) {
|
||
if (res.code === 200) {
|
||
getUserInfo(res.data)
|
||
$('.shade-mask-buy').hide()
|
||
$('.shade').fadeIn(300)
|
||
$('.shade-mask-success .tip').html(`獲贈信物x` + giftObj.ticketNum * giftObj.num)
|
||
$('.shade-mask-success').fadeIn()
|
||
} else if (res.code === 2103) {
|
||
$('.shade-mask-buy').hide()
|
||
$('.shade').fadeIn(300)
|
||
$('.shade-mask-no-money').show()
|
||
$('.shade-mask-no-money').fadeIn()
|
||
} else {
|
||
toastMsg(res.message)
|
||
}
|
||
lock = false
|
||
},
|
||
error (err) {
|
||
toastMsg('網絡錯誤')
|
||
}
|
||
})
|
||
}
|
||
|
||
})
|
||
// 關閉購買成功彈窗
|
||
$('.in-btn').on('click', function () {
|
||
$('.shade-mask-success').fadeOut()
|
||
$('.shade').fadeOut()
|
||
$('body').css('overflow', 'auto')
|
||
})
|
||
// 跳轉充值
|
||
$('.recharge').on('click', function () {
|
||
$('.shade-mask-no-money').fadeOut(300)
|
||
$('.shade').fadeOut(300)
|
||
$('body').css('overflow', 'auto')
|
||
if (browser.app) {
|
||
if (browser.android) {
|
||
tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
|
||
} 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]){
|
||
// $('.shade-mask-no-money').hide()
|
||
// getUserInfo()
|
||
// }
|
||
// }
|
||
// document.addEventListener(visibilityChangeEvent, onVisibilityChange);
|
||
//返回页面 重新请求接口
|
||
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]) {
|
||
location.reload()
|
||
}
|
||
}
|
||
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
|
||
}) |