日历组件1-12月

<template>
    <div :class="`calendar-item ${className}`">
        <p class="calendar-month">
            <span @click="handledate(date.format('YYYY-MM'))">{{ monthToUpperCase(date.format("M月")) }}</span>
            <span class="status">{{ statusText }}</span>
        </p>
        <div class="calendar-week" v-for="item in weeks" :key="item">{{ item }}</div>
        <div v-for="item in firstDay" :key="item"></div>
        <div class="calendar-day" v-for="item in days" :key="item.id">
            <span class="date" :style="item.date.format('YYYY-MM-DD') === today ? 'background-color: rgba(22, 93, 255, 0.3);color:#fff;' : ''"
                @click="handledate(item.date.format('YYYY-MM-DD'))"> {{
                    item.date.format("DD") }}</span>
        </div>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
import dayjs from 'dayjs'
export default {
    data() {
        return {
            weeks: ['日', '一', '二', '三', '四', '五', '六'],
            today: dayjs().format('YYYY-MM-DD'),
            className: 'noSubmit',
            status: '未提交'
        }
    },
    props: {
        date: {
            type: Object,
            default: dayjs()
        }
    },
    computed: {
        //保存当月每一天数据(date格式)
        days() {
            //根据当前日期获取月份
            let month = this.date.month() + 1
            let year = this.date.year()
            let days = []
            for (let i = 1; i <= this.date.daysInMonth(); i++) {
                days.push({
                    id: nanoid(),
                    date: dayjs(`${year}-${month}-${i}`)
                })
            }
            return days
        },
        //获取本月第一天是周几
        firstDay() {
            return this.date.day()
        },
        //动态计算当前提交状态
        statusText() {
            if (this.date.month() < 3) {
                this.className = 'noSubmit'
                return '未提交'
            } else if (this.date.month() < 6 && this.date.month() >= 3) {
                this.className = 'onTime'
                return '已按时提交，审核中'
            } else if (this.date.month() < 9 && this.date.month() >= 6) {
                this.className = 'overTime'
                return '逾期提交，审核中'
            } else if (this.date.month() < 10 && this.date.month() >= 9) {
                this.className = 'pass'
                return '审核通过'
            } else {
                this.className = 'apply'
                return '申请修改中'
            }
        }
    },
    created() {
        console.log(this.date.format('YYYY-MM'));
        console.log(this.days);
    },
    methods: {
        //调用接口获取当前日期提交状态
        getDayStatus(date) {

        },
        //调用接口获取月份提交状态
        getMonthStatus() {

        },
        handledate(date) {
            if (date.length === 7) {
                //当前选中到月
                this.$router.push({
                    path: 'monthlySubmit',
                    query: {
                        date: date
                    }
                })
            } else {
                this.$router.push({
                    path: 'dailySubmit',
                    query: {
                        date: date
                    }
                })
            }
        },
        // 月份转大写
        monthToUpperCase(month) {
            switch (month) {
                case '1月':
                    return '一月'
                case '2月':
                    return '二月'
                case '3月':
                    return '三月'
                case '4月':
                    return '四月'
                case '5月':
                    return '五月'
                case '6月':
                    return '六月'
                case '7月':
                    return '七月'
                case '8月':
                    return '八月'
                case '9月':
                    return '九月'
                case '10月':
                    return '十月'
                case '11月':
                    return '十一月'
                case '12月':
                    return '十二月'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/* 背景色 */
$noSubmit: rgba(229, 230, 235, 0.20);
$onTime: rgba(0, 230, 88, 0.10);
$overTime: rgba(255, 91, 91, 0.10);
$pass: rgba(0, 176, 26, 0.10);
$apply: rgba(22, 93, 255, 0.10);
/* 字体 */
$noSubmitFont: rgba(134, 144, 156, 1);
$onTimeFont: rgba(0, 230, 88, 1);
$overTimeFont: rgba(255, 91, 91, 1);
$passFont: rgba(0, 176, 26, 1);
$applyFont: rgba(22, 93, 255, 1);

//未提交样式
.noSubmit {
    background-color: $noSubmit;

    .status {
        color: $noSubmitFont;
    }
}

//按时提交审核中样式
.onTime {
    background-color: $onTime;

    .status {
        color: $onTimeFont;
    }
}

//逾期提交审核中样式
.overTime {
    background-color: $overTime;

    .status {
        color: $overTimeFont;
    }
}

//审核通过样式
.pass {
    background-color: $pass;

    .status {
        color: $passFont;
    }
}

//申请修改中样式
.apply {
    background-color: $apply;

    .status {
        color: $applyFont;
    }
}


.calendar-item {
    width: calc(90%/4);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    padding: 10px;
    margin: 20px auto;
    // box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
    text-align: center;

    div {
        width: calc(100% / 7);
        margin-bottom: 5px;
    }

    .calendar-month {
        width: 100%;
        cursor: pointer;
        text-align: left;

        span:first-child {
            font-weight: bold;
            color: rgba(2, 53, 83, 1);
        }

        span:last-child {
            margin-left: 20px;
        }
    }

    .calendar-week {
        color: rgba(134, 144, 156, 1);
        font-size: 14px;
        cursor: pointer;
    }

    .calendar-day {
        color: rgba(2, 53, 83, 1);

        .date {
            border-radius: 50%;
            padding: 2px;
            box-sizing: border-box;
            cursor: pointer;

            &:hover {
                background-color: rgba(22, 93, 255, 1) !important;
                color: #fff;
            }
        }
    }

    .calendar-day,
    .calendar-week {
        // cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>

实现基本效果: