tangdehang
/
android-cloud-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
	<script src="../static/js/vender/vue/axios.min.js"></script>
	<script src="../static/js/vender/vue/vue.min.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
	<link rel="stylesheet" href="../static/css/browserDetail.css">
	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
	<script src="../static/js/vender/config.js"></script>
	<script src="../static/js/vender/toastr/toastr.min.js"></script>
	<script src="../static/js/vender/vue/config.js"></script>
    <script type="text/javascript">
        var deviveWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviveWidth / 7.5 + 'px';
    </script>
	<script>
		toastr.options.positionClass = 'toast-center-center';
		// toastr.options.timeOut = '1500';
	</script>
</head>
<body>
	<div class="container">
		<div class="header-wrap">
			<!-- <div class="search-wrap" id="search-wrap">
				<img class="search-icon" src="../static/img/browser/search-icon2.png" />
				<div class="ipt" id="ipt">双子星浏览器</div>
			</div> -->
			<div class="title-wrap">
				<img class="left-arrow" src="../static/img/browser/left-arrow.png" />
				<div class="title"></div>
			</div>
			<div class="tag-wrap"></div>
		</div>
		<div class="download-wrap">
			<div class="download-content"></div>
			<div class="loading"></div>
		</div>
	</div>
<script type="text/javascript">
	document.addEventListener("visibilitychange",()=>{
		if(document.hidden){
			init('visibilitychange');
		}else{
			init('visibilitychange');
		}
	})
	let title = decodeURIComponent(GetRequest().plateName);
	let timer,flag = true;
	let labelId = '', pageNum = 1, pageSize = 10, index = 0, recordFlag = true, total = 0, nowlength = 0, isLoading = false, appList= [], downloadObj = {};
	$('.title').eq(0).text(title);
	(function(){
		init();
	})();
	function init(type){
		$.ajax({
			url: `${baseUrl}/api/public/v1/browserLabel/client/query/${GetRequest().plateId}`,
			type: 'get',
			contentType:"application/json",
			dataType: 'json',
			cache: false,
			success: function (res) {
				isLoading = false;
				let node = '';
				$('.tag-wrap').eq(0).text('');
				let list = res.data;
				if(list.length === 0) {
					node = `<div class="none-wrap">
								<img class="none-img" src="../static/img/browser/none.png" />
								<div class="none-text">没有更多内容哦~</div>
							</div>`
					$('.download-content').eq(0).append(node);
					return
				}
				labelId = list[0].id;
				if(type != 'visibilitychange'){
					rankingGet();
				}
				for(let i=0; i < list.length; i++){
					node += `<div class="tag-item ${i === index ? 'active' : ''}" data-id="${list[i].id}" data-index="${i}">${list[i].labelName}</div>`
				}
				$('.tag-wrap').eq(0).append(node);
			}
		})
	};
	function getType() {
		return new Promise((resolve, reject) => {
			resolve('SVIP');
			// $.ajax({
			// 	url: `http://localhost:9888/getType`,
			// 	type: 'get',
			// 	contentType:"application/json",
			// 	dataType: 'json',
			// 	cache: false,
			// 	success: function (res) {
			// 		if(res.code === 200){
			// 			let cardType = res.data.devType;
			// 			let phoneObj = {
			// 				'VIRTUAL_RK3399': 'VIP',
			// 				'RK_3399': 'SVIP',
			// 				'MTK_G90': 'STAR',
			// 				'QUALCOMM': 'STARPRO'
			// 			}
			// 			phoneType = phoneObj[cardType];
			// 			resolve(phoneType);
			// 		}
			// 	}
			// })
		})
	}
	function rankingGet(type){
		getType().then((phoneType) => {
			$.ajax({
				url: `${baseUrl}/api/public/v1/ranking/client/get`,
				type: 'post',
				data: JSON.stringify({
					labelId: +labelId,
					phoneType: phoneType,
					pageNum: pageNum,
					pageSize: pageSize
				}),
				contentType:"application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					if(res.status === 0){
						appList = res.data.records;
						nowlength += appList.length;
						total = res.data.total;
						recordFlag = true;
						let node = '';
						if(type != 'down'){
							$('.download-content').eq(0).text('');
						}
						
						for(let i=0; i < appList.length; i++){
							node += `<div class="download-item">
										<div class="main-wrap">
											<img class="app-icon" src=${fileCenterApi}/document/newFile/download/0/13d0arghebcc4cm49cf04?fileKey=${appList[i].iconKey} />
											<div class="app-wrap">
												<div class="app-title">${appList[i].appName}</div>
												<div class="app-description">${appList[i].introduction}</div>
											</div>
										</div>
										<div class="btn-wrap" data-key="${appList[i].fileKey}" data-id="${appList[i].id}" data-index="${i}" data-md5="${appList[i].md5}">
											<div class="progress" data-key="${appList[i].fileKey}" data-id="${appList[i].id}" data-index="${i}" data-md5="${appList[i].md5}"></div>
											<text class="text" data-key="${appList[i].fileKey}" data-id="${appList[i].id}" data-index="${i}" data-md5="${appList[i].md5}">下载</text>
										</div>
									</div>`
						}
						if(nowlength < total && appList.length !== 0){
							$('.loading').eq(0).text('正在努力加载中...');
						} else if(nowlength != 0) {
							$('.loading').eq(0).text('已加载全部内容');
						}
						if(appList.length === 0){
							node = `<div class="none-wrap">
										<img class="none-img" src="../static/img/browser/none.png" />
										<div class="none-text">没有更多内容哦~</div>
									</div>`
						}
						$('.download-content').eq(0).append(node);
					}else{
						stopManyClick(() => {
							toastr.error(res.msg);
						})
					}
				}
			})
		})
	};
	//点击切换
	$('.tag-wrap')[0].addEventListener('click',(e)=>{
		if(index === e.target.dataset.index) {
			return
		}
		labelId = e.target.dataset.id;
		let className = e.target.className;
		if(className.includes('tag-item')){
			pageNum = 1;
			nowlength = 0;
			total = 0;
			$('.loading').eq(0).text('');
			$('.tag-item')[index].className = 'tag-item';
			index = e.target.dataset.index;
			$('.tag-item')[index].className = 'tag-item active';
			rankingGet();
		}
	},false);
	// // 验证是否下架
	// function isGetStatus(id) {
	// 	$.ajax({
	// 		url: `${baseUrl}/api/public/v1/browserLabel/getStatus/${id}`,
	// 		type: 'get',
	// 		contentType:"application/json",
	// 		dataType: 'json',
	// 		cache: false,
	// 		success: function (res) {
	// 			if(res.status === 0){
					
	// 			} else {
	// 				stopManyClick(() => {
	// 					toastr.error(res.msg);
	// 				})
	// 			}
	// 		}
	// 	})
	// }
	// 点击下载按钮
	$('.download-wrap')[0].addEventListener('click',(e)=>{
		let key = e.target.dataset.key;
		let md5 = e.target.dataset.md5;
		let index = e.target.dataset.index;
		let id = e.target.dataset.id;
		let className = e.target.className;
		if(className === 'btn-wrap btn-active' || e.target.innerText !== '下载'){
			return
		}
		let appName = $('.app-title').eq(index).text();
		if(['btn-wrap','progress', 'text'].includes(className)){
			$.ajax({
				url: `${baseUrl}/api/public/v1/ranking/getstatus/${id}`,
				type: 'get',
				contentType:"application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					if(res.status === 0){
						const downloadUrl = `${fileCenterApi}/document/newFile/breakpointDownloadFile/13d0arghebcc4cm49cf04?fileKey=${key}`;
						window.location.href = downloadUrl;
						let xhr = new XMLHttpRequest();
						xhr.open('GET', downloadUrl, true);
						xhr.addEventListener('progress', function (event) {
							// 响应头要有Content-Length
							if (event.lengthComputable) {
								let percentComplete = event.loaded / event.total;
								downloadObj[appName] = {
									index: index,
									name: appName,
									percentComplete: percentComplete
								};
							}
						}, false);
						xhr.send();
					} else {
						stopManyClick(() => {
							toastr.error(res.msg);
						})
					}
				}
			})
		}
	},false);
	setInterval(() => {
		newData();
	},2000);
	//更新百分数
	function newData() {
		if(JSON.stringify(downloadObj) == "{}"){
			return
		}
		appList.map((item, index) => {
			Object.keys(downloadObj).map((key) => {
				if(item.appName === downloadObj[key].name){
				// 进度条的位置也是translate，一开始是用translateX(-100%)挪到外面去
				$('.btn-wrap')[index].className = 'btn-wrap btn-active';
				$('.progress')[index].style.transform = `translateX(${downloadObj[key].percentComplete * 100}%)`;
				$('.text').eq(index).text(`${(downloadObj[key].percentComplete * 100).toFixed(1)}%`);
				if((downloadObj[key].percentComplete * 100).toFixed(1) == 100){
					delete downloadObj[key]
					console.log(downloadObj)
					$('.text').eq(index).text('下载完成');
				}
			}
			})
			
		})
		
	}
	//点击返回按钮
	$('.left-arrow')[0].addEventListener('click',()=>{
		location.href = './browser.html'
	},false);
	//数据下拉加载
	$('.download-wrap')[0].addEventListener('scroll',function () {
		let scrollTop = $('.download-wrap')[0].scrollTop;
		let clientHeight = $('.download-wrap')[0].clientHeight;
		let scrollHeight = $('.download-wrap')[0].scrollHeight;
		if(scrollTop + clientHeight + 10 > scrollHeight){
			if(recordFlag && nowlength < total && total > 0){
				recordFlag = false;
				pageNum++;
				rankingGet('down');
			}
		}
	});
	//防止提示一秒内重复显示
	function stopManyClick(fn) {
		if (flag) {
			fn();
		}
		flag = false;
		if(timer){clearTimeout(timer);}
		timer = setTimeout(() => {flag = true}, 1500);
	}
	//点击按钮搜索
	// const searchDom = document.getElementById("search-wrap");
	// searchDom.addEventListener('click',()=>{
	// 	var wd = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu";
	// 	window.open(wd);
	// },false);
</script>
</body>
</html>