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

<template src="./webgl_rxdz_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';
	import spaceTypes from '@/static/spaceTypesIE.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,
			TdIndex:0,
		}
    },
    /**
     * 生命周期函数--监听页面加载
     */
    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:'';
		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='+this.houseId})
			}else{
				this.$message.warning("敬请期待");
			}
		},
		tabDataHandle(expand){
			let tmp = expand;
			if(!tmp || !tmp.landImg || !tmp.baseImg){
				return false
			}
			let data = {
				name : "我的地块",
				imgUrl : tmp.landImg,
				hardboundEffect:[tmp.landImg],
				gsImage:tmp.landImg,
				area:'',
			}
			this.tabData.push(data);
			data = {
				name : "我的房子",
				imgUrl : tmp.baseImg,
				hardboundEffect:[tmp.baseImg,tmp.bgPrototypeImg],
				gsImage:tmp.baseImg,
				area:'',
			}
			this.tabData.push(data);
			this.TdIndex = 2;
		},
        async getIdData(){
			let userId = this.userId || '';
            let params = {
                id: this.id,
                brandId: $config.brandId,
				houseId:this.houseId,
				userId,
            };
			if(this.shareUserId){//分享时 不带用户id
				delete params.userId
			}
            // params.userId = this.userId;
            const res = await requestConfig('getCustomizedRecord', params);
            if (res.success ) {
                let single = res.list[0];
				this.tabIndex = 0;//表明是户型首图
				this.tabData = [];
				if(single.expand){
					single.expand = JSON.parse(single.expand);
					this.tabDataHandle(single.expand)
				}
				this.layoutStruct = JSON.parse(JSON.stringify(single));
                // this.number = single.landCode
                this.form = single.layoutStruct.find(it=>it.floor==single.curFloor);

                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.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 text = item.spaceName;
					if(item.spaceId && item.spaceType){
						text = spaceTypes[item.spaceType - 1];
						if(item.spaceType==15 && item.layoutSpaceType){
							text = spaceTypes[item.layoutSpaceType - 1]; 
						}
					}
					let data = {
						name : text,
						imgUrl : item.hardboundEffect[0],
						hardboundEffect:item.hardboundEffect,
						gsImage:item.hardboundEffect[0],
						area: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_customize.scss";
</style>
<style lang="css" scoped>
	/* @import "@/common/css/common.css"; */
</style>