You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
253 lines
7.4 KiB
253 lines
7.4 KiB
/**
|
|
* 常用组件库
|
|
*
|
|
**/
|
|
|
|
var linkCss_1 = document.createElement('link')
|
|
linkCss_1.setAttribute('rel', 'stylesheet')
|
|
linkCss_1.setAttribute('href', 'plugins/css/common.css')
|
|
document.head.appendChild(linkCss_1)
|
|
var linkCss_2 = document.createElement('link')
|
|
linkCss_2.setAttribute('rel', 'stylesheet')
|
|
linkCss_2.setAttribute('href', 'plugins/css/conponent.css')
|
|
document.head.appendChild(linkCss_2)
|
|
|
|
var linkJS_1 = document.createElement('script')
|
|
linkJS_1.setAttribute('src', 'plugins/js/jquery-1.11.3.js')
|
|
linkJS_1.setAttribute('type', 'text/javascript')
|
|
linkJS_1.setAttribute('charset', 'text/utf-8')
|
|
document.head.appendChild(linkJS_1)
|
|
var linkJS_2 = document.createElement('script')
|
|
linkJS_2.setAttribute('src', 'plugins/layer/layer.js')
|
|
linkJS_2.setAttribute('type', 'text/javascript')
|
|
linkJS_2.setAttribute('charset', 'text/utf-8')
|
|
document.head.appendChild(linkJS_2)
|
|
|
|
/* 对象继承 */
|
|
function extend(defaultVal, newVal) {
|
|
for (var e in newVal) {
|
|
defaultVal[e] = newVal[e]
|
|
}
|
|
}
|
|
|
|
/* 网站右下角悬浮常用组件 */
|
|
// 构造悬浮组件
|
|
function Fixed() {
|
|
this.fixed = null
|
|
this.setting = {
|
|
hover: 'text', // 悬浮显示文字或者高亮图标
|
|
themeColor: '#3454BE', // 主题色
|
|
fixedStyle: ['default'], // 样式，形状：'circle' ；风格： ''
|
|
dataValue: {
|
|
// 置顶默认显示，其他可选填，
|
|
feedback: '', // 反馈
|
|
phone: '0551-6668888', // 电话号码
|
|
vxQrcode: 'plugins/img/icon-qrcode_1.png', // 二维码
|
|
message: '' // 留言
|
|
},
|
|
submitFn: function() {}
|
|
}
|
|
}
|
|
// 初始化
|
|
Fixed.prototype.init = function(opt) {
|
|
extend(this.setting, opt)
|
|
this.create()
|
|
this.addEvent()
|
|
}
|
|
|
|
|
|
|
|
// 创建元素
|
|
Fixed.prototype.create = function() {
|
|
var FixedArray = {
|
|
// 反馈
|
|
feedback: {
|
|
hoverText: `
|
|
<div class="conponent_fixed_item feedback">
|
|
<div class="item">
|
|
<span class="icon"></span>
|
|
<span class="text">意见<br />反馈</span>
|
|
</div>
|
|
</div>
|
|
`,
|
|
hoverIcon: ``
|
|
},
|
|
// 二维码 // <span class="icon_hover"></span>
|
|
vxQrcode: {
|
|
hoverText: `
|
|
<div class="conponent_fixed_item qrcode">
|
|
<div class="item">
|
|
<span class="icon"></span>
|
|
<span class="text word_2">公众号</span>
|
|
</div>
|
|
<div class="pop">
|
|
<div class="img">
|
|
<p>微信公众号</p>
|
|
<img src="${this.setting.dataValue.vxQrcode}" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
hoverIcon: ``
|
|
},
|
|
// 电话
|
|
phone: {
|
|
hoverText: `
|
|
<div class="conponent_fixed_item phone">
|
|
<div class="item">
|
|
<span class="icon"></span>
|
|
<span class="text">客服<br />电话</span>
|
|
</div>
|
|
<div class="pop">
|
|
<div class="msg"><span>${this.setting.dataValue.phone}</span></div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
hoverIcon: ``
|
|
},
|
|
// 留言板
|
|
message: {
|
|
hoverText: `
|
|
<div class="conponent_fixed_item message">
|
|
<div class="item" id="showDialog">
|
|
<span class="icon"></span>
|
|
<span class="text word_2">留言</span>
|
|
</div>
|
|
<div id="conponentDialog" class="conponent_dialog" style="display:none;">
|
|
<div class="conponent_dialog_box">
|
|
<span id="dialogClose" class="close"></span>
|
|
<div class="title">留言板</div>
|
|
<div class="context">
|
|
<input class="input" id="msgName" placeholder="请输入姓名" />
|
|
<input class="input" id="msgTel" placeholder="请输入手机号码" />
|
|
<textarea class="textarea" id="msgText" row="4" placeholder="请输入留言内容"></textarea>
|
|
<button class="btn" id="ahbmzSubmit" style="background-color: ${this.setting.themeColor}">提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
hoverIcon: ``
|
|
},
|
|
// 置顶
|
|
totop: {
|
|
hoverText: `
|
|
<div class="conponent_fixed_item totop">
|
|
<div class="item">
|
|
<span class="icon"></span>
|
|
<span class="text word_2">置顶</span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.conponent_fixed_item:hover {
|
|
color: #FFF;
|
|
background-color: ${this.setting.themeColor};
|
|
}
|
|
</style>
|
|
`,
|
|
hoverIcon: ``
|
|
}
|
|
}
|
|
var that = this
|
|
this.fixed = document.createElement('div')
|
|
this.fixed.className = 'conponent_fixed'
|
|
var htmlText = ''
|
|
for (let item in this.setting.dataValue) {
|
|
if (this.setting.hover === 'text') {
|
|
htmlText += FixedArray[item].hoverText
|
|
} else {
|
|
htmlText += FixedArray[item].hoverIcon
|
|
}
|
|
}
|
|
htmlText += this.setting.hover === 'text' ? FixedArray['totop'].hoverText : FixedArray['totop'].hoverIcon
|
|
this.fixed.innerHTML = htmlText
|
|
var styleArr = this.setting.fixedStyle
|
|
if (styleArr.length >= 1 || styleArr[0] !== 'default') {
|
|
styleArr.forEach(function(item) {
|
|
that.fixed.classList.add(item)
|
|
})
|
|
}
|
|
document.body.appendChild(this.fixed)
|
|
}
|
|
// 事件绑定
|
|
Fixed.prototype.addEvent = function() {
|
|
var that = this
|
|
var totop = document.getElementsByClassName('totop')[0];
|
|
var scrollTop = document.documentElement.scrollTop
|
|
setToTop();
|
|
totop.onclick = function() {
|
|
scrollTop = document.documentElement.scrollTop
|
|
var timer = setInterval(function() {
|
|
if (scrollTop > 0) {
|
|
scrollTop -= 20
|
|
scrollTo(0, scrollTop)
|
|
} else {
|
|
clearInterval(timer)
|
|
}
|
|
}, 8)
|
|
}
|
|
|
|
window.onscroll = function() {
|
|
scrollTop = document.documentElement.scrollTop;
|
|
setToTop();
|
|
}
|
|
/* 置顶*/
|
|
function setToTop() {
|
|
if (scrollTop > 400) {
|
|
totop.classList.add('_show');
|
|
totop.classList.remove('_hide');
|
|
} else {
|
|
totop.classList.add('_hide');
|
|
totop.classList.remove('_show');
|
|
}
|
|
}
|
|
|
|
var conponentDialog = document.getElementById('conponentDialog');
|
|
/* 显示留言板 */
|
|
var showDialog = document.getElementById('showDialog');
|
|
showDialog.onclick = function() {
|
|
conponentDialog.style.display = 'block'
|
|
}
|
|
/* 关闭留言板 */
|
|
var dialogClose = document.getElementById('dialogClose');
|
|
dialogClose.onclick = function() {
|
|
conponentDialog.style.display = 'none'
|
|
}
|
|
/* 字符串为空*/
|
|
function isEmpty(str, msg) {
|
|
if (str === '' || str === undefined) {
|
|
layer.msg(msg);
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
// 手机号正则
|
|
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
|
|
/* 留言板提交 */
|
|
var ahbmzSubmit = document.getElementById('ahbmzSubmit');
|
|
ahbmzSubmit.onclick = function() {
|
|
var msgName = document.getElementById('msgName').value.trim();
|
|
if (!isEmpty(msgName, '请输入姓名')) {
|
|
return false
|
|
}
|
|
var msgTel = document.getElementById('msgTel').value.trim();
|
|
if (!isEmpty(msgTel, '请输入手机号码')) {
|
|
return false
|
|
}
|
|
if (!reg_tel.test(msgTel)) {
|
|
return layer.msg('请输入正确的手机格式');
|
|
}
|
|
var msgText = document.getElementById('msgText').value.trim();
|
|
if (!isEmpty(msgText, '请输入留言')) {
|
|
return false
|
|
}
|
|
var msgOpt = {
|
|
msgName: msgName,
|
|
msgTel: msgTel,
|
|
msgText: msgText
|
|
}
|
|
that.setting.submitFn(msgOpt)
|
|
conponentDialog.style.display = 'none'
|
|
}
|
|
}
|
|
|