230320a303 пре 1 година
родитељ
комит
1cf43b7096
4 измењених фајлова са 386 додато и 1 уклоњено
  1. 75 0
      devs.html
  2. 1 0
      index.html
  3. 20 1
      src/css/main.css
  4. 290 0
      src/js/main2.js

+ 75 - 0
devs.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+  <meta name="description" content="洪楼Plus-提供房地产信息资讯,传递房地产信息">
+  <meta name="keywords" content="洪楼Plus,提供房地产信息资讯,传递房地产信息">
+  <title>洪楼Plus</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="洪楼Plus">
+  <meta name="msapplication-TileColor" content="#ec672a">
+  <link rel="stylesheet" href="./src/css/com-pc.css">
+  <!-- Link Swiper's CSS -->
+  <link rel="stylesheet" href="./src/swiper/swiper.min.css">
+  <link rel="stylesheet" href="./src/css/main.css">
+</head>
+<body>
+  <div class="l-box">
+    <a href="./index.html" class="scoped-fixed-left">切换到区域</a>
+    <div class="scoped-fixed-rt"></div>
+    <iframe src="http://www.honglouplus.com/" frameborder="0" width="100%" height="100%" id="fullVr"></iframe>
+    <div class="l-footer">
+      <div class="lf-wrap">
+        <div class="content">
+ 
+          
+
+<!-- <button class="vr-more"  data-clipboard-text="19179124439">楼市咨询:洪楼Plus巴老师19179124439[拨打]</button> -->
+<a class="vr-more" href="tel:19179124439">楼市咨询:洪楼Plus巴老师19179124439[拨打]</a>
+
+
+
+<!-- Swiper -->
+<div class="swiper mySwiper">
+  <div class="swiper-wrapper" id="vr-nav">
+    <!-- <div class="swiper-slide">Slide 1</div> -->
+  </div>
+</div>
+
+
+
+
+
+<!-- Swiper -->
+<div class="swiper vr-main">
+  <div class="swiper-wrapper" id="vr-content">
+    <!-- <div class="vm-op">
+      <div class="w">
+        <div class="text"></div>
+      </div>
+    </div> -->
+  </div>
+  <div class="swiper-button-prev"></div>
+  <div class="swiper-button-next"></div>
+</div>
+
+
+
+
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Swiper JS -->
+  <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
+  <script src="./src/swiper/swiper.min.js"></script>
+  <!-- <script src="./src/js/clipboard.min.js"></script> -->
+  <script src="./src/js/main2.js"></script>
+</body>
+</html>

+ 1 - 0
index.html

@@ -19,6 +19,7 @@
 </head>
 <body>
   <div class="l-box">
+    <a href="./devs.html" class="scoped-fixed-left">切换到品牌</a>
     <div class="scoped-fixed-rt"></div>
     <iframe src="http://www.honglouplus.com/" frameborder="0" width="100%" height="100%" id="fullVr"></iframe>
     <div class="l-footer">

+ 20 - 1
src/css/main.css

@@ -208,4 +208,23 @@
   .swiper-button-next, .swiper-button-prev {
     display: none;
   }
-}
+}
+
+
+
+
+.scoped-fixed-left {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  cursor: pointer;
+  user-select: none;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  width: 20px;
+  padding: 10px;
+  border-radius: 0 6px 6px 0;
+}
+
+

+ 290 - 0
src/js/main2.js

