projectionscreenPc/src/components/header.vue

<template>
	<header class="navbar home-navbar">
		<div class="navbar-header header-logo">
			<router-link to="/">
				<img src="@/assets/images/logo2.png" />
			</router-link>
		</div>
		
		<nav class="header-nav">
			<ul class="navbar-nav" v-if="!isLogin || userIsActive">
				<li>
					<router-link to="/index">{{$t('首页')}}</router-link>
				</li>
				<li>
					<router-link to="/coincoin">{{$t('币币交易')}}</router-link>
				</li>
				<li>
					<router-link to="/release">{{$t('解封交易')}}</router-link>
				</li>
				<li>
					<router-link to="/currency">{{$t('法币交易')}}</router-link>
				</li>

				<li>
					<router-link to="/news">{{$t('公告')}}</router-link>
				</li>
			</ul>
			
			<ul class="navbar-nav" v-if="isLogin && !userIsActive">
				<li>
					<router-link to="/index">{{$t('首页')}}</router-link>
				</li>
				<li>
					<span @click="noActive">{{$t('币币交易')}}</span>
				</li>
				<li>
					<span @click="noActive">{{$t('解封交易')}}</span>
				</li>
				<li>
					<span @click="noActive">{{$t('法币交易')}}</span>
				</li>
			
				<li>
					<span @click="noActive">{{$t('公告')}}</span>
				</li>
			</ul>

			<ul class="navbar-nav navbar-right" v-if="isLogin && userIsActive">
				<li @mouseover="showAsssets = true" @mouseleave="showAsssets = false">
					<router-link to="/assets">{{$t('资产')}}</router-link>
					
					<ul class="header-menu-dropdowns" v-if="showAsssets">
						<li>
							<router-link to="/assets/coincoin">{{$t('币币账户（充币&提币）')}}</router-link>
						</li>
						<li>
							<router-link to="/assets/currency">{{$t('法币账户')}}</router-link>
						</li>
					</ul>
				</li>
				
				<li @mouseover="showOrder = true" @mouseleave="showOrder = false">
					<router-link to="/order">{{$t('订单')}}</router-link>
					
					<ul class="header-menu-dropdowns" v-if="showOrder">
						<li>
							<router-link to="/order/coincoin">{{$t('币币订单')}}</router-link>
						</li>
						<li>
							<router-link to="/order/release">{{$t('解封订单')}}</router-link>
						</li>
						<li>
							<router-link to="/currency/order">{{$t('法币订单')}}</router-link>
						</li>
					</ul>
				</li>
				
				<li @mouseover="showMy = true" @mouseleave="showMy = false">
					<router-link to="/user">{{$t('我的')}}</router-link>
					
					<ul class="header-menu-dropdowns header-menu-my" v-if="showMy">
						<li>
							<div class="user-desc-box" v-if="userInfoData">
								<h2>
									<em>Hi,</em>
									{{userInfoData.phone || userInfoData.email}}
								</h2>
								<p>UID:{{userInfoData.uid}}</p>
							</div>
							<div class="user-desc-box" v-else>
								<h2>{{$t('您还未登录')}}</h2>
							</div>
						</li>
						<li>
							<router-link to="/user/account">{{$t('账户中心')}}</router-link>
						</li>
						<li>
							<router-link to="/user/setting">{{$t('个人设置')}}</router-link>
						</li>
						<li>
							<router-link to="/user/invite">{{$t('邀请好友')}}</router-link>
						</li>
						<li v-if="merchantStatus == 'M_E_S_PASS'">
							<router-link to="/user/shop">{{$t('商户信息')}}</router-link>
						</li>
						<li>
							<span @click="logout">{{$t('退出')}}</span>
						</li>
					</ul>
				</li>
				
				<li @mouseover="showLan = true" @mouseleave="showLan = false">
					<span>{{currentLanText}}</span>
					
					<ul class="header-menu-language" v-if="showLan">
						<li :class="{'active': item.id == currentLan}" v-for="item of languageList" :key="item.id" @click="changeLan(item.id)">
							<span>{{item.name}}</span>
						</li>
					</ul>
				</li>
			</ul>
			
			<ul class="navbar-nav navbar-right" v-if="isLogin && !userIsActive">
				<li @mouseover="showAsssets = true" @mouseleave="showAsssets = false">
					<span>{{$t('资产')}}</span>
					
					<ul class="header-menu-dropdowns" v-if="showAsssets">
						<li>
							<span>{{$t('币币账户（充币&提币）')}}</span>
						</li>
						<li>
							<span>{{$t('法币账户')}}</span>
						</li>
					</ul>
				</li>
				
				<li @mouseover="showOrder = true" @mouseleave="showOrder = false">
					<span @click="noActive">{{$t('订单')}}</span>
					
					<ul class="header-menu-dropdowns" v-if="showOrder">
						<li>
							<span @click="noActive">{{$t('币币订单')}}</span>
						</li>
						<li>
							<span @click="noActive">{{$t('解封订单')}}</span>
						</li>
						<li>
							<span @click="noActive">{{$t('法币订单')}}</span>
						</li>
					</ul>
				</li>
				
				<li @mouseover="showMy = true" @mouseleave="showMy = false">
					<span @click="noActive">{{$t('我的')}}</span>
					
					<ul class="header-menu-dropdowns header-menu-my" v-if="showMy">
						<li>
							<div class="user-desc-box">
								<h2>
									<em>Hi,</em>
									{{userInfoData.phone || userInfoData.email}}
								</h2>
								<p>UID:{{userInfoData.uid}}</p>
							</div>
						</li>
						<li>
							<span @click="noActive">{{$t('账户中心')}}</span>
						</li>
						<li>
							<span @click="noActive">{{$t('个人设置')}}</span>
						</li>
						<li>
							<span @click="noActive">{{$t('邀请好友')}}</span>
						</li>
						<li v-if="merchantStatus == 'M_E_S_PASS'">
							<span @click="noActive">{{$t('商户信息')}}</span>
						</li>
						<li>
							<span @click="logout">{{$t('退出')}}</span>
						</li>
					</ul>
				</li>
				
				<li @mouseover="showLan = true" @mouseleave="showLan = false">
					<span>{{currentLanText}}</span>
					
					<ul class="header-menu-language" v-if="showLan">
						<li :class="{'active': item.id == currentLan}" v-for="item of languageList" :key="item.id" @click="changeLan(item.id)">
							<span>{{item.name}}</span>
						</li>
					</ul>
				</li>
			</ul>

			<ul class="navbar-nav navbar-right nav-dropdown" v-if="!isLogin">
				<li>
					<router-link to="/login">{{$t('登录')}}</router-link>
				</li>
				<li>
					<router-link to="/register">{{$t('注册')}}</router-link>
				</li>

				<li @mouseover="showLan = true" @mouseleave="showLan = false">
					<span>{{currentLanText}}</span>

					<ul class="header-menu-language" v-if="showLan">
						<li :class="{'active': item.id == currentLan}" v-for="item of languageList" :key="item.id" @click="changeLan(item.id)">
							<span>{{item.name}}</span>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</header>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'myHeader',
		data() {
			return {
				showAsssets: false, //资产菜单
				showOrder: false, //订单菜单
				showMy: false, //我的菜单
				
				showLan: false, //语言菜单
				currentLan: '', //当前语言
				languageList: [
					{
						id: 'cn',
						name: '简体中文'
					},
					{
						id: 'en',
						name: 'English'
					},
					{
						id: 'korean',
						name: '한글'
					},
				]
			}
		},
		computed: {
			...mapState('user', ['isLogin', 'userInfoData', 'userIsActive', 'merchantStatus']),
			
			currentLanText() { //当前语言
				let text;
				this.languageList.forEach(item => {
					if (item.id == this.currentLan) {
						text = item.name;
					}
				})
				return text;
			}
		},
		methods: {
			changeLan(lan) { //切换语言
				this.currentLan = lan;
				// 此处记录语言选择
				this.common.setItem('lan', lan)
				// 修改显示语言
				this.$i18n.locale = lan;
			},
			logout() {
				this.$confirm(this.$t('您是否确定退出当前账号？'), this.$t('提示'), {
					cancelButtonText: this.$t('取消'),
					confirmButtonText: this.$t('确定'),
					type: 'warning'
				})
				.then(() => {
					this.$message.success(this.$t('退出登录成功！'));
					this.$store.dispatch('user/logout');
				})
			},
			noActive() { //没激活的时候，不给点链接
				this.$confirm(this.$t('您还未激活账号！'), this.$t('提示'), {
					cancelButtonText: this.$t('稍后再说'),
					confirmButtonText: this.$t('去激活'),
					type: 'warning'
				})
				.then(() => {
					this.postAxios('/api/levl/upload/valid')
						.then(() => {
							this.$message.success('激活成功！');
							setTimeout(() => {
								this.$store.dispatch('user/getUserStatus');
							}, 600);
						})
				})
			}
		},
		created() {
			this.currentLan = this.common.getItem('lan') || 'cn';
		}
	}
</script>

<style>

</style>