first commit
This commit is contained in:
chenzhen
234
src/pages/business/CRM/checkinStatistics.vue
Normal file
234
src/pages/business/CRM/checkinStatistics.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user