VUE制作周排班样式

VUE制作周排班

样式:

vue部分代码

<template>
    <div class="container">
        <!--预约时间-->
        <div class="scroll-view scroll-view_H">
            <div class='list' :style="{ width: width + 'px'}">
                <div v-for="(item,index) in calendar" :key="index" @click="select(index)"
                     class='listItem' :class='[index===currentIndex? "current":""]'>
                    <div class='text name'>{{ item.week }}</div>
                    <div class='text date'>{{ item.date }}</div>
                </div>
            </div>
        </div>
        <div class="time">
            <div v-for="(timeItem,timeIndex) in timeArr" :key="timeIndex" @click="selectTime(timeIndex)"
                  class="listItem" :class='[currentTime===timeIndex? "current":""]'>
                <div class="text">{{ timeItem.time }}</div>
                <div class="text">{{ timeItem.status }}</div>
            </div>
        </div>
    </div>
</template>

js部分代码

<script>
    export default {
        name: "Scheduling",
        data(){
            return {
                calendar: [],
                maxdays: 14,
                width: 186,
                currentIndex: 0,
                currentTime: 0,
                timeArr: [],
                dateArr: [],

                cur_date: [],
                twoCalendar: [],
                allTimeArr: [
                    { "time": "8:00-8:30", "status": "可排" },
                    { "time": "8:30-9:00", "status": "可排" },
                    { "time": "9:00-9:30", "status": "可排" },
                    { "time": "9:30-10:00", "status": "可排" },
                    { "time": "10:00-10:30", "status": "可排" },
                    { "time": "10:30-11:00", "status": "可排" },
                    { "time": "11:00-11:30", "status": "可排" },
                    { "time": "11:30-12:00", "status": "可排" },
                    { "time": "13:00-13:30", "status": "可排" },
                    { "time": "13:30-14:00", "status": "可排" },
                    { "time": "14:00-14:30", "status": "可排" },
                    { "time": "14:30-15:00", "status": "可排" },
                    { "time": "15:00-15:30", "status": "可排" },
                    { "time": "15:30-16:00", "status": "可排" },
                    { "time": "16:00-16:30", "status": "可排" },
                    { "time": "16:30-17:00", "status": "可排" },
                    { "time": "18:00-18:30", "status": "可排" },
                    { "time": "18:30-19:00", "status": "可排" },
                    { "time": "19:00-19:30", "status": "可排" },
                    { "time": "19:30-20:00", "status": "可排" }
                ]
            }
        },
        mounted() {
            this.timeArr = this.allTimeArr;
            const that = this
            const date = new Date();
            const cur_year = date.getFullYear();
            const cur_month = date.getMonth() + 1;
            const cur_date = date.getDate();
            this.cur_date = cur_date;
            const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
            //当前月份的天数
            let monthLength = that.getThisMonthDays(cur_year, cur_month)
            // 下个月
            let next_date = 1;
            let next_month = date.getMonth() + 2;
            let next_year = date.getFullYear();
            if (next_month > 12) {
                next_month = 1;
                next_year = date.getFullYear() + 1;
            }
            //下个月份的天数
            let nextMonthLength = that.getThisMonthDays(next_year, next_month)
            //利用构造函数创建对象
            function calendar(date, week, cur_month, cur_year) {
                this.date = [cur_year, cur_month, date].map(that.utils().formatNumber).join('-');
                if (date == cur_date) {
                    this.week = "今天";
                } else {
                    this.week = '星期' + week;
                }
            }
            //当前月份的第一天是星期几
            let week = that.getFirstDayOfWeek(cur_year, cur_month)
            let x = week;
            for (let i = 1; i <= monthLength; i++) {
                //当循环完一周后，初始化再次循环
                if (x > 6) {
                    x = 0;
                }
                //利用构造函数创建对象
                that.twoCalendar[i] = new calendar(i, [weeks_ch[x]][0], cur_month, cur_year)
                x++;
            }
            let next_week = that.getFirstDayOfWeek(next_year, next_month);
            let next_x = next_week;
            for (let i = 1; i <= nextMonthLength; i++) {
                //当循环完一周后，初始化再次循环
                if (next_x > 6) {
                    next_x = 0;
                }
                //利用构造函数创建对象
                that.twoCalendar[monthLength + i] = new calendar(i, [weeks_ch[next_x]][0], next_month, next_year)
                next_x++;
            }

            that.getCalenderByDay(that.maxdays, that.cur_date, that.twoCalendar)

        },
        methods: {
            // 获取当月天数
            getThisMonthDays(year, month) {
                return new Date(year, month, 0).getDate();
            },
            // 计算每月第一天是星期几
            getFirstDayOfWeek(year, month) {
                return new Date(Date.UTC(year, month - 1, 1)).getDay();
            },

            utils(){
                const formatTime = date => {
                    const year = date.getFullYear()
                    const month = date.getMonth() + 1
                    const day = date.getDate()
                    const hour = date.getHours()
                    const minute = date.getMinutes()
                    const second = date.getSeconds()

                    return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
                }

                const formatDate = date => {
                    const year = date.getFullYear()
                    const month = date.getMonth() + 1
                    const day = date.getDate()

                    return [year, month, day].map(formatNumber).join('-')
                }
                const formatNumber = n => {
                    n = n.toString()
                    return n[1] ? n : '0' + n
                }
                const dateDiff = (firstDate, secoundDate) => {
                    // 如果 firstDate >= secoundDate 返回true 反之 false
                    return new Date(firstDate) - new Date(secoundDate) >= 0
                }
                return {
                    formatTime,
                    formatDate,
                    formatNumber,
                    dateDiff
                }
            },

            // 日期赋值(原)
            getCalenderByDay(maxDays, current_date, twoCalendar) {
                const that = this
                //限制要渲染的日历数据天数为7天以内（用户体验）
                let flag = twoCalendar.slice(current_date, twoCalendar.length - current_date <= maxDays ? twoCalendar.length : (current_date + maxDays))
                that.calendar = flag

                //设置scroll-view的子容器的宽度
                that.width = 186 * parseInt(twoCalendar.length - current_date <= maxDays ? twoCalendar.length : maxDays)
            },

            select: function (index) {
                //为上半部分的点击事件
                this.currentIndex = index
            },
            selectTime: function (tindex) {
                //为下半部分的点击事件
                this.currentTime = tindex
            },
        }
    }
