訂餐系統：手機端左右滑提交一星期訂單的代碼實現

現在的手機版是這樣的：

     

    一個頁面，我寫了六千行代碼，導致維護的小夥伴叫苦不迭，

    其實，細細去看，六千行代碼是有規律的，是可以抽出來的，我還沒來得及抽項目就上線了

 

 

    頁面是用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;
        }