yichael_zhongchuang_front_2/components/topMenu.vue

<template>
	<!-- 顶部导航栏 -->
	<view class="topMenuBox df jcsb">
		<view class="df fdr">
			<!-- 左侧导航icon -->
			<view class="df aic jcc topMenu-lefticon" @click="onTopMenuIconClick">
				<img src="../assets/topMenu/leftUpIcon.png" />
			</view>
			<!-- 左上角标题 -->
			<view class="df aic topMenu-lefttitle-box">
				<view v-show="middleShowIndex==0" @click="onClick_topMenu_sy">影视现场实时特效虚拟仿真实验</view>
				<view v-show="middleShowIndex==1" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>前序准备</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==2" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_xxysy.png"></img>
					<!-- <view>学习与实验</view> -->
					<view>开始学习</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==3" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>原理认知</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<!-- 实验简介 -->
				<view v-show="middleShowIndex==4" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view v-for="(syjjTitle,syjjTitleI) in titleSYJJ" :key="syjjTitleI" v-show="syjjTitleI==checkedIndex_middleTitle">
						{{syjjTitle}}
					</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==5" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>学习概要</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==6" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>实验步骤</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==7" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>实验引导视频</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==8" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>学习资料下载</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==9">虚拟仿真1号摄影棚</view>
				<view v-show="middleShowIndex==10">虚拟仿真库</view>
				<view v-show="middleShowIndex==11">虚拟影视项目开发管理中心</view>
				<view v-show="middleShowIndex==12">虚拟仿真真题拍摄基地</view>
				<view v-show="middleShowIndex==13" class="df fdr aic">
					<view>影视现场实时特效虚拟仿真实验</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>
				<view v-show="middleShowIndex==14" class="df fdr aic">
					<img src="../assets/learning/icon_ksxx_qxzb.png"></img>
					<view>实景勘察</view>
					<view class="topMenu-lefttitle-line"></view>
				</view>

			</view>
		</view>

		<!-- 中间几个导航标题 -->
		<!-- 首页开始学习那几个 -->
		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==0||middleShowIndex==13">
			<view v-for="(item,i) in titleList_sy" :key="i" @click="onTitleClick_SY(i)" class="df fdr aic jcc topMenu-middleMenu-item">
				<view class="df">
					<img :src="checkedIndex_middleTitle==i?item.icon_checked:item.icon_unchecked"></img>
				</view>
				<view class="topMenu-middleMenu-item-text" :style="{color:checkedIndex_middleTitle==i?titleColorChecked:titleColorUnchecked}">{{item.text}}</view>
			</view>
		</view>
		<!-- 前序准备 -->
		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==1">
			<view v-for="(item,i) in titleQXZB" :key="i" @click="onTitleClick_QXZB(i)" class="df fdc aic jcc top2thTitle-item">
				<view class="top2thTitle-item-text df aic" :style="{color:checkedIndex_middleTitle==i?titleColorChecked:titleColorUnchecked}">{{item}}</view>
				<view class="top2thTitle-item-line" :style="{opacity: checkedIndex_middleTitle==i?1:0}"></view>
			</view>
		</view>
		<!-- 学习与实验 -->
		<view class="df aic topMenu-middleMenu" v-show="middleShowIndex==2">
			<view v-for="(item,i) in titleXXYSY" :key="i" @click="onTitleClick_XXYSY(i)" class="df fdc aic jcc top2thTitle-item">
				<view class="top2thTitle-item-text df aic" :style="{color:checkedIndex_middleTitle==i?titleColorChecked:titleColorUnchecked}">{{item}}</view>
				<view class="top2thTitle-item-line" :style="{opacity: checkedIndex_middleTitle==i?1:0}"></view>
			</view>
		</view>

		<!-- 右侧登录或个人头像名字等 -->
		<view class="df jcc aic topMenu-rightbox">
			<!-- 原理认知页面-返回上一层 -->
			<view class="ylrz-return df aic fdr" v-show="returnShowIndex==1" @click="onClick_return">
				<view class="df">
					<img src="../assets/topMenu/icon_return.png" />
				</view>
				<view class="ylrz-return-text">返回</view>
				<view class="ylrz-return-line"></view>
			</view>
			<!-- 登录按钮 -->
			<view v-show="loginShowIndex==0" class="df jcc aic btnLogin" id="btnLogin" @click="onLoginClick">登录</view>
			<!-- 头像名字 -->
			<view v-show="loginShowIndex==1" class="df aic">
				<view class="topMenu-avatar df" @click="onClick_avatar">
					<!-- <img :src="userInfo.avatarSrc" /> -->
					<!-- <img src="../assets/login/loginPic3.png" /> -->
					<img :src="userInfo.avatarSrc" />
				</view>
				<!-- <view class="topMenu-rightbox-text">学生</view>
				<view class="df">
					<img src="../assets/topMenu/arrowDown.png" />
				</view> -->
			</view>
		</view>
		<!-- 个人小浮窗 -->
		<view class="user-window-box" v-show="isShow_userWindow" @click="onClick_userWindowBlank">
			<view class="user-window df fdc aic">
				<view class="user-window-avatar df">
					<!-- <img src="../assets/login/loginPic3.png" /> -->
					<img :src="userInfo.avatarSrc" />
				</view>
				<view class="user-window-name">{{userInfo.Name+userInfo.role}}</view>
				<view class="user-window-email">{{userInfo.email}}</view>
				<!-- <view class="user-window-email">zhanglinlaoshi@qq.com</view> -->
				<view class="user-window-line"></view>
				<view class="user-window-userCenter df fdr jcc aic" @click="onClick_userCenter">
					<view class="df">
						<img src="../assets/user/icon_user_05_01.png" />
					</view>
					<view class="user-window-userCenter-text">个人中心</view>
				</view>
				<view class="user-window-line"></view>
				<view class="user-window-exit df jcc aic" @click="onClick_exit">退出</view>
			</view>
		</view>
		<!-- <view @click="onClick_test">测试1</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: mydata_userInfo,
				//中间导航状态 0首页1前序准备2学习与实验3原理认知
				middleShowIndex: 0,
				//中间菜单选择索引
				checkedIndex_middleTitle: -1,
				//0登录按钮1个人头像信息
				loginShowIndex: 0,
				//返回上一层 0不显示1显示
				returnShowIndex: 0,
				visibleMiddle: true,
				isShow_userWindow: false,
				userInfo: mydata_userInfo,

				// checkedIndexQXZB: 0, //选中的前序准备的菜单
				// checkedIndexXXYSY: 0, //选中的学习与实验的菜单
				// checkedIndexSYJJ: 0, //选中的实验简介的菜单

				//////////////////////以下皆为静态
				titleList_sy: [{
						"text": '实验简介',
						"icon_checked": require("../assets/topMenu/introductionToTheExperimentChecked.png"),
						"icon_unchecked": require("../assets/topMenu/introductionToTheExperimentUnchecked.png"),
					},
					{
						"text": '学前导览',
						"icon_checked": require("../assets/topMenu/learningProcessChecked.png"),
						"icon_unchecked": require("../assets/topMenu/learningProcessUnchecked.png"),
					},
					{
						"text": '开始学习',
						"icon_checked": require("../assets/topMenu/startLearningChecked.png"),
						"icon_unchecked": require("../assets/topMenu/startLearningUnchecked.png"),
					},
				],
				//首页-中间标题选中时颜色
				titleColorChecked: "#EA252C",
				//首页-中间标题未选中时颜色
				titleColorUnchecked: "#020202",
				//前序准备
				titleQXZB: ["实验前言", "实验流程步骤", "教学引导视频", "基础知识"],
				//学习与实验
				titleXXYSY: ["原理认知", "实景勘察", "虚拟技术搭建", "虚拟艺术创作", "虚拟资源库"],
				//实验简介
				titleSYJJ: ['评审账号', '快速进入实验', '项目概述', '使用环境与技术构架', '项目简介视频']
			}
		},
		methods: {
			onClick_test() {
				MyRequest.GetScore(function(res) {
					let data = res.data;
					console.log("请求成功", data);
					let scores = data.Scores;
					scores[0].Score = 6;
					MyRequest.SetupScore(scores, function(res) {
						MyRequest.GetScore(function(res) {
							console.log("请求成功2", res);
						}, null);
					}, null);
				}, null);
			},
			//初始化数据
			initData() {
				this.curTitleSrc = this.titleSrcUnchecked;
				this.curTitleColor = this.titleColorUnchecked;
			},
			onLoginClick() {
				this.$emit("onLoginClick");
			},
			//首页标题点击
			onTitleClick_SY(index) {
				this.$emit("onTopSYClick", index);
				this.checkedIndex_middleTitle = index;
			},
			//切换登录状态
			switchLoginState(isLogged) {
				if (isLogged) {
					this.loginShowIndex = 1;
				} else {
					this.loginShowIndex = 0;
				}
			},
			//切换中间导航状态
			switchMiddleState(state, checkedIndex_middleTitle) {
				switch (state) {
					case topMenuS.SY:
						this.middleShowIndex = 0;
						this.returnShowIndex = 0;
						break;
					case topMenuS.QXZB:
						this.middleShowIndex = 1
						this.returnShowIndex = 1;
						break;
					case topMenuS.XXYSY:
						this.middleShowIndex = 2
						this.returnShowIndex = 1;
						break;
					case topMenuS.YLRZ:
						this.middleShowIndex = 3
						this.returnShowIndex = 1;
						break;
					case topMenuS.SYJJ:
						this.middleShowIndex = 4
						this.returnShowIndex = 1;
						break;
					case topMenuS.XXGY:
						this.middleShowIndex = 5
						this.returnShowIndex = 1;
						break;
					case topMenuS.SYBZ:
						this.middleShowIndex = 6
						this.returnShowIndex = 1;
						break;
					case topMenuS.SYYDSP:
						this.middleShowIndex = 7
						this.returnShowIndex = 1;
						break;
					case topMenuS.XXZLXZ:
						this.middleShowIndex = 8;
						this.returnShowIndex = 1;
						break;
					case topMenuS.SJKC:
						this.middleShowIndex = 14
						this.returnShowIndex = 1;
						break;
					case topMenuS.home1:
						this.middleShowIndex = 9;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					case topMenuS.home2:
						this.middleShowIndex = 10;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					case topMenuS.home3:
						this.middleShowIndex = 11;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					case topMenuS.home4:
						this.middleShowIndex = 12;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					case topMenuS.home5:
						this.middleShowIndex = 13;
						this.returnShowIndex = 1;
						this.loginShowIndex = 1;
						break;
					default:
						console.log("切换中间导航状态", state);
				}
				this.checkedIndex_middleTitle = checkedIndex_middleTitle;
			},
			//前序准备标题点击
			onTitleClick_QXZB(index) {
				// console.log("前序准备标题点击",index);
				// this.checkedIndexQXZB = index;
				this.checkedIndex_middleTitle = index;
				this.$emit("onTopQXZBClick", index);
				// this.$forceUpdate();
			},
			onTitleClick_XXYSY(index) {
				// this.checkedIndexXXYSY = index;
				this.checkedIndex_middleTitle = index;
				this.$emit("onTopXXYSYClick", index);
				// console.log("学习与实验topmenu",index);
			},
			onTopMenuIconClick() {
				this.$emit("onTopMenuIconClick");
				// console.log("顶部icon点击");
			},
			//返回上一层
			onClick_return() {
				let type = this.middleShowIndex;
				this.$emit("onClick_return", type);
				//从首页建筑页返回到首页
				if (type == 9 || type == 10 || type == 11 || type == 12) {
					this.switchMiddleState(topMenuS.SY, -1);
				}
				//学前导览三级级返回到学前导览
				else if (type == 5 || type == 6 || type == 7 || type == 8) {
					this.switchMiddleState(topMenuS.SY, 1);
				}
				//
				else {
					switch (this.middleShowIndex) {
						// case 1: //前序准备-返回上一层:返回到开始学习-前序准备的展开页 type-1
						// 	this.switchMiddleState(topMenuS.SY, 2);
						// 	break;
						case 2: //学习与实验-返回上一层:返回到开始学习-学习与实验的展开页 type-2
							this.switchMiddleState(topMenuS.SY, 2);
							break;
						case 3: //原理认知-返回上一层:返回到开始学习-学习与实验-原理认知页 type-3
							this.switchMiddleState(topMenuS.XXYSY, 0);
							break;
						case 4: //实验简介-返回上一层：返回到实验简介的展开页 type-4
							this.switchMiddleState(topMenuS.SY, 0);
							break;
						case 14: //开始勘察-返回上一层:返回到开始学习-实景勘察页
							this.switchMiddleState(topMenuS.XXYSY, 1);
							break;
						default:
							console.log("返回", this.middleShowIndex);
					}
				}
				// console.log("返回", this.middleShowIndex);
			},
			switchState_syjj(index) {
				// this.checkedIndexSYJJ = index;
				this.checkedIndex_middleTitle = index;
			},
			onClick_avatar() {
				this.isShow_userWindow = !this.isShow_userWindow;
			},
			onClick_topMenu_sy() {
				this.$emit("onClick_topMenu_sy");
				this.switchMiddleState(topMenuS.SY, -1);
			},
			onClick_userCenter() {
				this.isShow_userWindow = false;
				this.$emit("onClick_avatar");
			},
			onClick_userWindowBlank() {
				this.isShow_userWindow = false;
			},
			onClick_exit(){
				this.switchLoginState(false);
				this.$emit("onClick_exit");
			
				localStorage.removeItem("account");
				localStorage.removeItem("password");
			}
		}
	}
