| | |
| | | () => { |
| | | $router.push({ |
| | | path: '/home', |
| | | }) |
| | | }); |
| | | } |
| | | " |
| | | src="@/assets/images/xiehe/home/Group_303.png" |
| | |
| | | </div> |
| | | <div class="searchBox" v-show="!hideSerch"> |
| | | <el-input |
| | | style="width: 500px" |
| | | style="width: 500px; height: 50px" |
| | | placeholder="请输入内容" |
| | | @change="gotoSearch" |
| | | v-model="searchKey" |
| | |
| | | <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, |
| | |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }) |
| | | }); |
| | | |
| | | let searchKey = ref('') |
| | | let userInfo = ref('') |
| | | let searchKey = ref(""); |
| | | let userInfo = ref(""); |
| | | const navData = ref([ |
| | | { |
| | | name: "首页", |
| | | path: "/home", |
| | | }, |
| | | { |
| | | name: "教育出版", |
| | | path: "/bookStore", |
| | | }, |
| | | { |
| | | name: "读者服务", |
| | | path: "/teachingServices", |
| | | }, |
| | | { |
| | | name: "关于我们", |
| | | path: "/aboutUs", |
| | | }, |
| | | ]); |
| | | |
| | | const gotoSearch = () => {} |
| | | const handleCommand = () => {} |
| | | onMounted(() => { |
| | | userInfo.value = userStore.userInfo; |
| | | console.log(userInfo.value, "userInfo"); |
| | | }); |
| | | |
| | | const gotoSearch = () => {}; |
| | | 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; |