<template>
<div class="myInformation">
<!-- 列表 -->
<div class="bigBox">
<div class="headerSwitch">
<van-row gutter="13" class="top">
<van-col span="12" v-for="(todo, index) in todos" :key="index" @click="addClass(index, $event)" :class="{ blue: index == biede }">
<div>{{ todo.text }}</div>
</van-col>
</van-row>
</div>
<div class="moreChoice">
<div class="myTime" @click="myTimeClick">
<div>{{myTimeName}}</div>
<img src="@/projects/common/assets/images/financial/advertise/xiala01.png">
</div>
<div class="myPeople" @click="myPeopleClick">
<div>{{myPeopleName}}</div>
<img src="@/projects/common/assets/images/financial/advertise/xiala02.png">
</div>
<div class="myHave" @click="myHaveClick">
<div>{{myHaveName}}</div>
<img src="@/projects/common/assets/images/financial/advertise/xiala02.png">
</div>
</div>
</div>
<!-- 各个选择弹框 -->
<van-popup v-model="isChoiceTime" position="bottom" :style="{ height:'55%'}">
<div class="headerSlots">
<div class="quxiao" @click="cancelClick">取消</div>
<div class="xuanze">请选择</div>
<div class="queding" @click="determine">确定</div>
</div>
<div class="grayBox" @click="timeChoice">
<div>{{ timeName ? '按月选择' : '按日选择' }}</div>
<img src="@/projects/common/assets/images/financial/advertise/qiehuan.png">
</div>
<div class="YouTime" v-show="timeAll == 1">{{mouthTime}}</div>
<div class="YouTime02" v-show="timeAll == 2">
<div :class="cont == 1 ? 'blue' : 'gray' " @click="timeClick(1)">{{toolTime01}}</div>至
<div :class="cont == 2 ? 'blue' : 'gray' " @click="timeClick(2)">{{toolTime02}}</div>
</div>
<van-datetime-picker item-height="45" v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" @change="changeTime" :show-toolbar="false" v-show="timeAll == 1"/>
<van-datetime-picker item-height="45" v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @change="changeTimeMore" :show-toolbar="false" v-show="timeAll == 2"/>
</van-popup>
<van-popup v-model="isChoicePeople" position="bottom">
<van-picker item-height="45" :title="title" :columns="columns02" @confirm="onConfirm02" @cancel="onCancel" show-toolbar/>
</van-popup>
<van-popup v-model="isChoiceHave" position="bottom">
<van-picker item-height="45" :title="title" :columns="columns03" @confirm="onConfirm03" @cancel="onCancel" show-toolbar/>
</van-popup>
<div class="contBox">
<div class="box" v-for="(item, index) in yejiData" :key="index" @click="goNext(item)">
<div class="item1">
<span class="span1">{{ item.presenteeName }}</span>
<span class="span2" v-if="item.presenteePhone">{{ item.presenteePhone }}</span>
<span class="span2" v-else>-- --</span>
</div>
<div class="item2">
<i class="i1" :class="'color' + item.status">{{item.status | typeVal}}</i>
<i class="i2">{{ item.recommenderType == 8 ? '采集' : '发卡' }}</i>
</div>
</div>
<div class="blueFont" v-if="!yejiData">暂无数据</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
biede: 0,
current: 8,
todos: [{ text: "采集信息" }, { text: "发卡" }],
isChoiceTime: false,
minDate: new Date(2018, 0, 1),
maxDate: new Date(),
currentDate: new Date(),
timeName: true,
mouthTime: (new Date().getFullYear()) + '-' + ((new Date().getMonth()+1) < 10 ? "0" + (new Date().getMonth()+1) : (new Date().getMonth()+1) ),
myTimeName: (new Date().getMonth()+1) + '月',
timeAll: 1,
cont: 1,
startTime: '',
endTime: '',
toolTime01: '',
toolTime02: '结束日期',
toolTime03: '',
isChoicePeople: false,
columns02: [{text: '我的',value: 3}, {text: '合伙人',value: 1}, {text: '二级合伙人',value: 2}],
myPeopleName: '我的',
myPeopleValue: 3,
isChoiceHave: false,
title: '请选择',
columns03: [{text: '有效',value: 2}, {text: '无效',value: 1}, {text: '待审核',value: 0}],
myHaveName: '有效',
myHaveValue: 2, // 是否有效
yejiData: [], // 列表数据
}
},
filters: {
typeVal(type) {
if (type == 0) {
return "待审";
} else if (type == 1) {
return "无效";
} else if (type == 2) {
return "有效";
}
},
},
mounted() {
var yue = ((new Date().getMonth()+1) < 10 ? "0" + (new Date().getMonth()+1) : (new Date().getMonth()+1) );
var ri = (new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate() )
this.toolTime01 = (new Date().getFullYear()) + '-' + yue + '-' + ri;
this.startTime = (new Date().getFullYear()) + '-' + yue + '-' + '01';
this.endTime = (new Date().getFullYear()) + '-' + yue + '-' + ri;
this.dataTable();
},
methods: {
addClass(index, event) {
this.biede = index;
if(index == 0) {
this.current = 8;
} else {
this.current = 6;
}
this.dataTable()
},
// 时间选择
myTimeClick() {
this.isChoiceTime = true;
},
// 取消
cancelClick() {
this.isChoiceTime = false;
},
// 确定
determine() {
this.isChoiceTime = false;
var vm = this;
if(this.timeAll == 1) {
this.startTime = this.mouthTime + '-' + '01';
var lastDate = new Date(vm.mouthTime);
this.lastDay(lastDate);
this.myTimeName = this.mouthTime;
} else {
var time01 = new Date(vm.toolTime01).getTime();
var time02 = new Date(vm.toolTime02).getTime();
if(time01 < time02) {
this.startTime = vm.toolTime01;
this.endTime = vm.toolTime02;
this.myTimeName = this.startTime + '至' + this.endTime;
} else if (time01 > time02) {
this.startTime = vm.toolTime02;
this.endTime = vm.toolTime01;
this.myTimeName = this.startTime + '至' + this.endTime;
} else if (time01 = time02) {
this.startTime = vm.toolTime01;
this.endTime = vm.toolTime02;
this.myTimeName = this.startTime;
}
}
this.dataTable();
},
lastDay(lastDate) {
var currentMonth = lastDate.getMonth();
var nextMonth = ++currentMonth;
var nextMonthFirstDay = new Date(lastDate.getFullYear(),nextMonth,1);
var oneDay = 1000*60*60*24;
var lastTime = new Date(nextMonthFirstDay-oneDay);
var month = parseInt(lastTime.getMonth()+1);
var day = lastTime.getDate();
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
this.endTime = lastDate.getFullYear() + '-' + month + '-' + day;
console.log('真的是最后一天吗',this.endTime)
},
timeChoice() {
this.timeName = !this.timeName;
if(this.timeName == true) {
this.timeAll = 1;
} else {
this.timeAll = 2;
}
},
changeTime(picker) {
let startTime = picker.getValues();
this.startTimes = startTime[0] + "-" + startTime[1];
this.mouthTime = this.startTimes;
console.log(this.startTimes);
},
timeClick(n) {
if(n == 1) {
this.cont = 1;
} else {
this.cont = 2;
}
},
// 时间段
changeTimeMore(picker) {
let startTime = picker.getValues();
this.startTimes = startTime[0] + "-" + startTime[1] + "-" + startTime[2];
if(this.cont == 1) {
this.toolTime01 = this.startTimes;
} else {
this.toolTime02 = this.startTimes;
}
},
// 我的 合伙人 二级合伙人
myPeopleClick() {
this.isChoicePeople = true;
},
onConfirm02(value) {
this.myPeopleName = value.text;
this.myPeopleValue = value.value;
this.isChoicePeople = false;
this.dataTable()
},
// 有效 无效待 审核
myHaveClick() {
this.isChoiceHave = true;
},
// 点击完成按钮时触发
onConfirm03(value) {
this.myHaveName = value.text;
this.myHaveValue = value.value;
this.isChoiceHave = false;
this.dataTable()
},
// 点击取消按钮时触发
onCancel() {
this.isChoicePeople = false;
this.isChoiceHave = false;
},
// 列表
dataTable() {
var data = {
customerType: this.myPeopleValue,
type: this.current,
status: this.myHaveValue,
};
data.startTime = this.startTime + ' ' + '00:00:00';
data.endTime = this.endTime + ' ' + '23:59:59';
var url = this.api.ek + "/performance/findRefereesResultsByUid";
this.http.postData(this, url, data).then((res) => {
if(res.returnCode == '10001') {
this.yejiData = res.data.vos;
}
});
},
goNext(row) {
console.log('去下一页',row);
sessionStorage.setItem('row', JSON.stringify(row));
this.$router.push('/advertise/xiangxiInformation');
},
},
}
</script>
<style lang="less" scoped>
/deep/ .van-picker__cancel {
color: #1E90FF;
}
/deep/.van-picker__confirm {
color: #1E90FF;
}
.blueFont {
text-align: center;
color: #1E90FF;
font-size: 16px;
}
.myInformation {
width: 100%;
padding: 0 16px;
display: flex;
height: 100vh;
flex-direction: column;
.headerSwitch{
width: 100%;
.top.van-row .van-col.blue > div {
color: #fff;
background: #1e90ff;
}
.top.van-row {
margin: 20px 0;
display: flex;
justify-content: space-between;
.van-col div {
font-size: 16px;
background: #fff;
color: #1e90ff;
height: 38px;
line-height: 38px;
border-radius: 8px;
border: 1px solid #1e90ff;
width: 100%;
text-align: center;
}
}
}
.moreChoice {
width: 100%;
display: flex;
padding-bottom: 15px;
.myTime {
// width: 60%;
display: flex;
font-size: 17px;
flex: 2;
img {
width: 15px;
height: 15px;
margin: 5px 0 0 6px;
}
}
.myPeople,.myHave {
display: flex;
font-size: 15px;
margin-left: 12px;
margin-right: auto;
img {
width: 12px;
height: 12px;
margin: 5px 0 0 6px;
}
}
}
}
.headerSlots {
display: flex;
font-size: 15px;
margin: 12px 0;
.xuanze {
color: #333333;
flex: 4;
text-align: center;
}
.quxiao,.queding {
color: #1E90FF;
flex: 1;
text-align: center;
}
}
.grayBox {
width: 99px;
height: 30px;
line-height: 30px;
background: rgba(245, 245, 245, 0.39);
border: 1px solid #DCDCDC;
border-radius: 15px;
display: flex;
margin-left: 16px;
div {
color: #333333;
font-size: 14px;
margin-left: 12px;
}
img {
width: 15px;
height: 15px;
margin: 7px 0 0 4px;
}
}
.YouTime {
margin: 12px 16px;
height: 44px;
line-height: 43px;
text-align: center;
font-weight: 500;
font-size: 15px;
color: #1E90FF;
border-bottom: 1px solid #1E90FF;
}
.YouTime02 {
margin: 12px 16px;
height: 44px;
line-height: 43px;
font-weight: 500;
font-size: 15px;
display: flex;
div {
flex: 1;
text-align: center;
}
.blue {
color: #1E90FF;
border-bottom: 1px solid #1E90FF;
}
.gray {
color: #333333;
border-bottom: 1px solid #DCDCDC;
}
}
.box {
display: flex;
justify-content: space-between;
font-size: 15px;
padding: 16px 0;
border-top: 1px solid #eeeeee;
.item1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item2 {
display: flex;
align-items: center;
.i1 {
font-size: 12px;
width: 46px;
height: 25px;
line-height: 26px;
color: #fff;
border-radius: 4px;
text-align: center;
display: inline-block;
}
.i2 {
color: #696969;
padding-left: 8px;
}
}
.span1 {
font-size: 16px;
margin-bottom: 6px;
}
.span2 {
color: #c0c0c0;
}
}
.color0 {
background-color: #fec43f;
}
.color1 {
background-color: #fe6469;
}
.color2 {
background-color: #2fbfba;
}
.bigBox {
width: 100%;
height: 114px;
}
.contBox {
width: 100%;
flex: 1;
overflow-y: scroll;
}
</style>
452
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
