环境

src/components/newBottomCom/viewMask/viewMask.html

@@ -13,7 +13,7 @@
 			    :src="item.image"
 				fit='cover'
 			    >
-			  </el-image>
+			</el-image>
 		</el-carousel-item>
 	</el-carousel>
 	<div class="indicator-view rows" v-if="aiImagesList && aiImagesList.length>1 && showAIImage">
@@ -55,8 +55,8 @@
 	</div>
 	<!-- 微信客服 -->
 	<div class="connect-view columns"
-		@click.stop="mynavigateFuc" data-jumptype="50">
-		<img class="defaultHead" src="https://dm.static.elab-plus.com/miniProgram/conentUs.png" mode="widthFix"/>
+		@click.stop="mynavigateFuc" data-jumptype="50" v-if="connectUsImg">
+		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
 	</div>
 	<!-- 风格层主操作视图 -->
 	<div class="layout-view">
@@ -100,7 +100,7 @@
 				<div class="btn AiBtn rows justify-center up1" @click.stop="aiSubmit(1)">
 					<div class="iconfont icon-a-lujing35039 style1"></div>{{aiImagesList && aiImagesList.length>0?'继续生成':'开始设计'}}
 				</div>
-				<div class="btn houseType rows justify-center up2" @click.stop="goback">
+				<div class="btn houseType rows justify-center up2" @click.stop="gonext">
 					下一步
 				</div>
 			</div>
@@ -110,37 +110,4 @@
 		<img src="https://skyforest.static.elaber.cn/detail/loading.gif" alt="" />
 		<div class="loadingMsg">{{loadingMsg}}</div>
 	</div>
-	<!-- <div class="dialog">
-		
-	</div> -->
-	<el-dialog
-		title="提醒"
-		:visible.sync="dialogVisible"
-		width="80%"
-		top="35vh"
-		:modal="false"
-		style="pointer-events: auto;"
-		:before-close="cancelHandle"
-		>
-		<span>当前AI使用火爆，请继续尝试</span>
-		<span slot="footer" class="dialog-footer">
-			<el-button @click.stop="cancelHandle();">取消等待</el-button>
-			<el-button type="primary" @click.stop="confirmHandle(1);">继续尝试</el-button>
-		</span>
-	</el-dialog>
-	<el-dialog
-		title="提醒"
-		:visible.sync="dialogAIVisible"
-		width="80%"
-		top="35vh"
-		:modal="false"
-		style="pointer-events: auto;"
-		:before-close="cancelHandle"
-		>
-		<span>AI开了小差，是否重新生成</span>
-		<span slot="footer" class="dialog-footer">
-			<el-button @click.stop="cancelHandle();">放弃生成</el-button>
-			<el-button type="primary" @click.stop="confirmHandle(0);">继续生成</el-button>
-		</span>
-	</el-dialog>
 </div>

src/components/newBottomCom/viewMask/viewMask.scss

@@ -324,17 +324,18 @@
 }
 .connect-view{
 	position: absolute;
-	width: 139px;
-	height: 184px;
+	width: 140px;
+	height: 190px;
 	background: transparent;
-	bottom: 605px;
-	right:24px; 
+	bottom: 505px;
+	right:20px; 
 	box-sizing: border-box;
 	z-index: 13;
 	pointer-events: auto;
 	.defaultHead{
-		width: 139px;
-		height: 184px;
+		width: 140px;
+		height: 190px;
+		// clip-path: polygon(0 0%, 100% 0, 100% 100px, 0 100px);
 	}
 }
 .indicator-view{

src/components/newBottomCom/viewMask/viewMask.vue

@@ -3,11 +3,13 @@
 </template>
 <script>
 	const util = require('@/utils/util.js').default;
+	import router from "@/router";
 	import { MessageBox } from 'mint-ui';
 	import spaceTypes from '@/static/spaceTypesIE.js';
 	// const config = require('@/services/url$config.js');
 	import touchHandle from '@/mixins/touchHandle.js';
 	import {
+		setStorage,
 		getStorage,
 	} from '@/utils/localStorage';
 	// import requestConfig from '@/static/lib/requestConfig';
@@ -160,9 +162,11 @@
 						resultImg:'',
 					}
 				],
-				dialogVisible: false,
-				dialogAIVisible: false,
+				// dialogVisible: false,
+				// dialogAIVisible: false,
 				datalist:[],
+				connectUsImg:'',
+				curSpaceId:'',
 			}
 		},
 		props:{
@@ -239,6 +243,8 @@
 			if(window.innerHeight && window.screen.height){
 				this.screenHeight = Math.min(window.innerHeight,window.screen.height)
 			}
+			let firstData = JSON.parse(getStorage('firstData'));
+			this.connectUsImg = firstData[0].selectOptionImageUrl;
 		},
 		beforeDestroy:function(){
 			console.warn("***beforeDestroy***");//更新到页面上的数据
@@ -384,14 +390,14 @@
 				this.checked = !this.checked;//变更选项
 				this.aiImagesList[this.currentIndex].checked = this.checked;
 				console.warn("***changeAIImg***",this.checked,this.aiData)
-				if(this.aiData){//给上一个页面回传生成的数据
-					let space = this.aiData.find(it=>{
-						return it.spaceId == this.spaceObj.spaceId
-					})
-					if(space){
-						space.aiImagesList[this.currentIndex].checked = this.checked;
-					}
-				}
+				// if(this.aiData){//给上一个页面回传生成的数据
+				// 	let space = this.aiData.find(it=>{
+				// 		return it.spaceId == this.spaceObj.spaceId
+				// 	})
+				// 	if(space){
+				// 		space.aiImagesList[this.currentIndex].checked = this.checked;
+				// 	}
+				// }
 				if(this.checked){
 					let param = {
 						type: 'CLK', //埋点类型
@@ -439,10 +445,6 @@
 					})
 				}
 			},
-			//返回上一页
-			goback(){
-				this.$router.go(-1);
-			},
 			mynavigateFuc(e) {
 				if (e) {
 					// this.$parent.clearHandle();
@@ -672,6 +674,7 @@
 						parmas.model = "deployments/elabgroup/elab-ssd-1b";
 					}
 				}
+				this.curSpaceId = this.spaceObj.spaceId;//生成时的空间id
 				let result = await this.prevHandle(parmas);
 				console.warn("***prevHandle***",result)
 				if(result && result.length>0){
@@ -844,15 +847,11 @@
 			},
 			confirmHandle(type){
 				console.log('用户点击确定')
-				this.dialogVisible = false;
-				this.dialogAIVisible = false;
 				this.subType = type || 0;
 				this.startServer();
 			},
 			cancelHandle(){
 				console.log('用户点击取消')
-				this.dialogVisible = false;
-				this.dialogAIVisible = false;
 				this.subType = 0;
 			},
 			//获取生成图结果
@@ -958,25 +957,12 @@
 					if(random >= 100){
 						random = 99;
 					}
-					// uni.showLoading({
-					// 	icon: 'loading',
-					// 	title: '生成中…' + parseInt(random) + '%'
-					// })
-					// if(!this.showAIImage){
-						this.myloading = true;
-						this.loadingMsg = '生成中…' + parseInt(random) + '%';
-					// }
+					this.myloading = true;
+					this.loadingMsg = '生成中…' + parseInt(random) + '%';
 					this.getOutPicture();
 				}else if(single.status=='succeeded'){
-					// uni.showLoading({
-					// 	icon: 'loading',
-					// 	title: '生成中…100%',
-					// 	duration:2000,
-					// })
-					// if(!this.showAIImage){
-						this.myloading = true;
-						this.loadingMsg = '生成中…100%';
-					// }
+					this.myloading = true;
+					this.loadingMsg = '生成中…100%';
 				}
 			},
 			//返回结果处理
@@ -991,48 +977,57 @@
 					image:newImage,
 					checked:false,
 					list:[newImage],
+					spaceId:this.curSpaceId,//记录下当前生成的AI图是哪个空间的，因为会切换空间
 				}
 				this.aiImagesList.push(_data);
 				this.showAIImage = true;//显示AI结果集合-因为生成了AI图片
 				if(this.$parent && typeof(this.$parent.clearHandle)=="function" ){
 					this.$parent.clearHandle();
 				}
-				let cpAiData = JSON.parse(JSON.stringify(this.aiData)) || []
-				if(cpAiData && this.curHouseObj && this.curHouseObj.houseFloor){//给上一个页面回传生成的数据
-					let space = cpAiData.find(it=>{
-						return it.houseFloor == this.curHouseObj.houseFloor && it.spaceId == this.spaceObj.spaceId
-					})
-					if(space){
-						let data ={
-							aiStyleName:aiStyleName,
-							image:newImage,
-							checked:false,
-						}
-						space.aiImagesList.push(data);
-					}else{//不存在则构建数据
-						let data = {
-							houseFloor:this.curHouseObj.houseFloor,//当前的楼层
-							spaceId:this.spaceObj.spaceId,
-							aiImagesList:[
-								{
-									aiStyleName:aiStyleName,
-									image:newImage,
-									checked:false,
-								}
-							]
-						}
-						cpAiData.push(data)
-					}
-					this.$store.dispatch('setAiData', cpAiData)
-				}
 				this.stopInterval();
 				if(this.aiImagesList.length>1){
 					setTimeout(()=>{
-						// this.$refs.carousel.next();
 						this.$refs.carousel.setActiveItem(this.aiImagesList.length-1);//切换到最后一张
 					}, 1000);
 				}
 			},
