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/apps/FirAppInfoscombo.vue

410 lines
12 KiB

<template>
<div class="apps-app-combo page-tabcontent ">
<div class="middle-wrapper">
<div class="request-wrapper" v-if="has_combo ">
<p class="lead text-center ng-scope">已经与 <b>{{ has_combo.name }}</b> 合并</p>
<table>
<tr>
<td><span class="type">{{ currentapp.type|getapptype}}</span></td>
<td></td>
<td><span class="type">{{ has_combo.type|getapptype}}</span></td>
</tr>
<tr>
<td>
<div class="icon"><img :src="cmaster_release.icon_url" class="ng-isolate-scope">
</div>
</td>
<td><i class="icon-combo"></i></td>
<td>
<div class="icon"><img :src="hmaster_release.icon_url" class="ng-isolate-scope">
</div>
</td>
</tr>
<tr>
<td class="actions" colspan="3">
<!-- <a class="btn btn-link " @click="each_confirm"><b>解除合并</b></a>-->
<el-button @click="each_confirm" round>解除合并</el-button>
</td>
</tr>
</table>
</div>
<div v-else>
<div class="icon-container text-center">
<img :src="cmaster_release.icon_url" height="128" width="128">
</div>
<div class="apps-list">
<div class="known-apps">
<p class="lead ng-binding">
<b>选择已有的应用进行合并</b>
</p>
<div class="apps">
<b v-if="comboapplists.length ===0 ">暂无可以合并的应用</b>
<div :key="comboapp.app_id" @click="each_add(comboapp.app_id)" class="app ng-scope"
v-for="comboapp in comboapplists">
<div class="icon">
<img :src="comboapp.master_release|geticon_url" class="ng-isolate-scope">
</div>
<p class="ng-binding">{{ comboapp.name }}</p></div>
</div>
</div>
<span class="hr-vertical"></span>
<div class="find-apps">
<p class="lead ">
<b>输入需要合并的应用的短链接或者名字</b>
</p>
<div class="form-group">
<el-input
@click="searchapps"
clearables
placeholder="输入短链接或者名字"
prefix-icon="el-icon-search"
v-model="searchKey"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {apputils, getapps} from "@/restful";
export default {
name: "FirAppInfoscombo"
, data() {
return {
searchKey: '',
currentapp: {},
has_combo: {},
cmaster_release: {},
hmaster_release: {},
comboapplists: [],
orgapplists: [],
comboapp: {"master_release": ""}
}
}, methods: {
searchapps() {
let keysearch = this.searchKey.replace(/^\s+|\s+$/g, "");
let newapplists = [];
for (let i = 0; i < this.orgapplists.length; i++) {
if (this.orgapplists[i].short.search(keysearch) === 0 || this.orgapplists[i].name.search(keysearch) === 0) {
newapplists.push(this.orgapplists[i]);
}
}
if (keysearch === "") {
this.comboapplists = this.orgapplists.slice();
} else {
this.comboapplists = newapplists.slice();
}
},
each_add(hcombo_id) {
apputils(data => {
if (data.code === 1000) {
this.$message.success('操作成功');
this.comboapplists = [];
apputils(data => {
let appinfos = {};
appinfos = data.data;
appinfos["icon_url"] = appinfos.master_release.icon_url;
this.$store.dispatch('doucurrentapp', appinfos);
if (data.code === 1000) {
this.$store.dispatch('doucurrentapp', data.data);
} else if (data.code === 1003) {
this.$router.push({name: 'FirApps'});
} else {
// eslint-disable-next-line no-console
console.log("Error");
}
}, {
"methods": "GET",
"app_id": this.currentapp.app_id
});
this.setData();
}
}, {
"methods": "PUT",
"app_id": this.currentapp.app_id,
"data": {
"has_combo": {
"hcombo_id": hcombo_id,
"action": "COMBO",
}
}
});
},
each_confirm() {
apputils(data => {
if (data.code === 1000) {
this.$message.success('操作成功');
let currentapp = this.$store.state.currentapp;
this.has_combo = this.$store.state.currentapp.has_combo;
this.has_combo = null;
currentapp.has_combo = null;
this.hmaster_release = null;
this.$store.dispatch('doucurrentapp', currentapp);
this.getappiconFun();
}
}, {
"methods": "PUT",
"app_id": this.currentapp.app_id,
"data": {
"has_combo": {
"hcombo_id": this.has_combo.app_id,
"action": "UNCOMBO",
}
}
});
},
setData() {
this.currentapp = this.$store.state.currentapp;
this.cmaster_release = this.$store.state.currentapp.master_release;
if (this.$store.state.currentapp.has_combo) {
this.has_combo = this.$store.state.currentapp.has_combo;
this.hmaster_release = this.$store.state.currentapp.has_combo.master_release;
} else {
this.has_combo = null;
this.hmaster_release = null;
this.getappiconFun();
}
},
getappiconFun() {
let type = "android";
if (this.currentapp.type === 0) {
type = "ios"
}
getapps(data => {
if (data.code === 1000) {
this.comboapplists = data.data;
this.orgapplists = this.comboapplists.slice(); //深拷贝
} else {
this.$router.push({name: 'FirLogin'});
}
}, {"type": type, "page": 1, "size": 999, "act": 'combo'});
}
}, filters: {
geticon_url(app) {
return app.icon_url
},
getapptype: function (type) {
let ftype = '';
if (type === 0) {
ftype = 'Android'
} else {
ftype = 'iOS'
}
return ftype
},
},
mounted() {
this.$store.dispatch('doappInfoIndex', [[44, 44], [44, 44]]);
// this.getappiconFun();
this.setData();
},
watch: {
'$store.state.currentapp': function () {
this.setData();
},
// eslint-disable-next-line no-unused-vars
searchKey: function (val, oldVal) {
this.searchapps()
},
}
}
</script>
<style scoped>
.text-center {
text-align: center
}
.middle-wrapper {
margin: 0 auto;
width: 1100px
}
.apps-app-combo {
position: relative;
padding-top: 45px
}
.apps-app-combo .icon-container {
margin-bottom: 60px
}
.apps-app-combo .icon-container img {
border-radius: 17.544%
}
.apps-app-combo .apps-list {
position: relative;
overflow: hidden
}
.apps-app-combo .lead {
margin-bottom: 30px;
font-size: 16px
}
.apps-app-combo .lead b {
max-width: 300px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top
}
.known-apps {
text-align: center;
float: left;
width: 45%;
margin: 10px 30px;
}
.apps-app-combo .known-apps .icon img {
width: 80px;
height: 80px;
border-radius: 22.7%
}
.apps-app-combo .known-apps .apps .app {
display: inline-block;
margin: 0 0 20px 28px;
text-align: center;
cursor: pointer;
vertical-align: top;
}
.apps-app-combo .known-apps .apps .app > p {
margin-top: 8px;
font-size: 12px;
text-align: center;
display: inline-block;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal
}
.apps-app-combo .find-apps {
/*padding-left: 50px;*/
text-align: center;
margin: 10px 30px;
float: right;
width: 40%;
}
.apps-app-combo .find-apps .lead {
text-align: left;
}
.apps-app-combo .find-apps .form-group {
position: relative;
margin-bottom: 36px;
width: 260px;
}
.apps-app-combo .hr-vertical {
position: absolute;
z-index: 12;
width: 1px;
height: 100%;
background-color: #d5f9f9
}
.apps-app-combo .request-wrapper .lead {
margin-bottom: 80px;
font-size: 18px
}
.apps-app-combo .request-wrapper table {
margin: 0 auto;
width: 400px
}
.apps-app-combo .request-wrapper table tr:first-child td span {
display: inline-block;
margin-bottom: 12px;
font-size: 16px
}
.apps-app-combo .request-wrapper table td {
padding: 0 15px;
text-align: center
}
.apps-app-combo .request-wrapper table td img {
width: 120px;
height: 120px;
border-radius: 17.54%
}
.apps-app-combo .request-wrapper table .actions {
padding-top: 40px
}
.apps-app-combo .request-wrapper table .actions .btn {
margin-bottom: 20px;
min-width: 100px;
border-radius: 30px
}
.apps-app-combo .request-wrapper table .actions .btn-link {
color: #a9b1b3;
text-decoration: none;
border: 1px solid transparent;
-webkit-transition: border-color .25s;
transition: border-color .25s
}
.apps-app-combo .request-wrapper table .actions .btn-link:hover {
border-color: #a9b1b3
}
.apps-app-combo .request-wrapper table i.icon-combo {
font-size: 30px
}
.apps-app-combo .combo-loading-wrap {
margin-bottom: 8px
}
.apps-app-combo .combo-loading-wrap > .icon {
display: inline-block;
-webkit-animation: rotating 1s linear infinite;
animation: rotating 1s linear infinite
}
</style>