265 lines
8.7 KiB
JavaScript
265 lines
8.7 KiB
JavaScript
|
/*
|
|||
|
|
* @Descripttion : 通用js
|
|||
|
|
* @Author : liuzhifang
|
|||
|
|
* @Date : 2022-06-02 13:42:45
|
|||
|
|
* @LastEditors : Please set LastEditors
|
|||
|
|
* @LastEditTime : 2022-12-24 00:18:35
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 导航服务和消息
|
|||
|
|
foxui.tooltip({
|
|||
|
|
el: '#barService',
|
|||
|
|
content: barServiceHtml(),
|
|||
|
|
className: 'bar-service-container',
|
|||
|
|
width: '324px',
|
|||
|
|
});
|
|||
|
|
foxui.tooltip({
|
|||
|
|
el: '#barBell',
|
|||
|
|
content: barBellHtml(),
|
|||
|
|
className: 'bar-bell-container',
|
|||
|
|
effect: 'light',
|
|||
|
|
width: '330px',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 导航折叠功能
|
|||
|
|
$('.foxcms-menu-nav-fold').on('click', function () {
|
|||
|
|
let $this = $(this),
|
|||
|
|
$icon = $this.find('i'),
|
|||
|
|
$inner = $('.foxcms-menu-nav-inner'),
|
|||
|
|
isRotate = $icon.is('.rotate');
|
|||
|
|
|
|||
|
|
if (isRotate) {
|
|||
|
|
$icon.removeClass('rotate');
|
|||
|
|
$inner.animate({ width: '148px' });
|
|||
|
|
} else {
|
|||
|
|
$icon.addClass('rotate');
|
|||
|
|
$inner.animate({ width: 0 });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 根据窗口宽度判断是否折叠
|
|||
|
|
let foldTimer = null;
|
|||
|
|
$(window).on('resize', function () {
|
|||
|
|
if (foldTimer) {
|
|||
|
|
clearTimeout(foldTimer);
|
|||
|
|
foldTimer = null;
|
|||
|
|
}
|
|||
|
|
foldTimer = setTimeout(function () {
|
|||
|
|
let width = $(window).width(),
|
|||
|
|
$fold = $('.foxcms-menu-nav-fold'),
|
|||
|
|
$icon = $fold.find('i'),
|
|||
|
|
$inner = $('.foxcms-menu-nav-inner'),
|
|||
|
|
isRotate = $icon.is('.rotate');
|
|||
|
|
|
|||
|
|
if (width < 1440) {
|
|||
|
|
if (!isRotate) {
|
|||
|
|
$icon.addClass('rotate');
|
|||
|
|
$inner.animate({ width: 0 });
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (isRotate) {
|
|||
|
|
$icon.removeClass('rotate');
|
|||
|
|
$inner.animate({ width: '148px' });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
clearTimeout(foldTimer);
|
|||
|
|
foldTimer = null;
|
|||
|
|
}, 300);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 收起/展开所有导航
|
|||
|
|
$('.foxcms-menu-expand-all i').on('click', function () {
|
|||
|
|
let $container = $('.foxui-menu.foxui-type-vertical'),
|
|||
|
|
$this = $(this),
|
|||
|
|
isActive = $this.is('.is-active');
|
|||
|
|
|
|||
|
|
if (isActive) {
|
|||
|
|
let $openHandle = $container.find('.foxui-menu-handle.is-active');
|
|||
|
|
$openHandle.click();
|
|||
|
|
$this.removeClass('is-active');
|
|||
|
|
} else {
|
|||
|
|
let $foldHandle = $container.find('.foxui-menu-handle:not(.is-active)');
|
|||
|
|
$foldHandle.click();
|
|||
|
|
$this.addClass('is-active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 根据折叠转换全部折叠按钮状态
|
|||
|
|
$(document).on('click', '.foxui-menu.foxui-type-vertical .foxui-menu-handle', function () {
|
|||
|
|
let count = $('.foxui-menu.foxui-type-vertical .foxui-menu-handle').length,
|
|||
|
|
openLen = $('.foxui-menu.foxui-type-vertical .foxui-menu-handle.is-active').length;
|
|||
|
|
if (count === openLen) {
|
|||
|
|
$('.foxcms-menu-expand-all i').addClass('is-active');
|
|||
|
|
} else {
|
|||
|
|
$('.foxcms-menu-expand-all i').removeClass('is-active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单字段调用
|
|||
|
|
$(document).on('click', '.call-field .foxui-tag', function () {
|
|||
|
|
const text = $(this).text(),
|
|||
|
|
el = document.createElement('input');
|
|||
|
|
|
|||
|
|
el.value = text;
|
|||
|
|
el.setAttribute('readonly', '');
|
|||
|
|
el.style.position = 'absolute';
|
|||
|
|
el.style.opacity = 0;
|
|||
|
|
document.body.appendChild(el);
|
|||
|
|
el.select();
|
|||
|
|
document.execCommand('copy');
|
|||
|
|
document.body.removeChild(el);
|
|||
|
|
|
|||
|
|
foxui.message({ text: '已复制到剪贴板' });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 右侧浮动预览模板
|
|||
|
|
$('.web-image-view .content-box .main-part').on('mouseover', function () {
|
|||
|
|
const viewHeight = $(this).height();
|
|||
|
|
const imgHeight = $(this).find('img').height();
|
|||
|
|
const mValue = viewHeight - imgHeight;
|
|||
|
|
$(this)
|
|||
|
|
.find('img')
|
|||
|
|
.css('marginTop', mValue + 'px');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.web-image-view .content-box .main-part').on('mouseout', function () {
|
|||
|
|
$(this).find('img').css('marginTop', 0);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/* bar -> html
|
|||
|
|
*****************************************************************************************************/
|
|||
|
|
function barServiceHtml() {
|
|||
|
|
return [
|
|||
|
|
'<div class="bar-service-content">',
|
|||
|
|
'<div class="top">',
|
|||
|
|
'<div class="foxui-row foxui-gutter-0">',
|
|||
|
|
'<div class="foxui-col-xs-8 foxui-col-sm-8">',
|
|||
|
|
'<a class="col-inter" href="#">',
|
|||
|
|
'<i class="foxui-icon-weixiao-f"></i>',
|
|||
|
|
'<span>建议留言</span>',
|
|||
|
|
'</a>',
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="foxui-col-xs-8 foxui-col-sm-8">',
|
|||
|
|
'<a class="col-inter" href="#">',
|
|||
|
|
'<i class="foxui-icon-QQ-f"></i>',
|
|||
|
|
'<span>QQ客服</span>',
|
|||
|
|
'</a>',
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="foxui-col-xs-8 foxui-col-sm-8">',
|
|||
|
|
'<a class="col-inter" href="#">',
|
|||
|
|
'<i class="foxui-icon-hezuo-f"></i>',
|
|||
|
|
'<span>代理加盟</span>',
|
|||
|
|
'</a>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="bottom">',
|
|||
|
|
'<div class="foxui-row foxui-gutter-6 foxui-align-items-center">',
|
|||
|
|
'<div class="foxui-col-xs-10 foxui-col-sm-10">',
|
|||
|
|
'<div class="col-inter img-box">',
|
|||
|
|
'<img src="'+STATIC_PATH+'images/service_qr_code.jpg"/>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="foxui-col-xs-14 foxui-col-sm-14">',
|
|||
|
|
'<div class="col-inter">',
|
|||
|
|
'<p>扫码联系官方客服</p>',
|
|||
|
|
'<p>提供线上咨询</p>',
|
|||
|
|
'<h3><i class="foxui-icon-dianhua-o"></i><span>400-888-3116</span></h3>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
].join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function barBellHtml() {
|
|||
|
|
return [
|
|||
|
|
'<div class="bar-bell-content">',
|
|||
|
|
'<div class="head">',
|
|||
|
|
'<h2>系统消息</h2>',
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="content">',
|
|||
|
|
'<a class="img-box" href="#">',
|
|||
|
|
'<img src="'+STATIC_PATH+'images/join.png"/>',
|
|||
|
|
'</a>',
|
|||
|
|
'<ul class="message-list">',
|
|||
|
|
'<li class="message-item">',
|
|||
|
|
'<a class="foxui-link" href="#">',
|
|||
|
|
'<span>功能更新 (2022年8月第2期)</span>',
|
|||
|
|
'<i class="foxui-icon-arrow-right"></i>',
|
|||
|
|
'</a>',
|
|||
|
|
'</li>',
|
|||
|
|
'<li class="message-item">',
|
|||
|
|
'<a class="foxui-link" href="#">',
|
|||
|
|
'<span>功能更新 (2022年8月第2期)</span>',
|
|||
|
|
'<i class="foxui-icon-arrow-right"></i>',
|
|||
|
|
'</a>',
|
|||
|
|
'</li>',
|
|||
|
|
'<li class="message-item">',
|
|||
|
|
'<a class="foxui-link" href="#">',
|
|||
|
|
'<span>功能更新 (2022年8月第2期)</span>',
|
|||
|
|
'<i class="foxui-icon-arrow-right"></i>',
|
|||
|
|
'</a>',
|
|||
|
|
'</li>',
|
|||
|
|
'</ul>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
].join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标签调用 html
|
|||
|
|
function _callHtml(dataObj) {
|
|||
|
|
return [
|
|||
|
|
'<div class="edit-model-call-dialog">',
|
|||
|
|
'<div class="foxui-input-group foxui-vertical">',
|
|||
|
|
'<label>首页调用：</label>',
|
|||
|
|
`<input class="foxui-size-small" readOnly placeholder="" value="${dataObj.index}" />`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="foxui-input-group foxui-vertical margin-top-32">',
|
|||
|
|
'<label>列表页调用：</label>',
|
|||
|
|
`<input class="foxui-size-small" readOnly placeholder="" value="${dataObj.list}" />`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="foxui-input-group foxui-vertical margin-top-32">',
|
|||
|
|
'<label>列表页调用：</label>',
|
|||
|
|
`<input class="foxui-size-small" readOnly placeholder="" value="${dataObj.article}" />`,
|
|||
|
|
'</div>',
|
|||
|
|
'<div class="section-top-info margin-top-32">',
|
|||
|
|
'<p>请将相应标签复制并粘贴到对应模板文件中！</p>',
|
|||
|
|
'</div>',
|
|||
|
|
'</div>',
|
|||
|
|
].join('');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 校验颜色值是否合法
|
|||
|
|
function _CheckIsColor(bgVal) {
|
|||
|
|
let type = '';
|
|||
|
|
if (/^rgb\(/.test(bgVal)) {
|
|||
|
|
//如果是rgb开头，200-249，250-255，0-199
|
|||
|
|
type = '^[rR][gG][Bb][(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[)]{1}$';
|
|||
|
|
} else if (/^rgba\(/.test(bgVal)) {
|
|||
|
|
//如果是rgba开头，判断0-255:200-249，250-255，0-199 判断0-1：0 1 1.0 0.0-0.9
|
|||
|
|
type = '^[rR][gG][Bb][Aa][(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){3}[\\s]*(1|1.0|0|0.[0-9])[\\s]*[)]{1}$';
|
|||
|
|
} else if (/^#/.test(bgVal)) {
|
|||
|
|
//六位或者三位
|
|||
|
|
type = '^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$';
|
|||
|
|
} else if (/^hsl\(/.test(bgVal)) {
|
|||
|
|
//判断0-360 判断0-100%(0可以没有百分号)
|
|||
|
|
type = '^[hH][Ss][Ll][(]([\\s]*(2[0-9][0-9]|360|3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*)[)]$';
|
|||
|
|
} else if (/^hsla\(/.test(bgVal)) {
|
|||
|
|
type = '^[hH][Ss][Ll][Aa][(]([\\s]*(2[0-9][0-9]|360|3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,){2}([\\s]*(1|1.0|0|0.[0-9])[\\s]*)[)]$';
|
|||
|
|
}
|
|||
|
|
if (!type || bgVal.match(new RegExp(type)) == null) {
|
|||
|
|
return false;
|
|||
|
|
} else {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 按钮形状单选
|
|||
|
|
$(document).on('click', '.button-radio .button-radio-item', function () {
|
|||
|
|
$(this).closest('.button-radio').find('.button-radio-item.is-active').removeClass('is-active');
|
|||
|
|
$(this).addClass('is-active');
|
|||
|
|
});
|