ys-app/src/pages/business/CRM/map/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">{{ 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>