订餐系统：手机端左右滑提交一星期订单的代码实现

现在的手机版是这样的：

     

    一个页面，我写了六千行代码，导致维护的小伙伴叫苦不迭，

    其实，细细去看，六千行代码是有规律的，是可以抽出来的，我还没来得及抽项目就上线了

 

 

    页面是用MUI做的，里面的逻辑还是挺有意思的

 

    这个页面有这些功能：

        1.哪天登入系统，就显示哪天的页面，比如今天礼拜五，那第一页就显示礼拜五的菜谱，同时左滑是礼拜四的，右滑是礼拜六的

        2.过去的菜单只读不可再提交，今天礼拜五，那礼拜一二三四的菜单都是只读的

        3.当天过10点后，不能再提交当天中午的菜单，提交按钮不再可用

        4.当天过17点后，不能再提交当天晚上的菜单，提交按钮不再可用

        5.七个页是当天所在周的七个日期值

        6.提交订单后，订单详情在页面下方展示

 

 

 

   手指滑屏---触发页底角标变化---触发日期、星期变化---根据日期去后台查询相应数据拼接到页面显示

 

      MUI封装的前两步，我写了JS函数完成后两步  

    1.获取当前日期JS函数

function getNowDate() { var nowDate = new Date().getFullYear(); var nowMonth = new Date().getMonth() + 1; var nowDay = new Date().getDate(); if (nowMonth < 10) { nowMonth = '0' + nowMonth; } if (nowDay < 10) { nowDay = '0' + nowDay; } var oldDate = nowDate + '-' + nowMonth + '-' + nowDay; freshDate.innerText = oldDate; }

    2.声明一个数组，存放当天所在周7个日期值

function jugeWeekday() { var day = new Date().getDay(); switch (day) { case 0://登进来是星期日 callGetDateSunday(); break; case 1://登进来是星期一 callGetDateMonday(); break; case 2://登进来是星期二 callGetDateTuesday(); break; case 3://登进来是星期三 callGetDateWednesday(); break; case 4://登进来是星期四 callGetDateThursday(); break; case 5://登进来是星期五 callGetDateFriday(); break; case 6://登进来是星期六 callGetDateSaturday(); break; } } //登进来是星期二的方法 var arrTuesday = new Array(6); function callGetDateTuesday() { for (var i = -1; i < 0; i++) { getDateCallTuesday(i); arrTuesday[i + 2] = nextDateReceivearrTuesday; } callGetDatearrTuesdayTemp(); } //获取当前日期并调用日期变化方法 function getDateCallTuesday(dayValue) { var nowDate = new Date().getFullYear(); var nowMonth = new Date().getMonth() + 1; var nowDay = new Date().getDate(); if (nowMonth < 10) { nowMonth = '0' + nowMonth; } if (nowDay < 10) { nowDay = '0' + nowDay; } var oldDate = nowDate + '-' + nowMonth + '-' + nowDay; var days = dayValue; changeHeaderDatearrTuesday(oldDate, days); } var nextDateReceivearrTuesday; function changeHeaderDatearrTuesday(date, days) { var d = new Date(date); d.setDate(d.getDate() + days); var m = d.getMonth() + 1; if (m < 10) { m = '0' + m; } var freshDay = d.getDate(); if (freshDay < 10) { freshDay = '0' + freshDay; } nextDateReceivearrTuesday = d.getFullYear() + '-' + m + '-' + freshDay; } function callGetDatearrTuesdayTemp() { for (var i = 1; i < 6; i++) { getDateCallarrTuesdayTemp(i); arrTuesday[i + 1] = nextDateReceivearrTuesdayTemp; } } function getDateCallarrTuesdayTemp(dayValue) { var nowDate = new Date().getFullYear(); var nowMonth = new Date().getMonth() + 1; var nowDay = new Date().getDate(); if (nowMonth < 10) { nowMonth = '0' + nowMonth; } if (nowDay < 10) { nowDay = '0' + nowDay; } var oldDate = nowDate + '-' + nowMonth + '-' + nowDay; var days = dayValue; changeHeaderDatearrTuesdayTemp(oldDate, days); } var nextDateReceivearrTuesdayTemp; function changeHeaderDatearrTuesdayTemp(date, days) { var d = new Date(date); d.setDate(d.getDate() + days); var m = d.getMonth() + 1; if (m < 10) { m = '0' + m; } var freshDay = d.getDate(); if (freshDay < 10) { freshDay = '0' + freshDay; } nextDateReceivearrTuesdayTemp = d.getFullYear() + '-' + m + '-' + freshDay; }