增加角色

src/pages/webgl_rxdz_role/webgl_rxdz_role.html

@@ -0,0 +1,62 @@
+<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>
+                    </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>
+            <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="bottom-view columns justify-center">
+			<div class="bottom-title" :style="{'color':tabIndex==0?'#1A1A1A':'#000'}">
+				- 分享我的梦想家 -
+			</div>
+			<div class="bottom-tips" :style="{'color':tabIndex==0?'#1A1A1A':'#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/cusbg.png" />
+		</div>
+		
+    </div>
+</div>

src/pages/webgl_rxdz_role/webgl_rxdz_role.scss

@@ -0,0 +1,328 @@
+/**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:1100px;
+        .master-pic{
+            position: relative;
+			width: 100%;
+			height:930px;
+            // 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;
+					}
+				}
+			}
+        }
+    }
+    .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: #1d1d1d;
+			text-align:center;
+			padding:2px;
+			// border:solid 2px #65574933;
+			// box-shadow: 0 4px 40px #65574933;
+			background: #ededed;
+			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: 200px;
+				object-fit: cover;
+			}
+			.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: 30px;
+        margin-right: 30px;
+        margin-top: 130px;
+        margin-bottom: 15px;
+        position: relative;
+        border: 2px solid rgba(255, 255, 255, 0.5);
+		border-top:none;
+        padding: 90px 30px 20px;
+		box-sizing: border-box;
+		color: #fff;
+		z-index: 3;
+		.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: 28px;
+                margin-bottom: 8px;
+            }
+            .info-item-value{
+                font-family: "DIN Alternate Bold";
+                font-weight: bold;
+                font-size: 34px;
+                // white-space: nowrap;
+            }
+        }
+    }
+}
+.swiper-img-gs-mh {
+	// width: 100vw;
+	// top:0px;
+	height: calc(100% - 930px);
+	top:930px;
+	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_role/webgl_rxdz_role.vue

@@ -0,0 +1,247 @@
+<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 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: "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: '',//方案库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,
+		}
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    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("敬请期待");
+			}
+		},
+		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)
+		},
+        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 data = {
+						name : item.spaceName,
+						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_role.scss";
+</style>
+<style lang="css" scoped>
+	/* @import "@/common/css/common.css"; */
+</style>

src/router/index.js

@@ -16,6 +16,7 @@ import webgl_rxdz_krpanovr from '@/pages/webgl_rxdz_krpanovr/webgl_rxdz_krpanovr
 import webgl_rxdz_krpanoImg from '@/pages/webgl_rxdz_krpanoImg/webgl_rxdz_krpanoImg';//krpanoImg-720图
 import webgl_rxdz_krpano720 from '@/pages/webgl_rxdz_krpano720/webgl_rxdz_krpano720';//webgl_rxdz_krpano720
 import webgl_rxdz_krpanoclipImg from '@/pages/webgl_rxdz_krpanoclipImg/webgl_rxdz_krpanoclipImg';//webgl_rxdz_krpanoclipImg
+import webgl_rxdz_role from '@/pages/webgl_rxdz_role/webgl_rxdz_role';//角色偏好
 
 Vue.use(Router)
 const router = new Router({
@@ -122,6 +123,14 @@ const router = new Router({
 			meta:{
 				keepAlive:false
 			}
+		},
+		{
+			path: '/pages/webgl_rxdz_role',
+			name: 'webgl_rxdz_role',
+			component: webgl_rxdz_role,
+			meta:{
+				keepAlive:false
+			}
 		}
 		
     ],