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

<template src="./webgl_rxdz_role.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 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_21012301',
				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: '', //方案库id
				allSelect:false,//是否所有大类都选择了
				currImgIdx: 0,
				// featureImgList: [],
				showPhoneModel: false,
				tabIndex: 0, //当前在第几个tab
				optionIndex: -1, //选项选中的序号
				options: [], //选项数据
				roleList: [], //角色数据，单独
				tabData: [
				// 	{
				// 	id: 1,
				// 	fatherContent: '选择角色',
				// 	checkedIndex: -1, //当前选中的序号
				// 	subName: '选择你的人物角色',
				// 	options: [{
				// 			id: 1,
				// 			text: '- 爱生活 -',
				// 			content: '角色',
				// 			imageUrl: 'https://dm.static.elab-plus.com/miniProgram/role/timg17.png',
				// 		},
				// 		{
				// 			id: 2,
				// 			text: '- 爱时尚 -',
				// 			content: '角色',
				// 			imageUrl: 'https://dm.static.elab-plus.com/miniProgram/role/demo2.jpg',
				// 		}
				// 	],
				// },
				],
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		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 : '109';
			this.queryTestcaseSingle();
		},
		computed: {
			userId() {
				return this.$store.state.userId;
			},
		},

		methods: {
			swiperChangeImg(e) {
				console.log("***swiperChangeImg***", e);
				this.currImgIdx = e.detail ? e.detail.current : e;
				// this.optionIndex = this.currImgIdx;
				// this.tabData[0].checkedIndex = this.currImgIdx;
			},
			rightScroll() { //右滑
				if (this.currImgIdx <= (this.roleList.length - 1) && this.currImgIdx > 0) {
					this.$refs.carousel.prev();
				}
			},
			leftScroll() { //继续生成
				if (this.currImgIdx != this.roleList.length - 1) {
					if (this.currImgIdx < this.roleList.length - 1) {
						this.$refs.carousel.next();
					}
				}
			},
			//查询题目数据
			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); //增加当前题目用户选择的需要，默认不选中
					this.tabIndex = 0;
					this.tabData = list;
					this.options = this.tabData[0].options; //选项数据
					this.roleList = this.tabData[0].options; //单独获取角色数据
				}
			},
			//切换大类
			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_24012301', //点击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.currImgIdx = id;
					this.$refs.carousel.setActiveItem(this.currImgIdx);
				}
				this.allSelect = !this.tabData.some(it=>it.checkedIndex==-1);
				console.warn("***changeOption***", this.tabData,this.allSelect)
				let param = {
					type: 'CLK', //埋点类型
					clkId: 'clk_2cmina_24012302', //点击ID
					clkName: 'option_clk', //点击前往的页面名称
					clkParams: {
						type: this.options[this.optionIndex].content,
						locusName: "选项选择",
					}
				};
				util.trackRequest(param);
			},

			catchTouchMove: function() {
				return false;
			},
			toMode() {
				let index = this.tabData.findIndex(it=>it.checkedIndex==-1);
				if(index>-1){
					Toast({
						message: this.tabData[index].fatherContent + '选项不能为空',
					});
					return false;
				}
				// 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 data = {
				// 	houseId:this.houseId,
				// 	id:this.id,
				// }
				// router.push({
				// 	name: "webgl_rxdz_look",
				// 	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_role.scss";
</style>