<template>
<view class="gui-schedule-wrap">
<view class="gui-flex gui-rows gui-space-between gui-align-items-center" v-if="isCollapse">
<picker mode="date" :value="currentDayIn" :start="startDate" :end="endDate" @change="selectDate">
<text class="gui-schedule-header-date gui-icons">{{cYear}} 年 {{cMonthStr}} 月 </text>
</picker>
<text class="gui-border gui-schedule-today" @tap="gotoToday">返回今天</text>
</view>
<view v-if="!isCollapse" style="height: 10px;position: absolute;left: 30px;top: 0px;"><text class="gui-color-gray-light">{{cMonthStr}} 月</text></view>
<view class="gui-flex gui-rows gui-nowrap monthCollapse" >
<text class="gui-schedule-weeks gui-color-gray gui-block-text " v-for="(item, index) in weeks"
:key="index">{{item}}</text>
</view>
<view class="gui-flex gui-rows gui-wrap content" :class="{ hide: !monthOpen }" :style="{ height: height }">
<view :style="{ top: positionTop + 'rpx' }" class="days">
<view class="gui-schedule-7item gui-flex gui-rows gui-justify-content-center"
v-for="(item, index) in days" :key="index">
<view class="gui-date-ditems gui-flex gui-columns gui-justify-content-center" v-if="item != ''"
:style="{
backgroundColor:currentDayIn == cYear+'-'+cMonthStr+'-'+ item.date
? activeBgColor : bgColor
}" @click="chooseDate(cYear+'-'+cMonthStr+'-'+item.date, item.date)">
<text class="gui-date-day gui-block-text" :class="[currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ?
'gui-d-current-txt' : '']">{{item.date}}</text>
<text class="gui-date-nl gui-block-text" v-if="isLunar" :class="[currentDayIn == (cYear+'-'+cMonthStr+'-'+item.date) ?
'gui-d-current-txt' : '']">{{item.nl}}</text>
<view class="gui-schedule-point" v-if="item.haveSe" :style="{backgroundColor:pointColor}">
</view>
</view>
<view class="gui-date-ditems" v-else style="background-color:none;"></view>
</view>
</view>
</view>
<!--  -->
<view class="gui-border-b gui-schedule-line gui-text-center linCollapse"><text class="gui-icons gui-color-gray-light gui-bg-gray"
style="font-size: 22px !important;position: relative;bottom: 10px;border-radius: 50%;"
@tap="toggle()">{{isCollapse==true?'':''}}</text>
</view>
</view>
</template>
<script>
import guiCalendar from './gui-calendar.js';
export default {
name: "gui-schedule",
data() {
return {
cYear: 2020,
cMonth: 1,
cDay: 10,
dateNum: '01',
cMonthStr: '01',
positionTop: 0,
height:'600rpx',
lineCollapseTop: 0,
monthOpen: true,
weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
days: [],
oldDays: [],
currentDayIn: '',
hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
'16', '17', '18', '19', '20', '21', '22', '23'
],
schedulesIn: [],
quotient: 1, //商数
remainder: 1, //余数
collapseStatus: 0, //折叠状态 0：展开，1：折叠,
isCollapse: true
}
},
props: {
// 当前默认日期
currentDate: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#F8F8F8"
},
activeBgColor: {
type: String,
default: "#008AFF"
},
isLunar: {
type: Boolean,
default: true
},
startDate: {
type: String,
default: '1950-01-01'
},
endDate: {
type: String,
default: '2050-01-01'
},
schedules: {
type: Array,
default: function() {
return []
}
},
pointColor: {
type: String,
default: "#FF0036"
}
},
created: function() {
this.currentDayIn = this.currentDate;
this.initTime();
this.getSchedulesIn();
},
computed:{
/* height() {
return (this.days.length / 7) * 120 + 'rpx';
} */
},
methods: {
initTime: function() {
if (this.currentDayIn == '') {
var dateObj = new Date();
this.cYear = Number(dateObj.getFullYear());
this.cMonth = Number(dateObj.getMonth() + 1);
this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
this.cDay = dateObj.getDate();
this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
this.changeMonth();
} else {
var dates = this.currentDayIn.split(' ');
if (!dates[1]) {
dates[1] = '';
}
var dayArr = dates[0].split('-');
this.cYear = Number(dayArr[0]);
this.cMonth = dayArr[1];
this.cDay = dayArr[2];
var reg = new RegExp('^0[0-9]+$');
if (reg.test(this.cMonth)) {
this.cMonth = this.cMonth.substr(1, 1);
}
this.cMonth = Number(this.cMonth);
this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
this.currentDayIn = dates[0];
this.currentTimeIn = dates[1];
this.changeMonth();
}
},
changeMonth: function() {
var daysList = [];
var days = this.getDaysInOneMonth();
var startWeek = this.getDay();
var forSteps = 0;
for (var i = (0 - startWeek); i < days; i++) {
if (i >= 0) {
daysList[forSteps] = {
date: i >= 9 ? i + 1 : '0' + (i + 1),
nl: ''
};
daysList[forSteps].nl = guiCalendar.getLunarInfo(this.cYear, this.cMonth, i + 1);
daysList[forSteps].haveSe = this.haveSchedule(daysList[forSteps].date);
} else {
daysList[forSteps] = '';
}
forSteps++;
}
this.days = daysList;
},
haveSchedule: function(day) {
var cDay = this.cYear + '-' + this.cMonthStr + '-' + day;
for (let i = 0; i < this.schedules.length; i++) {
if (this.schedules[i].datetime.indexOf(cDay) != -1) {
return true;
}
}
return false;
},
getDaysInOneMonth: function() {
var d = new Date(this.cYear, this.cMonth, 0);
return d.getDate();
},
getDay: function() {
var d = new Date(this.cYear, this.cMonth - 1, 0);
return d.getDay();
},
selectDate: function(e) {
this.currentDayIn = e.detail.value;
this.initTime();
this.getSchedulesIn();
this.$emit('selectDate', e.detail.value);
},
chooseDate: function(sedDate, dateNum) {
this.currentDayIn = sedDate;
this.dateNum = dateNum;
this.getSchedulesIn();
this.$emit('chooseDate', sedDate);
},
getSchedulesIn: function() {
var res = [];
for (let i = 0; i < this.hours.length; i++) {
var ctime = this.currentDayIn + ' ' + this.hours[i] + ':00';
res.push([]);
for (let ii = 0; ii < this.schedules.length; ii++) {
if (this.schedules[ii].datetime == ctime) {
res[i].push(this.schedules[ii]);
}
}
}
this.schedulesIn = res;
},
scheduleTap: function(e) {
var id = e.currentTarget.dataset.id;
this.$emit('scheduleTap', id);
},
gotoToday: function() {
var dateObj = new Date();
this.cYear = Number(dateObj.getFullYear());
this.cMonth = Number(dateObj.getMonth() + 1);
this.cMonthStr = this.cMonth < 10 ? '0' + this.cMonth : this.cMonth;
this.cDay = dateObj.getDate();
this.cDay = this.cDay < 10 ? '0' + this.cDay : this.cDay;
this.currentDayIn = this.cYear + '-' + this.cMonthStr + '-' + this.cDay;
this.changeMonth();
this.getSchedulesIn();
this.$emit('gotoToday', this.currentDayIn);
this.dateNum=this.cDay;
},
// 展开收起
toggle() {
this.monthOpen = !this.monthOpen;
if (this.monthOpen) {
this.positionTop = 0;
this.isCollapse=true;
} else {
this.isCollapse=false;
let index = -1;
this.days.forEach((i, x) => {
if(i.date==this.dateNum){
(index = x);
}
});
//计算折叠行数
this.positionTop = -((Math.ceil((index + 1) / 7) || 1) - 1) *110+2;
}
}
}
}
</script>
<style scoped>
.content {
position: relative;
overflow: hidden;
transition: height 0.4s ease;
.days {
transition: top 0.3s;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
.item {
position: relative;
display: block;
height: 35px;
line-height: 35px;
width: calc(100% / 7);
.day {
font-style: normal;
display: inline-block;
vertical-align: middle;
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
overflow: hidden;
border-radius: 60rpx;
&.choose {
background-color: #4d7df9;
color: #fff;
}
&.nolm {
color: #fff;
opacity: 0.3;
}
}
.isWorkDay {
color: #42464a;
}
.notSigned {
font-style: normal;
width: 8rpx;
height: 8rpx;
background: #fa7268;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0;
pointer-events: none;
}
.today {
color: #fff;
background-color: #a8c0ff;
}
.workDay {
font-style: normal;
width: 8rpx;
height: 8rpx;
background: #4d7df9;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0;
pointer-events: none;
}
.markDay{
font-style: normal;
width: 8rpx;
height: 8rpx;
background: #fc7a64;
border-radius: 10rpx;
position: absolute;
left: 50%;
bottom: 0;
pointer-events: none;
}
}
}
}
.hide {
height: 55px !important;
}
.monthCollapse {
transition: height 0.5s ease;
transition: top 0.5s;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.days {
transition: top 0.5s;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.linCollapse {
position: relative;
transition: top 0.6s;
}
.gui-schedule-wrap {
width: 690rpx;
}
.gui-schedule-header-date {
height: 88rpx;
line-height: 88rpx;
color: #2B2E3D;
font-size: 32rpx;
}
.gui-schedule-7item {
width: 98rpx;
margin-bottom: 17px;
position: relative;
}
.gui-schedule-weeks {
width: 98rpx;
height: 88rpx;
font-size: 26rpx;
line-height: 88rpx;
text-align: center;
}
.gui-date-ditems {
width: 82rpx;
height: 82rpx;
border-radius: 80rpx;
}
.gui-d-current-txt {
color: #FFFFFF !important;
}
.gui-date-day {
height: 32rpx;
line-height: 32rpx;
text-align: center;
font-size: 28rpx;
}
.gui-date-nl {
height: 24rpx;
line-height: 26rpx;
color: #888888;
font-size: 20rpx;
text-align: center;
}
.gui-schedule-line {
height: 20rpx;
border-color: #F8F8F8;
}
.gui-schedule-time-list {
margin-top: 20rpx;
}
.gui-schedule-timer {
width: 88rpx;
font-size: 22rpx;
line-height: 36rpx;
}
.gui-schedule-body {
width: 200rpx;
flex: 1;
border-color: #F8F8F8;
margin-top: 15rpx;
}
.gui-schedules {
padding: 10rpx;
line-height: 30rpx;
font-size: 22rpx;
margin-top: 15rpx;
border-radius: 8rpx;
}
.gui-schedule-time-list-wrap {
padding: 20rpx;
}
.gui-schedule-today {
line-height: 50rpx;
height: 50rpx;
font-size: 22rpx;
color: #828282;
padding-left: 20rpx;
padding-right: 20rpx;
border-color: #F1F2F3;
}
.gui-schedule-point {
width: 18rpx;
height: 18rpx;
border-radius: 10rpx;
background-color: #FF0036;
position: absolute;
right: 6rpx;
top: 6rpx;
}
</style>
浙公网安备 33010602011771号