wuyongxiang пре 4 година
родитељ
комит
412502ea8d
3 измењених фајлова са 390 додато и 118 уклоњено
  1. 1 0
      screenH5/WXtrialInterface.html
  2. 1 0
      screenH5/home.html
  3. 388 118
      screenH5/homeNew.html

+ 1 - 0
screenH5/WXtrialInterface.html

@@ -795,6 +795,7 @@ transition: all 0.2s ease-in;
 				}
 			});
 			var secanv = document.getElementById("wine");
+		
 			secanv.appendChild(player.canvas);
 			console.log("player=========>>>>", player);
 			console.log("secanv>>>>", secanv);

+ 1 - 0
screenH5/home.html

@@ -352,6 +352,7 @@
 			// var urlss = url[2]
 			var urlss='test.androidscloud.com'
 			var secanv = document.getElementById("wine");
+			console.log("player",player.canvas,player);
 			secanv.appendChild(player.canvas);
 			// var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp  +"&port="+ data.port +"&sn="+data.sn;
 			var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +

+ 388 - 118
screenH5/homeNew.html

@@ -193,7 +193,7 @@
     </style>
 	</head>
 	<body style="background: #F8F9FA;overflow:scroll;overflow-y: hidden;">
-		<div style="width: 100%;height: 100%;">
+		<div style="width: 100%;height: 100%;" id="homeapp">
 			<!-- <div class="canvas" style="display: none;">
 				<div id="wine" style="height: 90%;">
 				</div>
@@ -219,75 +219,31 @@
 
 			<div class="swiper-container">
 				<div class="swiper-wrapper">
-					<div class="swiper-slide">
-						<div class="canvas" style="display: none;z-index: 1;">
-							<div id="wine" style="height: 100%;">
+					<div class="swiper-slide" v-for="(item,index) in homeList" :key="item.id" :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
+						<div class="canvas" style="z-index: 1;">
+							<div style="height: 100%;" class="wine">
 							</div>
 							<div class="camvas-head" style="z-index: 5555;">
 								<div class="tophead">
 									<div class="th_left">
-										<img src="../static/img/xingyao_icon.png" />
+										<!-- {{item.buyVipType}} -->
+										<img src="../static/img/xingyao_icon.png" v-if="item.buyVipType='SVIP'" />
+										<img src="../static/img/xingdong_icon.png" v-else />
 									</div>
 									<div class="th_right">
-										<div class="thl-font">是南瓜哥哥啊</div>
-										<div class="thl-time">剩29天6小时</div>
+										<div class="thl-font">{{item.diskName}}</div>
+										<div class="thl-time">{{remainTime(item.ctime,item.exceptTime)}}</div>
 									</div>
 								</div>
 								<div class="th_renew homeRenew" style="z-index: 5000;">
 									续费
 								</div>
-								<!-- <div class="vip">
-									<img class="vipimg" src="../static/img/vip_icon.png"></img>
-									<text class="diskName">885752258</text>
-
-								</div>
-								<div class="canvastime"></div> -->
-							</div>
-						</div>
-					</div>
-					<div class="swiper-slide">
-						<div class="canvas" style="display: none;">
-							<div id="wine" style="height: 100%;">
-							</div>
-							<div class="camvas-head">
-								<div class="tophead">
-									<div class="th_left">
-										<img src="../static/img/xingyao_icon.png" />
-									</div>
-									<div class="th_right">
-										<div class="thl-font">是南瓜哥哥啊</div>
-										<div class="thl-time">剩29天6小时</div>
-									</div>
-								</div>
-								<div class="th_renew">
-									续费
-								</div>
 							</div>
 						</div>
 					</div>
 					<div class="swiper-slide">
 						<div class="canvas" style="display: none;">
-							<div id="wine" style="height: 100%;">
-							</div>
-							<div class="camvas-head">
-								<div class="tophead">
-									<div class="th_left">
-										<img src="../static/img/xingyao_icon.png" />
-									</div>
-									<div class="th_right">
-										<div class="thl-font">是南瓜哥哥啊</div>
-										<div class="thl-time">剩29天6小时</div>
-									</div>
-								</div>
-								<div class="th_renew">
-									续费
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="swiper-slide">
-						<div class="canvas" style="display: none;">
-							<div id="wine" style="height: 100%;" class="kongWine">
+							<div style="height: 100%;" class="kongWine">
 								<div class="kphone">
 									<div class="kp_img">
 										<img src="../static/img/goumai_pic.png" />
