374 lines
12 KiB
JavaScript
374 lines
12 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
||
let browser = checkVersion()
|
||
let env = EnvCheck();
|
||
if (env == 'test') {
|
||
new VConsole();
|
||
}
|
||
// 封裝layer消息提醒框
|
||
let layerIndex
|
||
var langReplace;
|
||
var localLang;
|
||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
||
layer.open({
|
||
type: 2,
|
||
shadeClose: false,
|
||
content,
|
||
success(e) {
|
||
layerIndex = $(e).attr('index')
|
||
}
|
||
})
|
||
}
|
||
const hideLoading = (index) => {
|
||
layer.close(index)
|
||
}
|
||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
||
layer.open({
|
||
content,
|
||
time,
|
||
skin: 'msg'
|
||
})
|
||
}
|
||
// 初始化函數
|
||
$(function () {
|
||
getInfoFromClient();
|
||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||
setTimeout(function () {
|
||
// 頁面全屏
|
||
if (browser.app) {
|
||
if (browser.android) {
|
||
window.androidJsObj.initShowNav(false)
|
||
} else {
|
||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||
}
|
||
};
|
||
// 頂部返回事件
|
||
$('.back').click(() => {
|
||
if (browser.android) {
|
||
window.androidJsObj.closeWebView()
|
||
} else {
|
||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||
}
|
||
})
|
||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||
langReplace = window.lang.replace;
|
||
localLang = window.lang;
|
||
renderImgOption();
|
||
// swiperFun()
|
||
translateFun();
|
||
}, 100)
|
||
|
||
})
|
||
|
||
function translateFun() {
|
||
var langReplace = window.lang.replace;
|
||
var localLang = window.lang;
|
||
$('.Renew').html(langReplace(localLang.demoModule.Renew));
|
||
$('.Pay').html(langReplace(localLang.demoModule.Pay));
|
||
$('.Cancel').html(langReplace(localLang.demoModule.Cancel));
|
||
$('.Confirm').html(langReplace(localLang.demoModule.Confirm));
|
||
$('.Exclusive_Privileges').html(langReplace(localLang.demoModule.Exclusive_Privileges));
|
||
$('.Identification').html(langReplace(localLang.demoModule.Identification));
|
||
$('.Confirm_Purchase').html(langReplace(localLang.demoModule.Confirm_Purchase));
|
||
$('.VIP_Center').html(langReplace(localLang.demoModule.VIP_Center));
|
||
}
|
||
var vipInfos;
|
||
var mySwiper;
|
||
var vipAuthInfos;
|
||
function renderImgOption() {
|
||
networkRequest({
|
||
type: 'get',
|
||
url: urlPrefix + '/vip/v2/getVipPageInfo',
|
||
success(res) {
|
||
|
||
if (res.code == 200) {
|
||
vipInfos = res.data.vipInfos
|
||
vipAuthInfos = res.data.vipAuthInfos
|
||
const swiperWrapper = $('.swiper-wrapper');
|
||
swiperWrapper.empty()
|
||
|
||
vipInfos.forEach((item, index) => {
|
||
if (item.remainSeconds) {
|
||
let now = new Date().getTime();
|
||
let date = new Date(now + item.remainSeconds * 1000); // 时间戳单位是秒，需要乘以1000转换为毫秒
|
||
dueDate = dateFormat(date, 'yyyy-MM-dd');
|
||
}
|
||
const slideHtml = `
|
||
<div class="swiper-slide">
|
||
<div class="img_card">
|
||
<img src="${vipOption[index].img}" alt="">
|
||
<img src="${item.vipIcon}" alt="" class="icon">
|
||
</div>
|
||
<div class="remainSeconds">
|
||
<p>${item.remainSeconds ? langReplace(localLang.demoModule.Due_on)+':'+ dueDate : langReplace(localLang.demoModule.Not_obtained)}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
swiperWrapper.append(slideHtml);
|
||
});
|
||
// 重新初始化 Swiper
|
||
if (mySwiper) {
|
||
mySwiper.destroy();
|
||
}
|
||
renderPermission(0)
|
||
swiperFun();
|
||
|
||
|
||
}
|
||
},
|
||
})
|
||
}
|
||
// 禮物輪播
|
||
function swiperFun() {
|
||
mySwiper = new Swiper('.swiper', {
|
||
slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量
|
||
spaceBetween: -90, // 幻灯片之间的间距（负值表示重叠）
|
||
centeredSlides: true, // 中心化幻灯片
|
||
on: {
|
||
slideChange: function () {
|
||
const activeSlide = this.activeIndex;
|
||
// const activeSlideObj = vipInfos[activeSlide]
|
||
console.log(activeSlide, '-------')
|
||
renderPermission(activeSlide)
|
||
}
|
||
}
|
||
})
|
||
// 跳转最高vip等级
|
||
const vip = vipInfos.map((item, index) => ({ item, index }))
|
||
.filter(({ item }) => item.remainSeconds)
|
||
.map(({ index }) => index);
|
||
mySwiper.slideTo(vip[vip.length - 1], 1000);
|
||
$('.renew_btn').attr('vipLevelTop', vip[vip.length - 1] || 0)
|
||
}
|
||
function renderPermission(actIndex) {
|
||
// 权益渲染
|
||
$('.permission .box_warp').empty()
|
||
vipIdentification[actIndex].forEach((item, index) => {
|
||
var str = `
|
||
<div class="content_box">
|
||
<img src="${item.img}" alt="">
|
||
<p>${langReplace(localLang.demoModule[item.name])}</p>
|
||
</div>
|
||
`
|
||
$('.permission .box_warp').append(str);
|
||
})
|
||
// 专有权列表渲染
|
||
// $('.exclusive_discounts .title_name .num').text(`(${vipInfos[actIndex].ownAuthTypes.length}/${vipAuthInfos.length})`)
|
||
|
||
$('.exclusive_discounts .box_warp').empty()
|
||
let actIndexNum = vipAuthInfos.length
|
||
vipAuthInfos.forEach((item, index) => {
|
||
var str = `
|
||
<div class="content_box" obj='${JSON.stringify(item)}'>
|
||
<img src="${item.authIcon}" alt="">
|
||
<p class="name">${item.authName}</p>
|
||
</div>
|
||
`
|
||
var $contentBox = $(str);
|
||
if (!vipInfos[actIndex].ownAuthTypes.includes(item.authType)) {
|
||
$contentBox.addClass('noactive')
|
||
actIndexNum -= 1;
|
||
}
|
||
$('.exclusive_discounts .title_name .num').text(`(${actIndexNum}/${vipAuthInfos.length})`)
|
||
|
||
$('.exclusive_discounts .box_warp').append($contentBox);
|
||
})
|
||
// 购买弹窗
|
||
if (vipInfos[actIndex].buyAmount != 0) {
|
||
$('.payPopup .payPopup_warp .buyAmount .num').text(vipInfos[actIndex].buyAmount)
|
||
$('.bottom_renew .wrap .left .buyAmount').text(`${vipInfos[actIndex].buyAmount} / 30${langReplace(localLang.demoModule.Days)}`)
|
||
$('.payPopup .payPopup_warp .pay_btn').attr('vipLevel', vipInfos[actIndex].vipLevel)
|
||
$('.bottom_renew .wrap').show()
|
||
$('.bottom_renew .wrap_txt').hide()
|
||
} else {
|
||
$('.bottom_renew .wrap_txt').text(`${vipInfos[actIndex].vipName} ${langReplace(localLang.demoModule.is_activity)}`)
|
||
$('.bottom_renew .wrap').hide()
|
||
$('.bottom_renew .wrap_txt').show()
|
||
}
|
||
$('.renew_btn').attr('vipLevel',actIndex)
|
||
}
|
||
// 点击购买
|
||
$('.payPopup .payPopup_warp .pay_btn').click(function () {
|
||
let vipLevel = $(this).attr('vipLevel')
|
||
showLoading();
|
||
networkRequest({
|
||
type: "post",
|
||
url: urlPrefix + "/vip/openWithDiamond",
|
||
data: {
|
||
roomUid:pubInfo.uid,
|
||
// roomUid:3203,
|
||
vipLevel
|
||
},
|
||
success: function (res) {
|
||
$('.payPopup').hide()
|
||
if (res.code == 200) {
|
||
renderImgOption()
|
||
} else {
|
||
// toastMsg(res.message);
|
||
$('.custom-dialog .dialog-content .dialog-title').text(res.message)
|
||
$('.custom-dialog').addClass('visible');
|
||
}
|
||
hideLoading(layerIndex);
|
||
},
|
||
error: function (res) {
|
||
hideLoading(layerIndex);
|
||
},
|
||
});
|
||
})
|
||
// 点击对话框外部关闭对话框
|
||
$('.custom-dialog').on('click', function (event) {
|
||
if ($(event.target).is('.custom-dialog')) {
|
||
$('.custom-dialog').removeClass('visible');
|
||
}
|
||
});
|
||
// 确认按钮的触发事件
|
||
$('.custom-dialog .dialog-confirm').on('click', function () {
|
||
// 执行确认操作
|
||
$('.custom-dialog').removeClass('visible');
|
||
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内打开')
|
||
}
|
||
});
|
||
// 取消按钮的触发事件
|
||
$('.custom-dialog .dialog-cancel').on('click', function () {
|
||
// 执行确认操作
|
||
$('.custom-dialog').removeClass('visible');
|
||
});
|
||
|
||
// 点击详情弹窗
|
||
$('.exclusive_discounts .box_warp').on('click', '.content_box', function () {
|
||
let obj = JSON.parse($(this).attr("obj"))
|
||
$('.selectAccount .selectAccount_in .descPic img').attr('src', obj.descPic)
|
||
$('.selectAccount .selectAccount_in .authIntro').text(obj.authIntro)
|
||
$('.selectAccount .selectAccount_in .name span').text(obj.authName)
|
||
$('.selectAccount').show()
|
||
})
|
||
// 关闭详情弹窗
|
||
$('.selectAccount').click(function () {
|
||
$('.selectAccount').hide()
|
||
})
|
||
$('.selectAccount .selectAccount_in .name img').click(function () {
|
||
$('.selectAccount').hide()
|
||
})
|
||
// 购买弹窗
|
||
$('.bottom_renew .wrap .renew_btn').on('click', function () {
|
||
let viplevelIndex = $(this).attr('viplevel');
|
||
let vipleveltopIndex = $(this).attr('vipleveltop');
|
||
if(vipleveltopIndex == 0){
|
||
$('.payPopup').show()
|
||
return
|
||
}
|
||
// 购买等级大于自身等级
|
||
if(vipInfos[viplevelIndex].vipLevel > vipInfos[vipleveltopIndex].vipLevel){
|
||
$('.shop-dialog .dialog-content .dialog-title').text(`${langReplace(localLang.demoModule.You_currently(vipInfos[vipleveltopIndex].vipName,vipInfos[viplevelIndex].vipName))}`)
|
||
$('.shop-dialog').addClass('visible');
|
||
}else{
|
||
$('.payPopup').show()
|
||
}
|
||
})
|
||
// 确认按钮的触发事件
|
||
$('.shop-dialog .dialog-confirm').on('click', function () {
|
||
// 执行确认操作
|
||
$('.shop-dialog').removeClass('visible');
|
||
$('.payPopup').show()
|
||
});
|
||
// 取消按钮的触发事件
|
||
$('.shop-dialog .dialog-cancel').on('click', function () {
|
||
// 执行确认操作
|
||
$('.shop-dialog').removeClass('visible');
|
||
});
|
||
|
||
$('.payPopup').click(function () {
|
||
$('.payPopup').hide()
|
||
})
|
||
$('.payPopup .payPopup_warp').on('click', function () {
|
||
return false;
|
||
})
|
||
//
|
||
$('.selectAccount .selectAccount_in').on('click', function () {
|
||
return false;
|
||
})
|
||
var vipOption = [
|
||
{ img: './images/vip1_bg.png' },
|
||
{ img: './images/vip2_bg.png' },
|
||
{ img: './images/vip3_bg.png' },
|
||
{ img: './images/vip4_bg.png' },
|
||
{ img: './images/vip5_bg.png' },
|
||
{ img: './images/vip6_bg.png' },
|
||
{ img: './images/vip7_bg.png' },
|
||
{ img: './images/vip8_bg.png' },
|
||
{ img: './images/vip9_bg.png' },
|
||
]
|
||
|
||
var vipIdentification = [
|
||
[
|
||
{ img: './images/vip1_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip1_identity.png', name: 'Only_Nameplate' },
|
||
// { img: './images/vip1_card.png', name: 'Room_Card' },
|
||
],
|
||
[
|
||
{ img: './images/vip2_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip2_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip2_headimg.png', name: 'Only_Headdress' },
|
||
],
|
||
[
|
||
{ img: './images/vip3_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip3_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip3_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip3_txk.png', name: 'Mic_Effect' },
|
||
],
|
||
[
|
||
{ img: './images/vip4_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip4_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip4_jctx.png', name: 'Entry_Animation' },
|
||
{ img: './images/vip4_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip4_txk.png', name: 'Mic_Effect' },
|
||
{ img: './images/vip4_qp.png', name: 'Bubble_Effect' },
|
||
],
|
||
[
|
||
{ img: './images/vip5_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip5_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip5_jctx.png', name: 'Entry_Animation' },
|
||
{ img: './images/vip5_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip5_txk.png', name: 'Mic_Effect' },
|
||
{ img: './images/vip5_qp.png', name: 'Bubble_Effect' },
|
||
],
|
||
[
|
||
{ img: './images/vip6_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip6_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip6_jctx.png', name: 'Entry_Animation' },
|
||
{ img: './images/vip6_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip6_txk.png', name: 'Mic_Effect' },
|
||
{ img: './images/vip6_qp.png', name: 'Bubble_Effect' },
|
||
],
|
||
[
|
||
{ img: './images/vip7_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip7_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip7_jctx.png', name: 'Entry_Animation' },
|
||
{ img: './images/vip7_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip7_txk.png', name: 'Mic_Effect' },
|
||
{ img: './images/vip7_qp.png', name: 'Bubble_Effect' },
|
||
],
|
||
[
|
||
{ img: './images/vip8_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip8_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip8_jctx.png', name: 'Entry_Animation' },
|
||
{ img: './images/vip8_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip8_txk.png', name: 'Mic_Effect' },
|
||
{ img: './images/vip8_qp.png', name: 'Bubble_Effect' },
|
||
],
|
||
[
|
||
{ img: './images/vip9_identity.png', name: 'Only_Nameplate' },
|
||
{ img: './images/vip9_card.png', name: 'Room_Card' },
|
||
{ img: './images/vip9_jctx.png', name: 'Entry_Animation' },
|
||
{ img: './images/vip9_headimg.png', name: 'Only_Headdress' },
|
||
{ img: './images/vip9_txk.png', name: 'Mic_Effect' },
|
||
{ img: './images/vip9_qp.png', name: 'Bubble_Effect' },
|
||
],
|
||
] |