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>
			<SYJJ ref="SYJJ" v-show="bShow[1]" v-on:onClick_Btn1="onClick_SYJJ_btn1"></SYJJ>
			<XXLC ref="XXLC" v-show="bShow[2]"></XXLC>
			<KSXX ref="KSXX" v-show="bShow[3]" v-on:on2thTitleClick="on2thKSXXClick"></KSXX>
			<image v-show="bShow[4]" class="homeBG" mode="aspectFill" src="../assets/home/homeBG.png"></image>
			<QXZB ref="QXZB" v-show="bShow[5]"></QXZB>
			<XXYSY ref="XXYSY" v-show="bShow[6]" v-on:onClick_KSRZ="onClick_KSRZ"></XXYSY>
			<YLRZ ref="YLRZ" v-show="bShow[7]"></YLRZ>
			<SYJJ2 ref="SYJJ2" v-show="bShow[8]"></SYJJ2>
			<manager res="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'

	//一级页面
	import KSXX from '../components/startLearning/startLearning.vue' //开始学习
	import SYJJ from '../components/introductionToTheExperiment/introductionToTheExperiment.vue' //实验简介
	import XXLC from '../components/learningProcess/learningProcess.vue' //学习流程

	//二级页面
	//开始学习
	import QXZB from '../components/startLearning/preludePreparation/preludePreparation.vue' //前序准备
	import XXYSY from '../components/startLearning/learningAndExperiment/learningAndExperiment.vue' //学习与实验
	import YLRZ from '../components/startLearning/learningAndExperiment/ksxx_xxysy_ylrz/ksxx_xxysy_ylrz.vue' //原理认知
	//实验简介的详情页
	import SYJJ2 from '../components/introductionToTheExperiment/syjj_second.vue' //实验简介的详情页

	export default {
		components: {
			LeftMenu,
			TopMenu,
			Login,
			SYJJ,
			XXLC,
			KSXX,
			QXZB,
			XXYSY,
			YLRZ,
			SYJJ2,
			manager
		},
		data() {
			return {
				curShowPage: 4,
				//这里记录当前需要显示哪个页面。每新添加一个页面，都需要在这里注册。
				bShow: [
					false, //0登录
					false, //1实验简介一级页面
					false, //2学习流程一级页面
					false, //3开始学习一级页面
					true, //4首页
					false, //5开始学习-前序准备
					false, //6开始学习-学习与实验
					false, //7开始学习-学习与实验-原理认知
					false, //8实验简介的详情页
					false,
				],
				// bShowLogin: true, //登录
				// bShowSYJJ: false, //实验简介一级页面
				// bShowXXLC: false, //学习流程一级页面
				// bShowSL: false, //开始学习一级页面
				checkedIndex_SYJJ: 0, //实验简介选中标题索引值
			}
		},
		methods: {
			onTopSYClick(index) {

				console.log("点击了首页标题", index, myData_QXZB_SYQY.length);
				let pageIndex = -1;
				switch (index) {
					case 0: //实验简介
						pageIndex = 1;
						// this.$refs.SYJJ.initData();
						break;
					case 1: //学习流程
						pageIndex = 2;
						// this.$refs.XXLC.initData();
						break;
					case 2: //开始学习
						pageIndex = 3;
						this.$refs.KSXX.initData();
						break;
					case 4:

						break;
					default:
						console.log("选中状态为home：", state);
				}
				this.showPage(pageIndex);
			},
			onLogin: function() {
				console.log("登陆成功home");
				this.$refs.TopMenu.switchLoginState(true);
				this.showPage(4);
			},
			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();
			},
			//2级开始学习标题点击事件
			on2thKSXXClick(data) {
				// console.log("2级点击",data);
				let lineIndex = data.indexOf("-");
				let type = data.substr(0, lineIndex)
				let index = data.substr(lineIndex + 1, data.length - 1)
				console.log("2级点击home---", type, index);
				//前序准备
				if (type == "QXZB") {
					this.showPage(5)
					this.$refs.TopMenu.switchMiddleState(topMenuS.QXZB);
					this.$refs.QXZB.onTopQXZBClick(index);
					this.$refs.TopMenu.checkedIndexQXZB = index;
				}
				//学习与实验
				else if (type == "XXYSY") {
					this.showPage(6)
					this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY);
					this.$refs.XXYSY.onTopXXYSYClick(index);
					this.$refs.TopMenu.checkedIndexXXYSY = index;
				} else {
					console.log("2级点击---", lineIndex, type, index);
				}
			},
			//顶部前序准备小标题点击事件
			onTopQXZBClick(index) {
				// console.log("顶部点击home",index);
				this.$refs.QXZB.onTopQXZBClick(index);
			},
			//顶部学习与实验小标题点击事件
			onTopXXYSYClick(index) {
				// console.log("顶部点击home",index);
				this.$refs.XXYSY.onTopXXYSYClick(index);
			},
			//左侧导航点击事件
			onLeftMenuClick(indexArr) {
				let targetPage = -1;
				let topMiddleState = '';
				switch (indexArr[0]) {
					case 0: //首页
						targetPage = 4;
						topMiddleState = topMenuS.SY;
						break;
					case 1: //实验简介
						targetPage = 8;
						topMiddleState = topMenuS.SYJJ;
						this.$refs.SYJJ2.showPage(indexArr[1]);
						this.$refs.TopMenu.switchState_syjj(indexArr[1]);
						// this.$forceUpdate();
						break;
					case 2: //学习流程

						break;
					case 3: //开始学习
						if (indexArr[1] == 0) {
							targetPage = 5;
							topMiddleState = topMenuS.QXZB;
						} else if (indexArr[1] == 1) {
							targetPage = 6;
							topMiddleState = topMenuS.XXYSY;
						}
						break;
					case 4:
						targetPage = 9;
						topMiddleState = topMenuS.manager;
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState);
				console.log("左侧导航点击home", indexArr);
			},
			//顶部导航左上角icon点击事件
			onTopMenuIconClick() {
				let indexArr = [];
				switch (this.curShowPage) {
					case 0: //登录
						indexArr = [-1, -1];
						break;
					case 1: //实验简介1级
						indexArr = [1, -1];
						break;
					case 2: //学习流程1级
						indexArr = [2, -1];
						break;
					case 3: //开始学习1级
						indexArr = [3, -1];
						break;
					case 4: //首页
						indexArr = [0, -1];
						break;
					case 5: //开始学习-前序准备
						indexArr = [3, 0];
						break;
					case 6: //开始学习-学习与实验
						indexArr = [3, 1];
						break;
					case 7: //开始学习-学习与实验-原理认知
						indexArr = [3, 1];
						break;
					case 8: //实验简介2级
						indexArr = [1, this.checkedIndex_SYJJ];
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.$refs.LeftMenu.show(indexArr);
			},
			//开始学习-学习与实验-开始认知按钮
			onClick_KSRZ() {
				this.showPage(7);
				this.$refs.TopMenu.switchMiddleState(topMenuS.YLRZ);
				// this.$refs.TopMenu.switchRightState(2);
			},
			//原理认知-返回上一层:返回到开始学习-学习与实验的展开页
			onClick_return(type) {
				switch (type) {
					case 3: //原理认知-返回上一层:返回到开始学习-学习与实验的展开页 
						this.showPage(3);
						this.$refs.KSXX.switchSecondTitle(1);
						break;
					case 4: //实验简介-返回上一层：返回到实验简介的展开页
						this.showPage(1);
						break;
					default:
						console.log("返回类型", type);
				}
			},
			//实验简介按钮点击
			onClick_SYJJ_btn1(index) {
				this.showPage(8);
				this.checkedIndex_SYJJ = index;
				this.$refs.SYJJ2.showPage(index);
				this.$refs.TopMenu.switchMiddleState(topMenuS.SYJJ);
				this.$refs.TopMenu.switchState_syjj(index);
				this.$forceUpdate();
			}
		}
	}
</script>

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

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