234 lines
6.4 KiB
Vue
234 lines
6.4 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">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> |