ys-app/src/pages/business/CRM/checkinStatistics.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">7</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">4</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 list1" :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 list2" :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 } from 'vue'
import customHeader from '@/components/customHeader.vue'
import { getDate} from '@/utils/datetime.js'

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 = () => {
    console.log(searchValue.value)
}

// tab 切换
let tabType = ref(0)
let handleTab = (type)=>{
    tabType.value = type;
}
// 列表
let list1 = ref([]);
list1.value = ["王振","胡本华","高勐","崔礼涛","汪津春","王永健","张浩"];

let list2 = ref([]);
list2.value = ["付翰","张旭光","赵欣鸣","张王小北"];

// 确定
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>