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

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

课程章节： 课程导学

主讲老师： Cloud

课程内容：

今天学习的内容包括：

课程的基本介绍

课程收获：

3.1 心得：

  <view class="date-year-month"><image bindtap='lastMonthEvent' src='../../images/left.png'></image>{{year}}年{{month}}月<image src='../../images/right.png' bindtap='nextMonthEvent' ></image></view>
 
<view ></view>
<view>
<view style="background:#F5F5F5;font-size: 30rpx; ">
  <view class="layout-flex row" style="background-color: #fff;">
    <text class="date-week" style="width:{{systemInfo.windowWidth/7-10}}px;height:20px" wx:for="{{weekStr}}" wx:key="{{index}}">
                 <text wx:if="{{item !=='日' && item !=='六'}}">{{item}}</text>
    <text wx:if="{{item ==='日' || item ==='六'}}" class="week">{{item}}</text>
    </text>
  </view>
</view>
  <view class="layout-flex row" style="flex-wrap: wrap;margin-top:30rpx;">
    <view class="date-day {{item.day<=0?'bgwhite':item.class}}" style="width:{{systemInfo.windowWidth/7-10}}px;height:{{systemInfo.windowWidth/7}}px;" data-year="{{year}}" data-month="{{month}}" data-day="{{item.day}}" data-amount="{{item.amount}}"   data-baseamount="{{item.baseamount}}" data-chooseProductId="{{item.chooseProductId}}" data-subscribes="{{item.subscribes}}"  data-isspecialprice="{{item.isspecialprice}}"bindtap="onPressDateEvent"
      wx:for="{{days}}" wx:key="{{index}}">
      <view class='item-days'>
        <text>{{item.day>0?(item.daytext?item.daytext:item.day):''}}</text>
        <text class='amount' wx:if='{{item.day>0}}'>{{item.amount}}</text>
        <view hidden="true">{{item.chooseProductId}}</view>
      </view>
    </view>
  </view>
</view>

