fangtanhua/pages/h5/yifang.vue

<template>
	<view class="rizhao">
		<!-- #ifdef MP-WEIXIN -->
		<web-view :src="`${url}/dist/index.html#/pages/h5/yifang?id=${id}&token=${token}`"></web-view>
		<!-- <web-view :src="`http://192.168.2.12:8080/?id=${id}&token=${token}`"></web-view> -->
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="objContaier" id="objContaier" :style="{width:conWidth + 'px',height:conHeight + 'px'}"></view>
		<view class="rizhao-louhao u-flex u-flex-wrap">
			<view class="u-flex u-col-center u-row-center louhao-active" :style="{borderColor:louhao == index ? '#1F7EFF' : '#999999'}" v-for="(item,index) in louhaoList" :key="index" @click="changelou(index)">
				<text class="text1" :style="{color:louhao == index ? '#1F7EFF' : '#999999'}">{{item.build_num}}#</text>
				<text class="text2" v-if="louhao == index">✓</text>
			</view>
			<!-- <view class="u-flex u-col-center u-row-center louhao-active" @click="zhankai()">
				<text class="text1">展开</text>
			</view> -->
		</view>
		<!-- <view class="louceng-fangxiang u-flex u-row-between">
			<text class="text">南面</text>
			<text>东西面</text>
		</view>
		<view class="louceng-jieqi">
			<view class="jieqi-box u-flex u-row-between u-flex-wrap">
				<text v-for="(a,b) in 6" :class="b == 0 ? 'text' : ''" :key="b">大寒</text>
			</view>
		</view>
		<view class="time-box u-flex u-flex-wrap">
			<view class="u-flex time-item" v-for="(a,b) in 5" :key="b">
				<text></text>
				<text>8h=日照</text>
			</view>
		</view> -->
		<scroll-view class="louceng-time-table" scroll-x="true" v-if="list.length > 0">
			<view class="u-flex-col" :style="{width:getwidth() + 'rpx'}">
				<view class="table-header">
					{{louhaoList[louhao].build_num}}#
				</view>
				<view class="body-header u-flex">
					<view class="header-title u-flex-col u-row-between">
						<text class="text1">单元</text>
						<text class="text2">楼层</text>
						<image src="../../static/images/xiegang.png" mode=""></image>
					</view>
					<view class="danyuan-header" v-for="(a,b) in list[0].unit_info" :key="b">
						<view class="danyuan-title">
							第{{a.unit}}单元
						</view>
						<view class="u-flex">
							<view class="house-title" v-for="(c,d) in a.house_info" :key="d">
								{{d + 1}}室
							</view>
						</view>
					</view>
				</view>
				<view class="body-item" v-for="(item,index) in list" :key="index">
					<view class="item-title">{{item.floor}}F</view>
					<view class="danyuan-item" v-for="(a,b) in item.unit_info" :key="b">
						<view class="house-item" style="background-color: #dafddc;" v-for="(c,d) in a.house_info" :key="d">
							<view class="house-room u-flex">
								<text>{{c.room_num}}</text>
								<text>室</text>
							</view>
							<view class="house-allprice">
								<text>{{(c.record_total_price/10000).toFixed(2)}}</text>
								<text>万元</text>
							</view>
							<view class="house-price">
								<text>{{c.record_unit_price}}</text>
								<text>元/㎡</text>
							</view>
							<view class="house-mianji">
								<text>{{c.covered_area}}</text>
								<text>㎡</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="" v-html="disclaimer"></view> -->
		<view class="" style="height: 170rpx;"></view>
		<view class="rizhao-btn u-flex u-row-between">
			<text @click="showtocall = true">隐私电话</text>
			<text @click="tochat">在线咨询</text>
		</view>
		<u-popup v-model="showtocall" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">您是否进行呼叫？</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showtocall = false">取消</text>
					<text @click="tocell">确定</text>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showlogin" mode="center" background="rgba(0,0,0,0)">
			<view class="tocall-box u-flex-col u-col-center">
				<image class="tocall-img" src="../../static/images/popup1-1.png" mode=""></image>
				<view class="u-flex-col u-col-center tocall-text">你目前处于未登录状态请前往登录</view>
				<view class="u-flex u-row-between tocall-btn">
					<text @click="showlogin = false">取消</text>
					<text @click="tologin">确定</text>
				</view>
			</view>
		</u-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	var modelUrl = '' //'https://fangcan.hdlkeji.com/dist/fixedly/兔女郎.obj'
	var modelUrl1 = '' //'https://fangcan.hdlkeji.com/dist/fixedly/兔女郎.mtl'
	var container
	var rotating = true;

	import {
		OBJLoader
	} from '../../platforms/h5/common/obj/OBJLoader.js'
	import {
		MTLLoader
	} from '../../platforms/h5/common/obj/MTLLoader.js'
	import {
		OrbitControls
	} from '../../platforms/h5/common/OrbitControls.js';
	import * as THREE from '../../platforms/h5/common/three.js';

	// 材质模型加载器，模型在服务器上
	const mtlLoader = new MTLLoader()
	const objLoader = new OBJLoader();
	export default {
		data() {
			return {
				scene: undefined,
				light: undefined,
				camera: undefined,
				controls: undefined,
				renderer: undefined,
				conWidth: uni.getSystemInfoSync().windowWidth,
				conHeight: uni.getSystemInfoSync().windowWidth - 50,


				showtocall: false,

				id: '',
				louhaoList: [],
				louhao: 0,
				list: [],
				detail: {},
				showlogin: false,
				disclaimer: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			uni.setStorageSync("token", option.token || '')
			this.getdata()
			this.getconfig()
		},

		onShow() {

		},
		mounted() {

		},
		methods: {
			getconfig() {
				this.$u.post('/api/Index/platform_config').then(res => {
					const regex = new RegExp('<img', 'gi')
					this.disclaimer = res.data.disclaimer.replace(regex, `<img style="max-width: 100%; height: auto"`)
				})
			},
			getwidth() {
				var width = 0
				this.list.forEach((item, index) => {
					if (index == 0) {
						width = width + 104
						item.unit_info.forEach(val => {
							width = width + val.house_info.length * 160
						})
					}
				})
				return width
			},
			getlist() {
				this.$u.post('/api/Property/house_detail', {
					id: this.id,
					build_num: this.louhaoList[this.louhao].build_num
				}).then(res => {
					this.list = res.data
				})
			},
			getdata() {
				this.$u.post('/api/Property/property_detail', {
					id: this.id
				}).then(res => {
					this.detail = res.data
					if (res.data.abbr_url)
						modelUrl = res.data.abbr_url
					uni.setNavigationBarTitle({
						title: res.data.name
					})
					if (modelUrl) {
						this.$nextTick(() => {
							this.setglb()
							this.animate();
						})
					}

				})
				this.$u.post('/api/Property/build_info', {
					id: this.id
				}).then(res => {
					this.louhaoList = res.data
					if (this.louhaoList.length > 0) {
						this.getlist()
					}
				})
			},
			tologin() {
				wx1.miniProgram.switchTab({
					url: "/pages/mine/mine"
				})
			},
			tochat() {
				if (uni.getStorageSync("token")) {
					this.$u.post('/api/Member/consult_record', {
						type: 2
					})
					wx1.miniProgram.navigateTo({
						url: "/pages/index/chat?hx_username=" + this.detail.hx_username + "&worker_id=" + this.detail.worker_id
					})
				} else {
					this.showlogin = true
				}
			},
			tocell() {
				if (uni.getStorageSync("token")) {
					this.$u.post('/api/Member/consult_record', {
						type: 1
					})
					window.location.href = `tel:${this.detail.privacy_phone}`
				} else {
					this.showlogin = true
				}
			},
			zhankai() {

			},
			changelou(index) {
				this.louhao = index
				this.getlist()
			},
			animate() {
				requestAnimationFrame(this.animate);
				if (rotating) {
					this.scene.rotation.y += -0.0008;
				} else {
					this.scene.rotation.y = this.scene.rotation.y;
				}
				this.renderer.render(this.scene, this.camera);
			},
			init() {
				// 创建场景
				this.scene = new THREE.Scene()
				this.scene.background = new THREE.Color('#B9D3FF')
				// 渲染
				container = document.getElementById('objContaier')
				this.renderer = new THREE.WebGLRenderer({
					antialias: false,
					alpha: true
				})
				this.renderer.outputEncoding = THREE.sRGBEncoding;
				this.renderer.setPixelRatio(window.devicePixelRatio);
				this.renderer.setSize(this.conWidth, this.conHeight);
				container.appendChild(this.renderer.domElement)

				// 相机
				this.camera = new THREE.PerspectiveCamera(45, this.conWidth / this.conHeight, 1, 1000000000)
				//设置视角离原点的位置（眼睛距离模型的距离） 



				if (modelUrl1) {
					mtlLoader.load(modelUrl1, (mtl) => {
						// console.log(JSON.parse(JSON.stringify(mtl)));
						mtl.preload()
						for (const material of Object.values(mtl.materials)) {
							material.side = THREE.DoubleSide;
						}
						objLoader.setMaterials(mtl)
						this.setobj()
					})
				} else {
					this.setobj()
				}
			},
			setobj() {
				objLoader.load(modelUrl, (root) => {
					// console.log(JSON.parse(JSON.stringify(root.children)));
					// 设置旋转中心点

					const box = new THREE.Box3().setFromObject(root);
					const boxSize = box.getSize(new THREE.Vector3()).length();
					const boxCenter = box.getCenter(new THREE.Vector3());
					root.position.x = root.position.x - boxCenter.x
					root.position.y = root.position.y - boxCenter.y
					root.position.z = root.position.z - boxCenter.z
					var num = boxSize * 0.6
					this.root = root
					this.camera.position.set(num, num, num)
					this.camera.lookAt(new THREE.Vector3(0, 0, 0))
					// 轨道控制
					this.controls = new OrbitControls(this.camera, this.renderer.domElement)
					this.controls.target.set(0, 0, 0);
					this.controls.update();

					// 光源
					const skyColor = 0xB09595;
					const groundColor = 0x594C4B;
					const intensity = 0.5;
					const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
					this.scene.add(light);
					// 直射光
					const pivotPoint = window.pivotPoint = new THREE.Object3D();
					const dcolor = 0xffffff;
					const dlight = new THREE.DirectionalLight(dcolor);
					// 设置平行光源的产生阴影的范围参数
					dlight.shadow.camera.near = 0;
					dlight.shadow.camera.far = 50000;
					dlight.shadow.camera.left = -20000;
					dlight.shadow.camera.right = 20000;
					dlight.shadow.camera.top = 20000;
					dlight.shadow.camera.bottom = -20000;
					dlight.distance = 1110;
					dlight.intensity = 0.1;
					dlight.shadow.mapSize.height = 2560;
					dlight.shadow.mapSize.width = 2560;
					dlight.castShadow = true;
					let sphereLight = new THREE.SphereGeometry(5, 32, 32); // 创建一个球形mesh，用来存放点光源
					let sphereLightMaterial = new THREE.MeshBasicMaterial({
						color: 0xac6c25
					});
					let sphereLightMesh = window.sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
					sphereLightMesh.castShadow = false; //将这个球形mesh的产生阴影和接收阴影参数打开
					sphereLightMesh.receiveShadow = false; //将这个球形mesh的产生阴影和接收阴影参数打开
					sphereLightMesh.position.set(-25000, 0, 0); //  设置此球形mesh的位置

					pivotPoint.add(sphereLightMesh); // 将球形mesh添加到点光源里
					pivotPoint.add(dlight); // 将平行光源添加到点光源里
					dlight.position.copy(sphereLightMesh.position);
					// dlight.position.set(num, num, num);
					this.scene.add(dlight);
					// 环境光
					// const ambient = new THREE.AmbientLight(0x333333, 1)
					// this.scene.add(ambient)
					// 点光源
					// const dian = new THREE.PointLight(0x333333, 1, 100);
					// dian.position.set(num, num, num);
					// this.scene.add(dian);

					// 辅助坐标线
					// var axesHelper = new THREE.AxesHelper(150);
					// this.scene.add(axesHelper);

					this.scene.add(this.root);
					// console.log(boxSize, boxCenter);
				}, (xhr) => {
					// console.log(xhr.loaded, xhr.total, 'objLoader');
					// console.log(xhr);
					// console.log((xhr.loaded / xhr.total * 100) + '% loaded');

				});
			},
			setglb() {

				this.init();

				var modelBorder = document.getElementById("objContaier");
				modelBorder.addEventListener("mouseenter", function(event) {
					rotating = false;
				});
				modelBorder.addEventListener("mouseleave", function(event) {
					rotating = true;
				});
				modelBorder.addEventListener('touchmove', function(e) {
					rotating = false;
				}, false);
				modelBorder.addEventListener('touchstart', function(e) {
					rotating = false;
				}, false);
				modelBorder.addEventListener('touchend', function(e) {
					rotating = true;
				}, false);

			}
		}
	}
	// #endif
	// #ifdef MP-WEIXIN
	export default {
		data() {
			return {
				id: '',
				token: uni.getStorageSync("token") || '',
				url: this.$url
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		methods: {

		}
	}
	// #endif	
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.rizhao {
		.tocall-box {
			position: relative;

			.tocall-img {
				width: 650rpx;
				height: 476rpx;
			}

			.tocall-btn {
				position: absolute;
				bottom: 70rpx;
				left: 0;
				width: 100%;
				padding: 0 48rpx;

				text:first-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #FFA120;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				text:last-child {
					width: 254rpx;
					line-height: 80rpx;
					background: #1F7EFF;
					border-radius: 20rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-decoration: none;
				}
			}

			.tocall-text {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				position: absolute;
				top: 244rpx;
				left: 0;
				z-index: 10;
				width: 100%;
			}
		}

		.rizhao-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 0 24rpx 54rpx 24rpx;

			text:first-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-decoration: none;
			}

			text:last-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.louceng-time-table {
			width: 702rpx;
			margin: 20rpx auto;
			background-color: #fff;

			.body-header {
				height: 124rpx;
				white-space: nowrap;
				border-bottom: 1rpx solid #CCCCCC;

				.danyuan-header {

					.danyuan-title {
						height: 58rpx;
						line-height: 58rpx;
						text-align: center;
						border-bottom: 1rpx solid #CCCCCC;
						border-right: 1rpx solid #CCCCCC;
					}

					.house-title {
						width: 160rpx;
						height: 64rpx;
						line-height: 64rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
						border-right: 1rpx solid #CCCCCC;
					}
				}

				.header-title {
					width: 104rpx;
					height: 124rpx;
					border-right: 1rpx solid #CCCCCC;
					padding: 8rpx 12rpx;
					position: relative;

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.text1 {
						width: 100%;
						text-align: right;
					}

					.text2 {
						width: 100%;
					}
				}
			}

			.body-item {
				height: 160rpx;
				white-space: nowrap;
				border-bottom: 1rpx solid #CCCCCC;

				.danyuan-item {
					display: inline-block;
					white-space: nowrap;
					vertical-align: top;

					.house-item {
						display: inline-flex;
						flex-direction: column;
						justify-content: center;
						width: 160rpx;
						padding-left: 16rpx;
						border-right: 1rpx solid #CCCCCC;
						border-bottom: 1rpx solid #CCCCCC;
						height: 160rpx;

						.house-mianji {
							text:first-child {
								font-size: 24rpx;
								color: #333333;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}

						.house-price {
							text:first-child {
								font-size: 24rpx;
								color: #1F7EFF;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}

						.house-allprice {
							text:first-child {
								font-size: 28rpx;
								color: #FFA120;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}

						.house-room {
							text:first-child {
								font-size: 24rpx;
								color: #333333;
							}

							text:last-child {
								font-size: 18rpx;
								color: #999999;
							}
						}
					}
				}

				.item-title {
					vertical-align: top;
					width: 104rpx;
					text-align: center;
					line-height: 160rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					border-right: 1rpx solid #CCCCCC;
					display: inline-block;
					min-width: 1rpx;
				}
			}


			.table-header {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 110rpx;
				border-bottom: 1rpx solid #CCCCCC;

			}
		}

		.time-box {
			width: 702rpx;
			height: 138rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;
			padding: 24rpx 20rpx 4rpx 20rpx;

			.time-item {
				margin-bottom: 20rpx;

				text:first-child {
					width: 32rpx;
					height: 32rpx;
					background: #61C86A;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				text:last-child {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-right: 40rpx;
				}
			}
		}

		.louceng-jieqi {
			background-color: #fff;
			padding-bottom: 24rpx;

			.jieqi-box {
				width: 662rpx;
				height: 164rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				margin: 0 auto;
				padding: 24rpx 20rpx 4rpx 20rpx;

				text {
					margin-bottom: 20rpx;
					width: 194rpx;
					line-height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #999999;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.text {
					color: #1F7EFF;
					border-color: #1F7EFF;
				}
			}
		}

		.louceng-fangxiang {
			padding: 24rpx 44rpx;
			background-color: #FFFFFF;

			text {
				width: 318rpx;
				line-height: 84rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #999999;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.text {
				color: #1F7EFF;
				border-color: #1F7EFF;
			}
		}

		.rizhao-louhao {
			position: sticky;
			top: 0;
			left: 0;
			z-index: 10;
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 18rpx 24rpx 18rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.louhao-active {
				margin: 0 25rpx;
				width: 92rpx;
				height: 40rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1rpx solid #999999;
				position: relative;
				margin-top: 24rpx;

				.text1 {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.text2 {
					width: 20rpx;
					line-height: 20rpx;
					background: #1F7EFF;
					border-radius: 8rpx 0px 8rpx 0px;
					text-align: center;
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 1;
					color: #fff;
					font-size: 18rpx;
				}
			}
		}
	}
</style>