yichael_zhongchuang_front_2/pages/home.vue

<template>
	<view class="mybody bgclF8 df fdc">
		
		<TopMenu ref="TopMenu" v-on:onTopSYClick="onTopSYClick" v-on:onTopQXZBClick="onTopQXZBClick" v-on:onLoginClick="onLoginClick"
		 v-on:onTopXXYSYClick="onTopXXYSYClick" v-on:onTopMenuIconClick="onTopMenuIconClick" v-on:onClick_return="onClick_return"
		 v-on:onClick_avatar="onClick_avatar" v-on:onClick_topMenu_sy="onClick_topMenu_sy" v-on:onClick_exit="onClick_userExit"></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]" v-on:onClick_ksxx="onClick_ksxx"></XXLC> -->
			<XQDL ref="XQDL" v-show="bShow[2]" v-on:onClick_Btn1="onClick_XQDL_btn1"></XQDL>
			<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> -->
			<SY ref="SY" v-show="bShow[4]" v-on:onClick_menu_btn="onClick_sy_btn"></SY>
			<QXZB ref="QXZB" v-show="bShow[5]"></QXZB>
			<XXYSY ref="XXYSY" v-show="bShow[6]" v-on:onClick_KSRZ="onClick_KSRZ" v-on:onClick_KSKC="onClick_KSKC" v-on:onShowWebview720="onShowWebview720"></XXYSY>
			<YLRZ ref="YLRZ" v-show="bShow[7]"></YLRZ>
			<SYJJ2 ref="SYJJ2" v-show="bShow[8]"></SYJJ2>
			<simulation ref="simulation" v-show="bShow[9]"></simulation>
			<simulationLibrary ref="simulationLibrary" v-show="bShow[10]"></simulationLibrary>
			<simulationcore ref="simulationcore" v-show="bShow[11]" v-on:goToTeachCreation="goToTeachCreation"></simulationcore>
			<simulationBase ref="simulationBase" v-show="bShow[12]"></simulationBase>
			<teacherCreation ref="teacherCreation" v-show="bShow[13]"></teacherCreation>
			<User ref="User" v-show="bShow[14]" v-on:onClick_proManage="onClick_proManage"></User>
			<XXGY ref="XXGY" v-show="bShow[15]"></XXGY>
			<SYBZ ref="SYBZ" v-show="bShow[16]" v-on:onClick_ksxx="onClick_ksxx"></SYBZ>
			<SYYDSP ref="SYYDSP" v-show="bShow[17]"></SYYDSP>
			<student ref="student" v-show="bShow[18]"></student>
			<vstudentPlatform ref="vstudentPlatform" v-show="bShow[19]"></vstudentPlatform>
			<survey ref="survey" v-show="bShow[20]"></survey>
			<SJKC ref="SJKC" v-show="bShow[21]"></SJKC>
			<XXZLXZ ref="XXZLXZ" v-show="bShow[22]"></XXZLXZ>
		</view>
		<!-- 左侧导航栏永远保持在最上层 -->
		<LeftMenu ref="LeftMenu" v-on:onLeftMenuClick="onLeftMenuClick"></LeftMenu>
	
		<!-- <web-view class="webview720" :src="url" v-if='bShowWebview'></web-view> -->
		<webview720 ref="webview720"></webview720>
		<shutDownWebview ref="shutDownWebview" v-on:onHideWebview="onHideWebview"></shutDownWebview>
	</view>
</template>

