image.png
<template>
<div>
<!-- 头部-->
<div class="top fs26">
<div class="flex align-center">
<div class="flex-column">
<div class="banks">您管理的网点</div>
<div class="fs48">{{ manageInfo.manageComNum }}</div>
</div>
<div class="line"></div>
<div>
<div class="mb20">今日已拜访网点：{{ manageInfo.todayVisit }}</div>
<div class="mb20">近7天未拜访网点：{{ manageInfo.lastWeekNoVisit }}</div>
<div>近10天未拜访网点：{{ manageInfo.lastTenDayNoVisit }}
<img src="../../images/returnDanger.png" alt="">
</div>
</div>
</div>
</div>
<!-- 近10天未拜访网点-->
<van-cell class="clock-data" center>
<template #title>
<span class="title fw600 fs34"><p class="ml25">近10天未拜访网点, <span class="red">最需关注网点</span></p></span>
</template>
</van-cell>
<div>
<van-cell is-link center class="clock-data"
v-for="(tenItem,tenIndex) in lastTenDayNoVisitList" :key="tenIndex+'11'">
<template #title>
<div class="flex flex-space-between fs26">
<div class="flex">
<div class="bank-title fw600 ellipsis">{{ tenItem.name }}</div>
<div class="bank-num ellipsis">本月出单：{{ tenItem.visitNum }}</div>
</div>
<div>
<div class="tblue" @click="goClockDetail(tenItem)">历史打卡</div>
</div>
</div>
</template>
<template #right-icon>
<van-icon name="arrow" class="tblue"/>
</template>
</van-cell>
</div>
<!-- <div v-if="lastTenDayNoVisitList&&lastTenDayNoVisitList.length==0" class="tc cl99 fs28 mt16">暂无数据</div>-->
<div v-if="lastTenDayNoVisitList&&lastTenDayNoVisitList.length==0">
<van-empty description="暂无数据"/>
</div>
<van-pagination v-if="lastTenDayNoVisitList&&lastTenDayNoVisitList.length>0" v-model="currentPage10" :page-count="pageCount10" mode="simple" @change="changePage10"/>
<!-- <div v-if="lastTenDayNoVisitList1.length>3">-->
<!-- <div class="flex align-center flex-center all fs26 cl66 fw600" v-if="!isAll1" @click="showTenAll">-->
<!-- <div>全部</div>-->
<!-- <i class="el-icon-caret-bottom"></i>-->
<!-- </div>-->
<!-- <div class="flex align-center flex-center all fs26 cl66 fw600" v-else @click="showTenAll">-->
<!-- <div>收起</div>-->
<!-- <i class="el-icon-caret-top"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- 近7天未拜访网点-->
<van-cell class="clock-data" center>
<template #title>
<span class="title fw600 fs34"><p class="ml25">近7天未拜访网点, <span class="red">需关注网点</span></p></span>
</template>
</van-cell>
<van-cell is-link center class="clock-data" v-for="(weekItem,weekIndex) in lastWeekNoVisitList"
:key="weekIndex+'22'">
<template #title>
<div class="flex flex-space-between fs26">
<div class="flex">
<div class="bank-title fw600 ellipsis">{{ weekItem.name }}</div>
<div class="bank-num ellipsis">本月出单：{{ weekItem.visitNum }}</div>
</div>
<div>
<div class="tblue" @click="goClockDetail(weekItem)">历史打卡</div>
</div>
</div>
</template>
<template #right-icon>
<van-icon name="arrow" class="tblue"/>
</template>
</van-cell>
<!-- <div v-if="lastWeekNoVisitList1.length>3">-->
<!-- <div class="flex align-center flex-center all fs26 cl66 fw600" v-if="!isAll2" @click="showWeekAll">-->
<!-- <div>全部</div>-->
<!-- <i class="el-icon-caret-bottom"></i>-->
<!-- </div>-->
<!-- <div class="flex align-center flex-center all fs26 cl66 fw600" v-else @click="showWeekAll">-->
<!-- <div>收起</div>-->
<!-- <i class="el-icon-caret-top"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-if="lastWeekNoVisitList&&lastWeekNoVisitList.length==0" class="tc cl99 fs28 mt16">暂无数据</div>-->
<div v-if="lastWeekNoVisitList&&lastWeekNoVisitList.length==0">
<van-empty description="暂无数据"/>
</div>
<van-pagination v-if="lastWeekNoVisitList&&lastWeekNoVisitList.length>0" v-model="currentPage7" :page-count="pageCount7" mode="simple" @change="changePage7"/>
<!-- 今日拜访网点-->
<van-cell>
<template #title>
<span class="title fw600 fs34"><p class="ml25">今日拜访网点</p></span>
</template>
</van-cell>
<van-cell is-link center class="clock-data" v-for="(todayItem,todayIndex) in todayVisitList" :key="todayIndex+'33'">
<template #title>
<div class="flex flex-space-between fs26">
<div class="flex">
<div class="bank-title fw600 ellipsis">{{ todayItem.name }}</div>
<div class="bank-num ellipsis">本月出单：{{ todayItem.visitNum }}</div>
</div>
<div>
<div class="tblue" @click="goClockDetail(todayItem)">历史打卡</div>
</div>
</div>
</template>
<template #right-icon>
<van-icon name="arrow" class="tblue"/>
</template>
</van-cell>
<!-- <div v-if="todayVisitList1.length>3">-->
<!-- <div class="flex align-center flex-center all fs26 cl66 fw600" v-if="!isAll3" @click="showTodayAll">-->
<!-- <div>全部</div>-->
<!-- <i class="el-icon-caret-bottom"></i>-->
<!-- </div>-->
<!-- <div class="flex align-center flex-center all fs26 cl66 fw600" v-else @click="showTodayAll">-->
<!-- <div>收起</div>-->
<!-- <i class="el-icon-caret-top"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-if="todayVisitList&&todayVisitList.length==0" class="tc cl99 fs28 mt16">暂无数据</div>-->
<div v-if="todayVisitList&&todayVisitList.length==0">
<van-empty description="暂无数据"/>
</div>
<van-pagination v-if="todayVisitList&&todayVisitList.length>0" v-model="currentPage1" :page-count="pageCount1" mode="simple"/>
<!-- <van-cell is-link center class="clock-data">-->
<!-- <template #title>-->
<!-- <div class="flex flex-space-between fs26">-->
<!-- <div class="flex">-->
<!-- <div class="bank-title fw600 ellipsis">北京邮政代理局怀柔区北京分布昭阳区</div>-->
<!-- <div class="bank-num ellipsis">本月出单：887</div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <div class="tblue">历史打卡</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
<!-- <template #right-icon>-->
<!-- <van-icon name="arrow" class="tblue"/>-->
<!-- </template>-->
<!-- </van-cell>-->
</div>
</template>
<script>
import {getCheckinDataSecondDetail} from "../../global/api";
export default {
name: "bankClockData",
data() {
return {
all1: false,
all2: false,
all3: false,//三个全部状态值标识
tenList: [],
sevenList: [],
todayList: [],
manageInfo: {
manageComNum: 0,
lastTenDayNoVisit: 0,
lastWeekNoVisit: 0,
todayVisit: 0,
},//网点打卡近几天的详细信息
todayVisitList: [],//今日列表数据
lastWeekNoVisitList: [],//
lastTenDayNoVisitList: [],
isAll1: false,//近10天未拜访的全部标识符
isAll2: false,//近7天未拜访的全部标识符
isAll3: false,//今日未拜访的全部标识符
currentPage10: 1,//近10天分页当前页
currentPage7: 1,//近7天分页当前页
currentPage1: 1,//今日分页当前页
pageCount10: 1,
pageCount7: 1,
pageCount1: 1,
page: {
pageSize: 5,
pageNum: 1
}
}
},
methods: {
// showTenAll() {//切换10天全部和非全部
// this.lastTenDayNoVisitList = this.isAll1 ? this.lastTenDayNoVisitList3 : this.lastTenDayNoVisitList1
// this.isAll1 = this.isAll1 ? false : true
// },
// showWeekAll() {//切换7天全部和非全部
// this.lastWeekNoVisitList = this.isAll2 ? this.lastWeekNoVisitList3 : this.lastWeekNoVisitList1
// this.isAll2 = this.isAll2 ? false : true
// },
// showTodayAll() {//切换今天全部和非全部
// this.todayVisitList = this.isAll3 ? this.todayVisitList3 : this.todayVisitList1
// this.isAll3 = this.isAll3 ? false : true
// },
async getCheckinDataSecondDetail(queryDays, page = {...this.page}) {
let res = await getCheckinDataSecondDetail({
// agentMobile: localStorage.getItem("agentMobile"),//投顾手机号
// userId: localStorage.getItem("userId"),
agentMobile: 18655266240,//投顾手机号
userId: 'xingyehua',
agentCode: localStorage.getItem("agentCode"),
page: page,
queryDays: queryDays,
})
if (res.data.code == 0) { //list 为展示的数组，list1展示全部，list展示三条
let data = res.data.data
// this.manageInfo = res.data.data.manageInfo
// this.todayVisitList1 = res.data.data.todayVisitList
// this.todayVisitList3 = res.data.data.todayVisitList.slice(0, 3)
// this.todayVisitList = this.todayVisitList3
// this.lastWeekNoVisitList1 = res.data.data.lastWeekNoVisitList
// this.lastWeekNoVisitList3 = res.data.data.lastWeekNoVisitList.slice(0, 3)
// this.lastWeekNoVisitList = this.lastWeekNoVisitList3
// this.lastTenDayNoVisitList1 = res.data.data.lastTenDayNoVisitList
// this.lastTenDayNoVisitList3 = res.data.data.lastTenDayNoVisitList.slice(0, 3)
// this.lastTenDayNoVisitList = this.lastTenDayNoVisitList3
if (queryDays == 0) {
this.todayVisitList = data.list
this.pageCount1 = Math.ceil(data.total / this.page.pageSize)
}
if (queryDays == -7) {
this.lastWeekNoVisitList = data.list
this.pageCount7 = Math.ceil(data.total / this.page.pageSize)
}
if (queryDays == -10) {
this.lastTenDayNoVisitList = data.list
this.pageCount10 = Math.ceil(data.total / this.page.pageSize)
}
}
},
changePage10(val) {
console.log(val)
this.getCheckinDataSecondDetail(-10, {pageNum:val,pageSize: 5})
},
changePage7(val) {
this.getCheckinDataSecondDetail(-7, {pageNum:val,pageSize: 5})
},
changePage1(val) {
this.getCheckinDataSecondDetail(1, {pageNum:val,pageSize: 5})
},
goClockDetail(item) {
this.$router.push({name: "bankClockDetail", query: {websiteName: item.name, websiteCode: item.agentCom}});
}
},
created() {
this.getCheckinDataSecondDetail(-10,this.page)
this.getCheckinDataSecondDetail(-7,this.page)
this.getCheckinDataSecondDetail(0,this.page)
}
}
</script>
<style scoped>
.top {
background-color: #EDF5FF;
color: #333333;
padding: 0.78rem 0.6rem;
}
.top .banks {
margin-bottom: 1.12rem;
}
.top img {
width: 2.32rem;
height: 0.5rem;
vertical-align: middle;
}
.top .line {
width: 0.04rem;
height: 2.28rem;
background-color: #D2DFF1;
margin: 0 1rem;
}
.bank-title {
max-width: 6.1rem;
margin-right: .42rem;
}
.bank-num {
max-width: 3.48rem;
}
/*.title:first-child {*/
/* border-left: 0.12rem solid #257ef1;*/
/* padding: 0 0 0 0.3rem;*/
/*}*/
.title > p:first-child::after {
content: "";
position: absolute;
left: .6rem;
top: calc(50% - 0.28rem);
height: 0.64rem;
width: 0.12rem;
background: #257ef1;
border-radius: 0.06rem;
}
.all {
margin: 0 auto;
height: 2rem;
}
.all > div {
margin-right: .26rem;
}
.clock-data.van-cell {
height: 1.8rem;
}
</style>
