基于mpvue实现的小程序日历插件

<template>
  <view class="page">
    <view class="block2_dateBox">
      <view class="headbox">
        <view class="headdate" style="color:#1a76dc">日</view>
        <view class="headdate">一</view>
        <view class="headdate">二</view>
        <view class="headdate">三</view>
        <view class="headdate">四</view>
        <view class="headdate">五</view>
        <view class="headdate" style="color:#1a76dc">六</view>
      </view>

      <view class="mouth" v-for="(items,ind) in date">
        <view class="daybox">
          <view style="margin-left:30rpx;">{{items.data[2][0]}} 年 {{items.data[2][1]}} 月</view>
          <view style="border:1rpx solid #ededed;margin-top:20rpx;margin:0 30rpx 30rpx 30rpx;"></view>
          <view :class="[item.time ? 'bc':'']" v-for="(item,index) in items.data[0]" style="width: 14%;height: 107rpx;line-height: 78rpx;text-align: center;display: inline-block;position: relative;top: 0;margin-top: -10rpx;overflow: hidden;color: #353535;font-size: 32rpx;" @click="changeDate(item,items.data[2][0],items.data[2][1],items.data[0])">
            <text>{{item.date}}</text>
            <text class="weui-text" :wx:if="item">￥458</text>
          </view>
        </view>
        <view style="border-bottom: 1rpx solid #ededed;margin:24rpx 0rpx 0 0rpx;"></view>
      </view>
    </view>
  </view>
</template>

<script scoped>
  //index.js
  //获取应用实例
  const app = getApp()
  export default {
    data() {
      return {
        date: [],
        selected: 0
      }
    },
    onLoad: function() {},
    onShow: function() {
      this.getFullYears()
    },
    methods: {
      //日历显示 最关键方法：
      dateData: function(showYear, showMonth, days) {
        let dataAll = [] //总日历数据
        let date = new Date() //当前日期
        let year = date.getFullYear() //当前年
        let month = date.getMonth() + 1 //当前月份
        let day = ''
        if (days == '' || days == null || days == undefined) {
          day = date.getDate() //当天
        } else {
          day = days
        }
        let thisDate = [year, month, day] //当天日期信息

        let week = date.getDay() //当天星期几

        if (showYear) {
          year = showYear //显示年
        }
        if (showMonth) {
          month = showMonth //显示月
        }

        let showDate = [year, month] //当前显示日期信息

        //获取显示月的天数
        let monthDays = new Date(year, month, 0).getDate()
        let firstWeek = new Date(year + '-' + month + '-' + '1').getDay()
        // console.log(monthDays)
        //console.log('本月1号星期：' + firstWeek)
        let daysCount = monthDays //一共显示多少天
        let dayscNow = 0 //计数器

        for (let i = 0; i < firstWeek; i++) {
          dataAll.push('')
        }

        //把当月的天数转为数组
        var selected = 0
        for (let i = 1; i <= daysCount; i++) {
          if (
            thisDate[0] == showDate[0] &&
            thisDate[1] == showDate[1] &&
            i == day
          ) {
            console.log(thisDate[2], day)
            selected = 1
          } else {
            selected = 0
          }
          dataAll.push({
            date: i,
            time: selected
          })
        }

        var arr = {}
        console.log('dataAll', dataAll, thisDate, showDate, 'showDate')
        return [dataAll, thisDate, showDate]
      },
      //全年
      getFullYears: function() {
        var arr = []
        let date = new Date() //当前日期
        let year = date.getFullYear() //当前年
        let month = date.getMonth() + 1 //当前月份
        let day = date.getDate() //当天
        var selected = 0
        for (var i = month; i <= 12; i++) {
          arr.push({
            data: this.dateData(year, i)
          })
        }
        this.date = arr
        console.log('qrr', arr)
      },
      changeDate: function(day, year, month, data) {
        console.log('jinlail', day.date, year, month, this.date)
        wx.setStorage({
          key: 'other_date',
          data: year+'-'+month+'-'+day.date,
          success: function() {
            wx.navigateBack() //返回上一个页面
          }
        })
        console.log('返回')
      }
    },
    watch: function() {},
    mounted: function() {
      wx.setNavigationBarTitle({
        title: '选择游玩日期'
      })
    }
  }
</script>
<style scoped>
  .page {
    background-color: #fff;
  }
  page {
    background-color: #fff;
  }
  page::before {
    background-color: #fff;
  }
  .headdate {
    height: 30px;
    background-color: white;
    width: 14%;
    text-align: center;
    line-height: 30px;
  }
  .headbox {
    width: 100%;
    margin: 2vh 0;
    padding: 1vh 0;
    /* border-bottom: 1px solid #e5e5e5; */
    display: flex;
  }
  .mouthhead_box {
    height: 88rpx;
    padding: 1vh 8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mouthhead {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: #f4f4f4; */
    line-height: 88rpx;
    text-align: center;
    flex: 0.6 1 auto;
  }
  .ico_tb {
    color: #93c2e9;
  }
  .daybox {
    background-color: white;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
  }
  .day {
    width: 14%;
    height: 107rpx;
    line-height: 107rpx;
    text-align: center;
    display: inline-block;
    position: relative;
    top: 0;
    margin-top: -10rpx;
    overflow: hidden;
    color: #353535;
    font-size: 34rpx;
  }

  .bc {
    background-color: #1a76dc;
    color: white !important;
    border-radius: 100%;
  }
  .weui-text {
    margin-top: -40rpx;
    position: relative;
    bottom: -30rpx;
    margin-left: -50rpx;
    font-size: 22rpx;
    font-weight: none;
  }
</style>