zq
2 days ago
6 changed files with 228 additions and 2 deletions
|
Before Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<div class="header-wrap "> |
|||
<div class="header-logo" @click="toHome"> |
|||
<!-- 管理员端logo --> |
|||
<img v-if="headerShow" src="../assets/clientSet/clientSet_h_logo_admin.png" alt=""> |
|||
<!-- 创建模板logo --> |
|||
<img v-else src="../assets/clientSet/clientSet_h_logo_tpl.png" alt=""> |
|||
</div> |
|||
<div class="header-right flex" v-if="headerShow"> |
|||
<div |
|||
:class="['right-item','flex', currentPath == item.path ? 'right-item-active' :'']" |
|||
v-for="(item,index) in routerNavList" |
|||
:key="index" |
|||
@click="goToPage(item.path)" |
|||
> |
|||
{{ item.name }} |
|||
<span class="header_total" v-if="total > 0 && item.name == '收录申请'">{{ total }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
user: '', |
|||
headerShow:true, |
|||
doctor_id:'', |
|||
authtoken:false, |
|||
currentPath:'', |
|||
total:30, |
|||
routerNavList:[ |
|||
{ |
|||
name:'模板管理', |
|||
path:'/super/paiban/tpl' |
|||
}, |
|||
{ |
|||
name:'收录申请', |
|||
path:'/super/paiban/college' |
|||
}, |
|||
{ |
|||
name:'订单管理', |
|||
path:'/super/paiban/orderlist' |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
mounted(){ |
|||
// 如登陆用户信息获取到，则显示管理员端头部 具体流程待定 |
|||
// this.user = localStorage.getItem('user_name') |
|||
// var user_type = localStorage.getItem('user_type') |
|||
// if(!user_type || user_type == 'undefined') { |
|||
// this.user = '超级管理员' |
|||
// }else{ |
|||
// if(user_type && user_type != 'undefined') this.user = (user_type == 1?'医生':'助手') + this.user |
|||
// } |
|||
// this.doctor_id = localStorage.getItem('doctor_id') |
|||
// this.authtoken = localStorage.getItem('authtoken') |
|||
|
|||
// if(this.authtoken){ |
|||
// this.headerShow = true |
|||
// // 初始化时设置当前路由高亮 |
|||
// this.updateCurrentPath() |
|||
// // 监听路由变化 |
|||
// this.watchRouteChange() |
|||
// }else{ |
|||
// this.headerShow = false |
|||
// } |
|||
}, |
|||
methods: { |
|||
// 获取收录列表数据 |
|||
getList() { |
|||
try { |
|||
this.$http('POST', '/supernew/ajax_get_paiban_review_list', { |
|||
school: this.school, |
|||
degree: this.degree, |
|||
review_status: this.review_status, |
|||
page: this.currentPage, |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.total = response.data.count |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} catch (error) { |
|||
console.error('数据加载失败:', error) |
|||
} |
|||
}, |
|||
toHome() { |
|||
this.$router.push({ |
|||
path: '/' |
|||
}) |
|||
}, |
|||
goToPage(path) { |
|||
if(this.currentPath == path) return; |
|||
this.currentPath = path; |
|||
this.$router.push({ |
|||
path: path |
|||
}) |
|||
}, |
|||
loginOut(){ |
|||
localStorage.removeItem('token'); |
|||
localStorage.removeItem('user_name'); |
|||
localStorage.removeItem('authtoken'); |
|||
localStorage.removeItem('user_type'); |
|||
localStorage.removeItem('doctor_id'); |
|||
this.$router.push('/login'); |
|||
}, |
|||
// 更新当前路径高亮状态 |
|||
updateCurrentPath() { |
|||
const currentRoute = this.$route.path; |
|||
const matchedItem = this.routerNavList.find(item => |
|||
currentRoute.startsWith(item.path) |
|||
); |
|||
if (matchedItem) { |
|||
this.currentPath = matchedItem.path; |
|||
} else { |
|||
this.currentPath = ''; |
|||
} |
|||
}, |
|||
// 监听路由变化 |
|||
watchRouteChange() { |
|||
this.$watch('$route', (to, from) => { |
|||
console.log(to,from,'===='); |
|||
this.updateCurrentPath(); |
|||
}); |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.flex { |
|||
display: flex; |
|||
} |
|||
|
|||
.header-wrap { |
|||
color: #1E2226; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 100%; |
|||
width: 100%; |
|||
padding: 0 26px; |
|||
box-sizing: border-box; |
|||
align-items: center; |
|||
position: absolute; |
|||
z-index: 9; |
|||
left: 0; |
|||
background: #fff; |
|||
.header-logo { |
|||
cursor: pointer; |
|||
img { |
|||
height: 33px; |
|||
} |
|||
} |
|||
.header_total{ |
|||
box-sizing: border-box; |
|||
min-width: 28px; |
|||
height: 18px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 10px; |
|||
border-radius: 100px; |
|||
background: #FFF1F0; |
|||
box-sizing: border-box; |
|||
border: 1px solid #FFA39E; |
|||
color: #FF4D4F; |
|||
} |
|||
|
|||
.header-right { |
|||
justify-content: flex-end; |
|||
gap:24px; |
|||
.el-dropdown-link { |
|||
cursor: pointer; |
|||
} |
|||
.right-item{ |
|||
gap: 8px; |
|||
padding: 8px 12px; |
|||
transition: all .3s; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
&:hover{ |
|||
border-radius: 6px; |
|||
color: #006AFF; |
|||
transition: all .3s; |
|||
background: #F4F5FA; |
|||
} |
|||
} |
|||
.right-item-active{ |
|||
border-radius: 4px; |
|||
background: #F4F5FA; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: normal; |
|||
color: #3F62F6; |
|||
transition: all .3s; |
|||
} |
|||
.el-dropdown .right-item{ |
|||
padding: 0 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.right-item-icon { |
|||
width: 36px; |
|||
height: 36px; |
|||
} |
|||
|
|||
.right-item-icon+span { |
|||
display: inline-block; |
|||
margin: 0 6px 0 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue