255 lines
8.5 KiB
Vue
255 lines
8.5 KiB
Vue
<template>
|
|
<div class="date">
|
|
<div class="head">
|
|
<div @click="shang">
|
|
<img src="" alt="">
|
|
上一月
|
|
</div>
|
|
{{month.year}}年{{month.yue}}月
|
|
<a-button type="primary" class="button" @click="navto()">
|
|
周日历
|
|
</a-button>
|
|
<div @click="xia">
|
|
下一月
|
|
<img src="" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="yue">
|
|
<div class="heads">
|
|
<div :class="{zhou: yue == 0 && month.zhou == 0}">周日</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 1}">周一</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 2}">周二</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 3}">周三</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 4}">周四</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 5}">周五</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 6}">周六</div>
|
|
</div>
|
|
<div class="body">
|
|
<div class="row" v-for="(item,index) in month.date" :key="index">
|
|
<div v-for="(i,j) in item" :key="j">
|
|
<div class="day">
|
|
<div :class="{ing: yue == 0 && month.day == i.day,old: (yue < 0 || (yue == 0 && month.day > i.day)) && i.list.length != 0 ,next: (yue > 0 || (yue == 0 && month.day < i.day)) && i.list.length != 0 }">
|
|
{{i.day}}
|
|
<div class="item" v-for="(i,j) in i.list" :key="j">
|
|
<div></div><p>{{i}}</p>
|
|
</div>
|
|
<!-- <span class="ing"></span> -->
|
|
<!-- <span class="next"></span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.date{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.head{
|
|
width: 1320px;
|
|
height: 57px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
>div{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #0DBBA4;
|
|
>img{
|
|
width: 7px;
|
|
height: 11px;
|
|
}
|
|
}
|
|
>div:first-child{
|
|
margin-right: 90px;
|
|
>img{
|
|
margin-right: 11px;
|
|
}
|
|
}
|
|
>div:last-child{
|
|
margin-left: 90px;
|
|
|
|
>img{
|
|
margin-left: 11px;
|
|
}
|
|
}
|
|
.button{
|
|
width: 57px;
|
|
height: 26px;
|
|
background-color: #0DBBA4;
|
|
border-right: 4px;
|
|
border: none;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
padding: 0;
|
|
position: absolute;
|
|
right: 40px;
|
|
}
|
|
}
|
|
.yue{
|
|
width: 1320rpx;
|
|
.heads{
|
|
width: 1320px;
|
|
height: 63px;
|
|
display: flex;
|
|
>div{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F5FEFD;
|
|
text-align: center;
|
|
line-height: 63px;
|
|
font-size: 13px;
|
|
color: #08AE98;
|
|
border-right: 1px solid #eee;
|
|
box-sizing: border-box;
|
|
}
|
|
.zhou{
|
|
color: #fff;
|
|
background: #08AE98;
|
|
}
|
|
}
|
|
.body{
|
|
.row{
|
|
background-color: #fff;
|
|
height: 126px;
|
|
width: 100%;
|
|
display: flex;
|
|
>div{
|
|
width: 100%;
|
|
border-top: 1px solid #eee;
|
|
border-right: 1px solid #eee;
|
|
.day{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #111;
|
|
>div{
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
padding: 18px;
|
|
overflow: hidden;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 11px;
|
|
>div{
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #111;
|
|
margin-right: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
>p{
|
|
line-height: 1;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.old{
|
|
background-color: #F7F7F7;
|
|
}
|
|
.ing{
|
|
background-color: #0DBBA4;
|
|
color: #fff;
|
|
.item{
|
|
>div{
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.next{
|
|
background-color: #CEF9F0;
|
|
color: #0DBBA4;
|
|
.item{
|
|
>div{
|
|
background-color: #0DBBA4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
>div::last-child{
|
|
border: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, watch } from 'vue';
|
|
import { getdate, getDay } from "@/utils/date"
|
|
import { getdatelist } from '@/api';
|
|
import store from '@/store';
|
|
import router from '@/router';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
|
|
},
|
|
setup(){
|
|
console.log(1)
|
|
const date = getdate();
|
|
console.log(date)
|
|
const month: any = ref(date);
|
|
const yue = ref(0);
|
|
function xia(){
|
|
yue.value = yue.value + 1;
|
|
month.value = getdate(yue.value)
|
|
getdates(userid.value)
|
|
}
|
|
const userid = computed(() => {
|
|
return store.state.userinfo.memberid;
|
|
|
|
})
|
|
watch(userid, ()=> {
|
|
getdates(userid.value);
|
|
})
|
|
function shang(){
|
|
yue.value = yue.value - 1;
|
|
month.value = getdate(yue.value)
|
|
getdates(userid.value)
|
|
}
|
|
async function getdates(userid: number){
|
|
getdatelist(month.value.start, month.value.end, userid).then((res: any)=>{
|
|
console.log(res)
|
|
for(let i in res){
|
|
const day = getDay(res[i].dateline)
|
|
for(let j in month.value.date){
|
|
for(let k in month.value.date[j]){
|
|
if(month.value.date[j][k].day == day){
|
|
if(month.value.date[j][k].list == undefined){
|
|
month.value.date[j][k].list = [];
|
|
}
|
|
month.value.date[j][k].list.push(res[i].title);
|
|
console.log(day)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
console.log(month.value.date)
|
|
})
|
|
}
|
|
function navto(){
|
|
router.push("/regime/week")
|
|
}
|
|
getdates(userid.value);
|
|
return {
|
|
month,
|
|
xia,
|
|
shang,
|
|
yue,
|
|
navto
|
|
}
|
|
}
|
|
})
|
|
</script> |