小程序日历

————————————————html——————————————————

<view class='box'>

  <view class='top_block'>

    <block wx:if="{{1==1}}">

      <view class='bigfont_box'>

        <view class='color_orange'>

          <view class='bigfont'>50</view>

          <view class='somfont'>今日已学/分钟</view>

        </view>

        <view class='color_43'>

          <view class='bigfont'>10</view>

          <view class='somfont'>今日目标/分钟</view>

        </view>

      </view>

      <view class='top_block_footer'>

        <view class='continuity'>历史最高连续坚持了8天</view>

        <view class='current'>当前已连续打卡5天</view>

        <view class='share_day'>分享打卡</view>

      </view>

    </block>

    <block wx:else>

      <view class='bigfont_box'>

        <view class='color_orange'>

          <view class='bigfont'>1</view>

          <view class='somfont'>今日已学/分钟</view>

        </view>

        <view class='color_43'>

          <view class='bigfont'>10</view>

          <view class='somfont'>今日目标/分钟</view>

        </view>

      </view>

      <view class='top_block_footer'>

      <view class='comeon'>您今天打卡目标还有<text> 9 </text>分钟未完成，加油！</view>

      </view>

    </block>

  </view>

  <view class='bottom_blcok'>

    <!-- 年月 -->

    <view class=''>

      <view class='day_width day_titles'>

        <view class='day_titles_icon' bindtap='_next'>

          <image src="/images/icn_left_blocks.png"></image>

        </view>

        <view class='dateBox'>{{ year }}年{{ month}}月</view>

        <view class='day_titles_icon' bindtap='_last'>

          <image src="/images/icn_arrow_block.png"></image>

        </view>

      </view>

    </view>

    <!-- 周 -->

    <view class='bottom_blcok_bg'>

      <view class='day_width day_header'>

        <view class='header_view' wx:for='{{ weekArr }}' wx:key=""

          wx:for-item="item">

          {{item}}

        </view>

      </view>

    </view>

    <!-- 日 -->

    <view class='day_width day_content'>

      <view class='content_view bg_g {{item.font == "idx"? "bg_f" : "" }} {{item.font == getDate ? "bg_b" : "" }}' wx:for='{{ arr }}' wx:key="">{{ item.font }}</view>

    </view>

  </view>

  <view class='footer'>

    <view class='footer_yes com_footer_flex'>

      <text></text>

      已打卡

    </view>

    <view class='footer_no com_footer_flex'>

      <text></text>

      未打卡

    </view>

    <view class='footer_today com_footer_flex'>

      <text></text>

      当前日期

    </view>

  </view>

</view>

————————————————css——————————————————

.box{

  width: 100%;

  font-size: 28rpx;

  background: #fafafa;

  border-top: 1px solid #ebebeb;

}

.top_block{

  height: 382rpx;

  width: 88%;

  margin: 26rpx 6%;

  background: #fff;

  border-radius: 12rpx;

}

.bigfont_box{

  display: flex;

  justify-content: space-between;

  text-align: center;

  line-height: 1;

}

.bigfont{

  font-size: 82rpx;

}

.color_43{

  color: #425360;

}

.top_block .color_orange{

  margin-left:82rpx;

}

.top_block .color_43{

  margin-right:82rpx;

}

.bigfont{

  margin:30rpx 0 10rpx 0;

}

.somfont{

  font-size: 24rpx;

}

.top_block_footer{

  display: flex;

  flex-direction: column;

  align-items: center;

}

.top_block_footer > view{

  line-height: 1;

}

.continuity{

  font-size: 26rpx;

  color: #9ea0a7;

  margin-top: 28rpx;

}

.current{

  margin-top: 20rpx;

}

.share_day{

  width: 243rpx;

  margin-top: 22rpx;

  font-size: 28rpx;

  padding: 23rpx 0;

  background: #f7f2ef;

  border-radius: 45rpx;

  color: #fe562f;

  text-align: center;

}

.comeon{

  color: #9ea0a7;

  margin-top: 108rpx;

}

.comeon text{

  font-size: 32rpx;

  color: #fe562f;

}

/* 下半部分 */

.bottom_blcok_bg{

  background: #fffefb;

}

.bottom_blcok{

  background: #fff;

  padding-bottom: 60rpx;

}

.day_width{

  width: 86%;

  margin-left: 7%;

}

