小程序基礎開發（四）：template模板應用(3)——日曆組件，可賦值參數(價格、銷量等)

小程序-日曆組件

左右翻頁，上一月下一月模式的
wxml

<view class='bg-white'>
  <view class="flex text-center align-center text-xl padding-tb-sm">
    <view class="flex-sub cuIcon-back" bindtap='lastMonth'></view>
    <view class="flex-sub text-black text-xl">{{year}}年{{month<10?'0'+month:month}}月</view>
    <view class="flex-sub cuIcon-right" bindtap='nextMonth'></view>
  </view>
  <view class='bg-gray flex padding-tb-xs text-lg'>
    <view class="flex-sub text-center" wx:for='{{week}}' wx:key="item">{{item}}<view></view></view>
  </view>
  <view class='cf'></view>
  <view class='date-box'>
    <view wx:for='{{dateArr}}' class="{{item.dateNum==selectedDate?'bg-green':''}}" bindtap="selectDate" data-date="{{item}}" wx:key="dateNum">	
      <view class="text-xl text-content {{item.dateNum==selectedDate?'text-white':'text-black'}}">{{item.dateNum}}</view>
      <view class="{{item.dateNum==selectedDate?'text-white':'text-grey'}} text-sm text-content" wx:if="{{item.canbook}}">剩餘{{item.canbook}}</view>
      <view class='text-lg text-content text-yellow {{item.uhrd_adult_price?"text-price":""}}' wx:if="{{item.uhrd_adult_price}}">{{item.uhrd_adult_price}}</view>
    </view>
  </view>
</view>

css

.date-box{
  height: auto;
  width: auto;
  border-left: 1rpx solid #D9D9D9;
  border-top: 1rpx solid #D9D9D9;
}
.date-box>view{
	position: relative;
	display: inline-block;
	width: 14.28571428571429%;
  height: 145rpx;
	text-align: center;
	vertical-align: middle;
  box-sizing: border-box;
  border-right: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
}

js

let now = new Date();
 util.requestUrl({
    url: " ",//從服務器獲取參數
    data: { ushr_id: ushrId },
    method: "get",
    success: function (res) {
      that.dateInit(now.getFullYear(), now.getMonth(), res.data.msg);//放在success裏+that.xx()才能先賦值再執行xx函數，避免空值！
      that.setData({
        year: now.getFullYear(),
        month: now.getMonth() + 1,
      });
    }
  });

dateInit: function (setYear, setMonth,msg) {
    holiday_days = msg;
    console.log(holiday_days);
    //全部時間的月份都是按0~11基準，顯示月份才+1
    let dateArr = [];						//需要遍歷的日曆數組數據
    let arrLen = 0;							//dateArr的數組長度
    let now = setYear ? new Date(setYear, setMonth) : new Date();
    let year = setYear ? setYear: now.getFullYear();
    let nextYear = 0;
    let month = setMonth ? setMonth: now.getMonth();					//沒有+1方便後面計算當月總天數
    let month2 = util.add0(month + 1);
    let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
    let startWeek = new Date(year + '/' + month2 + '/' + 1).getDay();							//目標月1號對應的星期
    let dayNums = new Date(year, nextMonth, 0).getDate();				//獲取目標月有多少天
    let obj = {};
    let num = 0;
    let hotlen = holiday_days.length;
    console.log(hotlen);
    if (month + 1 > 11) {
      nextYear = year + 1;
      dayNums = new Date(nextYear, nextMonth, 0).getDate();
    }

    arrLen = startWeek + dayNums;
    for (let i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        if (num < 10)
          num = '0' + num;
        obj = {
          dateNum: num,
        }//沒有價格的日曆數組（先將主要循環放前面，避免被覆蓋）！
        let isToday = '' + year + month2 + num;
        for (let ii = 0; ii < hotlen; ii++) {
          let godate = util.formatTimeTwo(holiday_days[ii]['uhrd_go_date'], 'YMD');
          if (godate == isToday) {
            obj = {
              dateNum: num,
              uhrd_room_price: holiday_days[ii]['uhrd_room_price'],
              uhrd_id: holiday_days[ii]['uhrd_id'],
              uhrd_adult_price: holiday_days[ii]['uhrd_adult_price'],
              uhrd_babe_price: holiday_days[ii]['uhrd_babe_price'],
              canbook: holiday_days[ii]['uhrd_biggest_num'] - holiday_days[ii]['sold_out']//可收-已售=剩餘    
            }//根據YYYYMMDD出發日期格式賦值價格
          }
        }
      } else {
        obj = {};
      }
      dateArr[i] = obj;
    }
    this.setData({
      dateArr: dateArr,
    })
  },
  lastMonth: 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;
    this.setData({
      year: year,
      month: (month + 1),
      //重置已選
      selectedDate: '',
      price_adult: 0,
      price_children: 0,
      uhrd_room_price: 0
    })
    this.dateInit(year, month, holiday_days);
  },
  nextMonth: 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;
    this.setData({
      year: year,
      month: (month + 1),
      //重置已選
      selectedDate: '',
      price_adult: 0,
      price_children: 0,
      uhrd_room_price: 0
    })
    this.dateInit(year, month, holiday_days);
  },

  selectDate: function (e) {
    if (e.currentTarget.dataset.date.uhrd_adult_price > 0)
    {    
      console.log('選中', e.currentTarget.dataset.date.dateNum, '號');//date
      price_adult = e.currentTarget.dataset.date.uhrd_adult_price,
      uhrdId = e.currentTarget.dataset.date.uhrd_id,
      uhrd_room_price = e.currentTarget.dataset.date.uhrd_room_price,
      price_children = e.currentTarget.dataset.date.uhrd_babe_price,
      canbook = e.currentTarget.dataset.date.canbook,
      this.setData({
        selectedDate: e.currentTarget.dataset.date.dateNum,
        price_adult: price_adult,
        price_children: price_children,
        uhrd_room_price: uhrd_room_price
      });
    }
  },

