158 行
6.1 KiB
JavaScript
可执行文件
158 行
6.1 KiB
JavaScript
可执行文件
// 头部
|
|
Vue.component('template-header', {
|
|
template: `<header class="header">
|
|
<div class="header-wrap clear-float">
|
|
<div class="header-logo">
|
|
<img :src="headerObj.logo" alt="logo">
|
|
</div>
|
|
<ul class="header-nav">
|
|
<li class="header-li" v-for="(nav,index) in headerObj.navs">
|
|
<a :href="nav.href" :class="{'activeLi':nav.id==item}">{{nav.headerText}}</a>
|
|
</li>
|
|
</ul>
|
|
<div class="header-btn">
|
|
<button v-if="headerObj.login" class="login-btn">登录</button>
|
|
</div>
|
|
</div>
|
|
</header>`,
|
|
props: {
|
|
'header': {
|
|
type: Object,
|
|
},
|
|
'page':{
|
|
type: Number,
|
|
}
|
|
},
|
|
data:function () {
|
|
return {
|
|
item:this.page,
|
|
headerObj:this.header
|
|
}
|
|
},
|
|
created:function () {
|
|
console.log(this.item)
|
|
console.log(this.headerObj)
|
|
},
|
|
})
|
|
// 底部
|
|
Vue.component('template-footer', {
|
|
template: `<footer class='footer'>
|
|
<p>
|
|
<span>{{footer.recordNumber}}</span>
|
|
<span>版权所有:{{footer.copyright}}</span>
|
|
</p>
|
|
</footer>`,
|
|
props: {
|
|
'footer': {
|
|
type: Object,
|
|
}
|
|
},
|
|
})
|
|
Vue.component('template-sidebar', {
|
|
template: `<div class="sidebar" :class="[appearSide?'sideAnim':'sideAnim2']">
|
|
<div v-if='appearSide' class='side-box'>
|
|
<div @mouseover='hover' class="box-hov">
|
|
<p class='sidebar-title' style="margin-top: 10px">在线客服</p>
|
|
<p class="sidebar-qq">
|
|
<img src="./images/qq2.png" alt="">
|
|
</p>
|
|
<p class="sidebar-wx">
|
|
<img src="./images/wx.png" alt="">
|
|
</p>
|
|
</div>
|
|
<div class='slide-top' @click="goTop">
|
|
<p class='sidebar-title'>返回顶部</p>
|
|
</div>
|
|
</div>
|
|
<div class="appearSide">
|
|
<ul>
|
|
<li>
|
|
<p class="sidebar-title">在线咨询</p>
|
|
<a :href="'tencent://message/?uin='+sidebar.qq+'&Site=&Menu=yes'" class="sidebar-com" >
|
|
<img class='qq' src="./images/qq.png" alt="">
|
|
<span class="sidebar-deputy">商户代表:{{sidebar.deputy}}</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<p class="sidebar-title">微信咨询</p>
|
|
<div class="sidebar-com">
|
|
<img class='wx' :src="sidebar.wx" alt="">
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<p class="sidebar-title">服务热线</p>
|
|
<div class="sidebar-com">
|
|
<span class="phone">{{sidebar.phone}}</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="sidebar-wrap">
|
|
<div class="sidebar-com">
|
|
<img class="com-img" src="./images/sidebar.png" alt="">
|
|
<p>官方商城</p>
|
|
</div>
|
|
<div class="sidebar-com" @click="goTop">
|
|
<img class="com-img" src="./images/sidebarTop.png" alt="">
|
|
<p>返回顶部</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<p class="sidebar-com">返回首页</p>
|
|
</li>
|
|
</ul>
|
|
<img @click="closeSidebar" class="close-sidebar" src="./images/close.png" alt="关闭">
|
|
</div>
|
|
|
|
</div>`,
|
|
data: function () {
|
|
return {
|
|
appearSide: false,
|
|
scrollTop: 0,
|
|
}
|
|
},
|
|
props: {
|
|
'sidebar': {
|
|
type: Object
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('scroll', this.scrollToTop)
|
|
},
|
|
methods: {
|
|
scrollToTop() {//检测滚动条
|
|
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
// console.log(this.scrollTop)
|
|
},
|
|
goTop: function () {
|
|
let timer = null, _that = this;
|
|
cancelAnimationFrame(timer)
|
|
timer = requestAnimationFrame(function fn() {
|
|
if (_that.scrollTop > 0) {
|
|
_that.scrollTop -= 50;
|
|
document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
|
|
timer = requestAnimationFrame(fn)
|
|
} else {
|
|
cancelAnimationFrame(timer);
|
|
_that.goTopShow = false;
|
|
}
|
|
})
|
|
},
|
|
closeSidebar: function () {
|
|
var _this = this
|
|
if (this.appearSide) {
|
|
_this.appearSide = !_this.appearSide
|
|
} else {
|
|
_this.appearSide = !_this.appearSide
|
|
}
|
|
},
|
|
hover: function () {
|
|
this.appearSide = !this.appearSide
|
|
}
|
|
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('scroll', this.scrollToTop);
|
|
}
|
|
})
|