|
|
@@ -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>
|
zjs_project