+			//空间数据整理
+			spaceAIHandle(){
+				let curHouseObj = this.$parent.curHouseObj;//当前户型数据对象
+				let aiImagesList = this.aiImagesList;//AI生成图数据对象
+				let wallList = this.$parent.wallList;//当前户型墙体数据列表对象
+				let spaceList =  JSON.parse(curHouseObj.houseJson);
+				
+				//遍历当前户型下的每一个空间
+				spaceList.forEach((item)=>{
+					let space = item;
+					let list = aiImagesList.filter(it=>it.spaceId==space.spaceId);//找到AI生成图中的当前空间
+					if(list && list.length>0){
+						list = list.filter(it=>it.checked==true);//过滤选中的
+						list = list.map(it=>{
+							return it.image
+						})
+						space.hardboundEffect = list;
+						console.warn("submitHouse: ", list,space);
+					}
+					let wall = wallList.find(it=>it.id==space.wallId);
+					if(wall){//找到当前空间的墙体数据
+						space.wallList = JSON.stringify(wall);
+					}
+				})
+				setStorage('spaceList', spaceList);//把空间选择的数据存入本地缓存里面，方便后续使用
+				console.warn("**spaceList**",spaceList)
+			},
+			//进入下一步
+			gonext(){
+				this.spaceAIHandle()
+				router.push({
+					name: "webgl_rxdz_env",
+					query:{
+						houseId:this.houseId,
+					}
+				});
+			},
 			showToast(title,time=3000){
 				this.myloading = false;
 				this.$store.state.loading = true;

src/components/newBottomCom/viewPlot/viewPlot.html

@@ -17,7 +17,7 @@
 		</div>
 	</div>
 	<div class="plot-content" v-if="plotList && plotList.length>0">
-		<div class="content">
+		<div class="content  rows flex-start">
 			<div @click="changeOption(index)" class="item columns"
 				:class="{'active': selectIndex == index}" 
 				v-for="(item,index) in plotList[tabIndex].dataList" :key="index" >

src/components/newBottomCom/viewShell/viewShell.html

@@ -16,9 +16,9 @@
 		<img class="icon" :src="styleType==2?'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomin.png':'https://dm.static.elab-plus.com/miniProgram/iconfont/zoomout.png'" mode="widthFix"/>
 	</div>
 	<!-- 微信客服 -->
-	<div class="connect-view columns"
+	<div class="connect-view columns" v-if="connectUsImg"
 		@click="mynavigateFuc" data-jumptype="50">
-		<img class="defaultHead" src="https://dm.static.elab-plus.com/miniProgram/conentUs.png" mode="widthFix"/>
+		<img class="defaultHead" :src="connectUsImg" mode="widthFix"/>
 	</div>
 	<!-- 手势操作区域 -->
 	<!-- <div v-if="showSignscoll" class="shell-signscoll rows justify-center" @click="upScrollOrDown" @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend">

src/components/newBottomCom/viewShell/viewShell.scss

@@ -86,15 +86,16 @@
 }
 .connect-view{
 	position: absolute;
-	width: 139px;
-	height: 184px;
+	width: 140px;
+	height: 190px;
 	background: transparent;
-	top:-190px;
+	top:-100px;
 	right:24px; 
 	box-sizing: border-box;
 	.defaultHead{
-		width: 139px;
-		height: 184px;
+		width: 140px;
+		height: 190px;
+		clip-path: polygon(0 0%, 100% 0, 100% 100px, 0 100px);
 	}
 }
 button{

src/components/newBottomCom/viewShell/viewShell.vue

@@ -9,6 +9,9 @@
 	import viewlayout from'@/components/newBottomCom/viewlayout/viewlayout.vue';
 	import viewCareful from'@/components/newBottomCom/viewCareful/viewCareful.vue';
 	import viewPlot from'@/components/newBottomCom/viewPlot/viewPlot.vue';
+	import {
+		getStorage,
+	} from '@/utils/localStorage';
 	// import viewToolNav from'@/components/newBottomCom/viewToolNav/viewToolNav.vue';
 	// import viewStyle from'@/webgl/components/newBottomCom/viewStyle/viewStyle.vue';
 
@@ -34,6 +37,7 @@
 				showSignscoll:true,	//是否显示手势操作区域
 				selectSpace:null,//用户选择的空间
 				lastStyleType:null,
+				connectUsImg:'',
 			}
 		},
 		props:{
@@ -124,15 +128,9 @@
 		async mounted() {
 			// await this.getCityHouseList();		
 			console.warn("***viewShell***",this.houseList)
+			let firstData = JSON.parse(getStorage('firstData'));
+			this.connectUsImg = firstData[0].selectOptionImageUrl;
 		},
-		// 页面被展示时执行
-		onPageShow: function() {  
-			
-		},
-		//页面被隐藏时执行
-        onPageHide: function() {
-        	// console.warn("***detached-hide***")
-        },
 		methods:{
 			changeStyleType(type,selectSpace){
 				this.lastStyleType = this.styleType;//记录下当前的状态，因为会返回到这个状态

src/mixins/createImgHandle.js

@@ -0,0 +1,397 @@
+import {
+	MessageBox
+} from 'mint-ui';
+import {
+	Toast
+} from 'mint-ui';
+export default {
+	data() {
+		return {
+			timeOut: 50000, //超时时间
+			subType: 0, //0 首次 1 再次
+			aiPicId: "", // 图生图任务ID
+			count: 0, //轮询次数
+			randomTimer: null,
+			timer: null,
+			currentImg: null, //当次生成图的结果
+			startCreate:false,	//是否开始生成AI图了
+			// myloading: false, //加载中
+			loadingMsg: '', //加载中的话术
+			reqList: [{
+				model: 'batouresearch/sdxl-controlnet-lora',
+				level: '5',
+				aiPicId: '',
+				resultImg: '',
+			}],
+			reqListReset: [{
+				model: 'deployments/elabgroup/elab-sdxl-controlnet-lora',
+				level: '3',
+				aiPicId: '',
+				resultImg: '',
+			}, {
+				model: 'batouresearch/sdxl-controlnet-lora',
+				level: '5',
+				aiPicId: '',
+				resultImg: '',
+			}],
+			createTabIndex:0,	//生成AI图时记录下当前AI图的类型序号
+			createOptionIndex:0,//生成AI图时记录下当前AI图的选项序号
+			paramObj:null,	//启动参数-外界传进来的
+		}
+	},
+	methods: {
+		//前置逻辑
+		async prevHandle(parmas) {
+			//不是首次请求，则无需前置判断 用户上传的也不需要前置处理
+			if (this.subType != 0) {
+				return '';
+			}
+			return new Promise(async (resolve, reject) => {
+				let _data = JSON.parse(JSON.stringify(parmas))
+				delete _data.webhook;
+				let res = await requestConfig("img2img_local", _data);
+				if (res.success) {
+					if (res.success && res.single) {
+						let resultImg = res.single;
+						resolve(resultImg);
+					} else {
+						resolve('');
+					}
+				} else {
+					resolve('');
+				}
+			})
+		},
+		//随机处理
+		randomHandle(resultImg) {
+			if (this.timer || !resultImg) {
+				return false;
+			}
+			let self = this;
+			var count = 1;
+			var process = 0; //进度
+			var randomNum = Math.floor(Math.random() * 4 + 5); //5-8随机数
+			this.randomTimer = setInterval(function() {
+				process = parseInt(count * 100 / (randomNum));
+				if (process >= 100) {
+					process = 99;
+				}
+				if (count < randomNum) { //没有到上限
+					// self.myloading = true;
+					self.loadingMsg = '生成中…' + process + '%';
+				} else {
+					// self.myloading = false;
+					this.loadingMsg = '生成中…100%';
+					self.resultHandle(resultImg);
+				}
+				count = count + 1;
+			}, 1000);
+		},
+		//开始图生图流程
+		async startServer(obj) {
+			if (!obj || !obj.imgUrl || !obj.prompt || !obj.negativePrompt) {
+				Toast({
+					message: '数据不全',
+				});
+				return false
+			}
+			// if(this.$parent.pvCurPageName!="room_show"){//说明用户切换页面了
+			// 	console.warn("***用户已经退出页面***")
+			// 	return false;
+			// }
+			let imgUrl = obj.imgUrl;
+			let subType = this.subType;
+			let session_hash = Date.now();
+			let prompt = obj.prompt;
+			let noPromot = obj.negativePrompt;
+			// let unit = 768 / this.screenWidth;
+			// this.imageWidth = parseInt((this.screenWidth * unit).toFixed());
+			// this.imageHeight = parseInt((this.$parent.canvasHeight * unit).toFixed());
+			if(this.startCreate){
+				return false
+			}
+			this.startCreate = true;
+			this.paramObj = obj;
+			this.loadingMsg = '启动中';
+			this.createTabIndex = obj.tabIndex;
+			this.createOptionIndex = obj.optionIndex;
+			var parmas = {
+				negativePrompt: noPromot,
+				prompt: prompt,
+				"batchSize": 1,
+				brandId: $config.brandId,
+				height: 1,
+				width: 1,
+				"moduleType": "AI_Biography",
+				"steps": 20,
+				"sampler": "DDIM",
+				"controlNetSessionHash": session_hash,
+				"cfgScale": 12,
+				"denoising": 0.9,
+				image: imgUrl,
+				// styleImage:imgUrl,
+				keyword: "replicate",
+				model: 'batouresearch/sdxl-controlnet-lora',
+			};
+			let result = await this.prevHandle(parmas);
+			console.warn("***prevHandle***", result)
+			if (result && result.length > 0) { //匹配到了，则随机处理
+				this.randomHandle(result)
+				return false;
+			} else {
+				this.otherHandle(parmas); //发送其他AI请求
+				let res = await requestConfig("generateTaskImgToImgForAliyun", parmas);
+				console.log("图生图结果：", res);
+				let that = this;
+				if (res.success && res.single) {
+					this.aiPicId = res.single;
+					if (subType == 0) { //首次
+						this.reqList[0].aiPicId = this.aiPicId;
+					} else { //重试
+						this.reqListReset[0].aiPicId = this.aiPicId;
+					}
+					if (this.aiPicId) {
+						this.startInterval(); //开始轮询AI生成图的结果
+					} else {
+						this.stopInterval()
+					}
+				} else {
+					this.stopInterval()
+					// this.showToast("渲染失败，请重试")
+				}
+			}
+		},
+		stopInterval() {
+			if (this.randomTimer) {
+				clearInterval(this.randomTimer);
+				this.randomTimer = null;
+			}
+			if (this.timer) {
+				// clearInterval(this.timer);
+				this.timer = null;
+			}
+			if (this.outTimer) {
+				clearTimeout(this.outTimer)
+				this.outTimer = null
+			}
+			this.subType = 0;
+			this.reqList.forEach(it => {
+				it.aiPicId = '';
+				it.resultImg = '';
+			})
+			this.reqListReset.forEach(it => {
+				it.aiPicId = '';
+				it.resultImg = '';
+			})
+			// this.myloading = false;
+			// this.aiFlag = false;
+			this.startCreate = false;//释放标志
+		},
+		//从请求接口队列里面挨个发出请求
+		otherHandle(parmas) {
+			let reqList = [];
+			if (this.subType == 0) { //首次
+				reqList = this.reqList;
+			} else { //重试
+				reqList = this.reqListReset;
+			}
+			reqList.forEach(async (it, index) => {
+				let _data = JSON.parse(JSON.stringify(parmas));
+				if (index > 0) {
+					_data.model = it.model;
+					let res = await requestConfig("generateTaskImgToImgForAliyun", _data);
+					if (res.success) {
+						console.log('生成结果123：', res);
+						it.aiPicId = res.single || '';
+					}
+				}
+			})
+		},
+		//开始生成AI图的轮询，每隔1s轮询一次
+		startInterval() {
+			if (this.timer) {
+				return false;
+			}
+			let self = this;
+			this.count = 1; //轮询次数
+			var random = 0;
+			this.currentImg = false; //当次生成图还没有结果
+			this.timer = 1; //标志进入了轮询流程
+			this.getOutPicture(); //不在轮询，而是等结果
+			this.setOutTimer(); //设置超时逻辑
+		},
+		//设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
+		setOutTimer() {
+			if (this.outTimer) {
+				clearTimeout(this.outTimer)
+				this.outTimer = null
+			}
+			var self = this;
+			this.outTimer = setTimeout(function() {
+				if (self.timer) {
+					let hasResult = false;
+					let reqList = [];
+					if (self.subType == 0) { //首次
+						reqList = self.reqList;
+					} else { //重试
+						reqList = self.reqListReset;
+					}
+					reqList.some((item, index) => {
+						if (item.resultImg) {
+							hasResult = true;
+							self.resultHandle(item.resultImg)
+						}
+					});
+					console.warn("***hasResult***", hasResult)
+					if (!hasResult) { //没有结果
+						self.stopInterval(); //停止轮询
+						MessageBox.confirm('', {
+							title: '提示',
+							message: '当前AI使用火爆，请继续尝试?',
+							showCancelButton: true,
+							confirmButtonText: '继续尝试',
+							cancelButtonText: '取消等待',
+						}).then(action => {
+							console.warn("***MessageBox-action***", action)
+							if (action == 'confirm') {
+								self.confirmHandle(1);
+							}
+						}).catch(err => {
+							console.warn("***MessageBox-err***", err)
+							if (err == 'cancel') {
+								self.cancelHandle();
+							}
+						});
+					}
+				}
+				clearTimeout(self.outTimer);
+				self.outTimer = null
+			}, this.timeOut);
+		},
+		confirmHandle(type) {
+			this.subType = type || 0;
+			this.startServer(this.paramObj);
+		},
+		cancelHandle() {
+			this.subType = 0;
+		},
+		//获取生成图结果
+		getOutPicture() {
+			if (this.timer == null) {
+				console.warn("***当前轮询已经结束了1***")
+				return false;
+			}
+			let reqList = [];
+			if (this.subType == 0) { //首次
+				reqList = this.reqList;
+			} else { //重试
+				reqList = this.reqListReset;
+			}
+			reqList.forEach((item, index) => {
+				this.singleHandle(item)
+			});
+		},
+		//发出获取结果请求获取AI生成结果
+		async singleHandle(model) {
+			if (!model || !model.aiPicId) {
+				return false;
+			}
+			var parmas = {
+				id: model.aiPicId,
+			};
+			let res = await requestConfig("getPredictions", parmas);
+			if (res.success && res.single) {
+				if (this.currentImg) { //当前已经有生成图了
+					console.warn("***当前已经有最高级生成图了***")
+					return false;
+				}
+				if (this.timer == null) {
+					console.warn("***当前轮询已经结束了***")
+					return false;
+				}
+				if (res.single.status == 'succeeded' && res.single.output) {
+					model.resultImg = res.single.output; //把生成图结果记录到请求接口对象里面
+					if (model.level == '5') { //最高级的生成图，可以直接用
+						this.currentImg = true;
+						setTimeout(() => {
+							this.resultHandle(res.single.output)
+						}, 1500)
+					}
+					console.warn("***有生成图了***", model)
+				}
+				if (model.level == '5') { //最高优先级的接口返回的结果
+					this.processHandle(res.single);
+				}
+			} else if (!res.success && model.level == '5') { //最高优先级的接口返回失败
+				this.stopInterval(); //停止轮询
+				// this.showToast("渲染失败，请重试")
+			}
+		},
+		//进度处理
+		processHandle(single) {
+			console.warn("***single***", single.status, single.progress, this.count, single);
+			let self = this;
+			if (single.status == 'starting') { //启动中的逻辑
+				if (this.count >= 20) {
+					this.stopInterval(); //停止轮询
+					MessageBox.confirm('', {
+						title: '提示',
+						message: 'AI开了小差，是否重新生成?',
+						showCancelButton: true,
+						confirmButtonText: '继续生成',
+						cancelButtonText: '放弃生成',
+					}).then(action => {
+						console.warn("***MessageBox-action***", action)
+						if (action == 'confirm') { //继续生成
+							this.confirmHandle(0);
+						}
+					}).catch(err => {
+						if (err == 'cancel') {
+							this.cancelHandle();
+						}
+					});
+				} else {
+					// this.myloading = true;
+					this.loadingMsg = '启动中';
+				}
+				this.count = this.count + 1;
+				this.getOutPicture();
+			} else if (single.status == 'processing') {
+				let random = single.progress || 0;
+				if (random >= 100) {
+					random = 99;
+				}
+				// this.myloading = true;
+				this.loadingMsg = '生成中…' + parseInt(random) + '%';
+				this.getOutPicture();
+			} else if (single.status == 'succeeded') {
+				// this.myloading = true;
+				this.loadingMsg = '生成中…100%';
+			}
+		},
+		//返回结果处理
+		resultHandle(resultImg) {
+			this.currentImg = true;
+			this.aiImage = resultImg;
+			this.stopInterval();
+			let newImage = resultImg;
+			// let aiStyleName = this.styleList[this.curStyleIndex].styleName;
+			let _data = {
+				imageUrl: newImage,
+				checked: false,
+				type:'AI',//表示AI生成的
+			}
+			// this.aiImagesList.push(_data);
+			this.paramObj = null;//生成成功后，清楚外界传入参数
+			this.tabData[this.createTabIndex].options[this.createOptionIndex].hardboundEffect.push(_data);
+			let len = this.tabData[this.createTabIndex].options[this.createOptionIndex].hardboundEffect.length;
+			if (this.createTabIndex == this.tabIndex) {
+				setTimeout(() => {
+					// this.$refs.carousel.next();
+					this.$refs.carousel.setActiveItem(len - 1); //切换到最后一张
+				}, 1000);
+			}
+			// this.subDataList[this.tabIndex].hardboundEffect.push(_data);//把数据同步到对应的待提交对象中
+		},
+	}
+}

src/pages/webgl_rxdz_env/webgl_rxdz_env.html

@@ -0,0 +1,88 @@
+<div class="bookingSheet">
+    <!-- <shareOption @afterUserHandle="afterShareOptionHandle" @optionChange="optionChange" :showShareOptions="showShareOptions"></shareOption> -->
+    <mynavbar :barData='navbar'/>
+	<!-- <authview id="authView" :showPhoneModel="showPhoneModel"></authview> -->
+    <div class="contentBox">
+        <!-- 角色图片轮播区域 -->
+        <div class="master-pic" v-if="aiImagesList && aiImagesList.length>0">
+        	<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
+        		@change="swiperChangeImg" class="master-pic-swiper" arrow="none"
+        		:current="currentIndex" ref="carousel" indicator-position="none">
+				<!-- <el-carousel-item class="master-pic-item rows justify-center">
+				    <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" 
+					class="master-pic-img" :src="firstImg" mode="aspectFill" />
+				</el-carousel-item> -->
+                <el-carousel-item v-for="(item,s) in aiImagesList" :key="item.id" 
+        			:item-id="item.id" class="master-pic-item rows justify-center">
+                    <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" 
+        			class="master-pic-img" :src="item.imageUrl" mode="aspectFill" />
+                </el-carousel-item>
+            </el-carousel>
+			<div class="indicator-view rows" >
+				<div class="indicator-item" :class="{'active': currentIndex == idx}" v-for="(item, idx) in aiImagesList" :key="idx"></div>
+			</div>
+			<!-- v-if="aiFlag && aiImagesList.length>0 && showAIImage" -->
+			<div class="loading_more">
+				<template v-if="!startCreate">
+					<img class="leftSwiperImg"
+						src="https://dm.static2.elab-plus.com/miniProgram/leftSwiperImg.png"
+						mode="aspectFit"></image>
+				</template>
+				<template v-else>
+					<img class="loading_img"
+						src="https://dm.static2.elab-plus.com/aiBeauty/aiBeauty3/icon_loading_Img.png"
+						mode="aspectFit" />
+					<span class="loading_text" v-if="loadingMsg">{{loadingMsg}}</span>
+				</template>
+			</div>
+        </div>
+		
+		<!-- 底部视图 -->
+		<div class="bottom-view">
+			<!-- 左侧按钮  -->
+			<div class="btn-view columns" v-if="aiImagesList[currentIndex] && aiImagesList[currentIndex].type=='AI'">
+				<!-- 下载 -->
+				<!-- <div class="compareBtn btn1" @click.stop="save" v-if="showAIImage">
+					<img class="down" src="https://dm.static.elab-plus.com/miniProgram/iconfont/down.png" mode="widthFix"/>
+				</div> -->
+				<!-- 点赞喜欢 -->
+				<div class="likeBtn columns" @click.stop="changeAIImg" :class="{like:checked}">
+					<div class="iconfont icon-qeuren"></div>
+					喜欢
+				</div>
+			</div>
+			<!-- 大类 -->
+			<div class="tabList">
+				<div class="tab-content rows flex-start">
+					<div @click="changeTab(index)" class="tab-item columns"
+						:class="{'tabActive': tabIndex == index}" 
+						v-for="(tab,index) in tabData" :key="index" >
+						<div class="tab-text">{{tab.fatherContent}}</div>
+						<div class="tab-info rows justify-center" :class="{'select': tab.checkedIndex > -1}">
+							√
+						</div>
+					</div>
+					<div class="tab-line"></div>
+				</div>
+			</div>
+			<!-- 选项 -->
+			<div class="swiper-view">
+				<div class="tab-content rows flex-start">
+					<div @click="changeOption(index)" class="tab-item columns"
+						:class="{'tabActive': optionIndex == index}" 
+						v-for="(tab,index) in options" :key="index" >
+						<img class="tab-img" :src="tab.imageUrl" mode="aspectFill" />
+						<div class="tab-text">{{tab.content}}</div>
+					</div>
+				</div>
+			</div>
+			<div class="question rows justify-center" v-if="tabData && tabData[tabIndex]">
+				{{tabData[tabIndex].subName}}
+			</div>
+			<!-- 底部按钮 -->
+			<div class="bottom-btn rows justify-center" @click="submit" :class="{'active': allSelect}">
+				提交
+			</div>
+		</div>
+    </div>
+</div>

src/pages/webgl_rxdz_env/webgl_rxdz_env.scss

@@ -0,0 +1,315 @@
+/**newIndex.wxss**/
+
+page {
+}
+
+.pointerEvents{
+    pointer-events: none;
+}
+/deep/.el-carousel__container{
+	height: 100%!important;
+}
+.contentBox{
+	position: relative;
+    width: 100vw;
+	height: 100vh;
+    overflow: hidden;
+    box-sizing: border-box;
+	background-color: white;
+	z-index: 2;
+	.master-pic{
+	    position: relative;
+	    width: 100%;
+	    height:880px;
+	    // padding: 10px;
+	    box-sizing: border-box;
+	    // background-color: #171717;
+		.master-pic-swiper{
+			width: 100%;
+			height: 100%;
+		}
+		.master-pic-item{
+			width: 100%;
+			height: 100%;
+			.master-pic-img{
+			    width: 100%;
+			    height: 880px;
+			    display: block;
+				object-fit: cover;
+			}
+		}
+	}
+	.bottom-view{
+		position: fixed;
+		bottom: 0px;
+		left: 0px;
+		width: 100vw;
+		height: calc(100vh - 820px);
+		border-radius: 40px 40px 0 0;
+		background: #fff;
+		padding: 30px 0px;
+		box-sizing: border-box;
+		z-index: 3;
+	}
+    .tabList{
+		position: relative;
+		width: 100%;
+		height: 90px;
+		// top:926px;
+		overflow-x: auto;
+		overflow-y: hidden;
+		margin-bottom: 40px;
+		z-index: 9;
+		.tab-content{
+			position: absolute;
+			min-width: 100vw;
+			.tab-line{
+				position: absolute;
+				left: 0px;
+				bottom: 21px;
+				width: 100%;
+				height: 1px;
+				background: rgba(112, 112, 112, 0.46);
+				opacity: 1;
+				z-index: 1;
+			}
+		}
+        .tab-item{
+			width:max-content;
+            margin-right: 20px;
+            font-family: "Verdana";
+            font-weight: 400;
+            font-size: 24px;
+            color: #1d1d1d;
+			text-align:center;
+			padding:2px;
+			box-sizing: border-box;
+			margin-right: 60px;
+			z-index: 2;
+			&:first-child{
+				margin-left: 112px;
+			}
+			&:last-child{
+				margin-right: 0px;
+			}
+            
+			.tab-text{
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 32px;
+				color: rgba(39, 39, 39, 0.5);
+			}
+			&.tabActive .tab-text{
+				font-family: "Verdana Bold";
+				font-weight: 700;
+				color: #272727;
+			}
+			.tab-info{
+				position: relative;
+				width: 40px;
+				height: 40px;
+				font-size: 20px;
+				background: #d2c9ba;
+				border: 2px solid #fff;
+				border-radius: 50%;
+				box-sizing: border-box;
+				color: #fff;
+				&.select {
+					background: #ff870f;
+				}
+			}
+        }
+    }
+	.swiper-view{
+		position: relative;
+		width: 100%;
+		height: 190px;
+		// top:926px;
+		overflow-x: auto;
+		overflow-y: hidden;
+		margin-bottom: 40px;
+		z-index: 9;
+		.tab-content{
+			position: absolute;
+		}
+		.tab-item{
+			// width:190px;
+			width:max-content;
+		    font-family: "Verdana";
+		    font-weight: 400;
+		    font-size: 0px;
+		    color: rgba(69, 69, 69, 0.6);
+			text-align:center;
+			box-sizing: border-box;
+			margin-right: 20px;
+			&:first-child{
+				margin-left: 30px;
+			}
+			&:last-child{
+				margin-right: 0px;
+			}
+		    .tab-img{
+		    	width: 140px;
+		    	height: 140px;
+		    	object-fit: cover;
+				margin-bottom: 8px;
+				border-radius: 12px;
+				border: transparent 2px solid;
+				box-sizing: border-box;
+		    }
+			.tab-text{
+				height: 40px;
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				color: #4e4e4e;
+			}
+			&.tabActive .tab-text{
+				font-family: "Verdana Bold";
+				font-weight: 700;
+				color: #f9870f;
+			}
+			&.tabActive .tab-img{
+				border-color: rgba(249, 135, 15, 1);
+			}
+		}
+	}
+    .question{
+		position: relative;
+		font-family: "Verdana";
+		font-weight: 400;
+		height: 34px;
+		font-size: 24px;
+		color: rgba(78, 78, 78, 0.47);
+		z-index: 9;
+	}
+}
+.bottom-btn{
+    position: fixed;
+    width: 652px;
+    height: 88px;
+    border-radius: 44px;
+	left: 50px;
+	bottom: 60px;
+    background-image:linear-gradient(124deg, rgba(245, 201, 82, 0.5) 0%, rgba(253, 148, 41, 0.5) 100%);
+    box-sizing: border-box;
+	z-index: 3;
+	font-family: "Verdana Bold";
+	font-weight: 700;
+	font-size: 30px;
+	color: rgba(255, 255, 255, 0.7);
+	&.active{
+		background-image:linear-gradient(124deg, rgba(245, 201, 82, 01) 0%, rgba(253, 148, 41, 1) 100%);
+		color: #fff;
+	}
+}
+.indicator-view{
+	position: absolute;
+	z-index: 12;
+	bottom: 70px;
+	left:50%;
+	transform: translateX(-50%);
+	.indicator-item{
+		width: 12px;
+		height: 12px;
+		background: #fff;
+		opacity: 0.52;
+		margin-right:6px;
+		border-radius: 50%;
+		&.active{
+			opacity:1;
+		}
+		&:last-child{
+			margin-right:0px;
+		}
+	}
+}
+.loading_more {
+	position: absolute;
+	width: 100%;
+	z-index: 12;
+	bottom: 86px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 25;
+	color:#fff;
+	font-size:28px;
+	.leftSwiperImg{
+		width: 234.32px;
+		height: 40px;
+	}
+	.loading_img {
+		width: 40px;
+		height: 40px;
+		-webkit-animation: rotation 1s linear infinite;
+		animation: rotation 1s linear infinite;
+	}
+	.loading_text {
+		height: 40px;
+		margin-left: 10px;
+	}
+}
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+.btn-view{
+	position: absolute;
+	top: calc(-132px - 30px);
+	left: 30px;
+	width: 72px;
+	z-index: 13;
+	pointer-events: auto;
+	.compareBtn {
+		position: relative;
+		background: rgba(0,0,0,0.2);
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: auto;
+		z-index:11;
+		width: 72px;
+		height: 72px;
+	}
+	.likeBtn{
+		width: 72px;
+		height: 132px;
+		border-radius: 36px;
+		padding:30px 10px;
+		background: rgba(0, 0, 0, 0.5);
+		box-sizing: border-box;
+		font-family: "Verdana Bold";
+		font-weight: 700;
+		font-size: 24px;
+		color: #fff;
+		text-align: center;
+		justify-content:unset;
+		z-index: 13;
+		pointer-events: auto;
+		.icon-qeuren{
+			margin-bottom:10px;
+			font-size:30px;
+		}
+	}
+	.like{
+		background: rgba(249, 193, 102, 0.5);
+	}
+	.btn1{
+		margin-bottom:20px;
+	}
+	.compareIcon {
+		width: 42px;
+		height: 44px;
+	}
+	.down{
+		width: 40px;
+		height: 39px;
+	}
+}

src/pages/webgl_rxdz_env/webgl_rxdz_env.vue

@@ -0,0 +1,335 @@
+<template src="./webgl_rxdz_env.html">
+</template>
+
+<script>
+	const util = require('@/utils/util.js').default;
+	const config = require('@/services/urlConfig.js');
+	import router from "@/router";
+	import {
+		setStorage,
+		getStorage,
+	} from '@/utils/localStorage';
+	import {
+		Toast
+	} from 'mint-ui';
+	import touchHandle from '@/mixins/touchHandle.js';
+	import createImgHandle from '@/mixins/createImgHandle.js';
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+	// const app = getApp(); //获取应用实例
+	// import requestConfig from '@/static/lib/requestConfig.js';
+	// import commonPageMethod from '@/common/commonPageMethod.js';
+	// import commonMethod from '@/common/commonMethod.js';
+	export default {
+		mixins: [touchHandle, commonPageMethod,createImgHandle],
+		/**
+		 * 页面的初始数据
+		 */
+		data() {
+			return {
+				pvId: 'p_2cmina_21012501',
+				locusBehaviorName: "环境偏好",
+				locusValue: "",
+				locusName: "",
+				pvCurPageName: "role_set",
+				pvCurPageParams: null,
+				navbar: {
+					showCapsule: 1,
+					title: '环境偏好',
+					titleColor: '#fff',
+					navPadding: 0,
+					navPaddingBg: 'transparent',
+					navBarColor: 'transparent',
+					navBackColor: 'transparent',
+					haveCallback: false, // 如果是 true 会接手 navbarBackClk
+					fromShare: false,
+					fromProject: 0,
+					shareToken: "",
+					pageName: this.pvCurPageName,
+				},
+				houseId: $config.houseIdHs,
+
+				id: '', //题目
+				allSelect:false,//是否所有大类都选择了
+				currentIndex: 0,
+				// featureImgList: [],
+				showPhoneModel: false,
+				tabIndex: 0, //当前在第几个tab
+				optionIndex: -1, //选项选中的序号
+				options: [], //选项数据
+				aiImagesList: [], //角色数据，单独
+				AIImg:'',	//AI生成所需要的垫图
+				tabData: [],
+				checked:false,	//是否喜欢
+				subDataList:[],	//提交的数据对象
+			}
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		mounted(options) {
+			console.log("***onLoad-webgl_rxdz_customize***", this.$route.query)
+			const that = this;
+			this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
+			// this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+			this.id = this.$route.query.id ? this.$route.query.id : '111';
+			this.queryTestcaseSingle();
+		},
+		computed: {
+			userId() {
+				return this.$store.state.userId;
+			},
+		},
+
+		methods: {
+			swiperChangeImg(e) {
+				console.log("***swiperChangeImg***", e);
+				this.currentIndex = e.detail ? e.detail.current : e;
+				this.checked = this.aiImagesList[this.currentIndex].checked;
+				// this.optionIndex = this.currentIndex;
+				// this.tabData[0].checkedIndex = this.currentIndex;
+			},
+			rightScroll() { //右滑
+				if (this.currentIndex <= (this.aiImagesList.length - 1) && this.currentIndex > 0) {
+					this.$refs.carousel.prev();
+				}
+			},
+			leftScroll() { //继续生成
+				console.log("***leftScroll***", this.currentIndex,this.aiImagesList.length);
+				if (this.currentIndex != this.aiImagesList.length - 1) {
+					if (this.currentIndex < this.aiImagesList.length - 1) {
+						this.$refs.carousel.next();
+					}
+					return false;
+				}
+				// console.log("***leftScroll***",this.currentIndex,this.aiImagesList.length)
+				let obj = {
+					imgUrl:this.AIImg,
+					prompt:this.options[this.optionIndex].remark,
+					negativePrompt:this.options[this.optionIndex].tips,
+					tabIndex:this.tabIndex,
+					optionIndex:this.optionIndex,
+				}
+				this.startServer(obj);//继续生成下一张
+			},
+			//点赞喜欢
+			changeAIImg() {
+				// let lastPage = getCurrentPages()[getCurrentPages().length - 2] ? getCurrentPages()[getCurrentPages().length - 2].$vm : null;
+				this.checked = !this.checked;//变更选项
+				this.aiImagesList[this.currentIndex].checked = this.checked;
+				console.warn("***changeAIImg***",this.checked)
+				let img = this.aiImagesList[this.currentIndex].imageUrl;
+				let obj = this.options[this.optionIndex].hardboundEffect.find(it=>it.imageUrl==img);
+				if(obj){
+					obj.checked = this.checked;
+				}
+			},
+			//查询题目数据
+			async queryTestcaseSingle() {
+				let userId = this.userId || '';
+				let params = {
+					id: this.id,
+					brandId: $config.brandId,
+					houseId: this.houseId,
+					userId,
+				};
+				// params.userId = this.userId;
+				const res = await requestConfig('queryTestcaseSingle', params);
+				if (res.success) {
+					let list = res.list;
+					list.forEach(it => {
+						it.checkedIndex = -1;////增加当前题目用户选择的需要，默认不选中
+						it.options.forEach(option=>{
+							option.hardboundEffect = [
+								{
+									imageUrl :option.imageUrl,
+									type:'system',//人为添加的
+								}
+							];//AI生成图存放对象
+						})
+					}); 
+					
+					// this.tabIndex = 0;
+					this.tabData = list;
+					this.tabData[0].checkedIndex = 0;
+					this.optionIndex = 0;
+					this.options = this.tabData[0].options; //选项数据
+					this.AIImg = this.tabData[0].options[0].imageUrl;//AI生成所需的垫图
+					this.aiImagesList = this.tabData[0].options[0].hardboundEffect;
+					//初始化待提交的数据对象
+					// list.forEach(it=>{
+					// 	let obj = {
+					// 		fatherContent:it.fatherContent,
+					// 		name:it.fatherContent,
+					// 		houseId:it.houseId,
+					// 		houseName:it.houseName,
+					// 		id:it.id,
+					// 		hardboundEffect:[]
+					// 	}
+					// 	this.subDataList.push(obj);
+					// });
+				}
+			},
+			//切换大类
+			changeTab(id) {
+				if (id == this.tabIndex) {
+					return
+				}
+				this.tabIndex = id;
+				this.options = this.tabData[this.tabIndex].options; //选项数据
+				this.optionIndex = this.tabData[this.tabIndex].checkedIndex; //获取用户已经选中的选项
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_24012601', //点击ID
+					clkName: 'tab_clk', //点击前往的页面名称
+					clkParams: {
+						type: this.tabData[this.tabIndex].fatherContent,
+						locusName: "大类选择",
+					}
+				};
+				util.trackRequest(param);
+			},
+			//切换选项
+			changeOption(id) {
+				if (id == this.optionIndex) {
+					return false;
+				}
+				this.optionIndex = id;
+				this.tabData[this.tabIndex].checkedIndex = this.optionIndex;
+				// if (this.tabIndex == 0) { //当前为角色时，则需要同步变更上面的
+				// 	this.currentIndex = id;
+				// 	this.$refs.carousel.setActiveItem(this.currentIndex);
+				// }
+				this.allSelect = !this.tabData.some(it=>it.checkedIndex==-1);
+				this.AIImg = this.options[this.optionIndex].imageUrl;//AI生成图的垫图
+				//替换对应的队列为选中的选项的数组对象
+				this.aiImagesList = this.options[this.optionIndex].hardboundEffect;
+				console.warn("***changeOption***", this.tabData,this.AIImg,this.subDataList)
+				let param = {
+					type: 'CLK', //埋点类型
+					clkId: 'clk_2cmina_24012602', //点击ID
+					clkName: 'option_clk', //点击前往的页面名称
+					clkParams: {
+						type: this.options[this.optionIndex].content,
+						locusName: "选项选择",
+					}
+				};
+				util.trackRequest(param);
+			},
+
+			catchTouchMove: function() {
+				return false;
+			},
+			//提交结果数据处理
+			async resultDataHandle(){
+				let firstData = JSON.parse(getStorage('firstData'));
+				let secondData = JSON.parse(getStorage('secondData'));
+				let curHouseObj = JSON.parse(getStorage('curHouseObj'));
+				let spaceList = JSON.parse(getStorage('spaceList'));
+				let shottingImg = getStorage('shottingImg');
+				let expand = [];//扩展数据
+				let otherlist = [];
+				let userId = this.userId ? this.userId : '';
+				let houseData = {
+					"layoutId": curHouseObj.id,
+					"layoutName": curHouseObj.name,
+					"layoutArea": curHouseObj.houseArea,
+					"floor": 1,
+					"layoutImgCustomized": shottingImg,
+					"style": "",
+					"houseJson": []
+				}
+				secondData.forEach(it=>{
+					let _dt = {
+						name:it.name,
+						value:it.selectOptionName,
+					}
+					expand.push(_dt);
+				})
+				this.tabData.forEach(tab=>{
+					let list = tab.options[tab.checkedIndex].hardboundEffect.filter(it=>it.checked==true);//过滤选中的
+					list = list.map(it=>{
+						return it.imageUrl
+					})
+					let obj = tab.options[tab.checkedIndex];
+					let data = {
+						spaceName:tab.fatherName,
+						spaceId:'',
+						hardboundEffect:(list && list.length>0)?list:[obj.imageUrl],
+					}
+					otherlist.push(data);
+					expand.push({
+						name:tab.fatherName,
+						value:obj.content,
+					});
+				})
+				houseData.houseJson = spaceList.concat(otherlist);
+				// houseData.expand = expand;
+				let param = {
+					"brandId": $config.brandId,
+					"houseId": curHouseObj.houseId,
+					"userId": userId,
+					"floot": 1,
+					"spaceName": curHouseObj.name,
+					"spaceStructure": '',
+					"curFloor":1,
+					layoutStruct:[houseData],
+					type:'QIANCE',
+					expand:JSON.stringify(expand),
+				}
+				console.warn("submitHouse-param: ", param);
+				
+				const loading = this.$loading({
+					lock: true,
+					text: '提交中...',
+					spinner: 'el-icon-loading',
+					background: 'rgba(0, 0, 0, 0.7)'
+				});
+				let res = await requestConfig("saveCustomizedRecord", param);
+				loading.close();
+				if(res && res.success && res.single){//提交成功
+					let data = {
+						houseId:this.houseId,
+						id:res.single,
+					}
+					router.push({
+						name: "webgl_rxdz_text_customize",
+						query:data
+					});
+				}
+			},
+			submit() {
+				let index = this.tabData.findIndex(it=>it.checkedIndex==-1);
+				if(index>-1){
+					Toast({
+						message: this.tabData[index].fatherContent + '选项不能为空',
+					});
+					return false;
+				}
+				this.resultDataHandle();
+				// console.log("进入订制户型: ", this.curHouseObj);
+				// setStorage('curHouseObj', this.curHouseObj);
+				// this.$store.dispatch('setCurHouseObj', this.curHouseObj);
+				// let data = {
+				// 	houseId:this.houseId,
+				// }
+				// router.push({
+				// 	name: "webgl_rxdz_houseList",
+				// 	query:data
+				// });
+				// let param = {
+				// 	type: 'CLK', //埋点类型
+				// 	clkId: 'clk_2cmina_24012303', //点击ID
+				// 	clkName: 'confirm_clk', //点击前往的页面名称
+				// 	clkParams: {
+				// 		locusName: "确定个人偏好",
+				// 	}
+				// };
+				// util.trackRequest(param);
+			},
+		}
+
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_env.scss";
+</style>

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.html

@@ -6,8 +6,12 @@
 	<!-- 户型选择区域 -->
 	<div class="scroll-class">
 		<div class="main grid-view1">
-			<div @click="changeHouse(house)" class="item columns" v-for="(house,index) in houseList" :key="index" >
+			<div @click="changeHouse(house,index)" class="item columns" :class="{'active': selectIndex == index}" 
+				v-for="(house,index) in houseList" :key="index" >
 				<img class="item-img" :src="house.coverImage" />
+				<div class="tab-info rows justify-center">
+					<i class="iconfont icon-Hook-1"></i>
+				</div>
 				<div class="item-text rows justify-center">{{house.houseType}}·{{house.houseArea}}㎡</div>
 				<div class="item-note rows justify-center">{{house.note}}</div>
 			</div>

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.scss

@@ -24,7 +24,34 @@
 		overflow-y: auto;
 		padding: 0px 20px;
 		.item{
+			position: relative;
 			font-size: 0px;
+			border: 2px solid transparent;
+			box-sizing: border-box;
+			border-radius: 20px;
+			&.active{
+				border-color: #f9870f;
+			}
+			.tab-info{
+				position: absolute;
+				width: 40px;
+				height: 40px;
+				top: 20px;
+				right: 20px;
+				font-size: 12px;
+				background: #ff870f;
+				border: 2px solid #ff870f;
+				border-radius: 50%;
+				box-sizing: border-box;
+				color: #fff;
+				opacity: 0;
+				i{
+					font-size: 14px;
+				}
+			}
+			&.active .tab-info{
+				opacity: 1;
+			}
 			.item-img{
 				width: 340px;
 				height: 260px;

src/pages/webgl_rxdz_houseList/webgl_rxdz_houseList.vue

@@ -44,6 +44,7 @@
 				optionIndex: -1, //选项选中的序号
 				tabData: [],	//
 				curHouseObj:null,	//用户选择的户型
+				selectIndex:-1,	//用户选择的户型序号
 			}
 		},
 		// components: {
@@ -84,9 +85,10 @@
 				};
 				util.trackRequest(param);
 			},
-			changeHouse(item){
+			changeHouse(item,index){
 				this.curHouseObj = item;
-				console.log("changeHouse: ", this.curHouseObj);
+				this.selectIndex = index;
+				console.log("changeHouse: ", this.curHouseObj,this.selectIndex);
 			},
 			//查询题目数据
 			async queryTestcaseSingle() {
@@ -150,6 +152,22 @@
 				console.log("进入订制户型: ", this.curHouseObj);
 				setStorage('curHouseObj', this.curHouseObj);
 				this.$store.dispatch('setCurHouseObj', this.curHouseObj);
+				let dataList = [
+					{
+						name:'户型偏好',
+						selectOptionName:this.houseList[this.selectIndex].houseType || '',
+						selectOptionImageUrl:'',
+					}
+				];
+				this.tabData.forEach(tab=>{
+					let _dt = {
+						name:tab.fatherContent,
+						selectOptionName:tab.options[tab.checkedIndex].content || '',
+						selectOptionImageUrl:tab.options[tab.checkedIndex].imageUrl || '',
+					}
+					dataList.push(_dt);
+				})
+				setStorage('secondData', dataList);//把第一步选择的数据存入本地缓存里面，方便后续使用
 				let data = {
 					houseId:this.houseId,
 				}

src/pages/webgl_rxdz_role/webgl_rxdz_role.html

@@ -26,7 +26,7 @@
 					v-for="(tab,index) in tabData" :key="index" >
 					<div class="tab-text">{{tab.fatherContent}}</div>
 					<div class="tab-info rows justify-center" :class="{'select': tab.checkedIndex > -1}">
-						√
+						<i class="iconfont icon-Hook-1"></i>
 					</div>
 					<div class="tab-right-line"></div>
 				</div>

src/pages/webgl_rxdz_role/webgl_rxdz_role.scss

@@ -123,6 +123,9 @@ page {
 				&.select {
 					background: #ff870f;
 				}
+				i{
+					font-size: 14px;
+				}
 			}
 			.tab-info::after{
 				position: absolute;

src/pages/webgl_rxdz_role/webgl_rxdz_role.vue

@@ -190,15 +190,24 @@
 					});
 					return false;
 				}
+				let data = [];
+				this.tabData.forEach(tab=>{
+					let _dt = {
+						name:tab.fatherContent,
+						selectOptionName:tab.options[tab.checkedIndex].content,
+						selectOptionImageUrl:tab.options[tab.checkedIndex].imageUrl,
+					}
+					data.push(_dt);
+				})
+				setStorage('firstData', data);//把第一步选择的数据存入本地缓存里面，方便后续使用
 				// console.log("进入订制户型: ", this.curHouseObj);
 				// setStorage('curHouseObj', this.curHouseObj);
 				// this.$store.dispatch('setCurHouseObj', this.curHouseObj);
-				let data = {
-					houseId:this.houseId,
-				}
 				router.push({
 					name: "webgl_rxdz_houseList",
-					query:data
+					query:{
+						houseId:this.houseId,
+					}
 				});
 				// let data = {
 				// 	houseId:this.houseId,

src/pages/webgl_rxdz_test/webgl_rxdz_test.vue

@@ -649,111 +649,14 @@
 				param.expand = JSON.stringify(expand);
 				return param;
 			},
-			async submitHouse(){
-				if(this.overChange){
-					this.$message.warning("空间正在调整");
-					return false
-				}
-				const loading = this.$loading({
-					lock: true,
-					text: '提交中...',
-					spinner: 'el-icon-loading',
-					background: 'rgba(0, 0, 0, 0.7)'
-				});
-				let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
-				console.warn("***shottingImg***",shottingImg);
-				let userId = this.userId ? this.userId : '';
-				let param = {
-					"brandId": $config.brandId,
-					"houseId": this.curHouseObj.houseId,
-					"userId": userId,
-					"floot": this.curHouseObj.houseFloor || '',
-					"spaceName": this.curHouseName ,
-					"spaceStructure": this.curHouseType || '',
-					"curFloor":this.curHouseFloor || '',
-					// "layoutImgCustomized": shottingImg,
-					// "style": "",
-					layoutStruct:[],
-				}
-				//处理每一个楼层
-				this.curLayoutStruct.forEach((layoutStruct,index)=>{
-					let houseData = {
-						"layoutId": layoutStruct.id,
-						"layoutName": layoutStruct.name,
-						"layoutArea": layoutStruct.houseArea,
-						"floor": layoutStruct.houseFloor,
-						"layoutImgCustomized": layoutStruct.houseFloor == this.curHouseFloor ? shottingImg:'',
-						"style": "",
-						"houseJson": []
-					}
-					let spaceList =  JSON.parse(layoutStruct.houseJson);
-					let styleList = [];
-					//遍历当前户型下的每一个空间
-					spaceList.forEach((item)=>{
-						let space = JSON.parse(JSON.stringify(item));
-						//找到当前空间对象对应的AI数据对象
-						let AISpace = null;
-						AISpace = this.aiData && this.aiData.find(it=>{
-							return it.houseFloor == layoutStruct.houseFloor && it.spaceId == space.spaceId
-						});
-						if(AISpace){
-							let list = AISpace.aiImagesList.filter(it=>it.checked==true);//过滤选中的
-							list.forEach(it=>{
-								styleList.push(it.aiStyleName);
-							})
-							list = list.map(it=>{
-								return it.image
-							})
-							space.hardboundEffect = list;
-							console.warn("submitHouse: ", list,space);
-						}
-						let wallList = this.wallList.find(it=>it.id==space.wallId);
-						if(wallList){//找到当前空间的墙体数据
-							space.wallList = JSON.stringify(wallList);
-						}
-						houseData.houseJson.push(space)
-					})
-					//寻找styleList里面出现最多次数的风格
-					if(styleList && styleList.length>0){
-						let maxEle = styleList[0];
-						let maxNum = 1;
-						styleList.reduce((p,k)=>{
-							p[k] ? p[k]++ : p[k]=1;
-							if(p[k] > maxNum){
-								maxEle = k;
-								maxNum ++
-							}
-							return p;
-						},{});
-						houseData.style = maxEle;
-					}
-					param.layoutStruct.push(houseData)
-				})
-				param = this.hushangHandle(param)
-				console.warn("submitHouse-param: ", param);
-				let trackparam = {
-					type: 'CLK', //埋点类型
-					clkId: 'clk_2cmina_23080409', //点击ID
-					clkName: 'submit_clk', //点击前往的页面名称
-					clkParams: {
-						locusName: "数据提交",
-						postAIData:this.aiData,
-					}
-				};
-				util.trackRequest(trackparam);
-				let res = await requestConfig("saveCustomizedRecord", param);
-				loading.close();
-				if(res && res.success && res.single){//提交成功
-					let data = {
-						houseId:this.houseId,
-						id:res.single,
-					}
-					router.push({
-						name: "webgl_rxdz_customize",
-						query:data
-					});
-				}
-			},
+			// async submitHouse(){
+			// 	if(this.overChange){
+			// 		this.$message.warning("空间正在调整");
+			// 		return false
+			// 	}
+			// 	let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
+			// 	console.warn("***shottingImg***",shottingImg);
+			// },
 			enableRender(){
 				this.enableRenderHandle();
 			},
@@ -1660,6 +1563,7 @@
 				let str = JSON.stringify(this.spaceList)
 				//更新当前空间对象
 				this.curHouseObj.houseJson = str;
+				this.curHouseObj.houseArea = this.sumArea;
 				//更新提交的数据
 				// let layoutStruct = this.curLayoutStruct.find(it=>{
 				// 	return it.houseFloor == this.curHouseFloor
@@ -1779,7 +1683,14 @@
 				console.warn("***userSelectPlot***",spaceId,layoutObj)
 				this.changeSingleLayout(spaceId,layoutObj)
 			},
