zjs_project 1 年之前
父节点
当前提交
7edc56e201

+ 15 - 0
src/components/mynavbar/mynavbar.html

@@ -0,0 +1,15 @@
+<div>
+	<div class="nav-wrap" :style="{'height': height?height:'64px'}">
+		<div v-if="barData.navBarColor" :style="{'position':'absolute','width':'100vw','height':height,'background-color':barData.navBarColor}"></div>
+		<div class="nav-title" :style="{'line-height':('calc('+height+' - '+statusBarHeight+')'),'color': (barData.titleColor || '#fff'),'top':statusBarHeight}">
+			{{barData.title || baiduTitle}}
+			<slot name="titleImg"></slot>
+		</div>
+		<div v-if="barData.showCapsule&&!hideNavbarFlag" class="nav-capsule" :style="{'top':(statusBarHeight),height:('calc('+height+' - '+statusBarHeight+')')}" @click="navback" :data-url="(barData.url || '')">
+			<div>
+				<div class="back-pre" v-if="height && height.length>0" :style="{'border-color': (barData.titleColor || '#fff')}"></div>
+			</div>
+		</div>
+	</div>
+	<div v-if="barData.navPadding" class="nav-padding" :style="{'height':height,'background-color':(barData.navPaddingBg?barData.navPaddingBg:'#000'),'position':'relative'}" ></div>
+</div>

+ 198 - 0
src/components/mynavbar/mynavbar.scss

