Project_yhfu/src/components/v-fastmenu.vue

<template>
	<div class="fast-menu">
		<div class="menu-list">
			<!-- 	<a  @click="backToMainPage" class="header-right">
				<span><i class="el-icon-s-home"></i>返回首页</span>
			</a>
			<a  @click="backToMainPage" class="header-right">
				<span><i class="el-icon-monitor"></i>管理端</span>
			</a> -->
			<el-popover placement="top-start" trigger="hover" width="300px">
				<div class="user-tip">
					<div class="u-tip-1">
						<img src="@/assets/images/user-photo.png" />
						<div class="user-info">
							<div class="user-name">
								<h2>{{ nickName }}</h2><span>{{ deptNames }}</span>
							</div>
							<div class="phone-number">{{ phonenumber }}</div>
						</div>
					</div>
					<div style="margin-bottom: 1rem;">
						<el-button type="primary" size="small" @click="resetPwd">修改密码</el-button>
						<el-button type="warning" size="small" @click="logout">退出登录</el-button>
					</div>
          <el-link type="primary" @click="backToMainPage" style="border-top: 1px solid #334780;" icon="el-icon-s-home">返回首页</el-link>
<!--					<a href="#"><i class="el-icon-monitor"></i>管理系统</a>-->
				</div>
				<div slot="reference" style="text-align: center; width:4rem;height:3rem;">
					<img src="@/assets/images/mascot-small.png" />
				</div>
			</el-popover>
		</div>
    <el-dialog title="修改密码" :visible.sync="isResetPwd" v-if="isResetPwd" width="30%" append-to-body>
      <resetPwd :user="user" />
    </el-dialog>
	</div>
</template>

<script>
import resetPwd from "../views/system/user/profile/resetPwd";
import { getUserProfile } from "@/api/system/user";
import { selectConfigKey } from "@/api/system/config";
import Cookies from 'js-cookie';
	export default {
    components: {resetPwd },
		data() {
			return {
        user: {},
				visible: false,
        isResetPwd: false,
        nickName:null,
        deptNames:null,
        phonenumber:null,
				// fastMenu: [{
				// 		name: '返回首页',
				// 		path: '/',
				// 		icon: 'el-icon-s-home',
				// 		// msValue: 1
				// 	},
				// 	{
				// 		name: '管理端',
				// 		path: '/',
				// 		icon: 'sj-icon-rwzx',
				// 		// msValue: 2
				// 	},
				// ],

			}
		},
    created() {
      this.getUser()
    },
		methods: {
      backToMainPage(){
        selectConfigKey('backToMainPage').then(res => {
          window.location.href = res.data;
        })
      },
      getUser(){
        getUserProfile().then(response => {
          this.nickName=response.data.nickName
          this.deptNames=response.data.deptNames
          this.phonenumber=response.data.phonenumber
          this.userId=response.data.userId
          Cookies.set('userId',response.data.userId);
          Cookies.set('nickName',response.data.nickName);
        });
      },
      resetPwd(){
        getUserProfile().then(response => {
          this.user = response.data;
          this.roleGroup = response.roleGroup;
          this.postGroup = response.postGroup;
          this.isResetPwd=true
        });
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        }).catch(() => {});
      }
		},
		computed: {},


	}
</script>

<style rel="stylesheet/scss" lang="scss">
	@import '@/assets/styles/base.scss';

	.user-tip {
		width: 100%;
		display: flex;
		font-size: .8rem;
		flex-direction: column;

		.u-tip-1 {
			display: flex;
			margin-bottom: 1rem;

			img {
				margin-right: 1rem;
				border-radius: .3rem;
			}

			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.user-name {
					display: flex;
					align-items: flex-end;

					h2 {
						color: $inBlue;
						margin-right: .5rem;
						font-weight: bolder;
					}

					span {
						color: $grayBlue;
					}
				}

				.phone-number {
					color: $inBlue;
				}
			}
		}

		a {
			color: $inBlue;
			display: flex;
			border-bottom: 1px solid #334780;
			justify-content: center;
			align-items: center;
			height: 2rem;
			i{
				margin-right:.3rem ;
			}
		}
		a:hover{
			color: $inBlueHover;
			box-shadow:$shadowTip
		}
	}


	.fast-menu {
		right: 0.5rem;
		position: absolute;
		display: flex;

		.menu-list {
			margin-left: 20px;
			display: flex;
			align-items: center;

		}

		.el-badge__content.is-fixed {
			right: 3px;
		}

		.el-badge__content {
			border: 0;
		}


	}
	.el-popover{
		background:#0c1327;
		border:1px solid #334780;
		box-shadow:$shadowListHover;
		border-radius: 1rem;
	}
</style>