|
@@ -0,0 +1,515 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- -->
|
|
|
+ <view class="riliWrapper">
|
|
|
+ <view class="riliWrapperBox">
|
|
|
+ <!-- 日历 -->
|
|
|
+ <view class="signWrapperCalendar" v-if="true">
|
|
|
+ <view class="signWrapperCalendarBox">
|
|
|
+ <!--滑动日历-->
|
|
|
+ <!-- @change="_onClickSlideApi" -->
|
|
|
+ <swiper duration="200" :current="slideDataListIndex" circular style="height:820rpx">
|
|
|
+ <swiper-item class="swiper-item" v-for="(calendar,indexa) in 3" :key="indexa">
|
|
|
+ <!-- <view class="signWrapperCalendarBoxTop"> -->
|
|
|
+ <!-- {{year}}年{{month<10?'0'+month:month}}月 -->
|
|
|
+ <!-- </view> -->
|
|
|
+ <view class="signWrapperCalendarBoxCenter">
|
|
|
+ <view class="signWrapperCalendarBoxCenterBox">
|
|
|
+ <view class="signWrapperCalendarBoxCenterBoxTop">
|
|
|
+ <div class="week-number">
|
|
|
+ <span v-for="(item,index) in weekList"
|
|
|
+ :style="{color:(index==0||index==weekList.length-1)}"
|
|
|
+ :key="index">{{item}}</span>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <view class="signWrapperCalendarBoxCenterBoxFooter">
|
|
|
+ <view class="each-day" v-for="(dayTime,idx) in dayList" :key="idx">
|
|
|
+ <view :class="dayTime!=day+2 ?'eachDayBox':'eachDayBoxCheck'"
|
|
|
+ v-if="day">
|
|
|
+ <view class="eachDayBoxBox " v-if="dayTime"
|
|
|
+ :style="dayTime==day?'border: 1rpx solid #8FCCF1;':''">
|
|
|
+ {{dayTime?dayTime:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <!-- -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ weekList: ['', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
+ // 月份数组【2020-08-01 2020-09-01 2020-10-01】
|
|
|
+ slideDataList: [],
|
|
|
+ // 月份数组的索引
|
|
|
+ slideDataListIndex: 1,
|
|
|
+ year: 2020,
|
|
|
+ month: 10,
|
|
|
+ day: 10,
|
|
|
+ dayList: [],
|
|
|
+ start_time: '', // 月初的时间戳
|
|
|
+ end_time: '', // 月末的时间戳
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log('created')
|
|
|
+
|
|
|
+ this._onLoad()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async _onLoad() {
|
|
|
+ // 获取当前时间 赋值年,月
|
|
|
+ await this.initTime()
|
|
|
+
|
|
|
+ // 更新日历
|
|
|
+ await this._runMonth()
|
|
|
+ },
|
|
|
+ // 初始化时间
|
|
|
+ initTime() {
|
|
|
+ var nowTimeData = this._getTimeNowApi()
|
|
|
+
|
|
|
+ this.year = nowTimeData.year
|
|
|
+ this.month = nowTimeData.month
|
|
|
+ this.day = nowTimeData.day
|
|
|
+
|
|
|
+ // 今日时间为:2020-9-16
|
|
|
+ console.log('今日时间为:' + this.year + '-' + this.month + '-' + this.day)
|
|
|
+ },
|
|
|
+
|
|
|
+ async _runMonth() {
|
|
|
+ console.log('==============================================================')
|
|
|
+
|
|
|
+ // 获取当前月的每一天的数据 1~31
|
|
|
+ await this.initApi()
|
|
|
+
|
|
|
+ // 根据当前选择的年月,更新start_time end_time
|
|
|
+ await this._timeApi()
|
|
|
+
|
|
|
+ console.log(this.start_time)
|
|
|
+ console.log(this.end_time)
|
|
|
+ // 更新记录
|
|
|
+ // await this.onClickSignLog()
|
|
|
+
|
|
|
+ let dataWeek = await this.getweek(this._getNowApi());
|
|
|
+
|
|
|
+ // console.log(this._getNowApi())
|
|
|
+ this.slideDataList[0] = []
|
|
|
+ this.slideDataList[1] = dataWeek
|
|
|
+ this.slideDataList[2] = []
|
|
|
+
|
|
|
+ console.log(this.slideDataList)
|
|
|
+
|
|
|
+
|
|
|
+ console.log('==============================================================')
|
|
|
+ },
|
|
|
+
|
|
|
+ _getTimeNowApi() {
|
|
|
+ // 初始化时间
|
|
|
+ var date = new Date();
|
|
|
+
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = parseInt(date.getMonth() + 1);
|
|
|
+ var day = date.getDate();
|
|
|
+
|
|
|
+ if (month < 10) {
|
|
|
+ month = '0' + month
|
|
|
+ }
|
|
|
+ if (day < 10) {
|
|
|
+ day = '0' + day
|
|
|
+ }
|
|
|
+
|
|
|
+ let returnData = {
|
|
|
+ year: year,
|
|
|
+ month: parseInt(month),
|
|
|
+ day: day,
|
|
|
+ }
|
|
|
+
|
|
|
+ return returnData
|
|
|
+ },
|
|
|
+
|
|
|
+ // 滑动日历触发(左右滑动)
|
|
|
+ // _onClickSlideApi(e) {
|
|
|
+
|
|
|
+ // let current = e.detail.current
|
|
|
+
|
|
|
+ // let oldIndex = this.slideDataListIndex
|
|
|
+
|
|
|
+ // this.slideDataListIndex = current
|
|
|
+
|
|
|
+ // if (oldIndex - current == -1 || oldIndex - current == 2) {
|
|
|
+ // console.log('向右滑动前一个月')
|
|
|
+ // if (this.month == 12) {
|
|
|
+ // this.year = this.year + 1
|
|
|
+ // this.month = 1
|
|
|
+ // } else {
|
|
|
+ // this.month = this.month + 1
|
|
|
+ // }
|
|
|
+
|
|
|
+ // } else {
|
|
|
+ // console.log('向左滑动后退一个月')
|
|
|
+ // if (this.month == 1) {
|
|
|
+ // this.year = this.year - 1
|
|
|
+ // this.month = 12
|
|
|
+ // } else {
|
|
|
+ // this.month = this.month - 1
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // this._runMonth()
|
|
|
+ // },
|
|
|
+
|
|
|
+ _getNowApi() {
|
|
|
+ console.log('当前日期:' + this.year + '-' + this.month + '-' + this.day)
|
|
|
+
|
|
|
+ let data = {
|
|
|
+ Day: 1,
|
|
|
+ Month: this.month,
|
|
|
+ Year: this.year
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(data)
|
|
|
+ return data
|
|
|
+ },
|
|
|
+ // 获取当前月的每一天的数据
|
|
|
+ initApi() {
|
|
|
+ this.dayList = this.createDayList(this.month, this.year);
|
|
|
+ },
|
|
|
+
|
|
|
+ //创建每个月日历数据,传入月份1号前面用null填充
|
|
|
+ createDayList(month, year) {
|
|
|
+ const count = this.getDayNum(month, year),
|
|
|
+ _week = new Date(year + '/' + month + '/1').getDay();
|
|
|
+ let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
|
|
|
+ 27, 28
|
|
|
+ ]
|
|
|
+
|
|
|
+ for (let i = 29; i <= count; i++) {
|
|
|
+ list.push(i)
|
|
|
+ }
|
|
|
+ for (let i = 0; i < _week; i++) {
|
|
|
+ list.unshift(null)
|
|
|
+ }
|
|
|
+
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ //计算传入月份有多少天
|
|
|
+ getDayNum(month, year) {
|
|
|
+ let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
|
|
|
+
|
|
|
+ if ((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)) {
|
|
|
+ dayNum[1] = 29;
|
|
|
+ }
|
|
|
+ return dayNum[month - 1]
|
|
|
+ },
|
|
|
+ // 传时间获取月初月末时间
|
|
|
+ _timeApi() {
|
|
|
+
|
|
|
+ let startDate = this.year + '-' + this.month + '-' + this.day
|
|
|
+
|
|
|
+ let startData = this._timeMonthStartApi(startDate + ' 00:00:00')
|
|
|
+
|
|
|
+ this.start_time = startData.time_int
|
|
|
+
|
|
|
+ let endData = this._timeMonthEndApi(startDate + ' 00:00:00')
|
|
|
+
|
|
|
+ this.end_time = endData.time_int
|
|
|
+ },
|
|
|
+ _timeMonthStartApi(timeDate) {
|
|
|
+ var date = new Date(timeDate);
|
|
|
+
|
|
|
+ date.setDate(1);
|
|
|
+
|
|
|
+ var month = parseInt(date.getMonth() + 1);
|
|
|
+
|
|
|
+ var day = date.getDate();
|
|
|
+ if (month < 10) {
|
|
|
+ month = '0' + month
|
|
|
+ }
|
|
|
+ if (day < 10) {
|
|
|
+ day = '0' + day
|
|
|
+ }
|
|
|
+
|
|
|
+ let timeDateStart = date.getFullYear() + '-' + month + '-' + day;
|
|
|
+
|
|
|
+ let returnData = {
|
|
|
+ time_type: 'start_time',
|
|
|
+ time_int: Date.parse(timeDateStart + ' 00:00:00') / 1000,
|
|
|
+ time_date: timeDateStart,
|
|
|
+ year: date.getFullYear(),
|
|
|
+ month: month,
|
|
|
+ day: day,
|
|
|
+ }
|
|
|
+
|
|
|
+ return returnData
|
|
|
+ },
|
|
|
+ _timeMonthEndApi(timeDate) {
|
|
|
+ var endDate = new Date(timeDate);
|
|
|
+ var currentMonth = endDate.getMonth();
|
|
|
+
|
|
|
+ var nextMonth = ++currentMonth;
|
|
|
+ var nextMonthFirstDay = new Date(endDate.getFullYear(), nextMonth, 1);
|
|
|
+ var oneDay = 1000 * 60 * 60 * 24;
|
|
|
+ var lastTime = new Date(nextMonthFirstDay - oneDay);
|
|
|
+ var endMonth = parseInt(lastTime.getMonth() + 1);
|
|
|
+ var endDay = lastTime.getDate();
|
|
|
+ if (endMonth < 10) {
|
|
|
+ endMonth = '0' + endMonth
|
|
|
+ }
|
|
|
+ if (endDay < 10) {
|
|
|
+ endDay = '0' + endDay
|
|
|
+ }
|
|
|
+
|
|
|
+ let timeDateEnd = endDate.getFullYear() + '-' + endMonth + '-' + endDay
|
|
|
+
|
|
|
+ let returnData = {
|
|
|
+ time_type: 'end_time',
|
|
|
+ time_int: Date.parse(timeDateEnd + ' 00:00:00') / 1000,
|
|
|
+ time_date: timeDateEnd,
|
|
|
+ year: endDate.getFullYear(),
|
|
|
+ month: endMonth,
|
|
|
+ day: endDay,
|
|
|
+ }
|
|
|
+
|
|
|
+ return returnData
|
|
|
+ },
|
|
|
+ // 2020-08-01
|
|
|
+ getweek(date) {
|
|
|
+ let weeks = [];
|
|
|
+ let dates = this.getDates(date);
|
|
|
+ // let len = Math.ceil(dates.weeks.length / 7);
|
|
|
+ // for (let i = 0; i < len; i++) {
|
|
|
+ // weeks.push(dates.weeks.slice(i * 7, 7 + (i * 7)));
|
|
|
+ // }
|
|
|
+ // dates.weeks = weeks
|
|
|
+ return dates;
|
|
|
+ },
|
|
|
+ getDates(date) {
|
|
|
+ let dates = {
|
|
|
+ year: date.Year,
|
|
|
+ month: date.Month,
|
|
|
+ firstDay: new Date(date.Year, date.Month, 1).getDay(),
|
|
|
+ lastDay: new Date(date.Year, date.Month + 1, 0).getDay(),
|
|
|
+ endDate: new Date(date.Year, date.Month + 1, 0).getDate(),
|
|
|
+ weeks: []
|
|
|
+ }
|
|
|
+
|
|
|
+ //计算上月日期
|
|
|
+ for (let i = dates.firstDay; i > 0; i--) {
|
|
|
+ let dateinfo = {};
|
|
|
+ dateinfo.date = new Date(date.Year, date.Month, -i + 1).getDate();
|
|
|
+ dateinfo.isClick = false;
|
|
|
+ dates.weeks.push(dateinfo);
|
|
|
+ }
|
|
|
+ //计算本月日期
|
|
|
+ for (let i = 1; i <= new Date(date.Year, date.Month + 1, 0).getDate(); i++) {
|
|
|
+ let nowisClick = true;
|
|
|
+ let dateinfo = {};
|
|
|
+ dateinfo.date = i;
|
|
|
+ if (this.dateType == 'dateCustom') {
|
|
|
+ nowisClick = false;
|
|
|
+ if (this.dateCustom[dates.year] && this.dateCustom[dates.year][dates.month]) {
|
|
|
+ for (let j = 0; j < this.dateCustom[dates.year][dates.month].length; j++) {
|
|
|
+ if (this.dateCustom[dates.year][dates.month][j] == i) {
|
|
|
+ nowisClick = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dateinfo.isClick = nowisClick;
|
|
|
+ dates.weeks.push(dateinfo);
|
|
|
+ }
|
|
|
+ //计算下月日期
|
|
|
+ let len = 7 - dates.lastDay;
|
|
|
+ if ((42 - dates.weeks.length) >= 7) {
|
|
|
+ len += 7;
|
|
|
+ }
|
|
|
+ for (let i = 1; i < len; i++) {
|
|
|
+ let dateinfo = {};
|
|
|
+ dateinfo.date = i;
|
|
|
+ dateinfo.isClick = false;
|
|
|
+ dates.weeks.push(dateinfo);
|
|
|
+ }
|
|
|
+ return dates;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .riliWrapper {
|
|
|
+ width: 100%;
|
|
|
+ // height: 499rpx;
|
|
|
+ // background-color: #9bf;
|
|
|
+ // padding: 0 5%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .riliWrapperBox {
|
|
|
+ width: 100%;
|
|
|
+ // height: 499rpx;
|
|
|
+ // background-color: #9bf;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 日历
|
|
|
+ .signWrapperCalendar {
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ border: 3rpx solid #9bf;
|
|
|
+
|
|
|
+ .signWrapperCalendarBox {
|
|
|
+ width: 100%;
|
|
|
+ // height: 499rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ // background-color: #9bf;
|
|
|
+ .signWrapperCalendarBoxTop {
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ // background-color: red;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ // border-bottom: 2rpx solid #EFEFEF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signWrapperCalendarBoxBit {
|
|
|
+ width: 100%;
|
|
|
+ height: 2rpx;
|
|
|
+ border: 2rpx solid #EFEFEF;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .signWrapperCalendarBoxCenter {
|
|
|
+ width: 100%;
|
|
|
+ height: 425rpx;
|
|
|
+ // background-color: #fff;
|
|
|
+ // padding: 30rpx 30rpx;
|
|
|
+ padding: 30rpx 0rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .signWrapperCalendarBoxCenterBox {
|
|
|
+ width: 90%;
|
|
|
+ height: 100%;
|
|
|
+ // background-color: #9000FF;
|
|
|
+
|
|
|
+ .signWrapperCalendarBoxCenterBoxTop {
|
|
|
+ .week-number {
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 1%;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ width: 14.2857143%;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signWrapperCalendarBoxCenterBoxFooter {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ // hei
|
|
|
+ // background-color: red;
|
|
|
+ .each-day {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 14.28%;
|
|
|
+ font-size: 25rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-top: 58rpx;
|
|
|
+ padding-top: 4rpx;
|
|
|
+
|
|
|
+ .eachDayBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .eachDayBoxBox {
|
|
|
+ // background: #FCEEE0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ background: rgba(255,255,255,0.39);
|
|
|
+ box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.11);
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ // line-height: 44rpx;
|
|
|
+ color: #323337;
|
|
|
+ padding: 10rpx 14rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+ .eachDayBoxCheck {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .eachDayBoxBox {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ // border: 2rpx solid #8FCCF1;
|
|
|
+ background: rgba(255,255,255,0.39);
|
|
|
+ box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.11);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ // line-height: 44rpx;
|
|
|
+ color: #323337;
|
|
|
+ padding: 10rpx 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|