-			goRoam1(spaceId){
+			async goRoam1(spaceId){
+				if(this.overChange){
+					this.$message.warning("空间正在调整");
+					return false
+				}
+				let shottingImg = await this.shottingAction() + "?x-oss-process=image/auto-orient,1/quality,Q_46/format,jpg";//开始截图
+				console.warn("***shottingImg***",shottingImg);
+				setStorage('shottingImg', shottingImg);//把空间选择的数据存入本地缓存里面，方便后续使用
 				let gltf = this.lableItem.find(it=>it.spaceId==spaceId);
 				if(gltf){
 					this.goRoam(gltf)

src/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize.html

@@ -0,0 +1,94 @@
+<div class="bookingSheet">
+    <!-- <shareOption @afterUserHandle="afterShareOptionHandle" @optionChange="optionChange" :showShareOptions="showShareOptions"></shareOption> -->
+    <mynavbar :barData='navbar'/>
+	<!-- <authview id="authView" :showPhoneModel="showPhoneModel"></authview> -->
+    <div class="contentBox">
+        <!-- 图片区域 -->
+        <div class="picArea">
+            <div class="master-pic" v-if="tabData[tabIndex] && tabData[tabIndex].hardboundEffect.length>0">
+				<el-carousel :autoplay="false" :loop="false" :indicator-dots="false"
+					@change="swiperChangeImg" class="master-pic-swiper" 
+					:current="currImgIdx" ref="carousel">
+                    <el-carousel-item v-for="(img,s) in tabData[tabIndex].hardboundEffect" :key="s" :item-id="s" class="master-pic-img">
+                        <img @touchstart="mytouchstart" @touchmove="mytouchmove" @touchend="mytouchend" class="master-pic-img" :src="img" mode="aspectFill" />
+						<div class="lookHouseView rows justify-center" v-if="tabIndex==2 && (!shareUserId || shareUserId==userId)" @click="toMode">
+							<img class="icon-ai" src="https://dm.static.elab-plus.com/miniProgram/iconfont/icon-ai.png" mode="widthFix"/>
+							查看户型
+						</div>
+                        <!-- <c-img class="master-pic-img" :style="'background-color:#fff'" :src="img" mode="aspectFill"></c-img> -->
+                    </el-carousel-item>
+                </el-carousel>
+				<div class="indicator-view rows" v-if="tabData[tabIndex].hardboundEffect && tabData[tabIndex].hardboundEffect.length > 1">
+					<div class="indicator-item" :class="{'active': currImgIdx == idx}" 
+					v-for="(item, idx) in tabData[tabIndex].hardboundEffect" :key="idx"></div>
+				</div>
+            </div>
+			<img class="text-img" src="https://dm.static.elab-plus.com/miniProgram/text-img.png" mode="widthFix"/>
+            <div class="tabList rows flex-start">
+				<div @click="changeTab(index)" class="tab-item columns" :class="{'tabActive': tabIndex == index}" 
+					v-for="(tab,index) in tabData" :key="index" >
+					<img class="tab-img" :src="tab.imgUrl" mode="aspectFill" />
+					<div class="tab-info rows rows-between">
+						<div class="eslipe">{{tab.name || '-'}}</div>
+						<div class="eslipe" v-if="tab.area">{{tab.area || '-'}}㎡</div>
+					</div>
+				</div>
+            </div>
+        </div>
+        <!-- 提交信息区域 -->
+        <div class="booking-info" :style="{'color':tabIndex==0?'#fff':'#fff'}" v-if="layoutStruct">
+			<!-- <div class="left-line line"></div>
+			<div class="right-line line"></div>
+			<div class="writingBox rows">
+				<img class="writing-img" :src="layoutStruct.houseImg || plotHeadDeafultImg" />
+				<div class="wiriting-right" >
+					<div class="font40 wiriting-text">{{shareUserId&&shareUserId!=userId?'':'我的'}}私人定制</div>
+					<div class="font52 wiriting-text">{{layoutStruct.houseName || ''}}</div>
+				</div>
+			</div> -->
+			<div class="title">金融岛 · 我的梦想设计</div>
+            <!-- 文字信息区域 -->
+            <div class="info-bar">
+				<div class="info-item" v-for="(item,index) in expand" :key="index">
+				    <div class="info-item-label">{{item.name}}</div>
+				    <div class="info-item-value">{{item.value || '-'}}</div>
+				</div>
+            </div>
+        </div>
+		<!-- 底部按钮 -->
+		<div class="bottom-view columns justify-center">
+			<div class="bottom-title" :style="{'color':tabIndex==0?'#fff':'#000'}">
+				- 支持我的梦想家 -
+			</div>
+			<div class="bottom-tips" :style="{'color':tabIndex==0?'#fff':'#000'}">
+				喜欢我的设计吗，给我投一票吧~
+			</div>
+			<div class="rows rows-between">
+				<div class="bottom-btn btn-qw rows justify-center" @click="navigateFuc">
+				    加企微 · 定制服务
+				</div>
+				<div class="bottom-btn btn-share rows justify-center" @click="optionChange(true)">
+					<i class="iconfont icon-Shared"></i>
+				    <!-- 立即分享 -->
+					去首页
+				</div>
+			</div>
+		    
+		</div>
+		<!-- 高斯背景图 -->
+		<div class="swiper-img-gs-mh"  >
+			<img class="img" mode="aspectFill" src="https://dm.static.elab-plus.com/miniProgram/test-bg.jpg" />
+		</div>
+		
+    </div>
+	
+	<!-- 添加企微弹出层 -->
+    <!-- <div class="f-popup-bom-container" @click.stop.prevent="showPopup=false" v-show="showPopup">
+		<div class="f-popup-view">
+            <img class="closeIcon" @click="showPopup = false;" src="https://dm.static.elab-plus.com/mini-program/closeIcon.png" mode="widthFix" />
+			<scroll-view scroll-y="true" class="f-popup-bom" @click.stop.prevent="catchEvent" :enhanced="true" :show-scrollbar="false">
+                <img mode="widthFix" :show-menu-by-longpress="true" class="qrCode" :src="enterpriseWechat" />
+            </scroll-view>
+		</div>
+	</div> -->
+</div>

src/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize.scss

@@ -0,0 +1,346 @@
+/**newIndex.wxss**/
+
+page {
+}
+
+.font40{
+    font-size: 40px;
+    // color: #fff;
+}
+.font52{
+    font-size: 52px;
+	font-weight: 700;
+}
+.pointerEvents{
+    pointer-events: none;
+}
+/deep/.el-carousel__container{
+	height: 100%!important;
+}
+.contentBox{
+	position: relative;
+    width: 100vw;
+    overflow: hidden;
+    box-sizing: border-box;
+	background-color: white;
+    .picArea{
+        position: relative;
+		width: 100%;
+		height:860px;
+        .master-pic{
+            position: relative;
+			width: 100%;
+			height:750px;
+            // padding: 10px;
+            box-sizing: border-box;
+            // background-color: #171717;
+			.master-pic-swiper{
+				width: 100%;
+				height: 100%;
+			}
+            .master-pic-img{
+                width: 100%;
+                height: 100%;
+                display: block;
+				object-fit: cover;
+            }
+			.lookHouseView{
+				position: absolute;
+				left:276px;
+				bottom:138px;
+				width: 200px;
+				height: 76px;
+				border-radius: 38px;
+				background: rgba(0, 0, 0, 0.4);
+				font-family: "Verdana";
+				font-weight: 400;
+				font-size: 28px;
+				color: #fff;
+				.icon-ai{
+					width:46px;
+					height:46px;
+					margin-right:10px;
+				}
+			}
+
+			.indicator-view{
+				position: absolute;
+				z-index: 12;
+				bottom: 100px;
+				left:50%;
+				transform: translateX(-50%);
+				.indicator-item{
+					width: 12px;
+					height: 12px;
+					background: #fff;
+					opacity: 0.52;
+					margin-right:6px;
+					border-radius: 50%;
+					&.active{
+						opacity:1;
+					}
+					&:last-child{
+						margin-right:0px;
+					}
+				}
+			}
+        }
+    }
+	.text-img{
+		position: absolute;
+		left: 42px;
+		top: 458px;
+		width: 180px;
+		height: auto;
+		z-index: 9;
+	}
+    .tabList{
+		position: absolute;
+		width: 100%;
+		height:246px;
+		bottom:0px;
+		overflow-x: auto;
+		overflow-y: hidden;
+		z-index: 2;
+        .tab-item{
+			width:196px;
+            margin-right: 20px;
+            font-family: "Verdana";
+            font-weight: 400;
+            font-size: 24px;
+            color: #576937;
+			text-align:center;
+			padding:2px;
+			border-radius: 12px;
+			// border:solid 2px #65574933;
+			// box-shadow: 0 4px 40px #65574933;
+			background: #c0ddb5;
+			box-shadow: 0 4px 40px rgba(101, 87, 73, 0.2);
+			filter: drop-shadow(0 4px 40px #65574933);
+			box-sizing: border-box;
+			// &.tabActive{
+			// 	position: relative;
+			// 	font-weight: 700;
+			// 	color: #4d463f;
+			// 	// border:solid 2px #65574933;
+			// 	background: rgba(254, 176, 102, 0.5);
+			// 	filter: drop-shadow(0 4px 40px #65574933);
+			// }
+			&:first-child{
+			    margin-left: 30px;;
+			}
+            &:last-child{
+                margin-right: 30px;
+            }
+			.tab-img{
+				width: 192px;
+				height: 192px;
+				object-fit: cover;
+				border-radius: 12px;
+			}
+			.tab-info{
+				width:100%;
+				padding:6px 10px;
+				box-sizing: border-box;
+			}
+        }
+    }
+    .textAbout{
+        font-family: "DIN Alternate Bold";
+        font-weight: 700;
+        font-size: 20px;
+        // color: rgba(255, 255, 255, 0.3);
+		opacity: 0.3;
+		margin-left:10px;
+    }
+    .booking-info{
+        margin-left: 40px;
+        margin-right: 40px;
+        margin-top: 60px;
+        margin-bottom: 160px;
+        position: relative;
+        // border: 2px solid rgba(255, 255, 255, 0.5);
+		// border-top:none;
+        // padding: 60px 30px 20px;
+		box-sizing: border-box;
+		color: #fff;
+		z-index: 3;
+		.title{
+			font-family: "Verdana Bold";
+			font-weight: 700;
+			font-size: 32px;
+			margin-bottom: 30px;
+		}
+		.line{
+			position: absolute;
+			top:0px;
+			width: 100px;
+			height:2px;
+			background-color: rgba(255, 255, 255, 0.5);
+		}
+		.left-line{
+			left:0px;
+		}
+		.right-line{
+			right:0px;
+		}
+        // .booking-info-bg{
+        //     position: absolute;
+        //     top: 0;
+        //     left: 0;
+        //     width: 100%;
+        //     height: unset;
+        // }
+        .writingBox{
+			padding:0px 10px;
+            // width: 440px;
+            width: max-content;
+            height: 120px;
+            position: absolute;
+            // margin-top: -45px;
+            // font-family: "STFangsong";
+            font-weight: 400;
+            
+            // color: #fff;
+            top: -60px;
+            box-sizing: border-box;
+            left: 50%;
+            transform: translate(-50%,0);
+            // background-color: #FFF;
+			// background-color: transparent;
+			// backdrop-filter: blur(20px);
+            
+            .writing-img{
+                width: 120px;
+                height: 120px;
+                min-width: 120px;
+                filter: drop-shadow(0 3px 4px #00000029); 
+                box-sizing: border-box;
+                border-radius: 50%;
+                border: 6px solid #F5F5F5;
+				margin-right:30px;
+            }
+            .wiriting-right{
+                // text-align: right;
+                padding-right: 20px;
+                .wiriting-text{
+                    // height: 60px;
+                }
+            }
+            
+        }
+        .info-bar{
+            // padding: 80px 50px 140px;
+            display: flex;
+            flex-wrap: wrap;
+            
+            .info-item{
+                // color: #fff;
+                width: 33.33%;
+                
+                margin-bottom: 40px;
+                padding-left: 10px;
+                box-sizing: border-box;
+                // &:nth-child(3n-1){
+                //     width: 39.66%;
+                // }
+                // &:nth-child(3n-2){
+                //     width: 27%;
+                // }
+                &:nth-child(3n-2){
+                    padding-left: 0;
+                }
+                
+            }
+            .info-item-label{
+                font-family: "Verdana";
+                font-weight: 400;
+                font-size: 26px;
+                margin-bottom: 4px;
+				opacity: 0.76;
+            }
+            .info-item-value{
+                font-family: "DIN Alternate Bold";
+                font-weight: 700;
+                font-size: 32px;
+                // white-space: nowrap;
+            }
+        }
+    }
+}
+.swiper-img-gs-mh {
+	// width: 100vw;
+	// top:0px;
+	height: 100%;
+	top:750px;
+	width: 100%;
+	opacity: 0.85;
+	position: absolute;
+	left: 0;
+	
+	z-index: 1;
+	overflow: hidden;
+	box-sizing: border-box;
+	.img{
+		width: 100%;
+		height: 100%;
+		filter: blur(20px);
+		transform: scale(1.2);
+		object-fit: cover;
+	}
+}
+.bottom-view{
+    position: relative;
+    width: 100%;
+	padding-top:128px;
+	padding-bottom:300px;
+    box-sizing: border-box;
+	z-index: 3;
+    .bottom-title{
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 28px;
+		text-align: center;
+		color: #fff;
+		text-shadow: 0 0 8px rgba(0, 0, 0, 0.17);
+	}
+	.bottom-tips{
+		font-family: "Verdana";
+		font-weight: 400;
+		font-size: 28px;
+		line-height: 48px;
+		text-align: center;
+		margin-top:8px;
+		margin-bottom:40px;
+		opacity: 0.6;
+	}
+    .bottom-btn{
+        width: 290px;
+        height: 80px;
+        border-radius: 40px;
+		font-family: "DIN Alternate Bold";
+		font-weight: 700;
+		font-size: 28px;
+        .bottom-subtitle{
+            font-family: "DIN Alternate Bold";
+            font-weight: bold;
+            font-size: 30px;
+            white-space: nowrap;
+        }
+    }
+	.btn-qw{
+		background: rgba(246, 165, 83, 0.2);
+		color: #f6a553;
+		margin-right:30px;
+	}
+    .btn-share{
+        background: #f6a553;
+        box-shadow: 0 6px 20px rgba(208, 193, 168, 0.31);
+		color: #fff;
+    }
+	.icon-Shared{
+		color: #ffffff;
+		font-size:32px;
+		margin-right:20px;
+	}
+}

src/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize.vue

@@ -0,0 +1,227 @@
+<template src="./webgl_rxdz_text_customize.html">
+</template>
+
+<script>
+    const util = require('@/utils/util.js').default;
+	const config = require('@/services/urlConfig.js');
+	import router from "@/router";
+	import touchHandle from '@/mixins/touchHandle.js';
+	import commonPageMethod from '@/mixins/commonPageMethod.js';
+// const app = getApp(); //获取应用实例
+// import requestConfig from '@/static/lib/requestConfig.js';
+// import commonPageMethod from '@/common/commonPageMethod.js';
+// import commonMethod from '@/common/commonMethod.js';
+export default {
+    mixins: [touchHandle,commonPageMethod],
+    /**
+     * 页面的初始数据
+     */
+    data() {
+        return {
+            pvId: 'p_2cmina_23080403',
+            locusBehaviorName: "提交页面",
+            locusValue: "",
+            locusName: "",
+            pvCurPageName: "submit_ret",
+            pvCurPageParams: null,
+            navbar: {
+                showCapsule: 1,
+                title: '我的定制',
+                titleColor: '#fff',
+                navPadding: 0,
+                navPaddingBg:'transparent',
+                navBarColor: 'transparent',
+                navBackColor: 'transparent',
+                haveCallback: false, // 如果是 true 会接手 navbarBackClk
+                fromShare: false,
+                fromProject: 0,
+                shareToken: "",
+                pageName: this.pvCurPageName,
+            },
+            houseId: $config.houseIdHs,
+
+            shareUserId: null, // 分享者ID
+            id: '6523d91af65c626211ee21c8',//方案库id
+
+            currImgIdx:0,
+            tabIndex: 0,
+            // featureImgList: [],
+            hardboundEffect: [],//当前swiper数据列表对象
+            form: {},
+			tabData:[],
+            number: '',
+			plotHeadDeafultImg: 'https://dm.static.elab-plus.com/mini-program/plotHeadDeafultImg.png', // 地块人物默认头像
+			showPhoneModel:false,
+			gsImage:'',
+			layoutStruct:null,
+			expand:null,
+		}
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    mounted(options) {
+        console.log("***onLoad-webgl_rxdz_customize***", this.$route.query)
+        const that = this;
+        this.houseId = this.$route.query.houseId?this.$route.query.houseId:'';
+        // this.spaceId = this.$route.query.spaceId?this.$route.query.spaceId:'';
+        this.id = this.$route.query.id?this.$route.query.id:'6523d91af65c626211ee21c8';
+		if(!this.id){
+			this.showToast("没有数据！");
+			return false;
+		}else{
+			this.getIdData();
+		}
+    },
+	computed: {
+		userId() {
+			return this.$store.state.userId;
+		},
+	},
+
+    methods: {
+		swiperChangeImg(e){
+            console.log("***swiperChangeImg***",e);
+			this.currImgIdx = e.detail ? e.detail.current : e;
+			this.gsImage =  this.hardboundEffect[this.currImgIdx];//获取高斯模糊的图片
+        },
+		rightScroll(){//右滑
+			if(this.currImgIdx <= (this.hardboundEffect.length - 1) && this.currImgIdx > 0){
+				this.$refs.carousel.prev();
+			}
+		},
+		leftScroll(){//继续生成
+			if(this.currImgIdx != this.hardboundEffect.length - 1){
+				if(this.currImgIdx<this.hardboundEffect.length - 1){
+					this.$refs.carousel.next();
+				}
+			}
+		},
+        navigateFuc(){
+			if(window.__wxjs_environment === 'miniprogram'){
+				wx.miniProgram.navigateTo({url: '/pages/transfer/transfer?event=openCustomerServiceChat&houseId='+this.houseId})
+			}else{
+				this.$message.warning("敬请期待");
+			}
+		},
+		optionChange(){
+			if(window.__wxjs_environment === 'miniprogram'){
+				wx.miniProgram.redirectTo({url: '/pages/index/index?houseId='+$config.xcxHouseId})
+			}else{
+				this.$message.warning("敬请期待");
+			}
+		},
+        async getIdData(){
+			let userId = this.userId || '';
+            let params = {
+                id: this.id,
+                brandId: $config.brandId,
+				houseId:this.houseId,
+				userId,
+				type:'QIANCE',
+            };
+			if(this.shareUserId){//分享时 不带用户id
+				delete params.userId
+			}
+            // params.userId = this.userId;
+            const res = await requestConfig('getCustomizedRecord', params);
+            if (res.success && res.list && res.list[0]) {
+                let single = res.list[0];
+				this.tabIndex = 0;//表明是户型首图
+				this.tabData = [];
+				if(single.expand){
+					this.expand = JSON.parse(single.expand);
+					// this.tabDataHandle(single.expand)
+				}
+				this.layoutStruct = JSON.parse(JSON.stringify(single));
+                // this.number = single.landCode
+                this.form = single.layoutStruct[0];
+
+                this.hardboundEffect = this.form.layoutImgCustomized? [this.form.layoutImgCustomized] : [];//赋值轮播图
+				let data = {
+					name : this.form.layoutName,
+					imgUrl : this.form.layoutImgCustomized,
+					hardboundEffect:[this.form.layoutImgCustomized],
+					gsImage:this.form.layoutImgCustomized,
+					area:this.form.layoutArea,
+				}
+                this.tabData.push(data);
+				this.form.houseJson = this.form.houseJson.filter((item)=>{
+					return item.spaceName && item.spaceName.length>0 && item.spaceType!=11 && item.hardboundEffect && item.hardboundEffect[0]
+				})
+				this.form.houseJson.sort(function(a,b){return parseFloat((b.spaceWidth * b.spaceHeight) / 10000) -parseFloat((a.spaceWidth * a.spaceHeight) / 10000)});
+				this.form.houseJson.forEach((item,index)=>{
+					//获取面积
+					let curSpaceArea = parseFloat((item.spaceWidth * item.spaceHeight) / 10000).toFixed(1);
+					let data = {
+						name : item.spaceName,
+						imgUrl : item.hardboundEffect[0],
+						hardboundEffect:item.hardboundEffect,
+						gsImage:item.hardboundEffect[0],
+						area:item.spaceId?curSpaceArea:'',
+					}
+					this.tabData.push(data);
+				})
+				this.gsImage = this.form.layoutImgCustomized;//获取高斯模糊的图片
+            }
+        },
+        changeTab(id){
+            if(id == this.tabIndex){
+                return
+            }
+            this.tabIndex = id;
+            this.currImgIdx = 0;
+			this.hardboundEffect = this.tabData[id].hardboundEffect? this.tabData[id].hardboundEffect : [];//赋值轮播图
+			this.gsImage = this.tabData[id].gsImage;//获取高斯模糊的图片
+            let param = {
+                type: 'CLK', //埋点类型
+                clkId: 'clk_2cmina_23080421', //点击ID
+                clkName: 'roomretpic_clk', //点击前往的页面名称
+                clkParams: {
+                    type: this.tabData[this.tabIndex].name,
+                    locusName: "房间名称",
+                }
+            };
+            util.trackRequest(param);
+        },
+        
+        catchTouchMove: function() {
+            return false;
+        },
+        
+        toMode(){
+			let data = {
+				houseId:this.houseId,
+				id:this.id,
+			}
+			router.push({
+				name: "webgl_rxdz_look",
+				query:data
+			});
+			let param = {
+				type: 'CLK', //埋点类型
+				clkId: 'clk_2cmina_23080420', //点击ID
+				clkName: 'checkroom_clk', //点击前往的页面名称
+				clkParams: {
+					locusName: "查看户型",
+				}
+			};
+			util.trackRequest(param);
+		},
+        showToast(title){
+        	this.$store.state.loading = true;
+        	this.$store.state.loadingMsg = title || "";
+        	setTimeout(()=>{
+        		this.$store.state.loading = false;
+        	}, 1500);
+        }
+    }
+    
+}
+</script>
+<style lang="scss" scoped>
+	@import "./webgl_rxdz_text_customize.scss";
+</style>
+<style lang="css" scoped>
+	/* @import "@/common/css/common.css"; */
+</style>

src/router/index.js

@@ -19,6 +19,8 @@ import webgl_rxdz_krpanoclipImg from '@/pages/webgl_rxdz_krpanoclipImg/webgl_rxd
 import webgl_rxdz_role from '@/pages/webgl_rxdz_role/webgl_rxdz_role';//角色偏好
 import webgl_rxdz_houseList from '@/pages/webgl_rxdz_houseList/webgl_rxdz_houseList';//空间偏好
 import webgl_rxdz_test from '@/pages/webgl_rxdz_test/webgl_rxdz_test';//前测-精细调整
+import webgl_rxdz_env from '@/pages/webgl_rxdz_env/webgl_rxdz_env';//前测-环境偏好
+import webgl_rxdz_text_customize from '@/pages/webgl_rxdz_text_customize/webgl_rxdz_text_customize';//前测-结果查看
 
 Vue.use(Router)
 const router = new Router({
@@ -149,6 +151,22 @@ const router = new Router({
 			meta:{
 				keepAlive:false
 			}
+		},
+		{
+			path: '/pages/webgl_rxdz_env',
+			name: 'webgl_rxdz_env',
+			component: webgl_rxdz_env,
+			meta:{
+				keepAlive:false
+			}
+		},
+		{
+			path: '/pages/webgl_rxdz_text_customize',
+			name: 'webgl_rxdz_text_customize',
+			component: webgl_rxdz_text_customize,
+			meta:{
+				keepAlive:false
+			}
 		}
     ],
 })