@@ -0,0 +1,290 @@
+// 封装ajax
+function ajax(list) {
+	if (XMLHttpRequest) {
+		var req = new XMLHttpRequest();
+	} else {
+		var req = new ActiveXObject("Microsoft.XMLHTTP");
+	}
+	var type = list.type || 'get';
+	var data = list.data || '';
+	var isAysnch = list.isAysnch || true;
+	if (type == 'get') {
+		req.open(type, list.url + "?" + data, isAysnch);
+		req.send(null);
+	} else {
+		// console.log(req)
+		// req.responseType = 'json'
+		req.open(type, list.url, isAysnch);
+		req.send(data);
+	}
+	req.onload = function () {
+		var d = req.responseText;
+		list.success(d);
+	}
+}
+
+var curNav = ''
+var curVrKey = ''
+var swiperVrImg = ''
+var navList = []
+
+function getVr (str, bc) {
+	var formData2 = new FormData();
+	formData2.append("brand", curNav);
+	ajax({
+		type:'post',
+		url:'https://api.honglouplus.com/api/estate/brand/vr',
+		data: formData2,
+		success:function(vs){
+			var res2 = JSON.parse(vs)
+			const data2 = res2.data
+			var cHtml2 = ''
+			
+			curVrKey = data2[0].vr_key
+
+			data2.forEach(function (item) {
+				if (item.vr_key === curVrKey) {
+					cHtml2 += '<div class="vm-op swiper-slide cur" t='+ item.vr_key +'><div t='+ item.vr_key +' class="w" style="background-image: url(' + item.vr_image+'_xs)"><div class="text"><div class="t">' + item.estate_name + '</div></div></div></div>'
+				} else {
+					cHtml2 += '<div class="vm-op swiper-slide" t='+ item.vr_key +'><div t='+ item.vr_key +' class="w" style="background-image: url(' + item.vr_image+'_xs)"><div class="text"><div class="t">' + item.estate_name + '</div></div></div></div>'
+				}
+				
+			})
+			document.getElementById('vr-content').innerHTML = cHtml2
+
+
+			vrUrl = 'https://pano.honglouplus.com?id=' + curVrKey +'&plus=1'
+			document.getElementById('fullVr').setAttribute('src', vrUrl)
+
+			if (str && str === 'bc') {
+				bc()
+			} 
+			
+		}
+	})
+}
+
+
+function dealNavCur () {
+	var tt = document.getElementsByClassName("vn-op");
+	for (i = 0; i < tt.length; i++) {
+		var ul = document.querySelectorAll('.vn-op')[i]
+		var curClass = ul.getAttribute('class').replace('cur', '')
+		if (ul.getAttribute('t') === curNav) curClass += ' cur'
+		ul.setAttribute('class', curClass)
+	}
+}
+function dealUrlCur () {
+	var tt2 = document.getElementsByClassName("vm-op");
+	for (i = 0; i < tt2.length; i++) {
+		var ul2 = document.querySelectorAll('.vm-op')[i]
+		var curClass2 = ul2.getAttribute('class').replace('cur', '')
+		if (ul2.getAttribute('t') === curVrKey) curClass2 += ' cur'
+		ul2.setAttribute('class', curClass2)
+	}
+}
+
+function dealVrUrl () {
+
+	swiperVrImg = new Swiper(".vr-main", {
+		// loop: true,
+		// speed: 1000,
+		slidesPerView: document.body.clientWidth > 700 ? 7 : 6,
+		spaceBetween: document.body.clientWidth > 700 ? 20 : 6,
+		slidesOffsetBefore: 0,
+		// centeredSlides : true,
+		// watchSlidesProgress : true,
+		navigation: {
+			nextEl: '.swiper-button-next',
+			prevEl: '.swiper-button-prev',
+		},
+	});
+	swiperVrImg.translateTo(0, 100)
+
+
+	var tt = document.getElementsByClassName("vm-op");
+	for (i = 0; i < tt.length; i++) {
+		var ul = document.querySelectorAll('.vm-op')[i]
+		handler = function(event){
+			var e = event || window.event;
+			var target = e.target || e.srcElement;
+			curVrKey = target.getAttribute('t') || ''
+			vrUrl = 'https://pano.honglouplus.com?id=' + curVrKey +'&plus=1'
+			document.getElementById('fullVr').setAttribute('src', vrUrl)
+			dealUrlCur()
+		};
+		if (window.addEventListener){
+			ul.addEventListener("click",handler,false)
+		}
+		else if (window.attachEvent){
+			ul.attachEvent("onclick",handler)
+		}
+	}
+	
+}
+
+
+
+var formData = new FormData();
+formData.append("dict_type", 'estate_dev_ers');
+formData.append("page_size", '999');
+ajax({
+	type:'post',
+	url:'https://api.honglouplus.com/api/dict/info',
+	data: formData,
+	success:function(msg){
+		var res = JSON.parse(msg)
+        const data = res.data
+		navList = data.estate_dev_ers || []
+		curNav = navList[0].dict_value
+		var cHtml = ''
+		navList.forEach(function (item) {
+			if (item.dict_value === curNav) {
+				cHtml += '<div class="swiper-slide vn-op cur" t=' + item.dict_value + '>' + item.dict_label + '</div>'
+			} else {
+				cHtml += '<div class="swiper-slide vn-op" t=' + item.dict_value + '>' + item.dict_label + '</div>'
+			}
+		})
+		document.getElementById('vr-nav').innerHTML = cHtml
+
+
+		// console.log(document.getElementsByClassName('vn-op'))
+
+
+		var tt = document.getElementsByClassName("vn-op");
+		for (i = 0; i < tt.length; i++) {
+			var ul = document.querySelectorAll('.vn-op')[i]
+			handler = function(event){
+				var e = event || window.event;
+				var target = e.target || e.srcElement;
+				curNav = target.getAttribute('t')
+				getVr('bc', function () {
+					// swiperVrImg.updateSlides()
+
+
+					dealVrUrl()
+				})
+				dealNavCur()
+
+
+
+			};
+			if (window.addEventListener){
+				ul.addEventListener("click",handler,false)
+			}
+			else if (window.attachEvent){
+				ul.attachEvent("onclick",handler)
+			}
+		}
+
+
+
+		getVr('bc', function () {
+
+
+			dealVrUrl()
+
+
+		})
+
+
+
+
+		// 
+
+
+
+
+
+
+
+		
+
+        var swiper = new Swiper(".mySwiper", {
+			// loop: true,
+			// speed: 1000,
+			slidesPerView: document.body.clientWidth > 700 ? 14 : 6,
+			spaceBetween: document.body.clientWidth > 700 ? 10 : 6,
+			// on:{
+			// 	click: function(){
+			// 	  alert('你点了Swiper');
+			// 	},
+			// },
+		  });
+
+
+
+		//   var clipboard= new ClipboardJS('.vr-more')
+
+
+
+
+
+
+		
+
+
+		
+	}
+})
+
+
+
+
+
+
+
+
+ajax({
+	type:'post',
+	url:'https://api.honglouplus.com/api/h5/vr',
+	data: formData,
+	success:function(msgShareStr){ 
+		var resShareObj = JSON.parse(msgShareStr)
+		configJsSDKAndDoSomething(resShareObj.jssdk, '洪楼南昌楼盘VR航拍地图', 'https://img.honglounews.com/20230612053506-4632.jpg_adm0', '南昌买房找洪楼  团购底价热线:18100792072')
+	}
+})
+
+
+
+
+
+var shareImgUrl = 'https://icon.honglouplus.com/plus.png';
+function configJsSDKAndDoSomething(config, title, imgUrl, desc){
+    wx.config({
+        debug: false,
+        appId: config.appId,
+        timestamp: config.timestamp,
+        nonceStr: config.nonceStr,
+        signature: config.signature,
+        jsApiList: config.jsApiList,
+		openTagList: ['wx-open-launch-weapp'],
+    })
+    wx.error(function(error){
+        console.log(error);
+    });
+    wx.ready(function () {
+        wx.updateAppMessageShareData({
+	        title: title,
+	        desc: desc,
+	        link: location.href,
+	        imgUrl: imgUrl,
+	        success: function () {
+	            console.log("success");
+	        }
+	     });
+	     wx.updateTimelineShareData({
+	        title: title,
+	        link: location.href,
+	        imgUrl: imgUrl,
+	        success: function () {
+	            console.log("success2");
+	        }
+	     });
+
+
+    });
+}
+
+
+