@@ -297,26 +253,13 @@
 									</div>
 								</div>
 							</div>
-							<!-- <div class="camvas-head">
-								<div class="tophead">
-									<div class="th_left">
-										<img src="../static/img/xingyao_icon.png" />
-									</div>
-									<div class="th_right">
-										<div class="thl-font">是南瓜哥哥啊</div>
-										<div class="thl-time">剩29天6小时</div>
-									</div>
-								</div>
-								<div class="th_renew">
-									续费
-								</div>
-							</div> -->
+
 						</div>
 					</div>
 				</div>
 				<!-- Add Arrows -->
-				<div class="swiper-button-next"></div>
-				<div class="swiper-button-prev"></div>
+				<div class="swiper-button-next" @click="swiperNext()"></div>
+				<div class="swiper-button-prev" @click="swiperPrev()"></div>
 			</div>
 
 
@@ -369,29 +312,330 @@
 		<div id="copy-txt" style="position: absolute;opacity: 0;">
 			<span id="user_ref_id">www.androidsCloud.com</span>
 		</div>
-		<script>
-			var swiper = new Swiper('.swiper-container', {
-				navigation: {
-					nextEl: '.swiper-button-next',
-					prevEl: '.swiper-button-prev',
-				},
-			});
-		</script>
 		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
 		<!--  视频-->
 		<script src="../static/js/jquery-1.11.0.min.js"></script>
 		<script type="text/javascript" src="../static/js/Decoder.js"></script>
 		<script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
 		<script type="text/javascript" src="../static/js/Player.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 		<script type="text/javascript">
