256 lines
7.3 KiB
Vue
256 lines
7.3 KiB
Vue
<template>
|
||
<div>
|
||
<div class="top-line">
|
||
<div class="top-line-content">
|
||
<span>您好，欢迎访问日喀则市公共文化云！</span>
|
||
<div class="login-register-btn" v-if="isLogin">
|
||
<router-link to="/personCenter">
|
||
<img :src="'https://www.wgink.ink/usercenter/route/file/downloadfile/false/' + userInfo.avatar" alt="" v-if="hasAvatar" class="user-avatar">
|
||
<img src="@/assets/images/avatar.png" alt="" class="user-avatar" v-else>
|
||
{{userInfo.name}}
|
||
</router-link>
|
||
<button @click="doLogout">退出登录</button>
|
||
</div>
|
||
<div class="login-register-btn" v-else>
|
||
<router-link to="/login" class="login" >登录</router-link>
|
||
<router-link to="/register" >注册</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header">
|
||
<div class="logo-search">
|
||
<router-link to="/" class="logo">
|
||
<img src="@/assets/images/logo.png" alt="" class="logo-img">
|
||
</router-link>
|
||
<div class="search">
|
||
<input type="text" class="search-input" placeholder="查找你感兴趣的内容" @keyup.enter="doSearch" v-model="keywords">
|
||
<button class="search-btn" @click="doSearch">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="nav">
|
||
<ul class="nav-container">
|
||
<li :class="{active: this.$route.path == '/'}">
|
||
<router-link to="/" >
|
||
首页
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/dynamics' || this.$route.path == '/dynamicsDetail/' + this.$route.params.id}">
|
||
<router-link to="/dynamics" >
|
||
文化动态
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/cultureActivity' || this.$route.path == '/cultureActivityDetail/' + this.$route.params.id}">
|
||
<router-link to="/cultureActivity" >
|
||
文化活动
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/cultureVenue' || this.$route.path == '/cultureVenueDetail/' + this.$route.params.id}">
|
||
<router-link to="/cultureVenue" >
|
||
文化场馆
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/artTrain' || this.$route.path == '/artTrainDetail/' + this.$route.params.id}">
|
||
<router-link to="/artTrain" >
|
||
艺术培训
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/broadcast' || this.$route.path == '/broadcastDetail/' + this.$route.params.id}">
|
||
<router-link to="/broadcast" >
|
||
共享直播
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/resource' || this.$route.path == '/resourceDetail/' + this.$route.params.id}">
|
||
<router-link to="/resource" >
|
||
民间文学
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/volunteer' || this.$route.path == '/volunteerDetail/' + this.$route.params.id}">
|
||
<router-link to="/volunteer" >
|
||
志愿服务
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/exhibition' || this.$route.path == '/exhibitionDetail/' + this.$route.params.id}">
|
||
<router-link to="/exhibition" >
|
||
展览展示
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/travel' || this.$route.path == '/travelDetail/' + this.$route.params.id}">
|
||
<router-link to="/travel" >
|
||
文化旅游
|
||
</router-link>
|
||
</li>
|
||
<li :class="{active: this.$route.path == '/intangibleHeritage' || this.$route.path == '/intangibleHeritageDetail/' + this.$route.params.id}">
|
||
<router-link to="/intangibleHeritage" >
|
||
非遗清单
|
||
</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from 'axios'
|
||
export default {
|
||
name: 'Header',
|
||
data () {
|
||
return {
|
||
keywords: '',
|
||
isLogin: false,
|
||
userInfo: {}
|
||
}
|
||
},
|
||
computed: {
|
||
hasAvatar: function () {
|
||
return this.userInfo.avatar !== ''
|
||
}
|
||
},
|
||
methods: {
|
||
doSearch: function () {
|
||
const { href } = this.$router.resolve({
|
||
path: '/searchResult',
|
||
query: {
|
||
keywords: this.keywords
|
||
}
|
||
})
|
||
// console.log(href)
|
||
window.open(href)
|
||
},
|
||
checkLogin: function () {
|
||
var self = this
|
||
var token = window.sessionStorage.getItem('token')
|
||
if (token) {
|
||
axios.get('https://www.wgink.ink/usercenter/app/user/getappuser', {
|
||
headers: {
|
||
token: token
|
||
}
|
||
}).then(function (res) {
|
||
if (res.status === 200) {
|
||
self.userInfo = res.data
|
||
self.isLogin = true
|
||
} else {
|
||
self.$router.push({
|
||
path: 'login'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
self.isLogin = false
|
||
}
|
||
},
|
||
doLogout: function () {
|
||
var self = this
|
||
this.$layer.open({
|
||
content: '确认退出登录吗？',
|
||
yes: function () {
|
||
sessionStorage.clear()
|
||
self.checkLogin()
|
||
self.$layer.closeAll()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.checkLogin()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" rel="stylesheet/stylus" scoped>
|
||
@import "~styles/public.styl"
|
||
.top-line
|
||
font-family 'zangwen'
|
||
background $main-color
|
||
height 40px
|
||
line-height 40px
|
||
.top-line-content
|
||
width 1200px
|
||
margin 0 auto
|
||
span
|
||
font-size 14px
|
||
color #fff
|
||
.login-register-btn
|
||
float right
|
||
a
|
||
font-size 14px
|
||
color #fff
|
||
img
|
||
width 30px
|
||
height 30px
|
||
margin-top 5px
|
||
margin-right 5px
|
||
border-radius 50%
|
||
&.login
|
||
margin-right 20px
|
||
button
|
||
background none
|
||
border none
|
||
outline none
|
||
font-size 14px
|
||
color #fff
|
||
cursor pointer
|
||
.header
|
||
width 1200px
|
||
margin 0 auto
|
||
.logo-search
|
||
overflow hidden
|
||
padding 10px 0
|
||
width 100%
|
||
.logo
|
||
display block
|
||
float left
|
||
.logo-img
|
||
width 485px
|
||
height 77px
|
||
.search
|
||
float right
|
||
font-size 0
|
||
border-radius 5px
|
||
overflow hidden
|
||
margin-top 7px
|
||
.search-input
|
||
width 200px
|
||
height 30px
|
||
padding-left 30px
|
||
padding-right 5px
|
||
background #f7f7f7 url("~@/assets/images/search.png") no-repeat 7px center
|
||
background-size 16px 16px
|
||
box-sizing border-box
|
||
border none
|
||
outline none
|
||
font-size 14px
|
||
vertical-align top
|
||
font-family 'zangwen'
|
||
.search-btn
|
||
font-family 'zangwen'
|
||
border none
|
||
background $main-color
|
||
outline none
|
||
width 70px
|
||
height 30px
|
||
color #fff
|
||
cursor pointer
|
||
.nav
|
||
margin 10px 0 0
|
||
background #FAFAFA
|
||
.nav-container
|
||
width 1200px
|
||
margin 0 auto
|
||
overflow hidden
|
||
li
|
||
float left
|
||
width 100px
|
||
line-height 40px
|
||
cursor pointer
|
||
text-align center
|
||
font-family 'zangwen'
|
||
border-bottom 2px solid transparent
|
||
&:hover
|
||
border-bottom 2px solid $main-color
|
||
&.active
|
||
border-bottom 2px solid $main-color
|
||
a
|
||
display block
|
||
</style>
|