</script>

css部分代码

<style scoped>
    .scroll-view{
        /*height: 128px;*/
        height: 146px;
        width: 100%;
        overflow: auto;
    }
    .scroll-view .list{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 1302px;
    }
    .scroll-view .listItem{
        text-align: center;
        width: 186px;
        height: 128px;
        background-color: #f1f2f6;
        padding-top: 30px;
        box-sizing: border-box;
        /* float: left; */
        display: inline-block;
    }
    .scroll-view .listItem text{
        display: block;
    }
    .scroll-view .listItem .name{
        font-size: 21px;
    }
    .scroll-view .listItem .date{
        font-size: 21px;
    }
    .scroll-view .current{
        background-color: #76aef8;

    }
    .scroll-view .current .text{
        color: #fff;
    }
    .time{
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0 auto;
        margin-top: 30px;
    }
    .time .listItem{
        width: 25%;
        height: 100px;
        text-align: center;
        box-sizing: border-box;
        background-color: #fff;
        padding-top: 18px;
        border: 1px solid #b9c1c8;
    }
    .time .listItem text{
        display: block;
        font-size: 21px;
    }
    .time .current{
        background-color: #6eb92b;
        border: 1px solid #6eb92b;
    }
    .time .current .text{
        color: #fff;
    }
    .operate button{
        width:300px;
        height: 88px;
        background-color: #fff;
    }
    .operate .del{

        color: #e54449;
    }
    .operate button::after{
        border: 2px solid #e54449;
    }
    .operate{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    .operate button:nth-child(2):after{
        border: 2px solid #e54449;
    }
    .operate .save{
        color: #fff;
        background-color: #e54449;

    }
    .operate{
        width: 100%;
        padding: 30px 0;
        background-color: #fff;
        position: fixed;
        bottom: 0;
    }

</style>

备注

第一次写，部分代码没有用到，请自行删掉即可。