.day_titles{

  display: flex;

  justify-content:space-between;

  font-size: 30rpx;

  height: 94rpx;

  line-height: 94rpx;

}

.day_header{

  display: flex;

  align-items: center;

  padding: 20rpx 0;

}

.header_view{

  width: 56rpx;

  height: 56rpx;

  text-align: center;

  line-height: 56rpx;

  font-size: 28rpx;

  margin-left: 43rpx;

}

.day_titles_icon{

  padding: 0 30rpx;

}

.day_titles_icon image{

  width: 14rpx;

  height: 22rpx;

}

.day_header :first-child{

  margin-left: 0;

}

.day_content{

  display:flex;

  flex-wrap:wrap;

}

.content_view{

  width: 56rpx;

  height: 56rpx;

  text-align: center;

  line-height: 56rpx;

  font-size: 26rpx;

  margin-left: 43rpx;

  margin-top: 34rpx;

  border-radius: 50rpx;

}

.day_content :first-child{

  margin-left: 0;

}

.day_content :nth-child(8){

  margin-left: 0;

}

.day_content :nth-child(15){

  margin-left: 0;

}

.day_content :nth-child(22){

  margin-left: 0;

}

.day_content :nth-child(29){

  margin-left: 0;

}

.day_content :nth-child(36){

  margin-left: 0;

}

.footer{

  height: 102rpx;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content:flex-end;

  font-size: 24rpx;

  color: #a2a7a8;

  background: #f8f5f2;

}

.footer_today{

  margin-right:32rpx;

}

.footer text{

  display: block;

  width: 10rpx;

  height: 10rpx;

  border-radius: 50%;

}

.footer_today text{

  border: 1px solid #ff6e36;

  margin:0 5rpx 0 40rpx;

}

.footer_no text{

  background: #dbdee0;

  margin:0 5rpx 0 40rpx;

}

.footer_yes text{

  background: #ff6e36;

  margin-right: 5rpx;

}

.com_footer_flex{

  display: flex;

  align-items: center;

}

.bg_o{

  background: #ff6e36;

  color: #fff;

}

.bg_g{

  background: #dbdee0;

  color: #fff;

}

.bg_b{

  background: #fff;

  border:1px solid #ff6e36;

  height:53rpx;

  width: 53rpx;

  line-height: 53rpx;

  color: #ff6e36;

}

.bg_f{

  background: #fff;

  color: #fff;

}

————————————————js——————————————————

var app = getApp();

