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

<template src="./webgl_rxdz_houseList.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 houseList from "../../components/houseList/houseList.vue";
	// import houseList2 from "../../components/houseList/houseList2.vue";
	export default {
		name: 'webgl_rxdz_houseList',
		data() {
			return {
				pvId: 'p_2cmina_24012401',
				locusBehaviorName: "空间偏好",
				locusValue: "",
				locusName: "",
				pvCurPageName: "space_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,
				},
				id:'',	//题目id
				houseId: 100296,
				houseList:[],	//户型列表
				optionIndex: -1, //选项选中的序号
				tabData: [],	//
				curHouseObj:null,	//用户选择的户型
				selectIndex:-1,	//用户选择的户型序号
			}
		},
		// components: {
		// 	houseList,
		// },
		watch: {},
		mounted(options) {
			console.log("***onLoad-webgl_rxdz_houseList***", this.$route.query)
			let queryObj = getStorage('queryObj') ? JSON.parse(getStorage('queryObj')) : null;
			this.id = this.$route.query.id2 ? this.$route.query.id2 : (queryObj && queryObj.id2?queryObj.id2:'110');
			this.findHouseTypeSpaceList();
			this.queryTestcaseSingle();
			document.title = this.navbar.title;
		},
		methods: {
			backFun() {
				uni.navigateBack({
					url: 'pages/groupIndex2/groupIndex2'
				})
			},
			// selectHouseObj(obj) {
			// 	console.log("户型", obj);
			// 	this.enterAction(obj, 0, 0);
			// },
			//切换选项
			changeOption(idx, idx1) {
				if (idx1 == this.tabData[idx].checkedIndex) {
					return false;
				}
				this.tabData[idx].checkedIndex = idx1;
				// console.warn("***changeOption***", this.tabData,this.allSelect)
				// let param = {
				// 	type: 'CLK', //埋点类型
				// 	clkId: 'clk_2cmina_24012401', //点击ID
				// 	clkName: 'option_clk', //点击前往的页面名称
				// 	clkParams: {
				// 		type: this.tabData[idx].options[idx1].content,
				// 		locusName: "选项选择",
				// 	}
				// };
				// util.trackRequest(param);
				this.submitAnswer(idx,idx1);
			},
			submitAnswer(tabIndex,optionIndex){
				let userId = this.userId || '';
				let params = {
					"answerContent": [
						{
							"optionTitle": this.tabData[tabIndex].options[optionIndex].content,
							"questionTitle": this.tabData[tabIndex].subContent,//问题标题
							"subOptionId": this.tabData[tabIndex].options[optionIndex].id,
							"subQuestionId": this.tabData[tabIndex].id,
						}
					],
					brandId: $config.brandId,
					houseId: this.houseId,
					channel:this.$route.query.channel || '',
					city:this.$route.query.city || '',
					district:this.$route.query.district || '',
					province:this.$route.query.province || '',
					paperTitle:'',//试卷id
					testThemeId:'',
					testcaseId:this.id,
					uuid:userId,
					xcxCustomerId:userId,
				};
				requestConfig('submitAnswer', params,true);
			},
			changeHouse(item,index){
				this.curHouseObj = item;
				this.selectIndex = index;
				console.log("changeHouse: ", this.curHouseObj,this.selectIndex);
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_24012401', //点击ID
					clkName: 'option_clk', //点击前往的页面名称
					clkParams: {
						houseType: item.houseType,
						name: item.name,
						note: item.note,
						area: item.houseArea,
						id: item.id,
						locusName: "空间选择",
					}
				};
				util.trackRequest(param);
			},
			//查询题目数据
			async queryTestcaseSingle() {
				let params = {
					id: this.id,
					brandId: $config.brandId,
					houseId: this.houseId,
				};
				const res = await requestConfig('queryTestcaseSingle', params);
				if (res.success) {
					let list = res.list;
					list.forEach(it => it.checkedIndex = -1); //增加当前题目用户选择的需要，默认不选中
					this.tabData = list;
				}
			},
			// 查询户型列表
			async findHouseTypeSpaceList() {
				// const { houseId, brandId } = getApp().globalData;
				var parmas = {
					brandId: 94,
					houseId: this.houseId,
					pageNo: 1,
					pageSize: 2000,
					isCloud: 1,
				};
				let res = await requestConfig("findHouseTypeSpaceList",parmas);
				if (res.success && res.pageModel) {
					let list = res.pageModel.resultSet || [];
					list && list.forEach((item,index)=>{
						if(item.houseJson){
							let spaceList = JSON.parse(item.houseJson);
							// 交换centerX， centerY
							for (let index = 0; index < spaceList.length; index++) {
							    var element = spaceList[index];
							    const {centerX, centerY} = element;
							    element.centerX = centerY;
							    element.centerY = centerX;
							}
							item.houseJson = JSON.stringify(spaceList);
							console.log("户型详情列表: ", spaceList);
						}
					})
					this.houseList = res.pageModel.resultSet || [];
				}
			},
			//进入下一步
			enterAction() {
				let index = this.tabData.findIndex(it=>it.checkedIndex==-1);
				if(index>-1){
					Toast({
						message: this.tabData[index].fatherContent + '选项不能为空',
					});
					return false;
				}
				if(!this.curHouseObj){
					Toast({
						message: '请选择喜欢的空间',
					});
					return false;
				}
				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,
				}
				router.push({
					name: "webgl_rxdz_test",
					query:data
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	@import "./webgl_rxdz_houseList.scss";
</style>