-			let hheight = document.body.clientHeight;
-			let cheight = document.body.offsetHeight;
+			var app = new Vue({
+				el: '#homeapp',
+				data: {
+					message: 'Hello Vue!',
+					homeList: [],
+					urlData: {},
+				},
+				mounted() {
+					this.gethomeList();
+					var swiper = new Swiper('.swiper-container', {
+						observer: true, //修改swiper自己或子元素时,自动初始化swiper 
+						observeParents: true, //修改swiper的父元素时,自动初始化swiper
+						navigation: {
+							nextEl: '.swiper-button-next',
+							prevEl: '.swiper-button-prev',
+						},
+						onSlideChangeEnd: function(swiper) {
+							console.log("下标啊", swiper)
+						},
+						onTransitionStart: function(swiper, activeIndex) {
+							console.log("下标啊", swiper, activeIndex)
+						},
+						onSlideChangeEnd: function(swiperHere) {
+							//获取下面的img图片
+							// var imgurl = $('.swiper-slide-active img').attr("src");
+							//获取内容文本
+							var txt = $('.swiper-slide-active').html();
+							console.log("打印索引值", txt)
+
+						}
+
+					});
+
 
-			console.log("document.body.offsetHeight: " + document.body.offsetHeight);
-			console.log("document.body.clientHeight " + document.body.clientHeight);
-			console.log("document.body.scrollHeight " + document.body.scrollHeight);
-			console.log("window.screen.availHeight " + window.screen.availHeight);
 
+				},
+				methods: {
+					remainTime(ctime, exceptTime) {
+						var date1 = ctime;
+						var date2 = exceptTime; //结束时间
+						var date3 = new Date(date2).getTime() - new Date(date1).getTime(); //时间差的毫秒数      
+						console.log("时间戳===========》", new Date(date3).getTime(), new Date(date2).getTime())
+						//------------------------------
+						var tmiss = ''
+						//计算出相差天数
+						var days = Math.floor(date3 / (24 * 3600 * 1000))
+
+						//计算出小时数
+
+						var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+						var hours = Math.floor(leave1 / (3600 * 1000))
+						//计算相差分钟数
+						var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+						var minutes = Math.floor(leave2 / (60 * 1000))
+						//计算相差秒数
+						var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+						var seconds = Math.round(leave3 / 1000)
+						var times = ""
+						if (Number(days) == 0) {
+							console.log(hours + "小时" + minutes + "分")
+							tmiss = Number(hours) + "小时" + Number(minutes) + "分"
+						} else {
+							if (Number(hours) == 0 && Number(minutes) == 0) {
+								console.log(days + "天")
+								tmiss = Number(days) + "天"
+							} else {
+								console.log(days + "天" + hours + "小时 ")
+								tmiss = Number(days) + "天" + Number(hours) + "小时 "
+							}
+						}
+						console.log("tmiss>>>>>>", tmiss);
+						return tmiss
+					},
+					swiperNext(data) {
+						var domnext = $('.swiper-slide-active').next().children().find(".wine");
+						domnext.attr("id", "wine");
+						// console.log("打印索引值", domnext)
+						var domprev = $('.swiper-slide-next').prev().children().find(".wine");
+						domprev.removeAttr("id");
+						domprev.empty();
+						setTimeout(() => {
+							$(".swiper-wrapper .swiper-slide-active .wine").attr('id', 'wine');
+							var player = new Player({
+								size: {
+									width: 768,
+									height: 1024
+								}
+							});
+							var secanv = document.getElementById("wine");
+							secanv.appendChild(player.canvas);
+							
+							var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + that.urlData.clientType + "&cardIp=" +
+								that.urlData.cardIp +
+								"&port=" + that.urlData.port + "&sn=" + that.urlData.sn;
+							// var client = new WebSocket(strhost);
+							console.log('wsssss==============', client)
+
+							client.binaryType = 'arraybuffer';
+							// debugger
+							client.onopen = function(evt) {
+								// onOpen(evt) 
+							};
+							client.onclose = function(evt) {
+								// onClose(evt) 
+							};
+							client.onmessage = function(evt) {
+								// onMessage(evt)
+								console.log("onMessage==============", evt);
+								var messageData = new Uint8Array(evt.data);
+
+								player.decode(messageData);
+							};
+							client.onerror = function(evt) {
+								// onError(evt) 
+							};
+						}, 500)
+
+					},
+					swiperPrev() {
+						var domnext = $('.swiper-slide-prev').next().children().find(".wine");
+						domnext.removeAttr("id");
+						// console.log("打印索引值", domnext)
+						var domprev = $('.swiper-slide-active').prev().children().find(".wine");
+						domprev.attr("id", "wine");
+						domnext.empty();
+						setTimeout(() => {
+							$(".swiper-wrapper .swiper-slide-active .wine").attr('id', 'wine');
+							var player = new Player({
+								size: {
+									width: 768,
+									height: 1024
+								}
+							});
+							var secanv = document.getElementById("wine");
+							secanv.appendChild(player.canvas);
+							var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + that.urlData.clientType + "&cardIp=" +
+								that.urlData.cardIp +
+								"&port=" + that.urlData.port + "&sn=" + that.urlData.sn;
+							// var client = new WebSocket(strhost);
+							console.log('wsssss==============', client)
+
+							client.binaryType = 'arraybuffer';
+							// debugger
+							client.onopen = function(evt) {
+								// onOpen(evt) 
+							};
+							client.onclose = function(evt) {
+								// onClose(evt) 
+							};
+							client.onmessage = function(evt) {
+								// onMessage(evt)
+								console.log("onMessage==============", evt);
+								var messageData = new Uint8Array(evt.data);
+
+								player.decode(messageData);
+							};
+							client.onerror = function(evt) {
+								// onError(evt) 
+							};
+						}, 500)
+					},
+					gethomeList() {
+						// var baseUrl = 'https://test.androidscloud.com';
+						var baseUrl = "http://192.168.31.20";
+						var query = window.location.search.substring(1);
+						var vars = query.split("&");
+						var tokens = vars.find(e => {
+							return e.startsWith('token')
+						}) || ''
+						var data = {}
+
+						var clientType = vars.find(e => {
+							return e.startsWith('clientType')
+						}) || ''
+						var cardIp = vars.find(e => {
+							return e.startsWith('cardIp')
+						}) || ''
+						var port = vars.find(e => {
+							return e.startsWith('port')
+						}) || ''
+
+						var sn = vars.find(e => {
+							return e.startsWith('sn')
+						}) || ''
+						var demoTime = vars.find(e => {
+							return e.startsWith('demoTime')
+						}) || ''
+						var id = vars.find(e => {
+							return e.startsWith('id')
+						}) || ''
+						var vip = vars.find(e => {
+							return e.startsWith('vip')
+						}) || ''
+						var diskName = vars.find(e => {
+							return e.startsWith('diskName')
+						}) || ''
+						var times = vars.find(e => {
+							return e.startsWith('times')
+						}) || ''
+						var username = vars.find(e => {
+							return e.startsWith('username')
+						}) || ''
+						var userCardId = vars.find(e => {
+							return e.startsWith('userCardId')
+						}) || ''
+						var ip = vars.find(e => {
+							return e.startsWith('ip')
+						}) || ''
+						var windowHeight = vars.find(e => {
+							return e.startsWith('windowHeight')
+						}) || ''
+						var tokens = vars.find(e => {
+							return e.startsWith('token')
+						}) || ''
+
+						data.clientType = clientType.substring(11, clientType.length)
+
+						data.cardIp = cardIp.substring(7, cardIp.length)
+
+						data.port = port.substring(5, port.length)
+
+						data.sn = sn.substring(3, sn.length)
+
+						data.demoTime = demoTime.substring(9, demoTime.length)
+						data.id = id.substring(3, id.length)
+						data.vip = vip.substring(4, vip.length)
+						data.diskName = diskName.substring(9, diskName.length)
+						data.times = times.substring(6, times.length)
+						data.username = username.substring(9, username.length)
+						data.userCardId = userCardId.substring(11, userCardId.length)
+						data.ip = ip.substring(3, ip.length)
+						console.log("data====", data);
+						this.urlData = data;
+						let that = this;
+
+						$.ajax({
+							url: baseUrl + "/api/storage/v1/cardStatus/getRbd",
+							data: {
+								"id": "63283",
+								"deviceStatus": "1"
+							},
+							type: 'post',
+							dataType: 'json',
+							headers: {
+								'token': tokens.substring(6, tokens.length),
+								"Authorization": tokens.substring(6, tokens.length)
+							},
+							success: function(data) {
+								console.log("挂载安卓卡成功", data);
+								//                       
+							}
+						})
+
+						$.ajax({
+							url: baseUrl + "/api/user/v1/client/disk/info",
+							data: {},
+							type: 'get',
+							dataType: 'json',
+							headers: {
+								'token': tokens.substring(6, tokens.length),
+								"Authorization": tokens.substring(6, tokens.length)
+							},
+							success: function(data) {
+								console.log("云手机信息=======", data);
+								if (data.data) {
+									that.homeList = data.data.diskInfo;
+									console.log("云手机this.homeListthis.homeListthis.homeList=======", that.homeList);
+									var urlss = 'test.androidscloud.com'
+
+									setTimeout(() => {
+										$(".swiper-wrapper .swiper-slide-active .wine").attr('id', 'wine');
+										var player = new Player({
+											size: {
+												width: 768,
+												height: 1024
+											}
+										});
+										var secanv = document.getElementById("wine");
+										secanv.appendChild(player.canvas);
+										var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + that.urlData.clientType + "&cardIp=" +
+											that.urlData.cardIp +
+											"&port=" + that.urlData.port + "&sn=" + that.urlData.sn;
+										// var client = new WebSocket(strhost);
+										console.log('wsssss==============', client)
+
+										client.binaryType = 'arraybuffer';
+										// debugger
+										client.onopen = function(evt) {
+											// onOpen(evt) 
+										};
+										client.onclose = function(evt) {
+											// onClose(evt) 
+										};
+										client.onmessage = function(evt) {
+											// onMessage(evt)
+											console.log("onMessage==============", evt);
+											var messageData = new Uint8Array(evt.data);
+
+											player.decode(messageData);
+										};
+										client.onerror = function(evt) {
+											// onError(evt) 
+										};
+									}, 500)
+
+
+								} else {
+
+								}
+								//                       
+							}
+						})
+					}
+				}
+			})
+			var homeList = []; //云手机列表信息
 			var url = window.location.href;
 
 			url = url.split('/')