@@ -0,0 +1,198 @@
+/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
+.nav-wrap {
+  position: fixed;
+  width: 100vw;
+  top: 0;
+  z-index: 300;
+}
+.style1{
+	top: 50%!important;
+	transform:translateY(-50%)!important;
+}
+.style2{display:block;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
+.nav-bottom{
+  position: fixed;
+  width: 100%;
+  height: 5px;
+  color: #000;
+  z-index: 300;
+}
+/* 标题要居中 */
+.nav-title {
+  position: absolute;
+  text-align: center;
+  max-width: 400rem;
+  /* overflow: hidden; */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  color: #fff;
+  font-size: 32rem;
+  font-weight: bold;
+}
+.nav-capsule {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  /*margin-left: 30rem;*/
+  width: 180rem;
+  justify-content: space-between;
+  height: 100%;
+  z-index: 4;
+
+}
+.nav-buildStyle {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 100%;
+	background-color: initial!important;
+}
+.nav-buildCityStyle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+
+  /*background-color: #2ab4ff;*/
+}
+.back-pre {
+  width: 24rem;
+  height: 24rem;
+  border-top: 4rem solid #fff;
+  border-left: 4rem solid #fff;
+  transform: rotate(-45deg);
+  margin-left: 30rem;
+}
+.nav-padding {
+  width: 100%;
+  background-color: #000;
+  position: relative;
+}
+.icon_xiala{
+  width: 16rem;
+  height: 10rem;
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  transform:translateY(-50%);
+}
+.icon-gengduo1{
+    transform: rotate(90deg);
+    font-size: 20rem;
+    color: #fff;
+    display: inline-block;
+}
+.icon-weizhibai1{
+    font-size: 26rem;
+}
+.noticeBtnContainer{
+  position: absolute;
+  left: 70rem;
+}
+.noticeBtn{
+  width: 140rem;
+  height:60rem;
+  background:rgba(255,255,255,0.3);
+  border-radius:30rem;
+}
+.justContentCenter{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  align-content: center;
+}
+.adver-name{
+	font-weight: 400;
+	font-size: 30rem;
+	text-align: center;
+	color: #212121;
+}
+.adver-head{
+	font-size: 0rem;
+	margin-right: 20rem;
+	position: relative;
+}
+.head-img{
+	width: 50rem;
+	height: 50rem;
+	border-radius: 50%;
+}
+.adver-online{
+	position: absolute;
+	width: 32rem;
+	height: 32rem;
+	right: -5rem;
+	bottom: -2rem;
+	box-sizing: border-box;
+	background: #75cf4a;
+	border: 4rem solid #fff;
+	border-radius: 50%;
+}
+.adver-tag{
+	width: 120rem;
+	height: 36rem;
+	border-radius: 18rem;
+	background: #3e87f7;
+	font-weight: 600;
+	font-size: 22rem;
+	color: #fff;
+	box-sizing: border-box;
+	margin-left: 20rem;
+	justify-content: center;
+}
+.adver-status{
+	font-weight: 400;
+	font-size: 28rem;
+	letter-spacing: 0.08rem;
+	text-align: left;
+	color: rgba(0, 0, 0, 0.3);
+	line-height: 28rem;
+}
+
+
+/* 朋友页面头部样式 */
+.friend-tab{
+  width: 750rem;
+  height: 100%;
+  text-align: center;
+  border-bottom: 1rem solid #ededed;
+  box-sizing: border-box;
+}
+.tab-area{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: transparent;
+  width: 300rem;
+  height: 100%;
+  margin: auto;
+}
+.tab-item{
+  position: relative;
+  font-family: "Verdana";
+  font-size: 30rem;
+  color: rgba(22, 23, 34,0.5);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.tabActive{
+  font-weight: bold;
+  font-size: 15px;
+  text-align: left;
+  color: #161722;
+}
+.tabActive:after{
+  position: absolute;
+  bottom: 0;
+  content: ' ';
+  width: 100%;
+  height: 4rem;
+  background-color: #161722;
+  left: 0;
+}

+ 185 - 0
src/components/mynavbar/mynavbar.vue

@@ -0,0 +1,185 @@
+<template src="./mynavbar.html">
+
+</template>
+<script>
+	const util = require('@/utils/util.js').default;
+	import router from "@/router";
+	// const config = require('../../static/config.js');
+	// let app = getApp(); //获取应用实例
+	export default {
+		props: {
+			// data
+			// 由父页面传递的数据,变量名字自命名
+			barData: {
+				type: Object,
+				default: {
+					showCapsule: 1,
+					navPadding: 0,
+					navPaddingBg: '#fff',
+					url: '',
+					haveCallback: false,
+					fromShare: false,
+					fromProject: 0,
+					pageId: null,
+					shareToken: null,
+					buildingStyleData: null,
+					buildingCityStyleData: null,
+					currentSelectCity: "",
+					normalStatus: true, //常态组件,icon
+					pageName: "",
+					houseId: "",
+					showNoticeBtn: false,
+					friendTab: [], // 朋友列表
+					friendIndex: 0, // 索引页
+					hasImg: false,
+				}
+			},
+			pageTheme: {
+				type: [Object, Array],
+				default: () => {
+					return {
+						textColor1: '', //主文字颜色
+					}
+				}
+			},
+		},
+		watch: {
+			barData: {
+				handler(newVal, oldVal) {
+					console.warn("***barData-change***", newVal);
+				}
+			}
+		},
+		data() {
+			return {
+				hideNavbarFlag: false,
+				height: '64px',
+				statusBarHeight: '20px',
+				// 默认值  默认显示左上角
+				defaultData: {
+					showCapsule: 1,
+					navPadding: 0,
+					navPaddingBg: '',
+					url: '',
+					haveCallback: false,
+					fromShare: false,
+					fromProject: 0,
+					pageId: null,
+					shareToken: null,
+					buildingStyleData: null,
+					buildingCityStyleData: null,
+					currentSelectCity: "",
+					normalStatus: true, //常态组件,icon
+					pageName: "",
+					houseId: "",
+					showNoticeBtn: false,
+					hasImg: false,
+				},
+				specialPage: false,
+				baiduTitle: "",
+				currentSelectCity: '',
+			}
+		},
+		mounted: function() {
+			console.warn("***navbar***", this.height, this.statusBarHeight)
+		},
+		methods: {
+			// 朋友页选择tab
+			tabChange(item) {
+				this.$emit("tabChange", item.id);
+			},
+			compareVersion(v1, v2) {
+				v1 = v1.split('.')
+				v2 = v2.split('.')
+				var len = Math.max(v1.length, v2.length)
+
+				while (v1.length < len) {
+					v1.push('0')
+				}
+				while (v2.length < len) {
+					v2.push('0')
+				}
+
+				for (var i = 0; i < len; i++) {
+					var num1 = parseInt(v1[i])
+					var num2 = parseInt(v2[i])
+
+					if (num1 > num2) {
+						return 1
+					} else if (num1 < num2) {
+						return -1
+					}
+				}
+
+				return 0
+			},
+			navigateFuc(e) {
+				let eventOption = {};
+				this.$emit("FloatCpClk", e, eventOption);
+			},
+			/**
+			 * 跳转城市
+			 */
+			cityCpClk(e) {
+				let eventOption = {};
+				this.$emit("cityCpClk", e, eventOption);
+			},
+			//去往城市切换页面
+			goCity() {
+
+			},
+			// 返回上一步
+			navbackCallback() {
+				const {
+					haveCallback
+				} = this.barData || this.defaultData;
+				if (haveCallback) {
+					this.$emit('navbarBackCallback');
+					return true;
+				}
+				return false;
+			},
+			// 返回上一页面
+			navback(e) {
+				const {
+					url
+				} = this.barData || this.defaultData;
+				const {
+					fromShare
+				} = this.barData || this.defaultData;
+				const {
+					houseId
+				} = this.barData || this.defaultData;
+				const {
+					shareToken
+				} = this.barData || this.defaultData;
+				const {
+					pageName
+				} = this.barData || this.defaultData;
+				// 如果有返回url
+				if (url) {
+					uni.navigateTo({
+						url
+					});
+					return;
+				}
+				// 查看是否是回上一步
+				if (this.navbackCallback()) return;
+				// 是否通过分享进来的
+				if (!fromShare) { //不是通过分享进入小程序的
+					// uni.navigateBack();
+					router.go(-1);
+				} else { //当前用户是通过分享进入小程序的
+					//如果当前页面不是项目首页 且存在 houseId 则意味着需要返回到项目首页去
+					console.log('点击返回')
+					router.push({
+						name: "webgl_rxdz",
+					});
+				}
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "./mynavbar.scss";
+</style>

+ 5 - 7
src/components/newBottomCom/viewShell/viewShell.vue

@@ -2,8 +2,7 @@
 
 </template>
 <script>
-	// const util = require('@/static/utils/util.js');
-	const config = require('@/services/urlConfig.js');
+	const util = require('@/utils/util.js').default;
 	// import commonMethod from '@/common/commonMethod.js';
 	import touchHandle from '@/mixins/touchHandle.js';
 	// import requestConfig from '@/static/lib/requestConfig';
@@ -29,7 +28,6 @@
 				shellHeight:'200rem',
 				isShare: false,
 				shareVideoItem:null,
-				actPageId: config.actPageId,
 				styleType:1,	//当前底部组件的状态
 				seedItem:null,	//当前选中的种子户型
 				showSignscoll:true,	//是否显示手势操作区域
@@ -182,7 +180,7 @@
 						locusName: "楼层切换",
 					}
 				};
-				// util.trackRequest(param);
+				util.trackRequest(param);
 				this.$emit("curHouseFloorChange", item);//通知页面,户型楼层发生了变更
 			},
 			//种子户型变更-户型大类变更
@@ -246,7 +244,7 @@
 							userparamter:carefulList,
 						}
 					};
