171 lines
4.2 KiB
Vue
171 lines
4.2 KiB
Vue
<template>
|
|
<div class="calen">
|
|
<!-- <el-calendar :range="['2024-03-21', '2024-04-22']">
|
|
</el-calendar> -->
|
|
<div class="calen-list">
|
|
<li v-for="(item,index) in current" :key="index">
|
|
<div class="weiqiandao" v-if="item.type == -1">
|
|
<img src="@/assets/home/Icon_xross.png" alt="">
|
|
</div>
|
|
<div class="qiandao" v-if="item.type == 1">
|
|
<img src="@/assets/home/Checkmark.png" alt="">
|
|
</div>
|
|
<div class="weidaoshijian" v-if="item.type == 0">{{ index+1 }}</div>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getToken } from '@/utils/cookies.js'
|
|
import { apiCheckin } from '@/utils/webapi.js'
|
|
import { formatDate } from '@/utils/utcdate.util.js'
|
|
const ONE_DAY = 24 * 60 * 60 * 1000;
|
|
|
|
export default {
|
|
props: {
|
|
activityData: Object
|
|
},
|
|
data() {
|
|
return {
|
|
userData: JSON.parse(localStorage.getItem("userData")),
|
|
monthData: [],
|
|
startDay: '',
|
|
endDay: '',
|
|
current: []
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.activityData,this.userData)
|
|
this.generateMonth()
|
|
},
|
|
methods: {
|
|
// 初始化日历样式
|
|
generateMonth() {
|
|
const days = Math.floor((this.activityData.endTime - this.activityData.startTime) /ONE_DAY)
|
|
const now = Date.now()
|
|
for(let i = 0; i < days; i++ ){
|
|
let current = i * ONE_DAY + this.activityData.startTime
|
|
if(current <= this.activityData.endTime) {
|
|
const type = current < now ? -1 : 0
|
|
this.current.push({day: formatDate(new Date(current)), type, time: current, index: i + 1})
|
|
}
|
|
}
|
|
this.getCheckInit()
|
|
},
|
|
|
|
// 获取签到列表
|
|
async getCheckInit(){
|
|
// let dayTime = Math.round(new Date())
|
|
let token = getToken()
|
|
let datas = []
|
|
// 如果没登录, 就只显示日期
|
|
if (!token) {
|
|
this.current.forEach(item => {
|
|
item.type = 0
|
|
})
|
|
return
|
|
}
|
|
let res = await apiCheckin('all')
|
|
datas = res.data ? res.data : []
|
|
let map = new Map()
|
|
datas.forEach(data => {
|
|
map.set(data.day, data)
|
|
})
|
|
for(let i = 0; i < this.current.length; i++) {
|
|
if(map.has(this.current[i].day)) {
|
|
this.current[i].type = 1
|
|
}
|
|
}
|
|
},
|
|
getArrDifSameValue(arr1,arr2){
|
|
var result = [];
|
|
for(var i = 0; i < arr2.length; i++){
|
|
var obj = arr2[i];
|
|
var id = obj.day;
|
|
var isExist = false;
|
|
for(var j = 0; j < arr1.length; j++){
|
|
var aj = arr1[j];
|
|
var n = aj.time;
|
|
if(n == id){
|
|
isExist = true;
|
|
break;
|
|
}
|
|
}
|
|
if(isExist){
|
|
result.push(obj);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.calen {
|
|
width: 360px;
|
|
margin: 0 auto;
|
|
margin-top: 10px;
|
|
.calen-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
li {
|
|
flex: 1;
|
|
/*
|
|
// 间隙为5px
|
|
*/
|
|
margin: 0 5px 10px 0;
|
|
font-size: 12px;
|
|
/*
|
|
// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
|
|
*/
|
|
width: calc((100% - 30px) /7);
|
|
/*
|
|
// 加入这两个后每个item的宽度就生效了
|
|
*/
|
|
min-width: calc((100% - 30px) / 7);
|
|
/*
|
|
// 加入这两个后每个item的宽度就生效了
|
|
*/
|
|
max-width: calc((100% - 30px) / 7);
|
|
/*
|
|
// 去除第3n个的margin-right
|
|
*/
|
|
&:nth-child(7n) {
|
|
margin-right: 0;
|
|
}
|
|
div {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
img {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
.weiqiandao {
|
|
background: url('@/assets/home/Missed.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.qiandao {
|
|
background: url('@/assets/home/Done.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.weidaoshijian {
|
|
background: url('@/assets/home/Laag 5.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-calendar {
|
|
.el-calendar__header {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style> |