Files
peko-h5/view/peko/activity/act-nameplate/js/public.js
2023-12-06 17:05:20 +08:00

416 lines
11 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

let urlPrefix = getUrlPrefix();
var browser = checkVersion();
var info = {};
if (EnvCheck() === '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 delayLock = false, newApplyLock = false
let btnStatus = []
// 獲取用戶銘牌狀態
const getUserNameplateInfo = () => {
showLoading()
networkRequest({
type: 'GET',
url: urlPrefix + '/nameplate/userNameplateInfo',
data: {
uid: pubInfo.uid
},
success(res){
hideLoading(layerIndex);
if(res.code === 200){
btnStatus = res.data
renderBtnStatus()
}else{
toastMsg(res.message)
}
},
error(){
hideLoading(layerIndex);
toastMsg('網絡錯誤')
}
})
}
// 渲染首頁按鈕狀態
const renderBtnStatus = () => {
btnStatus.map( (item,index) => {
if(index > 1){
// 進階款式
$('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
if(item > 0){
$('.btn').eq(index).on('click', () => {
getUserNameplateList(index+1)
})
}
}else{
// 基礎款式
$('.btn').eq(index).find('img').attr('src', `${item > 0 ? './images/apply-btn-basics.png' : './images/disabled-btn.png'}`)
if(item > 0){
$('.btn').eq(index).on('click', () => {
getUserNameplateList(index+1)
})
}
}
})
}
let userNameplateList = []
// 獲取用戶已有銘牌列錶
const getUserNameplateList = (type) => {
showLoading()
networkRequest({
type: 'GET',
url: urlPrefix + '/nameplate/pickUserNameplate',
data: {
uid: pubInfo.uid,
type
},
success(res){
hideLoading(layerIndex)
if(res.code === 200){
if(!res.data.length){
getNewNameplateList(type)
}else{
userNameplateList = res.data
renderNameplateList()
}
}else{
toastMsg(res.message)
}
},
error(){
hideLoading(layerIndex);
toastMsg('網絡錯誤')
}
})
}
// 渲染銘牌列錶(選擇彈窗)
const renderNameplateList = () => {
let str = ''
userNameplateList.map( item => {
str += `
<li data-apply-day=${item.applyDay} data-nameplate-id=${item.nameplateId} data-type=${item.type} data-text=${item.fixedWord}>
<p>剩余${item.expireDays}天</p>
<div class="nameplate">
<img src="${item.nameplateImage}" alt="">
<span>${item.word}</span>
</div>
<div class="delay-btn">
<img src="./images/delay-btn.png" alt="">
</div>
</li>
`
})
$('.select-ul').html(str)
$('.shade-mask').show().siblings('.shade-mask-delay, .shade-mask-new').hide()
$('body').css('overflow', 'hidden')
}
let newNameplateList = []
// 獲取新銘牌列錶
const getNewNameplateList = (type) => {
showLoading()
networkRequest({
type: 'GET',
url: urlPrefix + '/nameplate/getNameplateList',
data: {
uid: pubInfo.uid,
type
},
success(res){
hideLoading(layerIndex)
if(res.code === 200){
if(!res.data.length){
toastMsg('暫時沒有銘牌可申請')
return
}
newNameplateList = res.data
renderNewNameplateList()
}else{
toastMsg(res.message)
}
},
error(){
hideLoading(layerIndex);
toastMsg('網絡錯誤')
}
})
}
let newNameplateId //只有一個可選時,默認選中
// 渲染申請新銘牌彈窗
const renderNewNameplateList = () => {
let str = '';
newNameplateList.map( item => {
str += `
<li data-apply-day=${item.applyDay} data-nameplate-id=${item.id} data-type=${item.type}>
<div>
<img src="${item.iconPic}" alt="">
</div>
</li>
`
})
$('.apply-new-ul').html(str)
if(newNameplateList.length === 1){
let onlyLi = $('.apply-new-ul').find('li').eq(0);
newNameplateId = onlyLi.data('nameplateId');
onlyLi.addClass('active')
}
$('.shade-mask-new .delay-time div p span').html(newNameplateList[0].applyDay)
$('.shade-mask-new').show().siblings('.shade-mask, .shade-mask-delay').hide()
$('body').css('overflow', 'hidden')
}
// 確認延長期限
const delayNamaplateConfirm = (params) => {
showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/nameplate/applyUserNameplate',
data: {
uid: pubInfo.uid,
type: params.type,
nameplateId: params.nameplateId,
applyDay: params.applyDay,
applyType: params.applyType,
text: params.text
},
success(res){
hideLoading(layerIndex)
if(res.code === 200){
toastMsg('申請成功')
$('.shade-mask-delay').hide()
$('body').css('overflow', 'auto')
delayLock = false
setTimeout(()=>{
location.reload()
}, 500)
}else{
toastMsg(res.message)
}
},
error(){
hideLoading(layerIndex);
toastMsg('網絡錯誤')
}
})
}
// 確認申請新銘牌
const applyNewNamaplateConfirm = (params) => {
showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/nameplate/applyUserNameplate',
data: {
uid: pubInfo.uid,
type: params.type,
nameplateId: params.nameplateId,
applyDay: params.applyDay,
applyType: params.applyType,
text: params.text
},
success(res){
hideLoading(layerIndex)
if(res.code === 200){
toastMsg('申請成功')
$('.shade-mask-new').hide()
$('body').css('overflow', 'auto')
newApplyLock = false
setTimeout(()=>{
location.reload()
}, 500)
}else{
newApplyLock = false
toastMsg(res.message)
}
},
error(){
hideLoading(layerIndex);
toastMsg('網絡錯誤,請退出重進')
}
})
}
$(function () {
getInfoFromClient()
setTimeout( () => {
getUserNameplateInfo()
}, 50)
if (browser.app) {
_hmt.push(['_trackEvent', 'client', 'click', "act_nameplate"]);
}
// 點擊申請記錄按鈕
$('.record').on('click', function(){
window.location.href = './record.html'
})
// 關閉彈窗
$('.shade-mask .close').on('click', () => {
$('.shade-mask').hide()
$('body').css('overflow', 'auto')
})
$('.shade-mask-delay .close').on('click', () => {
$('.shade-mask-delay').hide()
$('body').css('overflow', 'auto')
})
$('.shade-mask-new .close').on('click', () => {
$('.shade-mask-new').hide()
$('body').css('overflow', 'auto')
newNameplateId = ''
$(this).find('input').val('')
})
let maxApplyDay, nameplateId, type, text
// 監聽 延長期限 按鈕點擊事件
$('.select-ul').on('click', '.delay-btn', function() {
let li = $(this).parent();
let src = li.find('.nameplate img').attr('src');
let desc = li.find('.nameplate span').html();
maxApplyDay = li.data('applyDay');
nameplateId = li.data('nameplateId');
type = li.data('type');
text = li.data('text');
$('.shade-mask-delay .nameplate-style img').attr('src', src);
$('.shade-mask-delay .nameplate-style p span').html(desc);
$('.shade-mask-delay .delay-time p span').html(maxApplyDay);
$('.shade-mask-delay').show().siblings('.shade-mask, .shade-mask-new').hide()
})
// 延期彈窗 點擊減按鈕
$('.shade-mask-delay').on('click', '.decrease', function(){
let applyDay = parseInt( $(this).parent().find('span').html() );
if(applyDay > 7){
applyDay -= 7;
}else{
toastMsg('銘牌至少申請7天')
}
$('.shade-mask-delay .delay-time p span').html(applyDay);
})
//延期彈窗 點擊加按鈕
$('.shade-mask-delay').on('click', '.increase', function(){
let applyDay = parseInt( $(this).parent().find('span').html() );
if(applyDay >= maxApplyDay){
toastMsg('已達最大申請時長')
}else{
applyDay += 7;
}
$('.shade-mask-delay .delay-time p span').html(applyDay);
})
// 監聽申請延期確定按鈕點擊事件
$('.shade-mask-delay').on('click', '.apply-btn', function(){
// applyType 1申請新銘牌2延長
if(!delayLock){
delayLock = true
let params = {
type,
nameplateId,
applyDay: parseInt( $(this).parent().find('.delay-time div p span').html() ),
applyType: 2,
text
};
delayNamaplateConfirm(params)
}
})
/************************* ******************************/
// 監聽 申請新銘牌 按鈕點擊事件
$('.shade-mask').on('click', '.apply-btn', function(){
let type = $(this).parent().find('.select-ul li').eq(0).data('type');
getNewNameplateList(type)
})
// 申請新銘牌彈窗 點擊減按鈕
$('.shade-mask-new').on('click', '.decrease', function(){
let applyDay = parseInt( $(this).parent().find('span').html() );
if(applyDay > 7){
applyDay -= 7;
}else{
toastMsg('銘牌至少申請7天')
}
$('.shade-mask-new .delay-time p span').html(applyDay);
})
// 申請新銘牌彈窗 點擊加按鈕
$('.shade-mask-new').on('click', '.increase', function(){
let applyDay = parseInt( $(this).parent().find('span').html() );
let maxApplyDay = parseInt( $(this).parent().parent().parent().find('.apply-new-ul li').eq(0).data('applyDay') );
if(applyDay >= maxApplyDay){
toastMsg('已達最大申請時長')
}else{
applyDay += 7;
}
$('.shade-mask-new .delay-time p span').html(applyDay);
})
// 申請新銘牌彈窗 點擊銘牌列錶事件
$('.shade-mask-new').on('click', 'li', function(){
$(this).addClass('active').siblings('li').removeClass('active');
newNameplateId = $(this).data('nameplateId');
})
// 申請新銘牌彈窗 確定申請 按鈕點擊事件
$('.shade-mask-new').on('click', '.apply-btn', function(){
let content = $(this).parent();
let ipt = content.find('input.new-nameplate-desc').val()
if(!newNameplateId){
toastMsg('請選擇樣式');
return
}
if(!ipt){
toastMsg('請添加銘牌文字');
return
}else{
if(ipt.length !== 4){
toastMsg('請添加4個字的銘牌文字');
return
}
}
// applyType 1申請新銘牌2延長
if(!newApplyLock){
newApplyLock = true
let params = {
applyType: 1,
nameplateId: newNameplateId,
text: ipt,
type: parseInt( content.find('ul.apply-new-ul li').eq(0).data('type') ),
applyDay: parseInt( content.find('.delay-time div p span').html() )
}
applyNewNamaplateConfirm(params)
}
})
});