var Moment = require("../../utils/moment.js");
// var DATE_YEAR = new Date().getFullYear();
// var DATE_MONTH = new Date().getMonth() + 1;
// var DATE_DAY = new Date().getDate();
var app = getApp();
Page({
  data: {
    year: '',
    month: '',
    day: '',
    days: {},
    systemInfo: {},
    weekStr: ['日', '一', '二', '三', '四', '五', '六'],
    checkDate: [],
    productId: '',
    productData: null,
    dateYear: null,
    dateMonth: null,
    dateDay: null,
    startTime: '',
    endTime: '',
    endYear: '',
    endMonth: '',
    endDay: ''
  },
  onLoad: function (options) {
    var _this = this;
    var day = options.day;
    var amount = options.amount;
    var baseamount = options.baseamount;
    var productId = options.productId;
    var startTime = options.startTime;
    var endTime = options.endTime;
    var addDays = isNaN(parseInt(options.addDays)) ? 0 : parseInt(options.addDays);
    //console.log(day);console.log(amount);console.log(productId)
    if (day && amount && productId && baseamount) {
      _this.setData({
        checkDate: [{ chooseproductid: "", "day": day, "amount": amount, "baseamount": baseamount }],
        productId: productId
      })
    }

    var nowDate = new Date();
    var endDate = new Date();
    var startDate = new Date();
    if (startTime && endTime) {
      var dateArr = startTime.split("-");
      var cyear = parseInt(dateArr[0]);
      var cmonth = null;
      if (dateArr[1].indexOf("0") == 0) {
        cmonth = parseInt(dateArr[1].substring(1));
      } else {
        cmonth = parseInt(dateArr[1]);
      }

      var cday = parseInt(dateArr[2]);
      startDate = new Date(cyear, cmonth - 1, cday);
      if (startDate > nowDate) {
        nowDate = new Date(cyear, cmonth - 1, cday);
      }

      var enddateArr = endTime.split("-");
      var cendyear = parseInt(enddateArr[0]);
      var cendmonth = null;
      if (enddateArr[1].indexOf("0") == 0) {
        cendmonth = parseInt(enddateArr[1].substring(1));
      } else {
        cendmonth = parseInt(enddateArr[1]);
      }

      var cendday = parseInt(enddateArr[2]);
      _this.data.endYear = cendyear;
      _this.data.endMonth = cendmonth;
      _this.data.endDay = cendday;
    }

    var dateTime = nowDate.setDate(nowDate.getDate() + addDays);
    let now = new Date(dateTime);
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    var dateYear = now.getFullYear();
    var dateMonth = now.getMonth() + 1;
    var dateDay = now.getDate();
    _this.setData({
      year: year,
      month: month,
      dateYear: dateYear,
      dateMonth: dateMonth,
      dateDay: dateDay,
      startTime: startTime,
      endTime: endTime,
    })

    // 页面初始化 options为页面跳转所带来的参数
    _this.createDateListData(year, month - 1);
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          systemInfo: res,
        });
      }
    })
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {

  },
  getProductData: function (productId, month, year) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: app.getUrl(app.globalData.getProductBy),
        data: {
          productId: productId,
          city: app.globalData.userLocation,
          month: month,
          year: year
        },
        success(res) {
          resolve(res.data.data)
        },
        fail(err) {
          reject(err)
        }
      })
    })

  },
  /**创建日历数据 */
  createDateListData: function (setYear, setMonth) {
    var _this = this;
    //全部时间的月份都是按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 = _this.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.data.productId, nextMonth, year)

    productData.then(function (res) {

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

      for (var j = -startWeek + 1; j <= dayNums; j++) {
        var tempWeek = -1;
        if (j > 0) {
          tempWeek = _this.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 starttime = new Date(Date.parse(_this.data.dateYear + "-" + _this.data.dateMonth + "-" + _this.data.dateDay));
        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 = _this.checkItemExist(_this.data.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: '',
              baseamount: '',
              subscribes: [],
              isspecialprice: false,
            })
          }
          else {
            for (var i = 0; i < data.length; i++) {
              if (j == data[i].day) {
                if (parseFloat(data[i].Price) > 0) {
                  dateArr.push({
                    chooseProductId: data[i].ProductId,
                    day: j,
                    class: clazz,
                    amount: '￥' + data[i].Price,
                    baseamount: data[i].BasePrice,
                    subscribes: data[i].ProductSubscribes,
                    isspecialprice: data[i].IsSpecialPrice,
                  })
                }
                else {
                  dateArr.push({
                    chooseProductId: '',
                    day: j,
                    class: 'unavailable ' + clazz,
                    amount: '',
                    baseamount: '',
                    subscribes: [],
                    isspecialprice: false,
                  })
                }

                break;
              }
            }
          }

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

      }
      _this.setData({
        days: dateArr
      })
    });

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

    // if (month + 1 < DATE_MONTH && year <= DATE_YEAR) {
    //   return;
    // }

    // if (year < DATE_YEAR || (month + 1 < DATE_MONTH && year == DATE_YEAR))
    //   return;
    if (year < this.data.dateYear || (month + 1 < this.data.dateMonth && year == this.data.dateYear))
      return;

    this.setData({
      year: year,
      month: (month + 1)
    });
    this.createDateListData(year, month);
  },
  /**
   * 下个月
   */
  nextMonthEvent: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
    let month = this.data.month > 11 ? 0 : this.data.month;

    if (this.data.endYear != '') {
      if (year > this.data.endYear) {
        return;
      }
    }

    if (this.data.endYear != '' && this.data.endMonth != '') {
      if (year == this.data.endYear && month + 1 > this.data.endMonth) {
        return;
      }
    }

    this.setData({
      year: year,
      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();
  },
  /*
   * 获取月的第一天是星期几
   */
  getWeek: function (year, month, day) {
    var d = new Date(year, month - 1, day);
    return d.getDay();
  },
  /**
   * 点击日期事件
   */
  onPressDateEvent: function (e) {
    var {
      year,
      month,
      day,
      amount,
      baseamount,
      chooseproductid,
      subscribes,
      isspecialprice
    } = e.currentTarget.dataset;
    // console.log("当前点击的日期：" + year + "-" + month + "-" + day + "-" + chooseproductid);
    // console.log(e.currentTarget.dataset)
    //当前选择的日期为同一个月并小于今天，或者点击了空白处（即day<0），不执行

    if ((day < this.data.dateDay && month == this.data.dateMonth) || day <= 0)
      return;

    this.setData({
      checkDate: []
    })
    this.renderPressStyle(year, month, day, amount, baseamount, isspecialprice, chooseproductid, subscribes);
  },
  renderPressStyle: function (year, month, day, amount, baseamount, isspecialprice, chooseproductid, subscribes) {
    var days = this.data.days;
    if (!amount) {
      return;
    }

    if (!baseamount) {
      return;
    }
    //渲染点击样式
    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,
          baseamount: baseamount,
          chooseproductid: chooseproductid,
          subscribes: subscribes,
          isspecialprice: isspecialprice,
        };
        var checkDateJson = this.data.checkDate;
        var index = this.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.setData({
          checkDate: checkDateJson
        })
        // console.log(JSON.stringify(this.data.checkDate));
        var that = this;
        wx.setStorage({
          key: "pickerdata",
          data: this.data.checkDate,
          success: function () {
            wx.navigateBack();   //返回上一个页面
          }
        })

        break;
      }
    }
    this.setData({
      days: days
    });

  },
  /**检查数组中是否存在该元素 */
  checkItemExist: function (arr, value) {
    for (var i = 0; i < arr.length; i++) {
      var valueDay = new Date(value).getDate();
      var arrDay = new Date(arr[i].day).getDate();
      if (valueDay === arrDay) {
        return i;
      }
    }
    return -1;
  }
})

/* pages/dateSelect/dateSelect.wxss */
 
page{
  background-color: #fff;
}

.date-day {
  display: flex;
  padding: 5px;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
 
.date-day.bgitem {
  background-color: #d8ecf9;
}
 
.date-day.active {
  background: #099fde;
  color: #fff;
}
 
.date-day.unavailable {
  color: #aaa;
}
 
.date-week {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 5px;
}
 
.week {
  color: #099fde;
}
 
.row {
  display: flex;
  flex-direction: row;
}
 
.item-days {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
}
.amount{
  font-size: 22rpx;
}
.bgwhite {
  background-color: #fff;
}
 
.date-year-month {
  text-align: center;
  font-size: 35rpx;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.date-year-month image{
  height: 35rpx;
  width: 35rpx;
  margin: 0 30rpx;
}