You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
flyapps/fir_client/src/components/FirAppInfosBase.vue

311 lines
9.2 KiB

<template>
<el-main>
<div class="page-app app-info">
<div class="banner">
<div class="middle-wrapper" >
<div @click="defaulttimeline">
<img :src="icon_url" class="appicon" style="width:100px; height:100px">
</div>
<div class="badges">
<span class="bundleid">SHORT<b class="short">&nbsp;&nbsp;{{ appinfos.short }}</b></span>
<span>{{ master_release.release_type |getapptype }}</span>
<span><i class="el-icon-cloudy"></i><b class="ng-binding">{{ appinfos.count_hits }}</b></span>
<span class="bundleid ng-binding">BundleID<b class="ng-binding">&nbsp;&nbsp;{{ appinfos.bundle_id }}</b></span>
<span class="version ng-scope">{{ master_release.minimum_os_version }}&nbsp; 或者高版本</span>
</div>
<div class="actions">
<el-button @click="appDownload" class="download" icon="el-icon-view">
预览
</el-button>
</div>
<div class="tabs-container">
<el-row :gutter="1">
<el-col :span="3">
<a class="" ref="baseinfo" @click="baseinfo"><i class="el-icon-document"></i>基本信息</a>
</el-col>
<el-col :span="3">
<a class="" ref="security" @click="security"><i class="el-icon-set-up"></i>权限管理</a>
</el-col>
<el-col :span="3">
<a class="" ref="combo" @click="combo"><i class="el-icon-copy-document"
style="transform:rotateX(180deg);"></i>应用合并</a>
</el-col>
<el-col :span="3" v-if="appinfos.type">
<a class="" ref="devices" @click="devices"><i class="el-icon-mobile-phone"></i>设备列表</a>
</el-col>
</el-row>
</div>
</div>
</div>
<div>
<div class="block" style="margin-top: -46px;color: #d5f9f9">
<el-slider
v-model="$store.state.appInfoIndex[0]"
range
:show-tooltip="false"
:max="100">
</el-slider>
</div>
<el-container style="padding-top: 20px;max-width: 96%">
<router-view></router-view>
</el-container>
</div>
</div>
</el-main>
</template>
<script>
import {getappinfos} from "../restful";
export default {
name: "FirAppInfosBase",
data() {
return {
icon_url:"",
appinfos: {},
master_release: {},
allapp: [],
activity: {
editing: false
},
}
},
methods: {
setfunactive(item,index){
for (let key in this.$refs) {
if(key === item){
this.$refs[key].classList.add('active');
this.$store.dispatch('doappInfoIndex', [[index, index], [index, index]]);
}else {
this.$refs[key].classList.remove('active');
}
}
},
appDownload() {
this.$router.push({name: 'FirDownload', params: { short: this.appinfos.short }})
},
defaulttimeline() {
this.setfunactive('timeline',5);
this.$router.push({name: 'FirAppInfostimeline'});
},
baseinfo() {
this.setfunactive('baseinfo',18);
this.$router.push({name: 'FirAppInfosbaseinfo'});
},
security(){
this.setfunactive('security',31);
this.$router.push({name: 'FirAppInfossecurity'});
},
combo() {
this.setfunactive('combo',44);
this.$router.push({name: 'FirAppInfoscombo'});
},
devices(){
this.setfunactive('devices',57);
this.$router.push({name: 'FirAppInfosdevices'});
},
}, created() {
}, filters: {
getapptype: function (type) {
let ftype = '';
if (type === 0) {
ftype = 'Android'
} else {
ftype = 'iOS'
}
return ftype
},
},
computed: {
}, mounted() {
getappinfos(data => {
if (data.code === 1000) {
this.appinfos = data.data;
this.master_release = data.data.master_release;
this.$store.dispatch("getUser",data.userinfo);
this.appinfos["icon_url"] = this.master_release.icon_url;
this.$store.dispatch('doucurrentapp', this.appinfos);
} else if (data.code === 1003) {
this.$router.push({name: 'FirApps'});
} else {
// eslint-disable-next-line no-console
console.log("失败了");
}
}, {
"app_id": this.$route.params.id
});
5 years ago
if(this.$store.state.currentapp.master_release){
this.icon_url = this.$store.state.currentapp.master_release.icon_url
}
},watch:{
'$store.state.currentapp.master_release.icon_url':function () {
this.icon_url = this.$store.state.currentapp.master_release.icon_url
}
}
}
</script>
<style scoped>
.el-main {
margin: 10px auto 100px;
width: 1166px;
position: relative;
padding-bottom: 1px;
background-color: #bfe7f9;
color: #9b9b9b;
-webkit-font-smoothing: antialiased;
border-radius: 1%;
}
.appicon {
overflow: hidden;
margin-left: 10px;
border-radius: 17.544%;
}
.page-app {
padding-bottom: 0
}
.page-app .banner {
padding-top: 60px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(208, 208, 208, .5);
background-color: #d5f9f9;
border-radius: 10px;
}
.page-app .banner .actions {
position: absolute;
right: 0;
top: 0;
}
.page-app .banner .actions .download, .page-app .banner .actions .upload {
display: block;
min-width: 150px;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
margin: 0 12px 12px 12px
}
.page-app .banner .actions .upload {
background-color: #3ab2a7;
border: 1px solid transparent;
color: #fff;
cursor: pointer
}
.page-app .banner .actions .download {
text-align: center;
text-decoration: none;
color: #3ab2a7;
border: 1px solid;
background-color: transparent
}
.page-app .banner .middle-wrapper {
position: relative
}
.page-app .badges {
margin-left: 160px;
font-size: 12px;
line-height: initial;
position: relative;
margin-top: -100px;
}
.page-app .badges > span {
position: relative;
display: inline-block;
margin-right: 8px;
padding: 4px 8px;
border: 1px solid;
border-radius: 5px
}
.page-app .badges .short {
color: #6f6ef8
}
.page-app .badges b {
display: inline-block;
padding-left: 12px;
height: 100%;
font-weight: 400
}
.page-app .badges b:before {
position: absolute;
top: 0;
width: 0;
height: 100%;
border-left: 1px solid;
content: ' ';
margin-left: -6px
}
.page-app .tabs-container {
margin-top: 40px;
margin-left: 160px
}
.page-app .tabs-container .el-row {
margin: 10px auto;
}
.page-app .tabs-container .el-row .el-col {
margin-right: 30px;
border-left: 1px solid;
}
.page-app .tabs-container .el-row .el-col a {
display: block;
padding-left: 15px;
color: #599b1a;
text-decoration: none;
-webkit-transition: all .5s;
transition: all .5s
}
.page-app .tabs-container .el-row .el-col a > i {
display: block;
margin-bottom: 14px;
height: 22px;
font-size: 22px
}
.page-app .tabs-container .el-row .el-col a.active {
color: #4a4a4a
}
.page-app .tabs-container .el-row .el-col:nth-child(5) {
display: none
}
.page-app .has-devices .tabs-container .el-row .el-col:nth-child(5) {
display: inline-block
}
</style>