|
|
|
@ -1,9 +1,14 @@ |
|
|
|
<template> |
|
|
|
<view class="zzx-calendar"> |
|
|
|
<view class="calendar-heander">{{ timeStr }}</view> |
|
|
|
<view class="calendar-header">{{ timeStr }}</view> |
|
|
|
<!-- 星期几标题 --> |
|
|
|
<view class="calendar-weeks"> |
|
|
|
<view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in data.weeks" :key="index">{{ week }}</view> |
|
|
|
<view |
|
|
|
class="calendar-week" |
|
|
|
:class="{ 'text-red-500': week === '六' || week === '日' }" |
|
|
|
v-for="(week, index) in data.weeks" |
|
|
|
:key="index" |
|
|
|
>{{ week }}</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="calendar-content"> |
|
|
|
@ -11,43 +16,54 @@ |
|
|
|
class="calendar-swiper" |
|
|
|
:style="{ |
|
|
|
width: '100%', |
|
|
|
height: sheight, |
|
|
|
height: calenderHeight, |
|
|
|
}" |
|
|
|
:indicator-dots="false" |
|
|
|
:autoplay="false" |
|
|
|
:duration="duration" |
|
|
|
:current="current" |
|
|
|
:duration="500" |
|
|
|
:current="data.current" |
|
|
|
@change="changeSwp" |
|
|
|
:circular="true" |
|
|
|
> |
|
|
|
<swiper-item class="calendar-item" v-for="sitem in data.swiper" :key="sitem"> |
|
|
|
<swiper-item class="calendar-item" v-for="sItem in data.swiper" :key="sItem"> |
|
|
|
<view class="calendar-days"> |
|
|
|
<!-- 当前的 --> |
|
|
|
<template v-if="sitem === data.current"> |
|
|
|
<view class="calendar-day" v-for="(item, index) in data.days" :key="index" :class="{ 'day-hidden': !item.show }" @click="clickItem(item)"> |
|
|
|
<view class="date1 is-today" :class="[item.isToday ? 'is-today' : '', item.fullDate === data.selectedDate ? checkedClass : '']">{{ item.time.getDate() }}</view> |
|
|
|
<template v-if="sItem === data.current"> |
|
|
|
<view |
|
|
|
class="calendar-day" |
|
|
|
v-for="(item, index) in data.days" |
|
|
|
:key="index" |
|
|
|
:class="{ 'day-hidden': !item.show }" |
|
|
|
@click="clickItem(item)" |
|
|
|
> |
|
|
|
<view |
|
|
|
class="date" |
|
|
|
:class="[item.isToday ? 'is-today' : '', item.fullDate === data.selectedDate ? 'is-checked' : '']" |
|
|
|
>{{ item.time.getDate() }}</view> |
|
|
|
<view class="dot-show" v-if="item.info === '0'" :style="dotStyle"></view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template v-else> |
|
|
|
<!-- 下一个月/周 --> |
|
|
|
<template v-if="data.current - sitem === 1 || data.current - sitem === -2"> |
|
|
|
<template v-if="data.current - sItem === 1 || data.current - sItem === -2"> |
|
|
|
<view |
|
|
|
class="calendar-day" |
|
|
|
v-for="(item, index) in predays" |
|
|
|
v-for="(item, index) in preDays" |
|
|
|
:key="index" |
|
|
|
:class="{ |
|
|
|
'day-hidden': !item.show, |
|
|
|
}" |
|
|
|
> |
|
|
|
<view class="date2" :class="[item.isToday ? 'is-today' : '']">{{ item.time.getDate() }}</view> |
|
|
|
<view class="date" :class="[item.isToday ? 'is-today' : '']">{{ item.time.getDate() }}</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<!-- 上一个月/周 --> |
|
|
|
<template v-else> |
|
|
|
<view |
|
|
|
class="calendar-day" |
|
|
|
v-for="(item, index) in nextdays" |
|
|
|
v-for="(item, index) in nextDays" |
|
|
|
:key="index" |
|
|
|
:class="{ |
|
|
|
'day-hidden': !item.show, |
|
|
|
@ -63,7 +79,7 @@ |
|
|
|
|
|
|
|
<!-- <view class="mode-change" @click="changeMode"> |
|
|
|
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> |
|
|
|
</view> --> |
|
|
|
</view>--> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goToday">今日</view> |
|
|
|
@ -74,16 +90,9 @@ |
|
|
|
import { reactive, computed, watchEffect, defineProps, defineEmits } from 'vue'; |
|
|
|
import { useStore } from 'vuex'; |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
import { gegerateDates, formatDate } from './generateDates.js'; |
|
|
|
import { generateDates, formatDate } from './generateDates.js'; |
|
|
|
|
|
|
|
defineProps({ |
|
|
|
duration: { type: Number, default: 500 }, |
|
|
|
// 是否返回今日 |
|
|
|
showBack: { type: Boolean, default: false }, |
|
|
|
// 今日的自定义样式class |
|
|
|
todayClass: { type: String, default: 'is-today' }, |
|
|
|
// 选中日期的样式class |
|
|
|
checkedClass: { type: String, default: 'is-checked' }, |
|
|
|
// 打点日期的自定义样式 |
|
|
|
dotStyle: { |
|
|
|
type: Object, |
|
|
|
@ -103,16 +112,12 @@ const data = reactive({ |
|
|
|
weekMode: false, // false -> 月 true -> 显示周 |
|
|
|
swiper: [0, 1, 2], |
|
|
|
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期 |
|
|
|
start: dayjs() |
|
|
|
.startOf('month') |
|
|
|
.valueOf(), |
|
|
|
end: dayjs() |
|
|
|
.endOf('month') |
|
|
|
.valueOf(), |
|
|
|
start: dayjs().startOf('month').valueOf(), |
|
|
|
end: dayjs().endOf('month').valueOf(), |
|
|
|
}); |
|
|
|
const store = useStore(); |
|
|
|
const dotList = computed(() => store.state.project.dotList); |
|
|
|
const sheight = computed(() => { |
|
|
|
const calenderHeight = computed(() => { |
|
|
|
// 根据年月判断有多少行 |
|
|
|
// 判断该月有多少天 |
|
|
|
let h = '35px'; |
|
|
|
@ -138,34 +143,34 @@ const timeStr = computed(() => { |
|
|
|
return str; |
|
|
|
}); |
|
|
|
// 上一周期的days书籍 |
|
|
|
const predays = computed(() => { |
|
|
|
const preDays = computed(() => { |
|
|
|
let pres = []; |
|
|
|
if (data.weekMode) { |
|
|
|
// 周模式 |
|
|
|
const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate); |
|
|
|
d.setDate(d.getDate() - 7); |
|
|
|
pres = gegerateDates(d, 'week'); |
|
|
|
pres = generateDates(d, 'week'); |
|
|
|
} else { |
|
|
|
// 月模式 |
|
|
|
const d = new Date(data.currentYear, data.currentMonth - 2, 1); |
|
|
|
pres = gegerateDates(d, 'month'); |
|
|
|
pres = generateDates(d, 'month'); |
|
|
|
} |
|
|
|
return pres; |
|
|
|
}); |
|
|
|
// 下一周期的days书籍 |
|
|
|
const nextdays = computed(() => { |
|
|
|
let nexts = []; |
|
|
|
const nextDays = computed(() => { |
|
|
|
let next = []; |
|
|
|
if (data.weekMode) { |
|
|
|
// 周模式 |
|
|
|
const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate); |
|
|
|
d.setDate(d.getDate() + 7); |
|
|
|
nexts = gegerateDates(d, 'week'); |
|
|
|
next = generateDates(d, 'week'); |
|
|
|
} else { |
|
|
|
// 月模式 |
|
|
|
const d = new Date(data.currentYear, data.currentMonth, 1); |
|
|
|
nexts = gegerateDates(d, 'month'); |
|
|
|
next = generateDates(d, 'month'); |
|
|
|
} |
|
|
|
return nexts; |
|
|
|
return next; |
|
|
|
}); |
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
@ -271,10 +276,10 @@ const initDate = cur => { |
|
|
|
data.days = []; |
|
|
|
let days = []; |
|
|
|
if (data.weekMode) { |
|
|
|
days = gegerateDates(date, 'week'); |
|
|
|
days = generateDates(date, 'week'); |
|
|
|
// this.selectedDate = days[0].fullDate; |
|
|
|
} else { |
|
|
|
days = gegerateDates(date, 'month'); |
|
|
|
days = generateDates(date, 'month'); |
|
|
|
|
|
|
|
// const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|
|
|
// const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth; |
|
|
|
@ -314,16 +319,16 @@ initDate(); |
|
|
|
|
|
|
|
// 切换模式 |
|
|
|
const changeMode = () => { |
|
|
|
// const premode = this.weekMode; |
|
|
|
// let isweek = false; |
|
|
|
// if (premode) { |
|
|
|
// isweek = !!this.days.find((item) => item.fullDate === this.selectedDate); |
|
|
|
// const preMode = this.weekMode; |
|
|
|
// let isWeek = false; |
|
|
|
// if (preMode) { |
|
|
|
// isWeek = !!this.days.find((item) => item.fullDate === this.selectedDate); |
|
|
|
// } |
|
|
|
// this.weekMode = !this.weekMode; |
|
|
|
// let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
|
// const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|
|
|
// const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth; |
|
|
|
// if ((this.selectedDate && isMonth) || isweek) { |
|
|
|
// if ((this.selectedDate && isMonth) || isWeek) { |
|
|
|
// d = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|
|
|
// } |
|
|
|
// this.initDate(d); |
|
|
|
@ -340,7 +345,6 @@ const goToday = () => { |
|
|
|
// const d = new Date(); |
|
|
|
// this.initDate(d); |
|
|
|
}; |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@ -350,7 +354,7 @@ const goToday = () => { |
|
|
|
background-color: #fff; |
|
|
|
padding-bottom: 10px; |
|
|
|
|
|
|
|
.calendar-heander { |
|
|
|
.calendar-header { |
|
|
|
text-align: center; |
|
|
|
padding: 16px 0; |
|
|
|
position: relative; |
|
|
|
|