固定一頁多個月份模式的
wxml

<block wx:for='{{bigArr}}' wx:for-index="i" wx:key="index">
  <view class='date_container'>
      <view class='date-show'>
        {{item.year}}年{{item.month}}月
      </view>

      <view class='week_header'>
        <view wx:for='{{week}}' wx:key="item">{{item}}<view></view></view>
      </view>

     <view class='clear'></view>

      <view class='date-bigbox'>
          <view class='date-box'>
            <block wx:for='{{item.dateArr}}' wx:for-item="date" wx:for-index="ii" wx:key="date.todayTime" >
              <view bindtap="edit" data-date="{{date.todayTime}}" data-i="{{i}}" data-ii="{{ii}}" data-icon="{{date.icon}}">	
                <view class='date-head'>
                  <view>{{date.dayNum}}</view>
                </view>
                <view class='date-weight'>
                  <icon class="iconfont font13pt {{date.icon?'icon-qizhi':''}}"></icon>
                  <block wx:if="{{date.dayNum>0}}">
                  </block>
                </view>
              </view>
            </block>
          </view>
      </view>  
  </view>
  </block>

css

.date_container{
  margin-bottom: 20px;
}
.date-show{
	width:100%;
  height: 40px;
	font-size: 18px;
  line-height: 40px;
	text-align: center;
	margin:auto;
}
.lt-arrow,.rt-arrow{
	position: absolute;
	top: 7px;
	width: 13px;
	height: 13px;
}

.lt-arrow{
	left: -100rpx;
}
.rt-arrow{
	right: -100rpx;
}
.week_header{
  width: 100%;
  background-color: #f8f8f8;
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
  overflow: hidden;
}

.week_header>view{
	float: left;
	width: 14.28571428571429%;
	font-size: 11pt;
	text-align: center;
  line-height: 150%;
  padding: 5px 0;
}
.date-box{
	font-size: 0;
  height: auto;
  width: auto;
  border-left: 1px solid #D9D9D9;
}
.date-bigbox{
  height: auto;
  overflow: hidden;
}
.date-box>view{
	position: relative;
	display: inline-block;
	width: 14.28571428571429%;
  height: 50px;
	color: #020202;
	text-align: center;
	vertical-align: middle;
  box-sizing: border-box;
  border-right: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
}
/*日數*/
.date-head{
  height: 25px;
	line-height: 25px;
	font-size: 12pt;
}
/**/
.date-weight{
  height: 25px;
  color: red;
}
.date-weight icon{
  position: relative;
  bottom: 7px;
  }
/*選中*/
.active_date {
  background: #17944f;
  color: #ffffff !important;
}
.show_box{
  font-size: 24rpx;
  line-height: 50rpx;
}
.submit{
    background-color: #1296DB;
    color: #fff;
}

js

let monthShowNum= 2;//展示多少個月
//get獲取動態參數
 util.requestUrl({
   url: "moving.php",
   data: {},
   method: "get",
   success: function (res) {
     console.log(res.data)
     //usgu_guide_moving=res.data.msg //直接賦值
     that.dateInit(res.data.msg,monthShowNum); //放success()裏賦值完再渲染日期避免空值
   }
 })
 /*計算日期and賦值*/
  dateInit(msg, monthShowNum) {
    let usgu_guide_moving=msg; //返回的上團日期json
    let monthadd = monthShowNum-1; //需要增加渲染的月份數
    let bigArr = [];						//月份綜合數組									
    let now =new Date();
    let year = now.getFullYear();//年份
    
    for (let m = 0; m <= monthadd;m++)
    {
      let dateArr = [];						//號數綜合數組
      let month = now.getMonth() + 1+m;	 //月份
      if (month > 12) {
        let shang = parseInt(month / 12);  //商
        let yushu = month % 12; //餘數
        if(yushu==0) //餘數爲0即12月，循環到12月時其實還是當年，所以不用增加年份，手動設商-1
        {
          month=12;
          shang = shang-1;
        }
        else
          month=yushu;
        year = now.getFullYear() + shang;
      }

      let startWeek = new Date(year + '/' + month + '/' + 1).getDay();	//當月月1號對應的星期 格式yyyy/mm/1
      let dayNums = new Date(year, month, 0).getDate();				//獲取當月月有多少天
      let obj = {};
      let usgu_len = usgu_guide_moving.length;
      let arrLen = startWeek + dayNums;//dateArr的數組長度
      for (let i = 0; i < arrLen; i++) 
      {
        if (i >= startWeek) 
        {
          let icon = false;//旗幟，默認不顯示
          let day = util.add0(i - startWeek + 1);//日期，號數，個位補0
          let todayTime = new Date(year + '/' + util.add0(month) + '/' + day).getTime() / 1000; /*轉成時間戳*/
          for (let ii = 0; ii < usgu_len; ii++) 
          {
            if (usgu_guide_moving[ii] == todayTime) 
              icon=true;//循環動態，對應就插旗
          }
          /**整合數組 */
          obj = {
            dayNum: day,
            todayTime: todayTime,
            icon: icon,
          }
        }
        else {
          /**小於當月1號的爲空格 */
          obj = {};
        }
        dateArr[i] = obj;
      }
      bigArr[m] = {
        year: year,
        month: month,
        dateArr: dateArr,
      }
    }
    this.setData({
      bigArr:bigArr
    })
  },