</script>

<style lang="scss">
	.topMenuBox {
		width: 100%;
		// height: px2vw(119);
		// height: 11%;
		background: #FFFFFF;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);
		position: fixed;
		z-index: 0;
	}

	.topMenu-lefticon {
		width: 6.2vw;
		height: 6.2vw;
		background: #EA252C;
	}

	.topMenu-lefttitle-box {
		margin-left: 2.4vw;
		font-size: 1.5vw;
		font-family: MicrosoftYaHei;
		color: #323232;
		margin-right: 2.4vw;
	}

	.topMenu-lefttitle-box img {
		width: px2vw(50);
		margin-right: px2vw(18);
	}

	.topMenu-lefttitle-line {
		width: px2vw(2);
		// width: 1px;
		height: px2vw(53);
		background: #D5D5D5;
		margin-left: px2vw(32);
	}

	.topMenu-middleMenu {
		/* display: none; */
		flex-grow: 1;
		/* justify-content: center; */
		justify-content: space-evenly;
	}

	/* 	.topMenu-middleMenu-item {
		margin-left: 71px;
	} */
	.topMenu-middleMenu-item-text {
		margin-left: px2vw(20);
		font-size: px2vw(24);
	}

	.topMenu-rightbox {
		margin-right: px2vw(58);
		margin-left: px2vw(58);
	}

	.btnLogin {
		width: 6.2vw;
		height: 3vw;
		background: #EA252C;
		border-radius: 8px;
		font-size: 1.14vw;
		font-family: MicrosoftYaHei;
		color: #FFFFFF;
		line-height: 1.5vw;
		letter-spacing: 1px;
	}

	.topMenu-avatar img {
		width: px2vw(50);
		height: px2vw(50);
		border-radius: px2vw(25);
	}

	.topMenu-rightbox-text {
		margin-left: px2vw(18);
		margin-right: px2vw(23);
	}

	.top2thTitle-item {
		height: 100%;
	}

	// 二级目录标题字
	.top2thTitle-item-text {
		flex: 1;
		font-size: px2vw(24);
		color: #323232;
	}

	// 二级目录标题红线
	.top2thTitle-item-line {
		width: px2vw(110);
		height: px2vw(6);
		background: #EA252C;
		border-radius: px2vw(5);
	}

	//返回上一层
	.ylrz-return {
		margin-right: px2vw(43);
	}

	.ylrz-return img {
		width: px2vw(23);
	}

	.ylrz-return-text {
		font-size: px2vw(24);
		color: #EA252C;
		margin-left: px2vw(14);
	}

	.ylrz-return-line {
		width: px2vw(1);
		height: px2vw(53);
		background: #D5D5D5;
		margin-left: px2vw(32);
	}

	.user-window-box {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.user-window {
		width: px2vw(473);
		height: px2vw(514);
		background: #FFFFFF;
		box-shadow: 0px px2vw(4) px2vw(10) 0px rgba(0, 0, 0, 0.16);
		border-radius: px2vw(8);
		margin-left: px2vw(1433);
		margin-top: px2vw(133);
	}

	.user-window-avatar {
		margin-top: px2vw(56);
	}

	.user-window-avatar img {
		width: px2vw(100);
	}

	.user-window-name {
		font-size: px2vw(26);
		color: #020202;
		line-height: px2vw(35);
		letter-spacing: px2vw(2);
		margin-top: px2vw(24);
	}

	.user-window-email {
		font-size: px2vw(20);
		color: #7D7D7D;
		line-height: px2vw(26);
		letter-spacing: 1px;
		margin-top: px2vw(16);
		margin-bottom: px2vw(40);
	}

	.user-window-line {
		width: px2vw(380);
		height: 1px;
		background: #DDDDDD;
	}

	.user-window-userCenter {
		margin-top: px2vw(24);
		margin-bottom: px2vw(24);
	}

	.user-window-userCenter-text {
		margin-left: px2vw(20);
		font-size: px2vw(24);
		color: #020202;
		line-height: px2vw(31);
		letter-spacing: px2vw(2);
	}

	.user-window-exit {
		width: px2vw(146);
		height: px2vw(52);
		background: #FFFFFF;
		border-radius: px2vw(8);
		border: 1px solid #979797;
		font-size: px2vw(24);
		color: #7D7D7D;
		line-height: px2vw(31);
		letter-spacing: px2vw(2);
		margin-top: px2vw(38);
	}
</style>