• 酒店系统仿美团酒店价格日历页面


    一套管理系统,需要价格日历,时间紧,没花太多时间找到合适的开源原则,自己撸了套够用的即可,后续接着优化,特别是日期时间换算代码比较乱

    <template>
    <div class="priceDetail">
    <div>
    <div class="roomDetail">自选大床房(尊享停车位)</div>
    <div class="weekDesc">
    <ul>
    <li>日</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <li>五</li>
    <li>六</li>
    </ul>
    </div>
    </div>
    <template v-for="(item, key) in calendarData">
    <div class="calendarCont">
    <div class="calendarYearMonth">{{item.year}}年{{item.month}}月</div>
    <div class="calendarDate">
    <ul>
    <template v-for="(day, index) in item.days">
    <!--补齐开头-->
    <template v-if="index == 0 && day.day != 0">
    <template v-for="i in day.day">
    <li v-bind:class="{'less': key==0}"><p class="calendarDateDay"></p>
    <p class="calendarDatePrice"></p></li>
    </template>
    </template>
    <li v-bind:class="{ equal: day.compareToday=='equal', 'less': day.compareToday=='less', 'greater': day.compareToday=='greater',
    'selectStart':((item.year+'-'+item.month+'-'+day.date)==selectStartTime),'selectEnd':((item.year+'-'+item.month+'-'+day.date)==selectEndTime),
    'selectStartAndEnd': ((item.year+'-'+item.month+'-'+day.date)==selectStartTime && (item.year+'-'+item.month+'-'+day.date)==selectEndTime),
    'selectStartBetween': betweenStartEnd((item.year+'-'+item.month+'-'+day.date), selectStartTime, selectEndTime)
    }" @click="selectDateEvent(item.year, item.month, day.date)">
    <p class="calendarDateDay">
    <template
    v-if="((item.year+'-'+item.month+'-'+day.date)==selectStartTime && (item.year+'-'+item.month+'-'+day.date)==selectEndTime)">
    开始/结束
    </template>
    <template v-else-if="((item.year+'-'+item.month+'-'+day.date)==selectEndTime)">
    结束
    </template>
    <template v-else-if="((item.year+'-'+item.month+'-'+day.date)==selectStartTime)">
    开始
    </template>
    <template v-else-if="1 == 2">
    国庆节 <!--TODO-->
    </template>
    <template v-else>
    {{day.date}}
    </template>
    </p>
    <p class="calendarDatePrice">¥19.9</p></li>
    <!--补齐结尾-->
    <template v-if="index == (item.lastDate-1) && day.day != 6">
    <template v-for="i in (6 - day.day)">
    <li><p class="calendarDateDay"></p>
    <p class="calendarDatePrice"></p></li>
    </template>
    </template>
    </template>
    </ul>
    </div>
    </div>
    <!--</div>-->
    </template>
    </div>
    </template>

    <script>
    export default {
    name: "detail",
    data() {
    return {
    calendarData: [],
    selectStatus: 0, // -1:选择完成,0未选择任何,1:选择了开始时间
    selectStartTime: null,
    selectEndTime: null,
    }
    },
    created() {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth()
    this.calendarData = this.createcalendarData(year + '-' + month, 3)
    console.log(this.calendarData)
    },
    methods: {
    /**
    * 构建日历数据
    *
    * @param startYearMonth 开始年月
    * @param step 获取几个月的
    * @returns {Array}
    */
    createcalendarData: function (startYearMonth, step) {
    // 由于JavaScript中day的范围为1~31中的值,所以当设为0时,会向前 一天,也即表示上个月的最后一天。
    let rs = [];
    var year = startYearMonth.split("-")[0];
    var month = startYearMonth.split("-")[1];
    var todayDateObj = new Date();
    for (let i = 0; i < step; i++) {
    // 获取当月的信息
    let nowMonthDate = new Date(year, month + i, 1);
    let firstDay = nowMonthDate.getDay();
    // 判断这个月有多少天(既下个月的第0天)
    let d = new Date(nowMonthDate.getFullYear(), (nowMonthDate.getMonth() + 1), 0);
    let maxDay = d.getDate();
    // 向上取整,不要做小数相除如:2.1/0.7
    let totalWeek = Math.ceil(maxDay / 7);
    let daysDesc = [];
    let nowYearDesc = nowMonthDate.getFullYear();
    // Date对象月份从0开始,即0表示1月份,以此类推
    let nowMonthDesc = nowMonthDate.getMonth() + 1;
    let compareToday = null
    for (let j = 1; j <= maxDay; j++) {
    // 获取当天时星期几
    let nowDay = new Date(year, month + i, j);
    let nowDateObj = new Date(year, month + i, j);
    if (nowDateObj.toDateString() == todayDateObj.toDateString()) {
    compareToday = 'equal'
    } else if (nowDateObj < todayDateObj) {
    compareToday = 'less'
    } else {
    compareToday = 'greater'
    }
    daysDesc.push({'date': nowDay.getDate(), 'day': nowDay.getDay(), 'compareToday': compareToday})
    }

    let calendar = {
    'year': nowYearDesc,
    'month': nowMonthDesc,
    'days': daysDesc,
    'firstDay': firstDay,
    'lastDate': maxDay,
    'weeks': totalWeek
    }
    rs.push(calendar)
    }
    return rs;
    },
    // selectStatus: //-1:全部选择了 0未选择任何,1:设置开始时间
    // 先点击开始,再点击结束
    // 如果已经选择了开始和结束,再点任何一天都会变成开始时间
    // 如果选择了开始时间,再次点击的时间如果比当前时间小,则这天为开始时间
    // 选择了开始时间和结束时间为一天,再点击当日,变成开始时间
    /**
    * 选择日历事件
    *
    * @param year
    * @param month
    * @param date
    */
    selectDateEvent: function (year, month, date) {
    // 如果传递时间比当前时间小,则不做处理
    var todayDateObj = new Date();
    var todayYear = todayDateObj.getFullYear()
    var todayMonth = todayDateObj.getMonth() + 1
    var todayDate = todayDateObj.getDate()
    if (new Date(year, month, date).getTime() < new Date(todayYear, todayMonth, todayDate).getTime()) {
    // console.log('选择时间小于当前时间,不处理')
    return
    }
    switch (this.selectStatus) {
    case -1:
    this.selectStartTime = (year + '-' + month + '-' + date);
    this.selectEndTime = null;
    this.selectStatus = 1;
    // console.log('重新设置开始时间')
    break;
    case 0:
    this.selectStartTime = (year + '-' + month + '-' + date);
    this.selectStatus = 1;
    // console.log('设置开始时间')
    break;
    case 1:
    // 如果点击这个按钮则取消
    // 判断是否存在开始结束时间
    let hadStartTime = this.selectStartTime;
    if (hadStartTime == null) {
    this.selectEndTime = null;
    this.selectStatus = 0;
    break;
    }
    // 如果相等,赋予特殊标示(开始结束日期为同一天)
    if (this.selectStartTime == (year + '-' + month + '-' + date)) {
    // ToDO
    } else {
    let startYear = hadStartTime.split('-')[0];
    let startMonth = hadStartTime.split('-')[1];
    let startDate = hadStartTime.split('-')[2];
    // 如果设置的时间小于开始时间,重置开始时间
    if (new Date(year, month, date) < new Date(startYear, startMonth, startDate)) {
    this.selectStartTime = (year + '-' + month + '-' + date);
    this.selectEndTime = null;
    this.selectStatus = 1;
    // console.log('重置开始时间')
    break;
    }
    }
    // 存在判断是否
    this.selectEndTime = (year + '-' + month + '-' + date);
    this.selectStatus = -1;
    break;
    default:
    }
    },
    /**
    * 判断给的日期是否在两个日期之间
    *
    * @param nowTime
    * @param selectStartTime
    * @param selectEndTime
    * @returns {boolean}
    */
    betweenStartEnd(nowTime, selectStartTime, selectEndTime) {
    if (selectStartTime == null || selectEndTime == null) {
    return false;
    }

    let startYear = selectStartTime.split('-')[0];
    let startMonth = selectStartTime.split('-')[1] - 1;
    let startDate = selectStartTime.split('-')[2];
    // let startTime = new Date(startYear, startMonth, startDate);
    let startTime = (new Date(startYear, startMonth, startDate)) / 1000;

    let endYear = selectEndTime.split('-')[0];
    let endMonth = selectEndTime.split('-')[1] - 1;
    let endDate = selectEndTime.split('-')[2];
    // let endTime = new Date(endYear, endMonth, endDate);
    let endTime = (new Date(endYear, endMonth, endDate)) / 1000;

    let selectYear = nowTime.split('-')[0];
    let selectMonth = nowTime.split('-')[1] - 1;
    let selectDate = nowTime.split('-')[2];

    // let selectTime = new Date(selectYear, selectMonth, selectDate);
    let selectTime = (new Date(selectYear, selectMonth, selectDate)) / 1000;
    if (selectTime > startTime && selectTime < endTime) {
    console.log('here2')
    console.log(nowTime, selectStartTime, selectEndTime)
    console.log(selectYear, selectMonth, selectDate)
    console.log(selectTime, startTime, endTime)

    return true;
    } else {

    return false;
    }
    }
    }
    }
    </script>

    <style scoped>
    .roomDetail {
    100%;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    }

    .weekDesc {
    100%;
    line-height: 30px;
    font-size: 12px;
    background-color: #f8f8f8;
    clear: both;
    }

    .weekDesc ul {
    100%;
    }

    .weekDesc ul li {
    display: block;
    float: left;
    14.2%;
    text-align: center;
    }

    .calendarYearMonth {
    clear: both;
    background-color: #f8f8f8;
    line-height: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    /*box-shadow: 0px 1px 1px rgba(0,0,0,0.1);*/
    }

    .calendarDate {
    100%;
    font-size: 12px;
    background-color: #ffffff;;
    clear: both;
    }

    .calendarDate ul {
    100%;
    background-color: #f5f8fa;
    }

    .calendarDate ul li {
    display: block;
    float: left;
    14.2%;
    text-align: center;
    border-bottom: 1px solid #f8f8f8;
    height: 30px;
    background-color: white;
    padding: 5px 0px;
    }

    .calendarDateDay {
    font-size: 14px;
    line-height: 15px;
    }

    .calendarDatePrice {
    font-size: 10px;
    line-height: 15px;
    color: #BBB;
    }

    .calendarCont {
    }

    .calendarClass table {
    font-size: 12px;
    _display: inline;
    border-spacing: 0 7px;
    border-collapse: collapse;
    100%;
    }

    .calendarClass table {
    font-size: 12px;
    _display: inline;
    border-spacing: 0 7px;
    border-collapse: collapse;
    100%;
    }

    .dateRangeDateTable {
    border-bottom: 1px solid #f8f8f8;
    }

    .dateRangeDateTable tbody tr {
    height: 33px;
    border-top: 1px solid #f8f8f8;
    }

    /*1.日历天数选择样式分类*/
    /*已经过期的样式*/
    .calendarDate ul .less {
    background-color: #f5f8fa;
    }

    /*选择开始样式*/
    .calendarDate ul .selectStart {
    background-color: #2ab27b;
    }

    /*选择结束样式*/
    .calendarDate ul .selectEnd {
    background-color: #bf5329;
    }

    /*开始和结束一样的样式*/
    .calendarDate ul .selectStartAndEnd {
    background-color: #3097D1;
    }

    /*开始和结束一样的日期格式*/
    .calendarDate ul .selectStartAndEnd .calendarDateDay {
    font-size: 8px;
    color: white;
    }

    .calendarDate ul .selectStartBetween {
    background-color: #cffaff;
    }

    /*已经修改过价格的样式*/
    /*2.日历内细分样式*/
    /*标准时间*/
    /*节假日时间*/
    /*价格样式*/
    </style>

  • 相关阅读:
    MATLAB新手教程
    关于Core Location-ios定位
    《TCP/IP具体解释卷2:实现》笔记--IP的分片和重装
    利用JasperReport+iReport进行Web报表开发
    Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的关系
    Openfire开发配置,Openfire源码配置,OpenFire二次开发配置
    在Activity中为什么要用managedQuery()
    24点经典算法
    linux概念之时间与时区
    java实现第五届蓝桥杯大衍数列
  • 原文地址:https://www.cnblogs.com/liugx/p/8337678.html
Copyright © 2020-2023  润新知