<template>
|
<!--
|
作者：luoyiming
|
时间：2022-08-05
|
描述：插件中心-超级分红-排位图
|
-->
|
<div class="user">
|
<div class="common-seach-wrap">
|
<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label=""><el-input v-model="formInline.keyword" placeholder="请输入昵称/姓名/ID"></el-input></el-form-item>
|
<el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item>
|
</el-form>
|
</div>
|
|
<!--内容-->
|
<div class="product-content">
|
<div class="d-a-c lh18 ww100 pt16">
|
<div class="tc user-item">
|
<p class="mb16" v-if="firstUser.parent_id>0"><el-button type="primary" size="small" @click="gotoPreUser">往上一级</el-button></p>
|
<p><img class="radius" v-img-url="firstUser.avatarUrl" width="30" height="30" /></p>
|
<p class="gray3">{{firstUser.nickName}}</p>
|
<p class="gray9">id：{{firstUser.user_id}}</p>
|
<p class="gray9">层级：{{firstUser.tree_level}}，排位：{{firstUser.level_num}}</p>
|
<p class="gray9" v-if="firstUser.referee">直推上级：{{firstUser.referee.nickName}}</p>
|
</div>
|
</div>
|
<div class="d-a-c lh18 ww100 pt16 linebox secondbox">
|
<p></p>
|
</div>
|
<div class="d-a-c lh18 ww100 pt16">
|
<div class="tc user-item" v-for="(item, index2) in secondUser" :key="index2" @click="changeUser(item)">
|
<p><img class="radius" v-img-url="item.avatarUrl" width="30" height="30" /></p>
|
<p class="gray3" v-if="item.user_id">{{item.nickName}}</p>
|
<p class="gray9" v-if="item.user_id">id：{{item.user_id}}</p>
|
<p class="gray9" v-else>虚位以待</p>
|
<p class="gray9" v-if="item.user_id">层级：{{item.tree_level}}，排位：{{item.level_num}}</p>
|
<p class="gray9" v-if="item.referee">直推上级：{{item.referee.nickName}}</p>
|
</div>
|
</div>
|
<div class="d-a-c lh18 ww100 pt16 linebox thirdbox">
|
<p v-for="(item, index) in secondUser" :key="index"></p>
|
</div>
|
<div class="d-a-c lh18 ww100 pt16">
|
<div class="tc user-item" v-for="(item, index3) in thirdUser" :key="index3" @click="changeUser(item)">
|
<p><img class="radius" v-img-url="item.avatarUrl" width="30" height="30" /></p>
|
<p class="gray3" v-if="item.user_id">{{item.nickName}}</p>
|
<p class="gray9" v-if="item.user_id">id：{{item.user_id}}</p>
|
<p class="gray9" v-else>虚位以待</p>
|
<p class="gray9" v-if="item.user_id">层级：{{item.tree_level}}，排位：{{item.level_num}}</p>
|
<p class="gray9" v-if="item.referee">直推上级：{{item.referee.nickName}}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PlusApi from '@/api/plus/bonus.js';
|
export default {
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
/*列表数据*/
|
firstUser: [],
|
secondUser: [],
|
thirdUser: [],
|
/*搜索对象*/
|
formInline: {
|
keyword: '',
|
type: 0 // 0-id, 1-昵称、手机号搜索
|
},
|
user_id: '',
|
};
|
},
|
watch: {
|
$route(to, from) {
|
if (to.query.user_id != null) {
|
this.user_id = to.query.user_id;
|
} else {
|
this.user_id = '';
|
}
|
console.log(this.user_id)
|
this.getData();
|
}
|
},
|
created() {
|
/*获取列表*/
|
this.getData();
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
let Params = {};
|
Params.keyword = self.formInline.type == 1 ? self.formInline.keyword : self.user_id;
|
Params.type = self.formInline.type;
|
PlusApi.architecture(Params, true)
|
.then(data => {
|
self.loading = false;
|
self.firstUser = data.data.list.firstUser;
|
self.secondUser = data.data.list.secondUser;
|
self.thirdUser = data.data.list.thirdUser;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
//搜索
|
onSubmit() {
|
this.formInline.type = 1;
|
this.getData();
|
},
|
changeUser(item) {
|
this.user_id = item.user_id;
|
this.formInline.type = 0;
|
this.getData();
|
},
|
gotoPreUser() {
|
this.user_id = this.firstUser.parent_id;
|
this.formInline.type = 0;
|
this.getData();
|
},
|
}
|
};
|
</script>
|
|
<style scoped="scoped">
|
.el-button{margin-left: 0;}
|
.product-content p img {
|
display: inline-block;
|
}
|
.user-item {
|
width: 150px;
|
}
|
.linebox p {
|
height: 15px;
|
border-top: 1px solid #ccc;
|
border-left: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
position: relative;
|
}
|
.linebox p:before {
|
position: absolute;
|
content: "";
|
border-left: 1px solid #ccc;
|
height: 30px;
|
top: -15px;
|
left: 50%;
|
}
|
.secondbox p {
|
width: 66%;
|
}
|
.thirdbox p {
|
width: 23%;
|
}
|
</style>
|
