【金秋打卡】第18天 破解JavaScript高级玩法 第四讲

课程名称： 破解JavaScript高级玩法

课程章节： 运算符的妙用以及部分机理解析

主讲老师： Cloud

课程内容：

今天学习的内容包括：

JS运算符的运用

课程收获：

4.1 心得：

var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();

var app = new Vue({
	el: "#wrap",
	data: {
	year: '',
    month: '',
    day: '',
    days: {},
    systemInfo: {},
    weekStr: ['日', '一', '二', '三', '四', '五', '六'],
    checkDate: [],
    productId: '',
    productData: null,
	headerStyle:{width: document.body.clientWidth/7-10+'px',height:20+'px'},
	bodyStyle:{width: document.body.clientWidth/7-10+'px',height:document.body.clientWidth/7+'px'},
  },
  created() {
    var _this = this;
	//默认选中（天）
	var day = '';
    var amount = '';
    var productId = "";
    
    if (day && amount && productId) {
      _this.checkDate=[{ chooseproductid: "", "day": day, "amount": amount }];
       _this.productId=productId;
    }
	//console.log(_this.checkDate)
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
	console.log(year+'-'+month)
    this.createDateListData();
	_this.year =year;
	_this.month =month;
  },
 methods : {
	 getProductData: function (productId, month, year) {
		return new Promise((resolve, reject) => {
			$.ajax({
			url: 'https://sapi.yunlvshuju.com/' + 'api/Order/GetProductBy',
			data: {
			  productId: '1911016095105068',
			  city: '长沙市',
			  month: '12',
			  year:'2019'
			},
			type: "GET",
			dataType: "json",
			success(res) {
				//console.log(res.data)
			  resolve(res.data)
			},
			fail(err) {
			  reject(err)
			}
		});
		})

	 },
		/**创建日历数据 */
  createDateListData: function(setYear, setMonth) {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let dateArr = []; //需要遍历的日历数组数据
    let arrLen = 0; //dateArr的数组长度
    let now = setYear ? new Date(setYear, setMonth) : new Date();
    let year = setYear || now.getFullYear();
    let nextYear = 0;
    let month = setMonth || now.getMonth();
    //没有+1方便后面计算当月总天数
    let nextMonth = (month + 1) > 11 ? 12 : (month + 1);
    // console.log("当前选中月nextMonth：" + nextMonth);
    //目标月1号对应的星期
    let startWeek = getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay();  
    // console.log("目标月1号对应的星期startWeek:" + startWeek);
    //获取目标月有多少天
    let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate();         
    // console.log("获取目标月有多少天dayNums:" + dayNums);
    let obj = {};
    let num = 0;
    if (month + 1 > 11) {
      nextYear = year + 1;
      dayNums = new Date(nextYear, nextMonth, 0).getDate();
    }
    var productData = this.getProductData(this.productId, nextMonth, year)
	var checkDate=this.checkDate;
    productData.then(function (res) {

      var productInfo = res;
       console.log(res);

      for (var j = -startWeek + 1; j <= dayNums; j++) {
        var tempWeek = -1;
        if (j > 0) {
          tempWeek = getWeek(year, nextMonth, j);
          //console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek);
        }
        var clazz = '';
        if (tempWeek == 0 || tempWeek == 6)
          clazz = 'week'

        var starttime = new Date(Date.parse(DATE_YEAR + "-" + DATE_MONTH + "-" + DATE_DAY));
        var endtime = new Date(Date.parse(year + "-" + nextMonth + "-" + j));
        //console.log(nextMonth)
        //console.log(DATE_MONTH)
        if (endtime < starttime)
          //当天之前的日期不可用
          clazz = 'unavailable ' + clazz;
        else
          clazz = '' + clazz
        /**如果当前日期已经选中，则变色 */
        var date = year + "-" + nextMonth + "-" + j;
        if(parseInt(j)<10){
          date = year + "-" + nextMonth + "-0" + j;
        }

        var index = checkItemExist(checkDate, date);
        if (index != -1) {
          clazz = clazz + ' active';
        }
        if (productInfo != null) {
          var data = productInfo.VacationsProductList;
          if (j < productInfo.crrutDay) {

            dateArr.push({
              chooseProductId: '',
              day: j,
              class: clazz,
              amount: '',
              subscribes: []
            })
          }
          else {
            for (var i = 0; i < data.length; i++) {
              if (j == data[i].day) {
                dateArr.push({
                  chooseProductId: data[i].ProductId,
                  day: j,
                  class: clazz,
                  amount: '￥' + data[i].Price,
                  subscribes: data[i].ProductSubscribes
                })
                break;
              }

            }
          }

        }
        else {
          dateArr.push({
            chooseProductId: '',
            day: j,
            class: clazz,
            amount: '',
            subscribes: []
          })
        }

      }
	  
	  
    });
	console.log(dateArr)
	  this.days =dateArr;
	
  },
  /**
   * 上个月
   */
  lastMonthEvent:function(){
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.month - 2 < 0 ? this.year - 1 : this.year;
    let month = this.month - 2 < 0 ? 11 : this.month - 2;
	
	if (month + 1 < DATE_MONTH && year <= DATE_YEAR) {
      return;
    }
	
	this.year=year;
	this.month=(month + 1);

    this.createDateListData(year, month);
  },
  /**
   * 下个月
   */
  nextMonthEvent:function(){
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.month > 11 ? this.year + 1 : this.year;
    let month = this.month > 11 ? 0 : this.month;
	
	this.year=year;
	this.month=(month + 1);
	
    this.createDateListData(year, month);
  },
  /*
   * 获取月的总天数
   */
  getTotalDayByMonth: function(year, month) {
    month = parseInt(month, 10);
    var d = new Date(year, month, 0);
    return d.getDate();
  },
  
  /**
   * 点击日期事件
   */
onPressDateEvent: function (year,month,day,amount,chooseproductid,subscribes) {
     console.log("当前点击的日期：" + year + "-" + month + "-" + day + "-" + chooseproductid);
    // console.log(e.currentTarget.dataset)
    //当前选择的日期为同一个月并小于今天，或者点击了空白处（即day<0），不执行
    if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0)
      return;

    this.checkDate =[];
    this.renderPressStyle(year, month, day, amount, chooseproductid, subscribes);
  },
  renderPressStyle: function (year, month, day, amount, chooseproductid, subscribes) {
    var days = this.days;
    //渲染点击样式
    for (var j = 0; j < days.length; j++) {
      var tempDay = days[j].day;
      if (tempDay == day) {
        var date = year + "-" + month + "-" + day;
        var obj = {
          day: date,
          amount: amount,
          chooseproductid: chooseproductid,
          subscribes: subscribes
        };
        var checkDateJson = this.checkDate;
        var index = checkItemExist(checkDateJson, date);
        if (index == -1) {
          checkDateJson.push(obj);
          days[j].class = days[j].class + ' active';
        } else {
          checkDateJson.splice(index, 1);
          days[j].class = days[j].class.replace('active',' ');
        }
		
		this.checkDate=checkDateJson;
		
        console.log(JSON.stringify(this.checkDate));
		// var that=this;
        // wx.setStorage({
          // key: "pickerdata",
          // data: this.data.checkDate,
          // success: function () {
            // wx.navigateBack();   //返回上一个页面
          // }
        // })
		
		//把选中数据赋值到页面，且隐藏日期控件
		//
		//
        break;
      }
    }
	this.days=days;
    console.log(this.days)
  }
	}
  
});
/*
   * 获取月的第一天是星期几
   */
 function getWeek(year, month, day) {
    var d = new Date(year, month - 1, day);
    return d.getDay();
  }
  /**检查数组中是否存在该元素 */