-					// util.trackRequest(trackparam);
+					util.trackRequest(trackparam);
 				}
 			},
 			mynavigateFuc(e) {
@@ -259,8 +257,8 @@
 							locusName: "联系定制",
 						}
 					};
-					// util.trackRequest(param);
-					this.navigateFuc(e);
+					util.trackRequest(param);
+					this.$message.warning("敬请期待")
 				}
 			},
 		}

+ 3 - 0
src/main.js

@@ -17,9 +17,12 @@ import "@/assets/font/iconfont.css"; //引用公共icon库
 // import previewComponent from "@/components/previewComponent/previewComponent.js"; // 公共图片视频预览
 import "@/utils/command.js"; // 自定义指令
 import {message} from "@/utils/resetMessage";
+
+import mynavbar from '@/components/mynavbar/mynavbar.vue'
 // import checkPermission from "@/utils/permission";
 
 Vue.use(ElementUI); //导入ele-ui
+Vue.component('mynavbar', mynavbar)
 // Vue.prototype.$popUp = popUpComponent;
 // Vue.prototype.$preview = previewComponent;
 window.$bus = new Vue(); //定义一个事件总线对象-方便组件通讯

+ 1 - 0
src/pages/webgl_rxdz/webgl_rxdz.html

@@ -5,6 +5,7 @@
 	<router-view></router-view>
 </div> -->
 <div class="map" style="position: absolute;width: 100%;height: 100vh;z-index: 1;">
+	<mynavbar :barData='navbar'/>
 	<!-- 提交按钮 -->
 	<div class="submit-btn" @click="submitHouse">提交</div>
 	

+ 1 - 1
src/pages/webgl_rxdz/webgl_rxdz.scss