<script>
	import SY from '../components/home/sy.vue'
	import LeftMenu from '../components/leftMenu.vue'
	import TopMenu from '../components/topMenu.vue'
	import Login from '../components/login/login.vue'
	import simulation from "../components/home/simulation.vue"
	import simulationLibrary from "../components/home/simulationLibrary.vue"
	import simulationcore from "../components/home/simulationCore.vue"
	import simulationBase from "../components/home/simulationBase.vue"
	import teacherCreation from "../components/home/teacherCreation.vue"
	import vstudentPlatform from "../components/student/Index.vue"
	import student from "../components/student/commoand.vue"
	import survey from "../components/student/survey.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' //实验简介的详情页

	import User from '../components/user/user.vue' //用户信息等
	import XQDL from '../components/learningProcess/xqdl.vue' //学前导览
	import XXGY from '../components/learningProcess/xxgy.vue' //学习概要
	import SYBZ from '../components/learningProcess/learningProcess.vue' //实验步骤
	import SYYDSP from '../components/learningProcess/syydsp.vue' //实验引导视频
	import XXZLXZ from '../components/learningProcess/xxzlxz.vue' //学习资料下载
	import SJKC from '../components/startLearning/learningAndExperiment/ksxx_xxysy_sjkc/ksxx_xxysy_sjkc.vue' //实景勘察

	import shutDownWebview from '../components/home/shutDownWebview.vue' //实景勘察720
	import webview720 from '../components/home/webview720.vue' //实景勘察720
	export default {
		components: {
			LeftMenu,
			TopMenu,
			Login,
			SYJJ,
			// XXLC,
			XQDL,
			KSXX,
			QXZB,
			XXYSY,
			YLRZ,
			SYJJ2,
			simulation,
			simulationLibrary,
			simulationcore,
			simulationBase,
			teacherCreation,
			User,
			XXGY,
			SYBZ,
			SYYDSP,
			SY,
			student,
			vstudentPlatform,
			survey,
			SJKC,
			XXZLXZ,
			shutDownWebview,
			webview720
		},
		data() {
			return {
				url:'https://www.yuyekeji.cn/H5/720/',
				bShowWebview:true,
				curShowPage: 4,
				//这里记录当前需要显示哪个页面。每新添加一个页面，都需要在这里注册。
				bShow: [
					false, //0登录
					false, //1实验简介一级页面
					false, //2学习流程一级页面----改为学前导览
					false, //3开始学习一级页面
					true, //4首页
					false, //5开始学习-前序准备
					false, //6开始学习-学习与实验
					false, //7开始学习-学习与实验-原理认知
					false, //8实验简介的详情页
					false, //9虚拟仿真1号摄影棚
					false, //10虚拟仿真资产库
					false, //11虚拟影视项目开发管理中心
					false, //12虚拟仿真真题拍摄基地
					false, //13老师创作管理平台
					false, //14用户(个人信息等)
					false, //15学习概要
					false, //16实验步骤
					false, //17实验引导视频
					false, //18 学生信息
					false, //19 学生创作项目管理平台
					false, //20开始勘测
					false, //21实景勘察
					false, //22学习资料下载
				],
				// bShowLogin: true, //登录
				// bShowSYJJ: false, //实验简介一级页面
				// bShowXXLC: false, //学习流程一级页面
				// bShowSL: false, //开始学习一级页面
				checkedIndex_SYJJ: 0, //实验简介选中标题索引值
			}
		},
		methods: {
			onTopSYClick(index) {
				if(!getApp().globalData.bLogin) {
					alert('请先登录')
					return
				};
				// 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;
					default:
						console.log("选中状态为home：", state);
				}
				this.showPage(pageIndex);
			},
			onLogin: function() {
				// console.log("登陆成功home");
				this.$refs.TopMenu.switchLoginState(true);
				this.showPage(4);

				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		uni.uploadFile({
				// 			url: 'http://39.105.166.141:8085/project/createprojectnew', //仅为示例，非真实的接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			formData: {
				// 				'CreateUserID': 'lyy22', // 创建用户 id
				// 				'ProjectName': 'test22', // 项目名称
				// 				'Describe': 'aaa22', // 项目描述
				// 				'Type': 'bbbbb22', // 科幻 现实 历史 主旋律 纪录片
				// 			},
				// 			success: (uploadFileRes) => {
				// 				console.log('upload ok=', uploadFileRes.data);
				// 			}
				// 		});
				// 	}
				// });
			},
			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, index);
					this.$refs.QXZB.onTopQXZBClick(index);
					// this.$refs.TopMenu.checkedIndexQXZB = index;
				}
				//学习与实验
				else if (type == "XXYSY") {
					this.showPage(6)
					this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY, index);
					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;
						// this.$refs.SY.initData();
						if (indexArr[1] == 0) {
							targetPage = 9;
							topMiddleState = topMenuS.home1;
						} else if (indexArr[1] == 1) {
							targetPage = 10;
							topMiddleState = topMenuS.home2;
						} else if (indexArr[1] == 2) {
							targetPage = 11;
							topMiddleState = topMenuS.home3;
						} else if (indexArr[1] == 3) {
							targetPage = 12;
							topMiddleState = topMenuS.home4;
						} else if (indexArr[1] == 4) {
							targetPage = 13;
							topMiddleState = topMenuS.home5;
						} else {
							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: //学习流程
						switch (indexArr[1]) {
							case 0: //学习概要
								targetPage = indexArr[1] + 15;
								topMiddleState = topMenuS.XXGY;
								break;
							case 1: //实验步骤
								targetPage = indexArr[1] + 15;
								topMiddleState = topMenuS.SYBZ;
								break;
							case 2: //实验引导视频
								targetPage = indexArr[1] + 15;
								topMiddleState = topMenuS.SYYDSP;
								break;
							case 3: //学习资料下载
								targetPage = 22;
								topMiddleState = topMenuS.XXZLXZ;
								break;
							default:

						}
						break;
					case 3: //开始学习
						targetPage = 6;
						topMiddleState = topMenuS.XXYSY;
						this.$refs.XXYSY.checkedIndex_topTitle = indexArr[1];
						break;
					case 4:
						targetPage = 18;
						topMiddleState = topMenuS.info;
						break;
					case 5:
						targetPage = 19;
						topMiddleState = topMenuS.info;
						break;
					case 6:
						targetPage = 20;
						topMiddleState = '开始勘测'
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState, indexArr[1]);
				// console.log("左侧导航点击home", indexArr);
				this.$forceUpdate();
			},
			goToTeachCreation(){
				this.showPage(13);
			},
			//顶部导航左上角icon点击事件
			onTopMenuIconClick() {
				if(!getApp().globalData.bLogin) {
					alert('请先登录')
					return
				};
				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, -1);
				// this.$refs.TopMenu.switchRightState(2);
			},
			//开始学习-实景勘察-开始勘察按钮
			onClick_KSKC() {
				this.showPage(21);
				this.$refs.TopMenu.switchMiddleState(topMenuS.SJKC, -1);
			},
			onClick_return(type) {
				//从首页建筑页返回到首页
				if (type == 9 || type == 10 || type == 11 || type == 12) {
					this.showPage(4);
					this.$refs.SY.initData();
				}
				//学前导览三级级返回到学前导览
				else if (type == 5 || type == 6 || type == 7 || type == 8) {
					this.showPage(2);
				}
				//
				else {
					switch (type) {
						case 1: //前序准备-返回上一层:返回到开始学习-前序准备的展开页 type-1
							this.showPage(3);
							this.$refs.KSXX.switchSecondTitle(0);
							break;
						case 2: //学习与实验-返回上一层:返回到开始学习-学习与实验的展开页 type-2
							this.showPage(3);
							this.$refs.KSXX.switchSecondTitle(1);
							break;
						case 3: //原理认知-返回上一层:返回到开始学习-学习与实验-原理认知页 type-3
							this.showPage(6);
							this.$refs.XXYSY.checkedIndex_topTitle = 0;
							break;
						case 4: //实验简介-返回上一层：返回到实验简介的展开页 type-4
							this.showPage(1);
							break;
						case 14: //开始勘察-返回上一层:返回到开始学习-实景勘察页
							this.showPage(6);
							this.$refs.XXYSY.checkedIndex_topTitle = 1;
							break;
						default:
							console.log("返回上一层", type);
					}
				}
			},
			//实验简介按钮点击
			onClick_SYJJ_btn1(index) {
				if (index == 1) { //点击快速进入实验后跳转到原理认知页
					this.showPage(6)
					this.$refs.TopMenu.switchMiddleState(topMenuS.XXYSY, 0);
					this.$refs.XXYSY.onTopXXYSYClick(0);
				} else {
					this.showPage(8);
					this.checkedIndex_SYJJ = index;
					this.$refs.SYJJ2.showPage(index);
					this.$refs.TopMenu.switchMiddleState(topMenuS.SYJJ, -1);
					this.$refs.TopMenu.switchState_syjj(index);
					this.$forceUpdate();
				}
			},
			onClick_ksxx() {
				this.showPage(3);
				this.$refs.KSXX.initData();
				this.$refs.TopMenu.switchMiddleState(topMenuS.SY, 2);
			},
			//顶部导航栏-头像点击事件
			onClick_avatar() {
				this.showPage(14);
				this.$refs.User.initData();
			},
			//学前导览
			onClick_XQDL_btn1(index) {
				let targetPage = 0;
				switch (index) {
					case 0: //学习概要
						this.$refs.TopMenu.switchMiddleState(topMenuS.XXGY, -1);
						targetPage = index + 15;
						break;
					case 1: //实验步骤
						this.$refs.TopMenu.switchMiddleState(topMenuS.SYBZ, -1);
						targetPage = index + 15;
						break;
					case 2: //实验引导视频
						this.$refs.TopMenu.switchMiddleState(topMenuS.SYYDSP, -1);
						targetPage = index + 15;
						break;
					case 3: //学习资料下载
						this.$refs.TopMenu.switchMiddleState(topMenuS.XXZLXZ, -1);
						targetPage = 22;
						break;
					default:
						console.log("onClick_XQDL_btn1", type);
				}
				this.showPage(targetPage);
			},
			//顶部导航点击"影视现场实时特效虚拟仿真实验"
			onClick_topMenu_sy() {
				this.showPage(4);
				this.$refs.SY.initData();
			},
			//首页建筑按钮点击事件
			onClick_sy_btn(index) {
				let targetPage = -1;
				let topMiddleState = '';
				switch (index) {
					case 0: //资产库
						targetPage = 10;
						topMiddleState = topMenuS.home2;
						this.$refs.simulationLibrary.init();
						break;
					case 1: //摄影棚
						targetPage = 9;
						topMiddleState = topMenuS.home1;
						break;
					case 2: //管理中心
						targetPage = 11;
						topMiddleState = topMenuS.home3;
						this.$refs.simulationcore.init();
						break;
					case 3: //拍摄基地
						targetPage = 12;
						topMiddleState = topMenuS.home4;
						break;
					default:
						console.log("展示页面home：", this.curShowPage);
				}
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState, index);
				
				this.$forceUpdate();
			},
			//项目管理平台
			onClick_proManage() {
				let targetPage = -1;
				let topMiddleState = '';
				if (mydata_userInfo.role == '老师') {
					targetPage = 13;
				} else {
					targetPage = 19;
					this.$refs.vstudentPlatform.updateInfo();
				}

				topMiddleState = topMenuS.SY;
				this.showPage(targetPage);
				this.$refs.TopMenu.switchMiddleState(topMiddleState, -1);
				this.$forceUpdate();
			},
			//用户退出
			onClick_userExit() {
				this.showPage(4);
				this.$refs.TopMenu.switchMiddleState(topMenuS.SY, -1);
			},
			onLoginClick() {
				this.showPage(0);
				this.$refs.Login.initData();
				this.$refs.TopMenu.switchMiddleState(topMenuS.SY, -1);
			},
			onHideWebview()
			{
				console.log('22222')
				this.$refs.webview720.onClickShutWebview();
			},
			onShowWebview720(){
				this.$refs.shutDownWebview.onClickShow();
				this.$refs.webview720.onClickShow();
			}
		}
	}
</script>

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

	.homeContent {
		margin-top: px2vw(120);
	}

.webview720{
		width: 100%;
		height: 100%;
		// z-index: 3;
	}
</style>