<template>
|
<el-dialog title="客户应用" :visible.sync="dialogVisible" @close='dialogFormVisible' :close-on-click-modal="false"
|
:close-on-press-escape="false">
|
<div class="plus-container" v-loading="loading2">
|
|
<div class="search" v-if="!form.app">
|
<el-input v-model="shopinfo.app_name" style="width: 200px;" placeholder="商城名称"></el-input>
|
<el-button size="small" type="primary" @click="open_shop">开通商城</el-button>
|
</div>
|
<div class="search" v-else>
|
<el-row>
|
<el-col :span="8">商城名称:{{form.app.app_name}}</el-col>
|
<el-col :span="5">账户:{{form.shopuser.user_name}}</el-col>
|
<el-col :span="5" v-if="form.app.is_delete==0">密码:{{form.roleaccess.length>0?form.shopuser.real_password :'绑定应用才可查看'}}</el-col>
|
<el-col :span="5" v-if="form.app.is_delete==1"><span style="color:red;">此商城已被删除,无法使用！</span></el-col>
|
<el-col :span="6">
|
<el-link v-if="form.app.is_delete==0" :href="'/shop#/login?from=admin'" target="_blank" type="text" size="small">进入商城</el-link>
|
<el-popover
|
placement="bottom"
|
title="已有权限"
|
width="200"
|
trigger="click"
|
>
|
<el-tree :data="data" :props="defaultProps"></el-tree>
|
<el-button slot="reference" size="mini" @click="show_access(form.app.app_id)">商城权限</el-button>
|
</el-popover>
|
</el-col>
|
</el-row>
|
|
</div>
|
<div v-for="(item, index) in tableData" :key="index" class="mb16">
|
<div class="common-form d-s-c">
|
<span>{{item.category_name}}</span>
|
|
</div>
|
<div class="plus-list">
|
<div class="item" v-for="(child, num) in item.children" :key="num">
|
<div class="item-box pr">
|
<a href="javascript:void(0);" class="close-btn">
|
|
<el-button type="success" disabled v-if="check(child.id)" size="mini">已绑定</el-button>
|
<el-button type="primary" v-else size="mini" @click="bangClick(child)" :loading="loading">绑定</el-button>
|
<el-popover
|
placement="bottom"
|
title="应用权限"
|
width="200"
|
trigger="click"
|
>
|
<el-tree :data="applicdata" :props="defaultProps"></el-tree>
|
<el-button style="margin-top:5px;" slot="reference" size="mini" @click="show_applic_access(child.id)">应用权限</el-button>
|
</el-popover>
|
</a>
|
<a href="javascript:void(0);">
|
<!-- <span class="iconfont icon icon-tubiaozhizuomoban-"></span> -->
|
<img style="width: 40px;height: 40px;border-radius: 4px;" :src="child.app_icon" >
|
|
<div class="ml10">
|
<h3>{{child.app_name}}</h3>
|
<p>{{child.app_use}}</p>
|
<p style="color: red;" v-if="agentInfo.level==2">金钻价格:￥{{child.admin_money}}</p>
|
<p style="color: red;" v-if="agentInfo.level==1">钻石价格:￥{{child.supplier_money}}</p>
|
<p style="color: red;" v-if="agentInfo.level==0">金牌价格:￥{{child.shop}}</p>
|
</div>
|
</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import ApplicationApi from '@/api/application.js';
|
|
export default {
|
data() {
|
return {
|
form: {},
|
/*左边长度*/
|
formLabelWidth: '120px',
|
/*是否显示*/
|
dialogVisible: false,
|
/*是否正在加载*/
|
loading: false,
|
tableData: [],
|
applicList:[],
|
ischange:false,
|
loading2:true,
|
shopinfo:{app_name:''},
|
data: [],
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
},
|
applicdata:[],
|
agentInfo:{}
|
};
|
},
|
props: ['open_applic','curModel'],
|
created() {
|
this.dialogVisible = this.open_applic;
|
this.form=this.curModel;
|
this.form.applic_arr=[];
|
/*获取列表*/
|
this.getData();
|
this.getClientDetail();
|
},
|
methods: {
|
getClientDetail(){
|
let self=this;
|
ApplicationApi.getClientDetail({client_id:this.curModel.client_id}, true).then(res => {
|
self.form.app=res.data.data.app;
|
self.form.role=res.data.data.role;
|
self.form.roleaccess=res.data.data.roleaccess;
|
self.form.shopuser=res.data.data.shopuser;
|
self.form.app_id=res.data.data.app_id;
|
self.agentInfo=res.data.agentInfo;
|
})
|
.catch(error => {
|
|
});
|
},
|
show_applic_access(id){
|
let self=this;
|
ApplicationApi.getApplicRole({id:id}, true).then(res => {
|
self.applicdata=res.data.menus;
|
})
|
.catch(error => {
|
|
});
|
},
|
show_access(){
|
let self=this;
|
ApplicationApi.getRoleList(self.form.shopuser, true).then(res => {
|
self.data=res.data.menus;
|
})
|
.catch(error => {
|
|
});
|
},
|
open_shop(){
|
let self=this;
|
if(self.shopinfo.app_name==''){
|
self.$message({
|
message: '请填写商城名称',
|
type: 'error'
|
});
|
return;
|
}
|
let params={'app_name':self.shopinfo.app_name,'client_id':self.form.client_id};
|
const loading =this.$loading({
|
lock: true,
|
text: '提交中...',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
ApplicationApi.addShop(params, true).then(res => {
|
loading.close();
|
self.$message({
|
message: '恭喜你，成功开通商城',
|
type: 'success'
|
});
|
self.getClientDetail();
|
})
|
.catch(error => {
|
loading.close();
|
});
|
},
|
/*绑定应用*/
|
bangClick(e) {
|
let self = this;
|
let params = this.form;
|
params.applic_info=e;
|
if(self.form.app_id<=0){
|
self.$message({
|
message: '请先开通商城',
|
type: 'error'
|
});
|
return;
|
}
|
let money=e.shop;
|
if(self.agentInfo.level==1){
|
money=e.supplier_money;
|
}else if(self.agentInfo.level==2){
|
money=e.admin_money;
|
}
|
self.$confirm('代理商需扣款'+money+'元，确定绑定此应用吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
self.loading = true;
|
ApplicationApi.bangApplic({params: JSON.stringify(params)}, true).then(res => {
|
self.loading = false;
|
self.$message({
|
message: '恭喜你，成功绑定此应用',
|
type: 'success'
|
});
|
//self.dialogFormVisible(true);
|
self.getData();
|
self.getClientDetail();
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
})
|
.catch(() => {});
|
},
|
check(id){
|
if(this.ischange){
|
var applic_arr=this.form.applic_arr;
|
var index=applic_arr.indexOf(id);
|
if(index==-1){
|
return false;
|
}else{
|
return true;;
|
}
|
}
|
var list=this.applicList;
|
var checked=false;
|
console.log(list);
|
var applic_arr=this.form.applic_arr;
|
for(var i=0;i<list.length;i++){
|
if(list[i].applic_id==id){
|
checked=true;
|
applic_arr.push(id);
|
}
|
}
|
this.form.applic_arr=applic_arr;
|
console.log(checked);
|
return checked;
|
},
|
/*获取列表*/
|
getData() {
|
let self = this;
|
let Params = {client_id:this.form.client_id};
|
ApplicationApi.plugslist(Params, true)
|
.then(res => {
|
self.loading2 = false;
|
self.applicList=res.data.applicList;
|
self.tableData = res.data.accessList;
|
self.totalDataNumber = res.data.list.total;
|
|
})
|
.catch(error => {
|
self.loading2 = false;
|
});
|
},
|
/*关闭弹窗*/
|
dialogFormVisible(e) {
|
if (e) {
|
this.$emit('closeDialog', {
|
type: 'success',
|
openDialog: false
|
})
|
} else {
|
this.$emit('closeDialog', {
|
type: 'error',
|
openDialog: false
|
})
|
}
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.plus-container {
|
min-height: 400px;
|
}
|
.plus-container .common-form .close-btn{ color: #CCCCCC;}
|
.plus-list {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
.plus-list .item {
|
width: 33%;
|
}
|
.plus-list .item .item-box {
|
margin: 0 10px 20px;
|
border:1px solid #FFFFFF;
|
}
|
.plus-list .item .item-box .close-btn{ position: absolute; padding-left: 0; width: 20px; height: 20px; top: 10px; right: 50px; color: #ff0000; display: block;}
|
.plus-list .item .item-box:hover{ border-radius: 8px; border:1px dashed #CCCCCC;}
|
/* .plus-list .item .item-box:hover .close-btn{display: block;} */
|
.plus-list .item .add-item-box {
|
width: 40px;
|
height: 40px;
|
margin-left: 20px;
|
border-radius: 8px;
|
border: 1px solid #186eeb;
|
}
|
.plus-list .item a {
|
display: flex;
|
height: 80px;
|
padding-left: 10px;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
.plus-list .item a h3 {
|
font-weight: normal;
|
color: #333333;
|
}
|
.plus-list .item a:hover h3 {
|
color: #3a8ee6;
|
}
|
.plus-list .item a p {
|
font-size: 12px;
|
color: #999999;
|
}
|
.plus-list .item .item-box .iconfont {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 40px;
|
height: 40px;
|
border-radius: 8px;
|
line-height: 40px;
|
background: #3a8ee6;
|
}
|
.plus-list .item a .iconfont.icon {
|
font-size: 22px;
|
color: #ffffff;
|
}
|
.plus-list .item .item-box .el-button{
|
padding: 5px 10px;
|
}
|
.el-popover{
|
max-height: 300px;overflow-y: scroll
|
}
|
</style>
|