@@ -150,7 +150,7 @@ canvas { width:100vw; height:calc(100vh - 200rem);z-index: 10; }
 }
 .submit-btn{
 	position: absolute;
-	top:60rem;
+	top:120rem;
 	right:20rem;
 	width: 140rem;
 	height: 64rem;

+ 3 - 4
src/pages/webgl_rxdz/webgl_rxdz.vue

@@ -35,7 +35,7 @@
 				pvId: 'p_2cmina_23080401',
 				canvas:null,
 				navbar: {
-					showCapsule: 1,
+					showCapsule: 0,
 					title: '',
 					titleColor: '#000',
 					navPadding: 0,
@@ -263,10 +263,9 @@
 				
 				// that.controls = controls;
 				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
-                // 监听
-                // renderer.domElement.addEventListener('resize', onWindowResize );
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				container.appendChild(stats.dom);
+				stats.domElement.style.top = '100px';
 				attendEvent();	//注册监听事件
 				starRender();	//启动渲染
 				cameraInit();	//初始化摄像头

+ 1 - 0
src/pages/webgl_rxdz_look/webgl_rxdz_look.html

@@ -1,5 +1,6 @@
 <!-- 模型查看页面 -->
 <div class="main-view">
+	<mynavbar :barData='navbar'/>
 	<div id="mapDiv" ref="webgl"></div>
 	<canvas id="canvas_webgl" type="webgl" ref="glcanvas" width="100vw" height="100vh"></canvas>
 	<div v-show="showLables && gltf.text.length>0" v-for="(gltf,index) in lableItem" :key="index" class="word-view"

+ 3 - 9
src/pages/webgl_rxdz_look/webgl_rxdz_look.vue

@@ -120,7 +120,7 @@
             let container = this.$refs.webgl;
             let canvas3d = this.canvas = this.$refs.glcanvas;
 
-			let clock = null, controls = {target:{}};
+			let controls = null;
 			let camera = null, renderer = null, mixer = null;
 
             let loader = this.loader = new GLTFLoader();
@@ -153,13 +153,6 @@
 				camera.up.set(0, 1, 0);//俯视状态,将相机的up向量设置为z轴负方向
 				scene.add(camera);
                 that.camera = camera;
-                // 时间
-                clock = new THREE.Clock();
-				// 辅助方格
-				// const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
-				// gridHelper.position.y = 0;
-				// gridHelper.position.x = 0;
-				// scene.add(gridHelper);
 
                 // 环境光会均匀的照亮场景中的所有物体
                 const ambientLight = new THREE.AmbientLight(0xFFEFE0, 1.48 );
@@ -199,7 +192,8 @@
 				controls.enableZoom = true;//启用摄像机的缩放
 				
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				container.appendChild(stats.dom);
+				stats.domElement.style.top = '100px';
 				// 监听
                 window.addEventListener( 'resize', onWindowResize );
                 // raycaster = new THREE.Raycaster();

+ 1 - 1
src/pages/webgl_rxdz_roam/webgl_rxdz_roam.html

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <div class="main-view">
-	<!-- <mynavbar :barData='navbar'/> -->
+	<mynavbar :barData='navbar'/>
 	<!-- 主要操作视图 -->
 	<!-- <viewShell pageType="2" :spaceObj="curSpaceObj" @hideOrShowActor="hideOrShowActor"></viewShell> -->
 	<!-- <my-loading ref="myLoading" :myLoadingStatus="myLoadingStatus"></my-loading>

+ 11 - 12
src/pages/webgl_rxdz_roam/webgl_rxdz_roam.vue

@@ -96,17 +96,15 @@
 		beforeDestroy() {
 			cancelAnimationFrame(requestId, this.canvas)
 			this.worker && this.worker.terminate()
-			// setTimeout(() => {
-				if (this.renderer instanceof THREE.WebGLRenderer) {
-					this.renderer.dispose()
-					this.renderer.forceContextLoss()
-					this.renderer.context = null
-					this.renderer.domElement = null
-					this.renderer = null;
-					this.clearHandle()
-				}
-				TWEEN && TWEEN.removeAll();//清除所有的tween;
-			// }, 0)
+			if (this.renderer instanceof THREE.WebGLRenderer) {
+				this.renderer.dispose()
+				this.renderer.forceContextLoss()
+				this.renderer.context = null
+				this.renderer.domElement = null
+				this.renderer = null;
+				this.clearHandle()
+			}
+			TWEEN && TWEEN.removeAll();//清除所有的tween;
 			console.warn("***beforeDestroy-webgl_rxdz_roam***");
 		},
         mounted(options) {
@@ -243,7 +241,8 @@
 				// camera.lookAt(that.controlStarPosition.x,that.controlStarPosition.y,that.controlStarPosition.z);
                 raycaster = new THREE.Raycaster();
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				container.appendChild(stats.dom);
+				stats.domElement.style.top = '100px';
 				attendEvent();//注册监听事件
 				starRender();	//启动渲染
             }