@@ -400,6 +644,7 @@
 			// var baseUrl = 'http://192.168.31.20'
 			var baseUrl = 'https://test.androidscloud.com';
 			var query = window.location.search.substring(1);
+
 			var vars = query.split("&");
 			//						 var urls = "https://xcx.androidscloud.com"
 			//			 审核
@@ -467,11 +712,33 @@
 			var windowHeight = vars.find(e => {
 				return e.startsWith('windowHeight')
 			}) || ''
+			var tokens = vars.find(e => {
+				return e.startsWith('token')
+			}) || ''
 			$(".swiper-container").css("height", windowHeight.substring(13, windowHeight.length));
 			console.log("获取网页高度", windowHeight.substring(13, windowHeight.length));
 			//				$(".aaa").text(clientType.substring(11, clientType.length))
 			// let cardIp = getUrlParam('cardIp');
 			// console.log(cardIp)
+			$.ajax({
+				url: baseUrl + "/api/user/v1/client/disk/info",
+				data: {},
+				type: 'get',
+				dataType: 'json',
+				headers: {
+					'token': tokens.substring(6, tokens.length),
+					"Authorization": tokens.substring(6, tokens.length)
+				},
+				success: function(data) {
+					console.log("云手机信息=======", data);
+					if (data.data) {
+						homeList = data.data.diskInfo;
+					} else {
+
+					}
+					//                       
+				}
+			})
 			getQueryString: (name) => {
 				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 				let r = window.location.search.substr(1).match(reg);
@@ -520,39 +787,42 @@
 				})
 			}
 
