| | |
| | | <a |
| | | @click=" |
| | | () => { |
| | | $router.push({ |
| | | path: '/register', |
| | | }) |
| | | console.log(loginRef.value) |
| | | loginRef.logIn() |
| | | } |
| | | " |
| | | >注册</a |
| | | > |
| | | | |
| | | <a |
| | | @click=" |
| | | () => { |
| | | $router.push({ |
| | | path: '/login', |
| | | query: { |
| | | redirectPath: $route.fullPath, |
| | | }, |
| | | }) |
| | | } |
| | | " |
| | | >登录</a |
| | | >注册/登录</a |
| | | > |
| | | </div> |
| | | <div v-else class="userInfoBox"> |
| | | <el-dropdown @command="handleCommand"> |
| | | <span style="cursor: pointer">欢迎您,{{ userInfo.name }}!</span> |
| | | <el-dropdown-menu slot="dropdown"> |
| | | <el-dropdown-item icon="el-icon-user" command="gotoPersonalCenter" |
| | | >个人中心</el-dropdown-item |
| | | > |
| | | <el-dropdown-item icon="el-icon-switch-button" command="logout" |
| | | >退出登录</el-dropdown-item |
| | | > |
| | | </el-dropdown-menu> |
| | | <span class="el-dropdown-link"> |
| | | 欢迎您,{{ userStore?.userInfo.name }}! |
| | | <el-icon class="el-icon--right"> |
| | | <arrow-down /> |
| | | </el-icon> |
| | | </span> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item icon="el-icon-user" command="gotoPersonalCenter" |
| | | >个人中心</el-dropdown-item |
| | | > |
| | | <el-dropdown-item icon="el-icon-switch-button" command="logout" |
| | | >退出登录</el-dropdown-item |
| | | > |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <login ref="loginRef"></login> |
| | | <div class="contentBox navBox" v-show="!hideNav"> |
| | | <div |
| | | :class="{ |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { ref } from 'vue' |
| | | import login from './login.vue' |
| | | import { onMounted, ref } from 'vue' |
| | | import { Search } from '@element-plus/icons-vue' |
| | | import { useUserStore } from '@/store' |
| | | import { useRouter } from 'vue-router' |
| | | const userStore = useUserStore() |
| | | const router = useRouter() |
| | | |
| | | const loginRef = ref() |
| | | const props = defineProps({ |
| | | hideSerch: { |
| | | type: Boolean, |
| | |
| | | }, |
| | | ]) |
| | | |
| | | onMounted(() => { |
| | | userInfo.value = userStore.userInfo |
| | | console.log(userInfo.value, 'userInfo') |
| | | }) |
| | | |
| | | const gotoSearch = () => {} |
| | | const handleCommand = () => {} |
| | | const gotoPage = () => {} |
| | | const handleCommand = (item) => { |
| | | if (item === 'gotoPersonalCenter') { |
| | | router.push({ |
| | | path: '/personalCenter', |
| | | }) |
| | | } |
| | | if (item === 'logout') { |
| | | localStorage.clear() |
| | | router.push({ |
| | | path: '/home', |
| | | }) |
| | | } |
| | | } |
| | | const gotoPage = (item) => { |
| | | router.push(item.path) |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | |
| | | p { |
| | | float: left; |
| | | } |
| | | .loginInfoBox { |
| | | float: right; |
| | | .loginBtnBox { |
| | | a { |
| | | cursor: pointer; |
| | | text-decoration: none; |
| | | color: inherit; |
| | | margin: 0 4px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .loginInfoBox { |
| | | width: 200px; |
| | | margin-left: 20px; |
| | | } |
| | | .logoBox { |
| | | padding: 25px 0; |
| | |
| | | width: 670px; |
| | | float: right; |
| | | padding-right: 10px; |
| | | line-height: 66px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .searchItem { |
| | | width: 120px; |
| | | vertical-align: initial; |