286 lines
7.5 KiB
Vue
286 lines
7.5 KiB
Vue
<template>
|
||
<view class="con-body">
|
||
<view class="con-bg">
|
||
<!-- 头部 -->
|
||
<customHeader ref="customHeaderRef" :title="'打卡统计'" :leftFlag="true" :rightFlag="false"></customHeader>
|
||
|
||
<!-- 高度来避免头部遮挡 -->
|
||
<view class="top-height"></view>
|
||
|
||
<!-- 正文内容 -->
|
||
<view>
|
||
<!-- 搜索 -->
|
||
<view class="search">
|
||
<picker @change="bindPickerChange" :value="cityIndex" :range="cityArr" class="picker-bg">
|
||
<view class="picker">
|
||
<uni-icons type="location" size="18"></uni-icons>
|
||
<view>{{ cityArr[cityIndex] }}</view>
|
||
<uni-icons type="down" size="18"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<picker mode="date" :value="defaultDate" :start="startDate" :end="endDate" @change="bindDateChange"
|
||
class="picker-bg">
|
||
<view class="picker">
|
||
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong"
|
||
size="18"></uni-icons>
|
||
<view>{{ defaultDate }}</view>
|
||
<uni-icons type="down" size="18"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
|
||
</view>
|
||
<!-- 签到打卡 -->
|
||
<view class="checkin-tab">
|
||
<view class="checkin-tab-item" :class="{ active: tabType == 0 }" @click="handleTab(0)">
|
||
<view class="tab-item-title">{{ signCount }}</view>
|
||
<view class="tab-item-name">最新签到打卡</view>
|
||
</view>
|
||
<view class="checkin-tab-item" :class="{ active: tabType == 1 }" @click="handleTab(1)">
|
||
<view class="tab-item-title">{{ noSignCount }}</view>
|
||
<view class="tab-item-name">未签到打卡</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- tab切换显示 -->
|
||
<view class="white-bg">
|
||
<!-- 最新签到列表 -->
|
||
<view class="tab-con" v-if="tabType == 0">
|
||
<view class="tab-title" v-for="(item, index) in singInList" :key="index">
|
||
{{ item }}
|
||
<uni-icons type="checkbox-filled" size="26" color="#02C74C"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<!-- 未签到列表 -->
|
||
<view class="tab-con" v-if="tabType == 1">
|
||
<view class="tab-title" v-for="(item, index) in singInNoList" :key="index">
|
||
{{ item }}
|
||
<uni-icons type="info-filled" size="26" color="#FF8059"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, reactive } from 'vue'
|
||
import customHeader from '@/components/customHeader.vue'
|
||
import { getDate } from '@/utils/datetime.js'
|
||
import { getNoSigninList, getSigninList } from '../../../../api/crm/activity/map';
|
||
|
||
//进入页面初始化页面
|
||
onMounted(() => {
|
||
getSignListMethod();
|
||
getNoSignListMethod();
|
||
})
|
||
|
||
let cityIndex = ref(0);
|
||
let cityArr = ['市场一部','市场二部','市场三部',"北京大区", "南方大区",'北方大区','西部大区'];
|
||
// 选择大区列表
|
||
let bindPickerChange = (e) => {
|
||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||
cityIndex.value = e.detail.value
|
||
}
|
||
|
||
// 开始时间
|
||
let startDate = getDate('start');
|
||
// 结束时间，间隔10年
|
||
let endDate = getDate('end');
|
||
let defaultDate = getDate({ format: true })
|
||
let bindDateChange = (e) => {
|
||
defaultDate = e.detail.value
|
||
}
|
||
|
||
let searchValue = ref(null)
|
||
// 查询搜索跳转
|
||
let handleSearch = () => {
|
||
queryForm.tadayDate = defaultDate
|
||
queryForm.region = cityArr[cityIndex.value]
|
||
getSignListMethod();
|
||
getNoSignListMethod();
|
||
}
|
||
|
||
// 列表
|
||
let signCount = ref(0)
|
||
let singInList = ref([]);
|
||
let noSignCount = ref(0)
|
||
let singInNoList = ref([]);
|
||
|
||
//查询表单，默认有个北京大区的参数
|
||
let queryForm = reactive({
|
||
region: "北京大区"
|
||
})
|
||
// tab 切换
|
||
let tabType = ref(0)
|
||
let handleTab = (type) => {
|
||
tabType.value = type;
|
||
//最新签到列表
|
||
if (type === 0) {
|
||
getSignListMethod();
|
||
|
||
}
|
||
//未签到列表
|
||
else if (type === 1) {
|
||
getNoSignListMethod();
|
||
}
|
||
}
|
||
|
||
function getSignListMethod() {
|
||
getSigninList(queryForm).then(res => {
|
||
signCount.value = res.total
|
||
singInList.value = res.rows.map(item => item.userName)
|
||
})
|
||
}
|
||
|
||
function getNoSignListMethod() {
|
||
getNoSigninList(queryForm).then(res => {
|
||
noSignCount.value = res.total
|
||
singInNoList.value = res.rows.map(item => item.userName);
|
||
})
|
||
}
|
||
|
||
|
||
// 确定
|
||
let handleSubmit = () => {
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.search {
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.search .btn-search {
|
||
border: none;
|
||
background: none;
|
||
line-height: normal;
|
||
color: #fff;
|
||
line-height: 56rpx !important;
|
||
padding: 10rpx 0 0;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search .btn-search::after {
|
||
display: none;
|
||
}
|
||
|
||
.search .picker-bg {
|
||
display: flex;
|
||
background-color: #6FA2F8;
|
||
border-radius: 25px;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 0rpx 20rpx;
|
||
/* #ifndef APP-PLUS */
|
||
padding: 10rpx 20rpx 0 20rpx;
|
||
/* #endif */
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.search .picker-bg .picker {
|
||
display: flex;
|
||
align-items: center;
|
||
/* #ifndef APP-PLUS */
|
||
padding-top: 2rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.search .picker-bg .picker .uni-icons {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.search .picker-bg .picker .uni-icons:first-child {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.search .picker-bg .picker .uniui-down {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.checkin-tab {
|
||
margin-top: 35rpx;
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.checkin-tab-item {
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
text-align: center;
|
||
margin-right: 30rpx;
|
||
font-weight: bold;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.checkin-tab-item.active {
|
||
position: relative;
|
||
color: #fff;
|
||
}
|
||
|
||
.checkin-tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-color: #fff;
|
||
width: 100rpx;
|
||
height: 8rpx;
|
||
}
|
||
|
||
.checkin-tab-item .tab-item-title {
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
|
||
.white-bg {
|
||
width: 670rpx;
|
||
margin: 0;
|
||
border-radius: 8px 8px 0 0;
|
||
padding: 50rpx 40rpx;
|
||
margin-top: 20rpx;
|
||
/* #ifdef APP-PLUS */
|
||
height: calc(100vh - 260px);
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS */
|
||
height: calc(100vh - 230px);
|
||
/* #endif */
|
||
}
|
||
|
||
.tab-con {
|
||
display: flex;
|
||
flex-flow: row wrap
|
||
}
|
||
|
||
.tab-con .tab-title {
|
||
border: 1px solid #E8E8E8;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
position: relative;
|
||
/* padding:10rpx 20rpx; */
|
||
margin-right: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
width: 148rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tab-con .tab-title:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.tab-con .uni-icons {
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
}
|
||
</style>
|