416 lines
11 KiB
JavaScript
416 lines
11 KiB
JavaScript
|
||
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)
|
||
}
|
||
})
|
||
|
||
});
|
||
|