h5-webgl-program/src/pages/webgl_rxdz_env/webgl_rxdz_env.vue

<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,
		removeItem,
	} 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:[],	//提交的数据对象
				queryObj: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.$store.state.houseId || '');
			let queryObj = getStorage('queryObj') ? JSON.parse(getStorage('queryObj')) : null;
			this.id = this.$route.query.id3 ? this.$route.query.id3 : (queryObj && queryObj.id3?queryObj.id3:'111');
			this.queryObj = queryObj;
			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生成图存放对象
						})
					});
					let envData = getStorage('envData') ? JSON.parse(getStorage('envData')) : null;
					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;
					if(envData && envData.length>0){
						removeItem('envData');//用完后删除
					}else{
						this.submitAnswer()
					}
					
					//初始化待提交的数据对象
					// 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;
				this.currentIndex = 0;
				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);
				this.submitAnswer()
			},
			submitAnswer(){
				let userId = this.userId || '';
				let params = {
					"answerContent": [
						{
							"optionTitle": this.options[this.optionIndex].content,
							"questionTitle": this.tabData[this.tabIndex].subContent,//问题标题
							"subOptionId": this.options[this.optionIndex].id,
							"subQuestionId": this.tabData[this.tabIndex].id,
						}
					],
					brandId: $config.brandId,
					houseId: this.houseId,
					channel:this.queryObj ? this.queryObj.channel : '',
					city:this.queryObj ? this.queryObj.city : '',
					district:this.queryObj ? this.queryObj.district : '',
					province:this.queryObj ? this.queryObj.province : '',
					paperTitle:'',//试卷id
					testThemeId:'',
					testcaseId:this.id,
					uuid:userId,
					xcxCustomerId:userId,
				};
				requestConfig('submitAnswer', params,true);
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_24022003', //点击ID
					clkName: 'option_clk', //点击前往的页面名称
					clkParams: {
						locusValue: 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 checkIndexList = [];
				let userId = this.userId ? this.userId : '';
				let houseData = {
					"layoutId": curHouseObj.id,
					"layoutName": curHouseObj.name,
					"layoutArea": curHouseObj.houseArea,
					"floor": 1,
					"layoutImgCustomized": shottingImg,
					"style": "",
					"houseJson": []
				}
				firstData.forEach(it=>{
					let _dt = {
						name:it.name,
						value:it.selectOptionImageUrl,
					}
					expand.push(_dt);
				})
				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,
					});
					checkIndexList.push(tab.checkedIndex);
				})
				houseData.houseJson = spaceList.concat(otherlist);
				// houseData.expand = expand;
				let param = {
					"brandId": $config.brandId,
					"houseId": this.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);
				setStorage('envData',checkIndexList);
				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 || curHouseObj.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>