<template>
<div class="box agent-home-wrapper">
<!-- <div class="back" @click="back()"> <span class="backbtn"><img src="../../assets/images/index/backbtn.png" alt="" srcset=""></span> 返回</div> -->
<div class="search">
<div class="tab" v-show="searchFlag">
<ul ref="tabul">
<li v-for="(item,index) in fansTitle" v-bind:key="index" @click="change(item,index)" :class="number == index ? 'active' : ''">{{item}}</li>
</ul>
</div>
<div class="top">
<input type="text" maxlength="15" @focus="goto" v-model="formData.nickNameOrPhone" class="iconfont sousuo" name="" :placeholder="icon">
<input type="button" class="go" @click="grayShowHide()" value="筛选查找">
</div>
<!-- <div class="btm" v-show="gray">
<ul>
<li v-for="(item,index) in typeList" v-bind:key="index"><a @click="typeChange(index)" href="javascript:">{{item}}</a></li>
</ul>
</div> -->
</div>
<div class="topHeight"></div>
<!-- <div class="banner" v-show="searchFlag">
<p>粉丝数</p>
<div>
<h1>{{fansCount}}</h1>人
</div>
</div> -->
<div class="number">
<span>总人数 <b>{{selectNum}}</b> <i>人</i> </span>
{{titleStr}}
</div>
<div class="cont">
<ul>
<template v-for='(item,index) in myTeanList'>
<div v-if="item.roleName !== '会员'">
<my-team-item :item="item"></my-team-item>
</div>
<div v-else>
<my-team-item-small :item="item"></my-team-item-small>
</div>
</template>
</ul>
</div>
<div class="gray" ref="scroll" @click="hide" v-show="gray">
</div>
<div class="form" v-show="gray">
<div v-show="currTitle == 15">
<p class="title">
粉丝状态
</p>
<ul class="status">
<li v-for="(item,index) in fansStatus" :class="index == formData.active ? 'selected' : ''" @click="staChange(index)" v-bind:key="index">{{item.val}}</li>
<!-- <li class="selected">全部</li>
<li>潜力</li>
<li>有效</li>
<li>活跃</li> -->
</ul>
</div>
<p class="title">
粉丝来源
</p>
<ul class="source">
<li v-for="(item,index) in fansSource" :class="index == formData.generation ? 'selected' : ''" @click="souChange(index)" v-bind:key="index">{{item.val}}</li>
<!-- <li>团队</li>
<li>直属</li> -->
</ul>
<div v-show="currTitle > 14">
<p class="title">
实际销售佣金
</p>
<div class="inputList">
<input type="text" v-model="formData.salePrizeTotalStart">
<span></span>
<input type="text" v-model="formData.salePrizeTotalEnd">
</div>
<p class="title">
累计预估销售佣金
</p>
<div class="inputList">
<input type="text" v-model="formData.expectSalePrizeTotalStart">
<span></span>
<input type="text" v-model="formData.expectSalePrizeTotalEnd">
</div>
<p class="title">
直属金牌店主
</p>
<div class="inputList">
<input type="text" v-model="formData.zhishujinpaiStart">
<span></span>
<input type="text" v-model="formData.zhishujinpaiEnd">
</div>
<p class="title">
直属有效金牌店主
</p>
<div class="inputList">
<input type="text" v-model="formData.zhishuyouxiaojinpaiStart">
<span></span>
<input type="text" v-model="formData.zhishuyouxiaojinpaiEnd">
</div>
<p class="title">
团队金牌店主
</p>
<div class="inputList">
<input type="text" v-model="formData.tuanduijinpaiStart">
<span></span>
<input type="text" v-model="formData.tuanduijinpaiEnd">
</div>
<p class="title">
团队有效金牌店主
</p>
<div class="inputList">
<input type="text" v-model="formData.tuanduiyouxiaojinpaiStart">
<span></span>
<input type="text" v-model="formData.tuanduiyouxiaojinpaiEnd">
</div>
</div>
<div class="btm">
<ul>
<li><img src="../../assets/images/team/reset.png" @click="reset()" alt="" srcset=""></li>
<li><img src="../../assets/images/team/confirm.png" @click="confirm()" alt="" srcset=""></li>
</ul>
</div>
</div>
</div>
</template>
<script>
import { md5 } from 'vux'
import { HttpClient } from './../../utils/http-client'
import api from './../../utils/api'
import util from './../../utils/util'
import MyTeamItem from '../../components/MyTeanItem.vue'
import MyTeamItemSmall from '../../components/MyTeanItemSmall.vue'
export default {
data() {
return {
icon: "\ue72c 输入要搜索的用户昵称",
gray: false,
myTeanList: [],
fansCount: '',
pageSize: 10,
pageOffset: 1,
totalPage: 0,
incId: 0,
sign: 0,
memberId: 0,
nickname: '',
fansTitle: [],
currTitle: 17,
number: 0,
tmpArr: [],
roleType: 0,
// typeList: [
// '全部',
// '会员',
// '金牌店主',
// '钻石店主',
// '皇冠店主'
// ],
searchFlag: true,
fansStatus: [
{
key: 0,
val: '全部'
},
{
key: 1,
val: '活跃'
},
{
key: 2,
val: '潜力'
},
{
key: 3,
val: '有效'
}
],
fansSource: [
{
key: 0,
val: '团队'
},
{
key: 1,
val: '直属'
},
],
formData: {
nickNameOrPhone: '',
active: 0,
generation: 0,
salePrizeTotalStart: '',
salePrizeTotalEnd: '',
expectSalePrizeTotalStart: '',
expectSalePrizeTotalEnd: '',
zhishujinpaiStart: '',
zhishujinpaiEnd: '',
zhishuyouxiaojinpaiStart: '',
zhishuyouxiaojinpaiEnd: '',
tuanduijinpaiStart: '',
tuanduijinpaiEnd: '',
tuanduiyouxiaojinpaiStart: '',
tuanduiyouxiaojinpaiEnd: ''
},
defaultFormData: {},
obj: {},
selectNum: 0,
titleStr: ''
}
},
components: {
MyTeamItem,
MyTeamItemSmall
},
watch: {
currTitle:function(v,oldv) {
if(v == 17) {
this.titleStr = "皇冠店主"
}
if(v == 16) {
this.titleStr = "钻石店主"
}
if(v == 15) {
this.titleStr = "金牌店主"
}
if(v == 0) {
this.titleStr = "会员"
}
}
},
created() {
this.defaultFormData = JSON.parse(JSON.stringify(this.formData))
window.addEventListener('scroll',this.scroll,true)
},
destroyed () {
window.removeEventListener('scroll', this.scroll, true)
},
mounted() {
this.currTitle = this.$route.query.roleId
if(this.currTitle == 17) {
this.titleStr = "皇冠店主"
}
if(this.currTitle == 16) {
this.titleStr = "钻石店主"
}
if(this.currTitle == 15) {
this.titleStr = "金牌店主"
}
if(this.currTitle == 0) {
this.titleStr = "会员"
}
this.formData.generation = this.$route.query.generation
this.incId = this.$route.query.incId
this.sign = this.$route.query.sign
this.memberId = this.$route.query.memberId
this.getTeamNum(this.memberId,this.incId,this.sign)
// this.getFansDRM(this.currTitle + 1,this.incId,this.pageSize,this.pageOffset,this.sign,this.roleType,this.nickname)
},
methods: {
getTeamNum(memberId,incId,sign) {
var that = this
HttpClient.get(api.getTeamNum(memberId,incId,sign)).then((res) => {
if(res.data.code===0){
that.fansTitle = res.data.data
// console.log(that.fansTitle,1)
// for(var i in that.fansTitle){
// console.log(i)
// that.tmpArr.push(i)
// }
// that.currTitle = that.currTitle
if(that.fansTitle.length == 2){
if(this.currTitle == 0) {
this.number = 1
}
if(this.currTitle == 15) {
this.number = 0
}
}
if(that.fansTitle.length == 3){
if(this.currTitle == 0) {
this.number = 2
}
if(this.currTitle == 15) {
this.number = 1
}
if(this.currTitle == 16) {
this.number = 0
}
}
if(that.fansTitle.length == 4){
if(this.currTitle == 0) {
this.number = 3
}
if(this.currTitle == 15) {
this.number = 2
}
if(this.currTitle == 16) {
this.number = 1
}
if(this.currTitle == 17) {
this.number = 0
}
}
this.getFansDRM()
}
})
},
//我的团队
getFansDRM() {
if(this.currTitle == 0) {
this.obj = {
page: this.pageOffset,
size: this.pageSize,
roleId: this.currTitle,
incId: this.incId,
teamMemberQuery: this.formData
}
}
if(this.currTitle == 15) {
this.obj = {
page: this.pageOffset,
size: this.pageSize,
roleId: this.currTitle,
incId: this.incId,
teamGoldQuery: this.formData
}
}
if(this.currTitle == 16 || this.currTitle == 17) {
this.obj = {
page: this.pageOffset,
size: this.pageSize,
roleId: this.currTitle,
incId: this.incId,
teamDiamondsAndCrownQuery: this.formData
}
}
// return new Promise(function(resolve,reject) {
// })
HttpClient.post(api.queryTeamDetailInfoApplet(),JSON.stringify(this.obj)).then((res) => {
console.log(res,12)
if(res.data.code===0){
if(res.data.data.pageOffset == 1) {
this.myTeanList = res.data.data.datas
}else{
for (var i = 0; i < res.data.data.datas.length; i++) {
this.myTeanList.push(res.data.data.datas[i]);
}
}
// this.myTeanList = res.data.data.datas
// this.fansCount = res.data.data.ex.fansCount
this.pageOffset = res.data.data.pageOffset + 1
this.totalPage = res.data.data.totalPage
this.selectNum = res.data.data.totalRecord
}
})
},
change: function(item,index) {
window.scrollTo(0,0)
this.number = index
if(item.indexOf('皇冠店主') > -1 ) {
this.currTitle = 17
}
if(item.indexOf('钻石店主') > -1 ) {
this.currTitle = 16
}
if(item.indexOf('金牌店主') > -1) {
this.currTitle = 15
}
if(item.indexOf('会员') > -1) {
this.currTitle = 0
}
this.pageOffset = 1
// this.currTitle = index
this.myTeanList = []
this.reset()
var that = this
HttpClient.get(api.getTeamNum(that.memberId,that.incId,that.sign)).then((res) => {
if(res.data.code===0){
that.fansTitle = res.data.data
}
})
this.getFansDRM()
},
goto: function() {
// this.searchFlag = false
// this.pageOffset = 1
// this.myTeanList = []
// this.getFansDRM(this.currTitle + 1,this.incId,this.pageSize,this.pageOffset,this.sign,this.roleType,this.nickname)
this.$router.push({path:'/teamlist',query:{currTitle:this.currTitle,sign:this.sign,incId:this.incId}})
},
// typeChange: function(index) {
// // this.$router.push({path:'/teamlist',query:{roleType:index}})
// // this.searchFlag = false
// this.gray = false
// this.roleType = index
// this.pageOffset = 1
// this.myTeanList = []
// //this.getFansDRM(this.currTitle + 1,this.incId,this.pageSize,this.pageOffset,this.sign,this.roleType,this.nickname)
// },
scroll() {
var that = this;
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.body.scrollHeight;
console.log(scrollTop+windowHeight,scrollHeight)
if(scrollTop+windowHeight==scrollHeight){
if(that.pageOffset <= that.totalPage) {
that.getFansDRM();
}
}
},
staChange(index) {
this.formData.active = index
},
souChange(index) {
this.formData.generation = index
},
back() {
this.$router.go(-1)
},
grayShowHide() {
this.reset()
if(this.gray == true) {
document.body.style.height = 'unset'
document.body.style['overflow'] = 'auto'
this.gray = false
}else {
document.body.style.height = '100vh'
document.body.style['overflow'] = 'hidden'
this.gray = true
}
},
hide() {
document.body.style.height = 'unset'
document.body.style['overflow'] = 'auto'
this.gray = false
// this.formData = JSON.parse(JSON.stringify(this.defaultFormData))
},
reset() {
this.formData = JSON.parse(JSON.stringify(this.defaultFormData))
},
confirm() {
this.pageOffset = 1
this.hide()
this.myTeanList = []
this.formData.salePrizeTotalStart = this.formData.salePrizeTotalStart * 100
this.formData.salePrizeTotalEnd = this.formData.salePrizeTotalEnd * 100
this.formData.expectSalePrizeTotalStart = this.formData.expectSalePrizeTotalStart * 100
this.formData.expectSalePrizeTotalEnd = this.formData.expectSalePrizeTotalEnd * 100
this.formData.zhishujinpaiStart = this.formData.zhishujinpaiStart * 100
this.formData.zhishujinpaiEnd = this.formData.zhishujinpaiEnd * 100
this.formData.zhishuyouxiaojinpaiStart = this.formData.zhishuyouxiaojinpaiStart * 100
this.formData.zhishuyouxiaojinpaiEnd = this.formData.zhishuyouxiaojinpaiEnd * 100
this.formData.tuanduijinpaiStart = this.formData.tuanduijinpaiStart * 100
this.formData.tuanduijinpaiEnd = this.formData.tuanduijinpaiEnd * 100
this.formData.tuanduiyouxiaojinpaiStart = this.formData.tuanduiyouxiaojinpaiStart * 100
this.formData.tuanduiyouxiaojinpaiEnd = this.formData.tuanduiyouxiaojinpaiEnd * 100
if(this.currTitle == 0) {
this.obj = {
page: this.pageOffset,
size: this.pageSize,
roleId: this.currTitle,
incId: this.incId,
teamMemberQuery: this.formData
}
}
if(this.currTitle == 15) {
this.obj = {
page: this.pageOffset,
size: this.pageSize,
roleId: this.currTitle,
incId: this.incId,
teamGoldQuery: this.formData
}
}
if(this.currTitle == 16 || this.currTitle == 17) {
this.obj = {
page: this.pageOffset,
size: this.pageSize,
roleId: this.currTitle,
incId: this.incId,
teamDiamondsAndCrownQuery: this.formData
}
}
// return new Promise(function(resolve,reject) {
// })
var _this = this
HttpClient.post(api.queryTeamDetailInfoApplet(),JSON.stringify(this.obj)).then((res) => {
console.log(res,12)
if(res.data.code===0){
_this.selectNum = res.data.data.totalRecord
HttpClient.get(api.getTeamNum(_this.memberId,_this.incId,_this.sign)).then((res) => {
if(res.data.code===0){
_this.fansTitle = res.data.data
if(_this.fansTitle.length == 2){
if(_this.currTitle == 0) {
_this.fansTitle[1] = '会员['+_this.selectNum +']'
}
if(_this.currTitle == 15) {
_this.fansTitle[0] = '金牌店主['+_this.selectNum +']'
}
}
if(_this.fansTitle.length == 3){
if(_this.currTitle == 0) {
_this.fansTitle[2] = '会员['+_this.selectNum +']'
}
if(_this.currTitle == 15) {
_this.fansTitle[1] = '金牌店主['+_this.selectNum +']'
}
if(_this.currTitle == 16) {
_this.fansTitle[0] = '钻石店主['+_this.selectNum +']'
}
}
if(_this.fansTitle.length == 4){
if(_this.currTitle == 0) {
_this.fansTitle[3] = '会员['+_this.selectNum +']'
}
if(_this.currTitle == 15) {
console.log(_this.fansTitle,22)
_this.fansTitle[2] = '金牌店主['+_this.selectNum +']'
}
if(_this.currTitle == 16) {
_this.fansTitle[1] = '钻石店主['+_this.selectNum +']'
}
if(_this.currTitle == 17) {
_this.fansTitle[0] = '皇冠店主['+_this.selectNum +']'
}
}
}
})
if(res.data.data.pageOffset == 1) {
this.myTeanList = res.data.data.datas
}else{
for (var i = 0; i < res.data.data.datas.length; i++) {
this.myTeanList.push(res.data.data.datas[i]);
}
}
// this.myTeanList = res.data.data.datas
// this.fansCount = res.data.data.ex.fansCount
this.pageOffset = res.data.data.pageOffset + 1
this.totalPage = res.data.data.totalPage
}
})
}
}
}
</script>
<style scoped>
.number {
padding: 0 0.36rem 0.36rem;
line-height: 1rem;
font-size: 0.36rem;
}
.number span{
float: right;
display: block;
}
.number span i{
color: #ff4646;
font-style: normal;
}
.number span b{
font-weight: normal;
font-size: .48rem;
color: #ff4646;
}
.box{
will-change:auto;
width: auto;
-webkit-perspective:none;
perspective: none;
}
.search{
/* height: 1.5rem; */
padding: 0 0.36rem 0.3rem;
width: auto;
background: #fff;
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 12;
}
.search .top{
padding-top: 0.3rem;
}
.search .top::after{
clear: both;
content: '';
display: block;
}
.search input.sousuo{
float: left;
padding: 0 0.6rem;
width: 7.9rem;
height: 0.9rem;
background: #f6f6f6;
outline: none;
border: none;
border-radius: 0.5rem;
}
.search .go{
background: none;
outline: none;
border: none;
font-size: 0.36rem;
height: 0.9rem;
line-height: 0.9rem;
color: #999;
float:left;
padding-left: 0.6rem;
}
.search .btm ul::after{
clear: both;
content: '';
display: block;
}
.search .btm ul li{
float: left;
padding: 0.2rem;
}
.search .btm ul li a{
font-size: 0.36rem;
display: block;
padding: 0.2rem 0.5rem;
background: #f4f4f4;
color: #3e3e3e;
}
.topHeight{
height: 3.3rem;
}
.banner{
width: 10.53rem;
height: 3rem;
text-align: center;
background: url('../../assets/images/team/teambg.png') left center no-repeat;
background-size: cover;
margin: 0 0.36rem;
}
.banner p{
padding-top: .4rem;
font-size: 0.5rem;
}
.banner h1{
font-size: .8rem;
display: inline-block;
padding-right: .2rem;
}
.tab{
width: 100%;
height: 1.43rem;
line-height: 1.43rem;
}
.tab ul{
margin: 0px;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
}
.tab ul li{
width: 50%;
position: relative;
text-align: center;
font-size: 0.42rem;
}
.tab ul::after{
content: '';
display: block;
clear: both;
}
.tab ul li.active::after{
content: '';
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: #ff4646;
position: absolute;
left: 0;
bottom: 0;
}
.tab ul li.active{
color: #ff4646;
}
.cont{
padding: 0 0.36rem;
}
.cont .list{
width: auto;
padding: 0 0.36rem;
height: 6.42rem;
border-radius: 0.2rem;
margin-bottom: 0.3rem;
}
.cont .list .top{
height: 2.3rem;
border-bottom: 1px solid #ececec;
}
.cont .list .btm{
height: auto;
}
.gray{
background: rgba(0, 0, 0, 0.7);
position:fixed;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 13;
overflow-y: scroll;
}
.form{
position: fixed;
padding: 0.46rem 0.36rem;
height: 100%;
overflow-y:scroll;
z-index: 14;
width: 8.8rem;
top: 0;
right: 0;
background: #fff;
}
.form .title{
height: 1rem;
line-height: 1rem;
}
.form ul.status {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.form ul.status li{
width: 2.55rem;
height: 1.32rem;
line-height: 1.32rem;
margin-bottom: 0.26rem;
text-align: center;
border-radius: 0.09rem;
border: 1px solid #f4f4f4;
background: #f4f4f4;
float: left;
}
.form ul.source {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
}
.form ul.source li{
width: 2.55rem;
height: 1.32rem;
line-height: 1.32rem;
margin-bottom: 0.26rem;
margin-right: 0.25rem;
text-align: center;
border-radius: 0.09rem;
border: 1px solid #f4f4f4;
background: #f4f4f4;
float: left;
}
.form .inputList{
position: relative;
}
.form .inputList::after{
display: block;
content: '';
height: 0;
clear: both;
}
.form .inputList input{
display: block;
float: left;
width: 3.4rem;
height: 0.8rem;
border-radius: 0.4rem;
background: #f4f4f4;
color: #ff4646;
text-align: center;
border: none;
outline: none;
}
.form .inputList span{
display: block;
float: left;
width: 0.54rem;
margin: 0 0.35rem;
padding-top: 0.4rem;
border-bottom: 1px #cacaca solid;
}
.form .btm{
padding-top: 0.4rem;
width: 5.34rem;
float: right;
height: 1.08rem;
}
.form .btm ul li{
float: left;
}
.form .btm ul li img{
width: 2.67rem;
height: 1.08rem;
}
.form .selected{
position: relative;
background: #fee7e7 !important;
color: #ff4646;
border-color: #ff4646 !important;
}
.form .selected::after{
display: block;
content: '\2713';
line-height: 0.22rem;
font-size: 0.12rem;
color: #fff;
position: absolute;
right: 0;
bottom: 0;
width: 0.33rem;
height: 0.22rem;
border-radius: 5px 0 0 0;
background: #ff4646 !important;
}
</style>
<style lang="less">
@import '../../assets/css/index/index.less';
</style>
