代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>应用市场</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.bgColor{
background: #F2F6FC;
overflow-x: hidden;
}
.appMarketTong{
width: 100%;
float: left;
}
.appMarketH{
height: 50px;
margin: 10px;
}
.appMarketH .leftTitle{
float: left;
font-size: 20px;
font-weight: bold;
line-height: 40px;
padding-left: 1%;
}
.appMarketH .rightSearch{
float: right;
margin-right: 20px;
}
.appMarketBanner{
height: 50px;
background: #f8f8f8;
border-top: #DCDFE6 1px solid;
border-bottom: #DCDFE6 1px solid;
}
.appMarketBanner ul{
list-style: none;
}
.appMarketBanner li{
float: left;
width: 100px;
line-height: 50px;
text-align: center;
cursor: pointer;
margin-left: 2%;
color: #909399;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
}
.appMarketBanner li:hover{
float: left;
width: 100px;
line-height: 50px;
text-align: center;
cursor: pointer;
margin-left: 2%;
background: #E4E7ED;
}
.appMarketTitle{
height: 50px;
line-height: 50px;
margin-left: 2%;
font-size: 15px;
color: #909399;
font-weight: bold;
}
.appMarketList{
height: auto;
overflow: hidden;
}
.appMarketList ul{
list-style: none;
background: #fff;
width: 96%;
height: 100%;
border: 1px solid #DCDFE6;
margin: 5px auto;
}
.appMarketList li{
width: 94%;
height: 120px;
border: 1px solid #DCDFE6;
margin: 3%;
}
.appMarketList li .leftImage{
width: 120px;
height: 120px;
background: #409EFF;
float: left;
color: #fff;
text-align: center;
}
.appMarketList li .leftImage img{
margin-top: 28%;
width: 40px;
height: 40px;
}
.appMarketList li .leftImage p{
font-size: 14px;
}
.appMarketList li .middleDes{
width: 350px;
height: 120px;
float: left;
margin-left: 6%;
line-height: 20px;
font-size: 12px;
color: #909399;
}
.appMarketList li .middleDes p{
margin-top: 10px;
}
.appMarketList li .middleDes .middleDesIconSelete{
margin-top: 5%;
}
.appMarketList li .rightButton{
width: 100px;
height: 50px;
line-height: 50px;
float: right;
margin-top: 4%;
margin-right: 2%;
background: #67C23A;
color: #fff;
border: 0;
font-size: 16px;
}
</style>
<script src="javascript/api.js"></script> <!-- api.js必须放到最开头 -->
<script src="javascript/axios.js"></script>
<script src="javascript/vue.js"></script>
<!-- <script src="http://www.jianvary.com/jquery.js"></script> -->
</head>
<body class="bgColor">
<div id="app">
<div class="appMarketH appMarketTong">
<div class="leftTitle">
支撑平台应用商店
</div>
<div class="rightSearch">
<!-- 搜索框 需要再完善 -->
</div>
</div>
<div class="appMarketBanner appMarketTong">
<ul>
<li v-for="(item,index) in title" @click="changeCont(index)"> {{item.className}}</li>
</ul>
</div>
<div class="appMarketTitle appMarketTong">
<span>{{titleShow}}</span>
</div>
<div class="appMarketList appMarketTong" id="appContent">
<ul>
<li v-for="(item,index) in listDown" >
<form>
<div class="leftImage">
<img v-bind:src="item.logo" />
<p>{{item.name}}</p>
</div>
<div class="middleDes">
<p>{{item.name}}</p>
<p>应用描述字段，说明应用的使用</p>
<p class="middleDesIconSelete">
图标:
大<input type="radio" value="0" name="icon" @change="changeRadio(0)"/>
中<input type="radio" value="1" name="icon" @change="changeRadio(1)"/>
小<input type="radio" value="2" name="icon" checked="true" @change="changeRadio(2)"/>
</p>
</div>
<button class="rightButton" @click="installCont(index,item)" :install="item.isInstall" >安装</button>
</form>
</li>
</ul>
</div>
</div>
<script>
//测试子窗口控制父窗口的跳转
// parent.window.location = 'http://127.0.0.1/webos1/login.html';
var accessToken = localStorage.token;
function dumpUrl() {
return parent.window.location.href = 'http://193.112.49.253:15680/webos99/index.html';
}
new Vue({
el: '#app',
data: {
title: [], //分类列表名
titleShow: '', //列表导航名字
list: '', //列表类
appType: 1, //读取类型列表
listDown: '', //列表安装
radioParam: 2, //图标大中小，默认小选择2
appCode: '',
},
methods: {
changeRadio(val){
this.radioParam = val;
},
changeCont: function(index){ //种类选择，以及渲演对应的列表。
var _this = this;
var ul = document.getElementById('appContent');
var li = ul.getElementsByTagName('li');
this.appType = this.title[index].classCode;
this.titleShow = this.title[index].className;
axios.post(zuulHost+'/m_manage/userAppMenu/getAppByUser?access_token='+accessToken,{
"appType": this.title[index].classCode
})
.then(function(res){
console.log(res.data.data);
_this.listDown = res.data.data;
setTimeout(function(){
let rightButton = document.getElementsByClassName("rightButton");
for(let i = 0; i<rightButton.length; i++){
console.log(rightButton[i].getAttribute('install'));
if(rightButton[i].getAttribute('install') == 1){
rightButton[i].style.background = '#E4E7ED';
rightButton[i].disabled = true;
}else{
rightButton[i].style.background = '#67C23A';
rightButton[i].disabled = false;
}
}
},1500);
})
.catch(function(err){
console.log(err);
dumpUrl();
});
},
installCont: function(index,item){
//这里存一些属性给到数据库，安装APP应用或者是增加
//这里还要判断已经是安装过的，就提示不用再次安装，这里应该存一个属性添加了为1，删除，或者没添加为0;
//同步添加一下要添加的APP-json数据，jquery ajax;
var appCode =item.appCode,id = item.appCode, title = item.name, webSrc = item.url, src = item.logo;
var json = [{id: id, pos: 'jiu' , title: title, src: src, webSrc: webSrc,iWidth:1100,iHeight:500,iLeft:110}];
console.log(this.listDown[index].isInstall);
console.log(webSrc);
let _this = this;
if(this.listDown[index].isInstall===0){
var region = parent.newDeskBox.createNewApp2(json[0]); //本地自己添加应用,return 出一个区域
parent.newDeskBox.events(); //本地自己添加事件
console.log(region);
//桌面端加样式，每个App的底色都要不同相邻的两个。通过DOM来操控它们之间的div底色。
// setTimeout(function(){
var desk1 = parent.document.getElementById('desk1'),
desk2 = parent.document.getElementById('desk2'),
desk3 = parent.document.getElementById('desk3'),
desk4 = parent.document.getElementById('desk4'),
desk5 = parent.document.getElementById('desk5'),
desk6 = parent.document.getElementById('desk6');
try{
desk1.firstChild.style.background = '#efb336';
desk1.children[1].style.background = '#1f53a0';
desk1.children[2].style.background = '#807f7f';
desk1.children[3].style.background = '#b00f0f';
desk1.children[4].style.background = '#a87c2c';
desk1.children[5].style.background = '#0057bd';
}catch(err){
}
try{
desk2.firstChild.style.background = '#807f7f';
desk2.children[1].style.background = '#efb336';
desk2.children[2].style.background = '#1f53a0';
desk2.children[3].style.background = '#b00f0f';
desk2.children[4].style.background = '#a87c2c';
desk2.children[5].style.background = '#0057bd';
}catch(err){
}
try{
desk3.firstChild.style.background = '#efb336';
desk3.children[1].style.background = '#1f53a0';
desk3.children[2].style.background = '#807f7f';
desk3.children[3].style.background = '#b00f0f';
desk3.children[4].style.background = '#a87c2c';
desk3.children[5].style.background = '#0057bd';
desk4.firstChild.style.background = '#efb336';
desk4.children[1].style.background = '#1f53a0';
desk4.children[2].style.background = '#807f7f';
desk4.children[3].style.background = '#b00f0f';
desk4.children[4].style.background = '#a87c2c';
desk4.children[5].style.background = '#0057bd';
desk5.firstChild.style.background = '#efb336';
desk5.children[1].style.background = '#1f53a0';
desk5.children[2].style.background = '#807f7f';
desk5.children[3].style.background = '#b00f0f';
desk5.children[4].style.background = '#a87c2c';
desk5.children[5].style.background = '#0057bd';
desk6.firstChild.style.background = '#807f7f';
desk6.children[1].style.background = '#efb336';
desk6.children[2].style.background = '#1f53a0';
desk6.children[3].style.background = '#b00f0f';
desk6.children[4].style.background = '#a87c2c';
desk6.children[5].style.background = '#0057bd';
}catch(err){
}
axios.post(zuulHost+'/m_manage/userAppMenu/create?access_token='+accessToken,{
"appCode": appCode,
"pos": 'jiu',
"title": title,
"src": src,
"webSrc": webSrc,
"iwidth": 1500,
"iheight": 500,
"ileft": 110,
"region": region,
"pictureSize": _this.radioParam,
"desktop": 1,
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
dumpUrl();
});
alert('添加应用成功');
return false;
//添加应用后，应该把this.listDown[index].isInstall是否安装过的值改一下。后台处理已处理
}else{
alert('您好！应用已经安装过！请到桌面使用。');
return false;
}
},
},
created: function(){
var _this = this;
axios.post(zuulHost+'/m_dataBase/applicationType/condition?access_token='+accessToken,{
"pageNum": 1,
"pageSize": 20
})
.then(function(res){
console.log(res.data.data.list);
_this.title = res.data.data.list;
_this.titleShow = _this.title[0].className; //初始化应用分类名字
})
.catch(function(err){
console.log(err);
dumpUrl();
});
var reqParamuilder = {url:zuulHost+'/m_manage/userAppMenu/getAppByUser'+"?access_token="+localStorage.token
,method:'post'
,data:{"appType": 1}
,headers: {'token':localStorage.token}}
axios(reqParamuilder)
.then(function(res){
console.log(res.data.data);
_this.listDown = res.data.data;
})
.catch(function(err){
console.log(err);
dumpUrl();
});
//判断安装按钮，如果已经安装了，这个按钮不能再点击，如果删除了这个应用，又可以再次恢复点击功能，disabled="disabled"
var jiankk = setTimeout(function(){
var rightButton = document.getElementsByClassName("rightButton");
for(var i = 0; i<rightButton.length; i++){
console.log(rightButton[i].getAttribute('install'));
if(rightButton[i].getAttribute('install') == 1){
rightButton[i].style.background = '#E4E7ED';
rightButton[i].disabled = true;
}else{
rightButton[i].style.background = '#67C23A';
rightButton[i].disabled = false;
}
}
},1500);
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。