Page({

  data: {

    arr: [],

    sysW: null,

    lastDay: null,

    firstDay: null,

    weekArr: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],

    year: null

  },

  //获取日历相关参数

  dataTime: function () {

    // 当前日期

    var date = new Date();

    //获取现今年份

    var year = date.getFullYear();

    //获取现今月份

    var month = date.getMonth();

    var months = date.getMonth() + 1;

    // console.log("获取月份:" + month);

    // console.log("正常月份:" + months)

    //获取今日日期

    let today = date.getDate();

    //最后一天是几号

    var d = new Date(year, months, 0);

    let lastDay = d.getDate();

    //第一天星期几

    let firstDay = new Date(year, month, 1);

    // console.log("星期:" + firstDay.getDay())

    let dayArr = [];

    //根据得到今月的最后一天日期遍历 得到所有日期

    for (var i = 1; i < lastDay + 1; i++) {

      let obj = {}

      obj.font = i;

      obj.id = "1";

      dayArr.push(obj);

    }

    for (var j = 0; j < firstDay.getDay();j++ ){

      let obj = {}

      obj.font = "idx";

      dayArr.unshift(obj)

    }

    this.setData({

      year: year,

      month: months,

      marLet: firstDay.getDay(),

      arr: dayArr,

      getDate: today,

    });

  },

  onLoad: function (options) {

    var that = this;

    that.dataTime();

    // app.wxRequest("coreapi/core/v1/queryUserSignDetailInfo",

    // {}, "POST", function (res) {

    //  let data = res.data.data;

    //  if (res.data.code == 0) {

    //    that.setData({

    //    })

    //    console.log(res.data)

    //  } else {

    //    app.showLoading(res.data.msg, "none");

    //  }

    // })

    app.wxRequest("coreapi/core/v1/queryUserForMonthSignList",

      { year: 2019, month:1 }, "POST", function (res) {

      let data = res.data.data;

      if (res.data.code == 0) {

        that.setData({

        })

        console.log(res.data)

      } else {

        app.showLoading(res.data.msg, "none");

      }

    })

  },

  // 上月

  _next: function () {

    var that = this;

    let cuntMonth = that.data.month - 1;

    let year = that.data.year;

    // 当前日期

    var date = new Date();

    if (cuntMonth == 0) {

      let newYear = year - 1;

      //获取现今月份

      let month = 0;

      let months = 12;

      console.log("获取月份:" + month);

      console.log("正常月份:" + months)

      //最后一天是几号

      var d = new Date(newYear, month, 0);

      let lastDay = d.getDate();

      //第一天星期几

      let firstDay = new Date(newYear, 11);

      let dayArr = [];

      console.log("星期:" + firstDay.getDay())

      //根据得到今月的最后一天日期遍历 得到所有日期

      for (var i = 1; i < lastDay + 1; i++) {

        let obj = {}

        obj.font = i;

        obj.id = "1";

        dayArr.push(obj);

      }

      for (var j = 0; j < firstDay.getDay(); j++) {

        let obj = {}

        obj.font = "idx";

        dayArr.unshift(obj)

      }

      that.setData({

        year: newYear,

        marLet: firstDay.getDay(),

        month: 12,

        arr: dayArr,

      })

    } else {

      let newYear = that.data.year;

      let months = date.getMonth() + 1;

      //最后一天是几号

      var d = new Date(newYear, cuntMonth, 0);

      let lastDay = d.getDate();

      //第一天星期几

      console.log(cuntMonth)

      let firstDay = new Date(newYear, cuntMonth - 1);

      let dayArr = [];

      //根据得到今月的最后一天日期遍历 得到所有日期

      for (var i = 1; i < lastDay + 1; i++) {

        let obj = {}

        obj.font = i;

        obj.id = "1";

        dayArr.push(obj);

      }

      for (var j = 0; j < firstDay.getDay(); j++) {

        let obj = {}

        obj.font = "idx";

        dayArr.unshift(obj)

      }

      that.setData({

        year: newYear,

        marLet: firstDay.getDay(),

        month: cuntMonth,

        arr: dayArr,

      })

    }

  },

  _last: function () {

    var that = this;

    let cuntMonth = that.data.month + 1;

    let year = that.data.year;

    // 当前日期

    var date = new Date();

    if (cuntMonth == 13) {

      let newYear = year + 1;

      //获取现今月份

      var month = 0;

      let months = 1;

      console.log("获取月份:" + month);

      console.log("正常月份:" + months)

      //最后一天是几号

      var d = new Date(newYear, month, 0);

      let lastDay = d.getDate();

      //第一天星期几

      let firstDay = new Date(newYear, month);

      let dayArr = [];

      console.log("星期:" + firstDay.getDay())

      //根据得到今月的最后一天日期遍历 得到所有日期

      for (var i = 1; i < lastDay + 1; i++) {

        let obj = {}

        obj.font = i;

        obj.id = "1";

        dayArr.push(obj);

      }

      for (var j = 0; j < firstDay.getDay(); j++) {

        let obj = {}

        obj.font = "idx";

        dayArr.unshift(obj)

      }

      that.setData({

        year: newYear,

        marLet: firstDay.getDay(),

        month: 1,

        arr: dayArr,

      })

    } else {

      let newYear = that.data.year;

      let months = date.getMonth() + 1;

      //最后一天是几号

      var d = new Date(newYear, cuntMonth, 0);

      let lastDay = d.getDate();

      //第一天星期几

      console.log(cuntMonth)

      let firstDay = new Date(newYear, cuntMonth - 1);

      let dayArr = [];

      //根据得到今月的最后一天日期遍历 得到所有日期

      for (var i = 1; i < lastDay + 1; i++) {

        let obj = {}

        obj.font = i;

        obj.id = "1";

        dayArr.push(obj);

      }

      for (var j = 0; j < firstDay.getDay(); j++) {

        let obj = {}

        obj.font = "idx";

        dayArr.unshift(obj)

      }

      that.setData({

        year: newYear,

        marLet: firstDay.getDay(),

        month: cuntMonth,

        arr: dayArr,

      })

    }

  },

  // 分享

  onShareAppMessage: function (res) {

    let that = this;

    if (res.from === 'button') {

      console.log(res.target)

    }

    return {

      title: '我是理财师APP,让理财师更专业',

      path: '/pages/school/school',

    }

  },

})