|
|
@ -3,8 +3,10 @@ |
|
|
<view class="calendar-heander"> |
|
|
<view class="calendar-heander"> |
|
|
{{ timeStr }} |
|
|
{{ timeStr }} |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 星期几标题 --> |
|
|
<view class="calendar-weeks"> |
|
|
<view class="calendar-weeks"> |
|
|
<view class="calendar-week" v-for="(week, index) in weeks" :key="index"> |
|
|
<view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index"> |
|
|
{{ week }} |
|
|
{{ week }} |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -25,14 +27,13 @@ |
|
|
> |
|
|
> |
|
|
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem"> |
|
|
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem"> |
|
|
<view class="calendar-days"> |
|
|
<view class="calendar-days"> |
|
|
|
|
|
<!-- 当前的 --> |
|
|
<template v-if="sitem === current"> |
|
|
<template v-if="sitem === current"> |
|
|
<view |
|
|
<view |
|
|
class="calendar-day" |
|
|
class="calendar-day" |
|
|
v-for="(item, index) in days" |
|
|
v-for="(item, index) in days" |
|
|
:key="index" |
|
|
:key="index" |
|
|
:class="{ |
|
|
:class="{ 'day-hidden': !item.show }" |
|
|
'day-hidden': !item.show, |
|
|
|
|
|
}" |
|
|
|
|
|
@click="clickItem(item)" |
|
|
@click="clickItem(item)" |
|
|
> |
|
|
> |
|
|
<view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']"> |
|
|
<view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']"> |
|
|
@ -42,6 +43,7 @@ |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
|
|
|
<!-- 下一个月/周 --> |
|
|
<template v-if="current - sitem === 1 || current - sitem === -2"> |
|
|
<template v-if="current - sitem === 1 || current - sitem === -2"> |
|
|
<view |
|
|
<view |
|
|
class="calendar-day" |
|
|
class="calendar-day" |
|
|
@ -56,6 +58,7 @@ |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
<!-- 上一个月/周 --> |
|
|
<template v-else> |
|
|
<template v-else> |
|
|
<view |
|
|
<view |
|
|
class="calendar-day" |
|
|
class="calendar-day" |
|
|
@ -74,14 +77,16 @@ |
|
|
</view> |
|
|
</view> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
<view class="mode-change" @click="changeMode"> |
|
|
|
|
|
|
|
|
<!-- <view class="mode-change" @click="changeMode"> |
|
|
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> |
|
|
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> |
|
|
</view> |
|
|
</view> --> |
|
|
</view> |
|
|
</view> |
|
|
<view class="back-today" @click="goback" v-if="showBack"> 今日 </view> |
|
|
|
|
|
|
|
|
<view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goback"> 今日 </view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
mb-3 |
|
|
<script> |
|
|
<script> |
|
|
import { gegerateDates, dateEqual, formatDate } from './generateDates.js'; |
|
|
import { gegerateDates, dateEqual, formatDate } from './generateDates.js'; |
|
|
|
|
|
|
|
|
@ -116,6 +121,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
watch: { |
|
|
watch: { |
|
|
dotList: function (newvalue) { |
|
|
dotList: function (newvalue) { |
|
|
const days = this.days.slice(0); |
|
|
const days = this.days.slice(0); |
|
|
@ -129,24 +135,42 @@ export default { |
|
|
console.log(days); |
|
|
console.log(days); |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周 |
|
|
|
|
|
current: 1, |
|
|
|
|
|
currentYear: '', |
|
|
|
|
|
currentMonth: '', |
|
|
|
|
|
currentDate: '', |
|
|
|
|
|
days: [], |
|
|
|
|
|
weekMode: false, // false -> 月 true -> 显示周 |
|
|
|
|
|
swiper: [0, 1, 2], |
|
|
|
|
|
// dotList: [], // 打点的日期列表 |
|
|
|
|
|
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期 |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
computed: { |
|
|
computed: { |
|
|
sheight() { |
|
|
sheight() { |
|
|
// 根据年月判断有多少行 |
|
|
// 根据年月判断有多少行 |
|
|
// 判断该月有多少天 |
|
|
// 判断该月有多少天 |
|
|
let h = '70rpx'; |
|
|
let h = '35px'; |
|
|
if (!this.weekMode) { |
|
|
if (!this.weekMode) { |
|
|
const d = new Date(this.currentYear, this.currentMonth, 0); |
|
|
const d = new Date(this.currentYear, this.currentMonth, 0); |
|
|
const days = d.getDate(); // 判断本月有多少天 |
|
|
const days = d.getDate(); // 判断本月有多少天 |
|
|
let day = new Date(d.setDate(1)).getDay(); |
|
|
let day = new Date(d.setDate(1)).getDay(); |
|
|
if (day === 0) { |
|
|
// if (day === 0) { |
|
|
day = 7; |
|
|
// day = 7; |
|
|
} |
|
|
// } |
|
|
const pre = 8 - day; |
|
|
const pre = 8 - day; |
|
|
const rows = Math.ceil((days - pre) / 7) + 1; |
|
|
const rows = Math.ceil((days - pre) / 7) + 1; |
|
|
h = 70 * rows + 'rpx'; |
|
|
h = 35 * rows + 'px'; |
|
|
} |
|
|
} |
|
|
return h; |
|
|
return h; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 当前日期 年月 |
|
|
timeStr() { |
|
|
timeStr() { |
|
|
let str = ''; |
|
|
let str = ''; |
|
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
@ -155,61 +179,66 @@ export default { |
|
|
str = `${y}年${m}月`; |
|
|
str = `${y}年${m}月`; |
|
|
return str; |
|
|
return str; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 上一周期的days书籍 |
|
|
predays() { |
|
|
predays() { |
|
|
let pres = []; |
|
|
let pres = []; |
|
|
if (this.weekMode) { |
|
|
if (this.weekMode) { |
|
|
|
|
|
// 周模式 |
|
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
d.setDate(d.getDate() - 7); |
|
|
d.setDate(d.getDate() - 7); |
|
|
pres = gegerateDates(d, 'week'); |
|
|
pres = gegerateDates(d, 'week'); |
|
|
} else { |
|
|
} else { |
|
|
|
|
|
// 月模式 |
|
|
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|
|
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|
|
pres = gegerateDates(d, 'month'); |
|
|
pres = gegerateDates(d, 'month'); |
|
|
} |
|
|
} |
|
|
return pres; |
|
|
return pres; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 下一周期的days书籍 |
|
|
nextdays() { |
|
|
nextdays() { |
|
|
let nexts = []; |
|
|
let nexts = []; |
|
|
if (this.weekMode) { |
|
|
if (this.weekMode) { |
|
|
|
|
|
// 周模式 |
|
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
d.setDate(d.getDate() + 7); |
|
|
d.setDate(d.getDate() + 7); |
|
|
nexts = gegerateDates(d, 'week'); |
|
|
nexts = gegerateDates(d, 'week'); |
|
|
} else { |
|
|
} else { |
|
|
|
|
|
// 月模式 |
|
|
const d = new Date(this.currentYear, this.currentMonth, 1); |
|
|
const d = new Date(this.currentYear, this.currentMonth, 1); |
|
|
nexts = gegerateDates(d, 'month'); |
|
|
nexts = gegerateDates(d, 'month'); |
|
|
} |
|
|
} |
|
|
return nexts; |
|
|
return nexts; |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
|
|
|
return { |
|
|
created() { |
|
|
weeks: ['一', '二', '三', '四', '五', '六', '日'], |
|
|
this.initDate(); |
|
|
current: 1, |
|
|
|
|
|
currentYear: '', |
|
|
|
|
|
currentMonth: '', |
|
|
|
|
|
currentDate: '', |
|
|
|
|
|
days: [], |
|
|
|
|
|
weekMode: true, |
|
|
|
|
|
swiper: [0, 1, 2], |
|
|
|
|
|
// dotList: [], // 打点的日期列表 |
|
|
|
|
|
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
// |
|
|
|
|
|
/** |
|
|
|
|
|
* 滑动切换上下周期 |
|
|
|
|
|
* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
|
|
|
|
|
* current - pre === 1, -2 下一个月/周 |
|
|
|
|
|
* current - pre === -1, 2 上一个月或者上一周 |
|
|
|
|
|
*/ |
|
|
changeSwp(e) { |
|
|
changeSwp(e) { |
|
|
// console.log(e); |
|
|
|
|
|
const pre = this.current; |
|
|
const pre = this.current; |
|
|
const current = e.target.current; |
|
|
const current = e.target.current; |
|
|
/* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
|
|
|
|
|
*current - pre === 1, -2时是下一个月/周 |
|
|
|
|
|
*current -pre === -1, 2时是上一个月或者上一周 |
|
|
|
|
|
*/ |
|
|
|
|
|
this.current = current; |
|
|
this.current = current; |
|
|
|
|
|
|
|
|
if (current - pre === 1 || current - pre === -2) { |
|
|
if (current - pre === 1 || current - pre === -2) { |
|
|
|
|
|
// 下一个月 或 下一周 |
|
|
this.daysNext(); |
|
|
this.daysNext(); |
|
|
} else { |
|
|
} else { |
|
|
|
|
|
// 上一个月 或 上一周 |
|
|
this.daysPre(); |
|
|
this.daysPre(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 初始化日历的方法 |
|
|
// 初始化日历的方法 |
|
|
initDate(cur) { |
|
|
initDate(cur) { |
|
|
let date = ''; |
|
|
let date = ''; |
|
|
@ -221,7 +250,7 @@ export default { |
|
|
this.currentDate = date.getDate(); // 今日日期 几号 |
|
|
this.currentDate = date.getDate(); // 今日日期 几号 |
|
|
this.currentYear = date.getFullYear(); // 当前年份 |
|
|
this.currentYear = date.getFullYear(); // 当前年份 |
|
|
this.currentMonth = date.getMonth() + 1; // 当前月份 |
|
|
this.currentMonth = date.getMonth() + 1; // 当前月份 |
|
|
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 // 星期几 |
|
|
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几 |
|
|
// const nowY = new Date().getFullYear(); // 当前年份 |
|
|
// const nowY = new Date().getFullYear(); // 当前年份 |
|
|
// const nowM = new Date().getMonth() + 1; |
|
|
// const nowM = new Date().getMonth() + 1; |
|
|
// const nowD = new Date().getDate(); // 今日日期 几号 |
|
|
// const nowD = new Date().getDate(); // 今日日期 几号 |
|
|
@ -249,7 +278,8 @@ export default { |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
this.days = days; |
|
|
this.days = days; |
|
|
// 派发事件,时间发生改变 |
|
|
console.log(days); |
|
|
|
|
|
// 派发事件,时间发生改变 |
|
|
let obj = { |
|
|
let obj = { |
|
|
start: '', |
|
|
start: '', |
|
|
end: '', |
|
|
end: '', |
|
|
@ -265,6 +295,7 @@ export default { |
|
|
} |
|
|
} |
|
|
this.$emit('days-change', obj); |
|
|
this.$emit('days-change', obj); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 上一个 |
|
|
// 上一个 |
|
|
daysPre() { |
|
|
daysPre() { |
|
|
if (this.weekMode) { |
|
|
if (this.weekMode) { |
|
|
@ -276,6 +307,7 @@ export default { |
|
|
this.initDate(d); |
|
|
this.initDate(d); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 下一个 |
|
|
// 下一个 |
|
|
daysNext() { |
|
|
daysNext() { |
|
|
if (this.weekMode) { |
|
|
if (this.weekMode) { |
|
|
@ -287,6 +319,8 @@ export default { |
|
|
this.initDate(d); |
|
|
this.initDate(d); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 切换模式 |
|
|
changeMode() { |
|
|
changeMode() { |
|
|
const premode = this.weekMode; |
|
|
const premode = this.weekMode; |
|
|
let isweek = false; |
|
|
let isweek = false; |
|
|
@ -302,20 +336,19 @@ export default { |
|
|
} |
|
|
} |
|
|
this.initDate(d); |
|
|
this.initDate(d); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 点击日期 |
|
|
// 点击日期 |
|
|
clickItem(e) { |
|
|
clickItem(e) { |
|
|
this.selectedDate = e.fullDate; |
|
|
this.selectedDate = e.fullDate; |
|
|
this.$emit('selected-change', e); |
|
|
this.$emit('selected-change', e); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 返回 |
|
|
goback() { |
|
|
goback() { |
|
|
const d = new Date(); |
|
|
const d = new Date(); |
|
|
this.initDate(d); |
|
|
this.initDate(d); |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
|
|
|
this.initDate(); |
|
|
|
|
|
}, |
|
|
|
|
|
mounted() {}, |
|
|
|
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
@ -323,22 +356,27 @@ export default { |
|
|
.zzx-calendar { |
|
|
.zzx-calendar { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: auto; |
|
|
height: auto; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
padding-bottom: 10px; |
|
|
|
|
|
|
|
|
.calendar-heander { |
|
|
.calendar-heander { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
height: 60upx; |
|
|
padding: 16px 0; |
|
|
line-height: 60upx; |
|
|
|
|
|
position: relative; |
|
|
position: relative; |
|
|
font-size: 30upx; |
|
|
font-size: 15px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.calendar-weeks { |
|
|
.calendar-weeks { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-flow: row nowrap; |
|
|
flex-flow: row nowrap; |
|
|
height: 60upx; |
|
|
margin-bottom: 10px; |
|
|
line-height: 60upx; |
|
|
|
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
font-size: 30upx; |
|
|
font-size: 12px; |
|
|
|
|
|
color: #9ca3af; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
|
.calendar-week { |
|
|
.calendar-week { |
|
|
width: calc(100% / 7); |
|
|
width: calc(100% / 7); |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
@ -350,10 +388,10 @@ export default { |
|
|
height: 60upx; |
|
|
height: 60upx; |
|
|
} |
|
|
} |
|
|
.calendar-content { |
|
|
.calendar-content { |
|
|
min-height: 60upx; |
|
|
min-height: 30px; |
|
|
} |
|
|
} |
|
|
.calendar-swiper { |
|
|
.calendar-swiper { |
|
|
min-height: 70upx; |
|
|
min-height: 35px; |
|
|
transition: height ease-out 0.3s; |
|
|
transition: height ease-out 0.3s; |
|
|
} |
|
|
} |
|
|
.calendar-item { |
|
|
.calendar-item { |
|
|
@ -367,10 +405,11 @@ export default { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
font-size: 28upx; |
|
|
font-size: 14px; |
|
|
|
|
|
|
|
|
.calendar-day { |
|
|
.calendar-day { |
|
|
width: calc(100% / 7); |
|
|
width: calc(100% / 7); |
|
|
height: 70upx; |
|
|
height: 35px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-flow: column nowrap; |
|
|
flex-flow: column nowrap; |
|
|
@ -382,28 +421,30 @@ export default { |
|
|
.day-hidden { |
|
|
.day-hidden { |
|
|
visibility: hidden; |
|
|
visibility: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.mode-change { |
|
|
.mode-change { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
margin-top: 10upx; |
|
|
margin-top: 5px; |
|
|
|
|
|
|
|
|
.mode-arrow-top { |
|
|
.mode-arrow-top { |
|
|
width: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
height: 0; |
|
|
border-left: 12upx solid transparent; |
|
|
border-left: 6px solid transparent; |
|
|
border-right: 12upx solid transparent; |
|
|
border-right: 6px solid transparent; |
|
|
border-bottom: 10upx solid #ff6633; |
|
|
border-bottom: 5px solid #ff6633; |
|
|
} |
|
|
} |
|
|
.mode-arrow-bottom { |
|
|
.mode-arrow-bottom { |
|
|
width: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
height: 0; |
|
|
border-left: 12upx solid transparent; |
|
|
border-left: 6px solid transparent; |
|
|
border-right: 12upx solid transparent; |
|
|
border-right: 6px solid transparent; |
|
|
border-top: 10upx solid #ff6633; |
|
|
border-top: 5px solid #ff6633; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.is-today { |
|
|
.is-today { |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
// border: 1upx solid #FF6633; |
|
|
border: 1upx solid #ff6633; |
|
|
border-radius: 50%; |
|
|
border-radius: 50%; |
|
|
color: #ff6633; |
|
|
color: #ff6633; |
|
|
} |
|
|
} |
|
|
@ -412,31 +453,20 @@ export default { |
|
|
color: #ffffff; |
|
|
color: #ffffff; |
|
|
} |
|
|
} |
|
|
.date { |
|
|
.date { |
|
|
width: 50upx; |
|
|
width: 25px; |
|
|
height: 50upx; |
|
|
height: 25px; |
|
|
line-height: 50upx; |
|
|
line-height: 25px; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
border-radius: 50upx; |
|
|
border-radius: 25px; |
|
|
} |
|
|
} |
|
|
.dot-show { |
|
|
.dot-show { |
|
|
width: 8px; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
height: 8px; |
|
|
// background: red; |
|
|
// background: red; |
|
|
border-radius: 10upx; |
|
|
border-radius: 5px; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 2px; |
|
|
top: 2px; |
|
|
right: 10px; |
|
|
right: 10px; |
|
|
} |
|
|
} |
|
|
.back-today { |
|
|
|
|
|
// position: absolute; |
|
|
|
|
|
line-height: 30upx; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
top: 15upx; |
|
|
|
|
|
// border-radius: 15upx 0 0 15upx; |
|
|
|
|
|
color: #24abf1; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
left: 39%; |
|
|
|
|
|
margin: 5%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