-			//			云手机相关逻辑	 
-			var player = new Player({
-				size: {
-					width: 768,
-					height: 1024
-				}
-			});
-
-			//		document.body.appendChild(player.canvas);
-			// var urlss = url[2]
-			var urlss = 'test.androidscloud.com'
-			var secanv = document.getElementById("wine");
-			secanv.appendChild(player.canvas);
-			// var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp  +"&port="+ data.port +"&sn="+data.sn;
-			var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +
-				"&port=" + data.port + "&sn=" + data.sn;
-			var client = new WebSocket(strhost);
-			console.log('wsssss==============', client)
-
-			client.binaryType = 'arraybuffer';
-			// debugger
-			client.onopen = function(evt) {
-				// onOpen(evt) 
-			};
-			client.onclose = function(evt) {
-				// onClose(evt) 
-			};
-			client.onmessage = function(evt) {
-				onMessage(evt)
-			};
-			client.onerror = function(evt) {
-				// onError(evt) 
-			};
+			// //			云手机相关逻辑	 
+			// var player = new Player({
+			// 	size: {
+			// 		width: 768,
+			// 		height: 1024
+			// 	}
+			// });
+			// console.log("player====", player, player.canvas);
+			// //		document.body.appendChild(player.canvas);
+			// // var urlss = url[2]
+			// var urlss = 'test.androidscloud.com'
+			// for (var i = 0; i <= homeList; i++) {
+			//                console.log("i=============",i,homeList);
+			// }
+			// var secanv = document.getElementById("wine");
+			// secanv.appendChild(player.canvas);
+			// // var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp  +"&port="+ data.port +"&sn="+data.sn;
+			// var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +
+			// 	"&port=" + data.port + "&sn=" + data.sn;
+			// var client = new WebSocket(strhost);
+			// console.log('wsssss==============', client)
+
+			// client.binaryType = 'arraybuffer';
+			// // debugger
+			// client.onopen = function(evt) {
+			// 	// onOpen(evt) 
+			// };
+			// client.onclose = function(evt) {
+			// 	// onClose(evt) 
+			// };
+			// client.onmessage = function(evt) {
+			// 	onMessage(evt)
+			// };
+			// client.onerror = function(evt) {
+			// 	// onError(evt) 
+			// };
 
 
 
@@ -629,7 +899,7 @@
 				})
 			});
 
-			$('.buyIcon').bind('click', function(e) {
+			$('.buyIcon,.kp_btn').bind('click', function(e) {
 				console.log("购买");
 				// stopPropagation(e);
 				wx.miniProgram.navigateTo({