yichael_zhongchuan_manager/pages/home.vue

<template>
	<view class="mybody bgclF8 df fdc">
		<TopMenu ref="TopMenu" v-on:onTopSYClick="onTopSYClick" v-on:onTopQXZBClick="onTopQXZBClick" v-on:onLoginClick="showPage(0)"
		 v-on:onTopXXYSYClick="onTopXXYSYClick" v-on:onTopMenuIconClick="onTopMenuIconClick" v-on:onClick_return="onClick_return"></TopMenu>
		<view class="content homeContent">
			<Login ref="Login" v-show="bShow[0]" v-on:onLogin="onLogin"></Login>
			<image v-show="bShow[4]" class="homeBG" mode="aspectFill" src="../assets/home/homeBG.png"></image>
			<manager ref="manager" v-show="bShow[9]"></manager>
		</view>
		<!-- 左侧导航栏永远保持在最上层 -->
		<LeftMenu ref="LeftMenu" v-on:onLeftMenuClick="onLeftMenuClick"></LeftMenu>
	</view>
</template>

<script>
	import LeftMenu from '../components/leftMenu.vue'
	import TopMenu from '../components/topMenu.vue'
	import Login from '../components/login/login.vue'
	import manager from '../components/manager/Index.vue'
	
	export default {
		components: {
			LeftMenu,
			TopMenu,
			Login,
			manager,
		},
		data() {
			return {
				//这里记录当前需要显示哪个页面。每新添加一个页面，都需要在这里注册。
				bShow: [
					false, //0登录
					false, //1实验简介一级页面
					false, //2学习流程一级页面
					false, //3开始学习一级页面
					true, //4首页
					false, //5开始学习-前序准备
					false, //6开始学习-学习与实验
					false, //7开始学习-学习与实验-原理认知
					false, //8实验简介的详情页
					false, //9后台
					false, //虚拟仿真1号摄影棚
					false, //虚拟仿真库
				]
			}
		},
		methods: {
			onLogin: function() {
				// console.log("登陆成功home");
				this.$refs.TopMenu.switchLoginState(true);
				this.showPage(9);
				this.$refs.manager.onLogin();
			},
			showPage(index) {
				this.curShowPage = index;
				for (let i = 0; i < this.bShow.length; i++) {
					if (i == index) {
						this.bShow[i] = true;
					} else {
						this.bShow[i] = false;
					}
				}
				// console.log("显示页面", index, this.bShow, this.bShow.length);
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss">
	.homeBG {
		width: 100%;
		height: 100%;
	}

	.homeContent {
		margin-top: px2vw(120);
	}
</style>