h5-webgl-program/src/components/newBottomCom/viewShell/viewShell.vue

<template src="./viewShell.html">

</template>
<script>
	const util = require('@/utils/util.js').default;
	// import commonMethod from '@/common/commonMethod.js';
	import touchHandle from '@/mixins/touchHandle.js';
	// import requestConfig from '@/static/lib/requestConfig';
	import viewlayout from'@/components/newBottomCom/viewlayout/viewlayout.vue';
	import viewCareful from'@/components/newBottomCom/viewCareful/viewCareful.vue';
	// import viewToolNav from'@/components/newBottomCom/viewToolNav/viewToolNav.vue';
	// import viewStyle from'@/webgl/components/newBottomCom/viewStyle/viewStyle.vue';

	// const app = getApp(); //获取应用实例
	// let positions = new Set();
	export default {
		data: function() {
			return {
				floorList:[
					{
						text:'1F',
					},
					{
						text:'2F',
					}
				],
				floorId:0,//楼层选中的id
				shellHeight:'200rem',
				isShare: false,
				shareVideoItem:null,
				styleType:1,	//当前底部组件的状态
				seedItem:null,	//当前选中的种子户型
				showSignscoll:true,	//是否显示手势操作区域
			}
		},
		props:{
			overChange: {//当前选中的户型类型
				type: Boolean,
				default: false,
			},
			pageType: {//当前组件所在的页面类型-决定了使用哪些子组件和样式
				type: [String, Number],
				default: 1,
			},
			curHouseType: {//当前选中的户型类型
				type: [String, Number],
				default: '',
			},
			houseList: {//当前户型所有的户型详情，可以切换
				type: Array,
				default: () => {
					return []
				}
			},
			houseObj: {//当前户型的具体详情
				type: Object,
				default: () => {
					return null
				}
			},
			spaceObj: {//当前户型的空间详情
				type: Object,
				default: () => {
					return null
				}
			},
		},
		watch: {
			curHouseType: {
				handler(newVal) {
					if (newVal) {
						//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
						console.warn("***curHouseType-change***",newVal)
						this.initData()
					}
				},
			},
			styleType: {//组件展开状态切换
				handler(newVal,oldVal) {
					if (newVal) {
						console.warn("***styleType***",newVal,oldVal)
						let _starHeight = parseInt(this.shellHeight);
						let _endHeight = 380;
						if(this.inter){//存在，说明当前还在弹窗过程中
							return false;
						}
						if(newVal==1){//变更为初始状态
							this.shellHeight = '200rem';
							_endHeight = 200;
						}else if(newVal==2){//变更为展开状态
							this.shellHeight = '800rem';
							_endHeight = 800;
						}else if(newVal==3){//变更为最小状态
							this.shellHeight = '200rem';
							_endHeight = 200;
						}
						// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
						if(this.$parent && this.$parent.hasOwnProperty('canvasHeight')){
							this.$parent.gradientResize(1,_starHeight,_endHeight)
						}
						this.$parent.styleType = newVal;//变更为展开状态
					}
				},
			},
			// houseObj: {
			// 	handler(newVal) {
			// 		if (newVal) {
			// 			//户型大类发生了变更，此时需要更新楼层信息，并且重新选择具体的户型
			// 			console.warn("***curHouseType-change***",newVal)
			// 		}
			// 	},
			// },
		},
		components:{
			viewlayout,
			viewCareful,
			// viewStyle,
		},
		mixins: [touchHandle],
		async mounted() {
			// await this.getCityHouseList();
			if(this.pageType==2){
				this.shellHeight = '448rem';
			}			
			console.warn("***viewShell***",this.houseList)
		},
		// 页面被展示时执行
		onPageShow: function() {  
			
		},
		//页面被隐藏时执行
        onPageHide: function() {
        	// console.warn("***detached-hide***")
        },
		methods:{
			initData(){
				let houseList = this.houseList;
				// let currPage = getCurrentPages()[getCurrentPages().length - 1] ? getCurrentPages()[getCurrentPages().length - 1].$vm : null;
				// let curHouseType = currPage.curHouseType?currPage.curHouseType:houseList[0].spaceStructure;//获取当前页面选中的户型类型
				let curHouseType = houseList[0].spaceStructure;//获取当前页面选中的户型类型
				//获取当前选中的户型大类，从中提取楼层信息
				let curData = houseList.find(item=>{
					return item.spaceStructure == curHouseType;
				})
				this.floorList = [];
				curData.layoutStruct && curData.layoutStruct.forEach(item=>{
					this.floorList.push(item);
				})
				console.warn("***floorList-init***",this.floorList)
				if(this.floorList && this.floorList[0]){
					this.floorId = this.floorList[0].id;//默认选中第一个
					this.$emit("curHouseFloorChange", this.floorList[0]);//通知页面，户型楼层发生了变更
				}
			},
			catchTouchMove: function() {
				return false;
			},
			// hideOrShowActor(type){
			// 	this.$emit('hideOrShowActor',type);//隐藏所有视角
			// },
			//子组件开始录音
			streamRecord(){
				this.showSignscoll = false;
			},
			//子组件录音结束
			streamRecordEnd(){
				this.showSignscoll = true;
			},
			//楼层切换
			floorChange(item){
				if(this.floorId==item.id){
					return false;
				}
				this.floorId = item.id;
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_23080410', //点击ID
					clkName: 'floorswitching_clk', //点击前往的页面名称
					clkParams: {
						locusName: "楼层切换",
					}
				};
				util.trackRequest(param);
				this.$emit("curHouseFloorChange", item);//通知页面，户型楼层发生了变更
			},
			//种子户型变更-户型大类变更
			seedChange(item){
				console.warn("***seedChange***",item)
				this.seedItem = item;
				this.$emit("curHouseTypeChange", item);//通知页面，户型大类发生了变更
			},
			//放大缩小
			zoomInOut(){
				if(this.styleType == 2){
					this.styleType = 3;//变更为最小状态
				}else if(this.styleType == 3){
					this.styleType = 2;//变更为最大状态
				}
			},
			//子组件通知上划到状态2
			upCom(){
				if(this.styleType==1 || this.styleType==3){//初始状态 或者 收缩状态
					this.styleType = 2;//变更为展开状态
				}
			},
			curSpaceChange(data){
				this.$emit("curSpaceChange", data);
			},
			//点击-不是手势动作
			upScrollOrDown(){
				if(this.pageType!=1){//只有1才起作用
					return false
				}
				if(this.styleType==1 || this.styleType==3){//初始状态 或者 收缩状态
					this.styleType = 2;//变更为展开状态
				}
				else if(this.styleType==2){//当前是展开状态，可以下滑
					this.styleType = 1;//下滑到初始收缩状态
				}
			},
			//上划-手势动作
			upScroll(){
				if(this.pageType!=1){//只有1才起作用
					return false
				}
				if(this.styleType==1 || this.styleType==3){//初始状态 或者 收缩状态
					this.styleType = 2;//变更为展开状态
				}
			},
			//下划-手势动作
			downScroll(){
				if(this.pageType!=1){//只有1才起作用
					return false
				}
				let carefulList = this.$refs.viewCareful && this.$refs.viewCareful.carefulList ? JSON.parse(JSON.stringify(this.$refs.viewCareful.carefulList)) : {}; 
				if(this.styleType==2 || this.styleType==3){//当前是展开状态，可以下滑
					this.styleType = 1;//下滑到初始收缩状态
					let trackparam = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080404', //点击ID
						clkName: 'adjust_back_clk', //点击前往的页面名称
						clkParams: {
							locusName: "精细调整返回 /下划线",
							userparamter:carefulList,
						}
					};
					util.trackRequest(trackparam);
				}
			},
			mynavigateFuc(e) {
				if (e) {
					let param = {
						type: 'CLK', //埋点类型
						clkId: 'clk_2cmina_23080408', //点击ID
						clkName: 'WeCom_clk', //点击前往的页面名称
						clkParams: {
							locusName: "联系定制",
						}
					};
					util.trackRequest(param);
					this.$message.warning("敬请期待");
				}
			},
		}
	}
</script>
<style lang="css" scoped>
    @import "./viewShell.css";
	/* @import "@/common/css/common.css"; */
</style>