function checkItemExist(arr,value){
	if (typeof(arr) != "undefined")
	{
    for (var i = 0; i < arr.length; i++) {
      if (value === arr[i].day) {
        return i;
      }
    }
	}
    return -1;
}

html {
    height: 100%;
    font-family: SourceHanSansCN-Normal;
    overflow-y: scroll;
}

body {
    /* display: flex;
    flex-direction: column; */
    min-height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    cursor:default;
    overflow: hidden;
    min-width:980px;
}

ol,
li,
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #333;
}

#wrap {
    padding-bottom: 261px;
}

.nav-bar {
    border-bottom: solid 1px #e5e5e5;
    width: 100%;
    min-width:980px
}

.nav_bar_logo {
    width: 135px;
    height: 40px;
    float: left;
}

.nav_bar_content {
    z-index: 27;
    min-width: 980px;
    max-width: 1190px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.set_list {
    float: left;
    font-size: 14px;
    padding-left: 60px;
}

footer {
    width: 100%;
    min-width:980px;    
    height: 261px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #333;
}

.footer_info {
    min-width: 980px;
    max-width: 1190px;
    margin: 0 auto;
    color: #fff;
    font-size: 12px;
    margin-top: 40px;
}

.about_company {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.about_company img{
    width: 111px;
    height: 127px;
    margin-left: 20px;
}

.scan_img_list{
    margin-left: -20px;
}

.footer_info_title {
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1;
}

.footer_info li {
    color: #fff;
    margin-bottom: 18px;
}

.contact_phone {
    font-size: 30px;
    font-weight: bold;
    margin-top: 16px;
    margin-bottom: 18px;
}

.other_contact {
    line-height: 20px;
}

.copyright {
    text-align: center;
}

.copyright a{
    color: #fff;
}

.base_bd {
    min-width: 980px;
    max-width: 1190px;
    margin: 60px auto;
}

.company_describe{
    display: flex;
}

.company_img {
    max-width: 498px;
    min-width: 498px;
    height: 658px;
    margin-right: 103px;
}

.company_describe_text {
    max-width: 476px;
    min-width: 476px;
    font-size: 16px;
    line-height: 32px;
}

.company_describe h1 {
    text-align: center;
    margin-bottom: 53px;
    margin-top: 23px;
    font-size: 32px;
}

.company_describe p {
    margin-bottom: 74px;
}