315 行
9.9 KiB
HTML
可执行文件
315 行
9.9 KiB
HTML
可执行文件
<!--[1.9.20]-->
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#market {
|
|
width: 100%;
|
|
/*height: 100%;*/
|
|
box-sizing: border-box;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.market-half {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
.market-title {
|
|
width: 100%;
|
|
height: 60px;
|
|
font-size: 18px;
|
|
color: #666;
|
|
line-height: 60px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.market-contMy {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 40px 0;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
/* justify-content: space-between; */
|
|
}
|
|
|
|
.contMy-item {
|
|
width: 100%;
|
|
height: 110px;
|
|
background-color: #F7F7F7;
|
|
box-sizing: border-box;
|
|
padding: 25px 20px;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
margin-right: 35px;
|
|
margin-bottom: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item-img > img {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.item-info {
|
|
width: 200px;
|
|
margin-left: 20px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 18px;
|
|
color: #333;
|
|
margin: 0 0 6px 0;
|
|
font-weight: 600;
|
|
width: 90%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
}
|
|
|
|
.item-subtitle {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin: 0 0 10px 0;
|
|
width: 95%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: default;
|
|
}
|
|
|
|
.item-status {
|
|
width: 40px;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #80BFFF;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
writing-mode: vertical-rl;
|
|
border-radius: 0 6px 6px 0;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
line-height: 2.5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-price {
|
|
color: #FE5757;
|
|
font-size: 14px;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.m-t {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-dialog {
|
|
width: 18%;
|
|
}
|
|
|
|
.el-dialog--center .el-dialog__body {
|
|
text-align: center;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.txt3 {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dialog_txt {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.updateDialog > .el-dialog__header {
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.updateDialog .el-dialog__body {
|
|
text-align: left;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<div id="market" v-cloak>
|
|
<div class="market-half" v-loading="loadingMy">
|
|
<div class="market-title">我的应用</div>
|
|
<div class="market-contMy">
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in myPlugList" :key="index">
|
|
<div class="contMy-item" @click.stop="item.origin_type==2?toDetail(item.identification):null;">
|
|
<div class="item-img">
|
|
<img :src="item.icon_url" :alt="item.plug_name">
|
|
</div>
|
|
<div class="item-info">
|
|
<p class="item-title" :title="item.name">{{item.plug_name}}</p>
|
|
<p class="item-subtitle" :title="item.brief_introduction">{{item.information}}</p>
|
|
</div>
|
|
<div class="item-status" v-if="item.origin_type==2 && item.is_install == 0"
|
|
@click.stop="toDetail(item.identification)">安 装
|
|
</div>
|
|
<div class="item-status" v-else-if="item.upgrade == 1"
|
|
@click.stop="toDetail(item.identification)">更 新
|
|
</div>
|
|
<div class="item-status" v-else-if="checkOperateSetting(item)"
|
|
@click.stop="toSetting(item)">配 置
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="market-half m-t" v-loading="loadingHot">
|
|
<div class="market-title">推荐应用</div>
|
|
<div class="market-contMy">
|
|
<el-row :gutter="20" style="width: 100%">
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in marketList" :key="index">
|
|
<div class="contMy-item"
|
|
@click.stop="toDetail(item.identification)">
|
|
<div class="item-img">
|
|
<img :src="item.addon_logo" :alt="item.name">
|
|
</div>
|
|
<div class="item-info">
|
|
<p class="item-title" :title="item.name">{{item.name}}</p>
|
|
<p class="item-subtitle">{{item.desc}}</p>
|
|
<p class="item-price" v-if="item.price*1>0">¥ {{item.price}} </p>
|
|
<p class="item-price" v-else>¥ 免费 </p>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var app = new Vue({
|
|
el: "#market",
|
|
data() {
|
|
return {
|
|
dialogTableVisible: false,
|
|
updateDialogVisible: false,//更新弹框
|
|
status: "",//进度条状态 success warning exception
|
|
text: true,
|
|
show: false,
|
|
myPlugList: [],
|
|
marketList: [],
|
|
percent: 0,//安装进度条
|
|
percentUpdate: 0,//更新进度
|
|
timer: '',//轮询定时器
|
|
timerUpdate: "",//更新轮询定时器
|
|
type: 1,//1正在安装 2安装成功 3安装失败 4正在更新 5更新成功 6更新失败
|
|
loadingMy: false,
|
|
loadingHot: false,
|
|
id: "",//我的应用的id
|
|
versionData: [{
|
|
versions_name: "",
|
|
content: ""
|
|
}],//版本更新信息
|
|
operate: {},//操作权限
|
|
operateObj: {},//存储验证插件是否能点击配置的对象
|
|
}
|
|
},
|
|
mounted() {
|
|
this.showHotPlugIn();
|
|
this.showMyPlugIn();
|
|
},
|
|
methods: {
|
|
//我的应用请求接口
|
|
showMyPlugIn() {
|
|
this.loadingMy = true;
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: 'json',
|
|
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
|
data: {},
|
|
async: true,
|
|
url: "/index.php/Super/Plug/getPlugList",
|
|
success: (res) => {
|
|
this.loadingMy = false;
|
|
if (res.status == 1) {
|
|
this.myPlugList = res.data
|
|
this.operateObj = {};
|
|
let obj = {};
|
|
res.data.forEach((item)=>{
|
|
this.operateObj[item.admin_url] = item.identification;
|
|
obj[item.identification] = item.admin_url;
|
|
});
|
|
this.checkOperateAuth(obj, (data) => {
|
|
this.operate = data;
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//推荐应用请求接口
|
|
showHotPlugIn() {
|
|
this.loadingHot = true;
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: 'json',
|
|
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
|
data: {"group_id": 1},
|
|
async: true,
|
|
url: "/index.php/Super/Plug/getPlugAddonAppList",
|
|
success: (res) => {
|
|
// console.log(res)
|
|
this.loadingHot = false;
|
|
if (res.status == 1) {
|
|
this.marketList = res.data
|
|
// console.log('this.marketList', this.marketList)
|
|
} else {
|
|
// console.log(res.msg)
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
},
|
|
//跳转插件详情
|
|
toDetail(identification) {
|
|
MenuApp.pathData.push({
|
|
name: '插件详情',
|
|
path: "/index.php/Super/Plug/detail.html?identification=" + identification,
|
|
onClose: () => {
|
|
this.showHotPlugIn();
|
|
this.showMyPlugIn();
|
|
}
|
|
});
|
|
},
|
|
//验证插件是否有设置页面且当前登录的用户含有设置的权限
|
|
checkOperateSetting(item) {
|
|
return item.admin_url && this.operate[this.operateObj[item.admin_url]]
|
|
},
|
|
//跳转插件配置
|
|
toSetting(item) {
|
|
MenuApp.pathData.push({
|
|
name: item.plug_name + '-插件配置',
|
|
path: item.admin_url
|
|
});
|
|
},
|
|
}
|
|
})
|
|
</script> |