|
|
|
@ -16,7 +16,7 @@ |
|
|
|
:indicator-dots="false" |
|
|
|
:autoplay="false" |
|
|
|
:duration="duration" |
|
|
|
:current="current" |
|
|
|
:current="data.current" |
|
|
|
@change="changeSwp" |
|
|
|
:circular="true" |
|
|
|
> |
|
|
|
@ -25,7 +25,7 @@ |
|
|
|
<!-- 当前的 --> |
|
|
|
<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> |
|
|
|
<view class="date" :class="[item.isToday ? 'is-today' : '', item.fullDate === data.selectedDate ? checkedClass : '']">{{ item.time.getDate() }}</view> |
|
|
|
<view class="dot-show" v-if="item.info === '0'" :style="dotStyle"></view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -40,7 +40,7 @@ |
|
|
|
'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> |
|
|
|
<!-- 上一个月/周 --> |
|
|
|
@ -71,7 +71,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { reactive, computed, watchEffect, defineProps, defineEmits } from 'vue'; |
|
|
|
import { reactive, computed, watchEffect } from 'vue'; |
|
|
|
import { useStore } from 'vuex'; |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
import { gegerateDates, formatDate } from './generateDates.js'; |
|
|
|
@ -91,7 +91,7 @@ defineProps({ |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
const emit = defineEmits(['handleFindPoint', 'handleFindPoint', 'days-change']); |
|
|
|
const emit = defineEmits(['handleFindPoint', 'handleFindPoint', 'days-change', 'selected-change']); |
|
|
|
|
|
|
|
const data = reactive({ |
|
|
|
weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周 |
|
|
|
@ -179,78 +179,8 @@ watchEffect(() => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
data.days = days; |
|
|
|
console.log('data.days', data.days); |
|
|
|
}); |
|
|
|
|
|
|
|
// watch(dotList, newValue => { |
|
|
|
// // 直接监听 |
|
|
|
// const days = data.days.slice(0); |
|
|
|
// console.log('days ', days); |
|
|
|
// const index = days.findIndex(day => day.show); |
|
|
|
// days.forEach((day, i) => { |
|
|
|
// newValue.forEach((item, j) => { |
|
|
|
// if (i - index === j) { |
|
|
|
// day.info = item; |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
// data.days = days; |
|
|
|
// console.log('data.days ', data.days); |
|
|
|
// }); |
|
|
|
|
|
|
|
// 上一个 |
|
|
|
const daysPre = () => { |
|
|
|
// if (this.weekMode) { |
|
|
|
// const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
|
// d.setDate(d.getDate() - 7); |
|
|
|
// this.initDate(d); |
|
|
|
// } else { |
|
|
|
// const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|
|
|
// this.initDate(d); |
|
|
|
// } |
|
|
|
}; |
|
|
|
|
|
|
|
// 下一个 |
|
|
|
const daysNext = () => { |
|
|
|
// if (this.weekMode) { |
|
|
|
// const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|
|
|
// d.setDate(d.getDate() + 7); |
|
|
|
// this.initDate(d); |
|
|
|
// } else { |
|
|
|
// const d = new Date(this.currentYear, this.currentMonth, 1); |
|
|
|
// this.initDate(d); |
|
|
|
// } |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* 滑动切换上下周期 |
|
|
|
* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
|
|
|
* current - pre === 1, -2 下一个月/周 |
|
|
|
* current - pre === -1, 2 上一个月或者上一周 |
|
|
|
*/ |
|
|
|
const changeSwp = e => { |
|
|
|
const pre = data.current; |
|
|
|
const { current } = e.target; |
|
|
|
data.current = current; |
|
|
|
if (current - pre === 1 || current - pre === -2) { |
|
|
|
// 下一个月 或 下一周 |
|
|
|
daysNext(); |
|
|
|
const arr = data.days.filter(s => s.show); |
|
|
|
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
|
|
|
data.start = dayjs(arr[0].fullDate).valueOf(); |
|
|
|
data.end = dayjs(end).valueOf(); |
|
|
|
emit('handleFindPoint', this.start, this.end); |
|
|
|
} else { |
|
|
|
// 上一个月 或 上一周 |
|
|
|
daysPre(); |
|
|
|
const arr = data.days.filter(s => s.show); |
|
|
|
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
|
|
|
data.start = dayjs(arr[0].fullDate).valueOf(); |
|
|
|
data.end = dayjs(end).valueOf(); |
|
|
|
emit('handleFindPoint', this.start, this.end); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 初始化日历的方法 |
|
|
|
const initDate = cur => { |
|
|
|
let date = ''; |
|
|
|
@ -312,33 +242,86 @@ const initDate = cur => { |
|
|
|
|
|
|
|
initDate(); |
|
|
|
|
|
|
|
// 切换模式 |
|
|
|
const changeMode = () => { |
|
|
|
// 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) { |
|
|
|
// d = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|
|
|
// } |
|
|
|
// this.initDate(d); |
|
|
|
// 上一个 |
|
|
|
const daysPre = () => { |
|
|
|
if (data.weekMode) { |
|
|
|
const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate); |
|
|
|
d.setDate(d.getDate() - 7); |
|
|
|
initDate(d); |
|
|
|
} else { |
|
|
|
const d = new Date(data.currentYear, data.currentMonth - 2, 1); |
|
|
|
initDate(d); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 下一个 |
|
|
|
const daysNext = () => { |
|
|
|
if (data.weekMode) { |
|
|
|
const d = new Date(data.currentYear, data.currentMonth - 1, data.currentDate); |
|
|
|
d.setDate(d.getDate() + 7); |
|
|
|
initDate(d); |
|
|
|
} else { |
|
|
|
const d = new Date(data.currentYear, data.currentMonth, 1); |
|
|
|
initDate(d); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* 滑动切换上下周期 |
|
|
|
* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
|
|
|
* current - pre === 1, -2 下一个月/周 |
|
|
|
* current - pre === -1, 2 上一个月或者上一周 |
|
|
|
*/ |
|
|
|
const changeSwp = e => { |
|
|
|
const pre = data.current; |
|
|
|
const { current } = e.target; |
|
|
|
data.current = current; |
|
|
|
if (current - pre === 1 || current - pre === -2) { |
|
|
|
// 下一个月 或 下一周 |
|
|
|
daysNext(); |
|
|
|
const arr = data.days.filter(s => s.show); |
|
|
|
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
|
|
|
data.start = dayjs(arr[0].fullDate).valueOf(); |
|
|
|
data.end = dayjs(end).valueOf(); |
|
|
|
emit('handleFindPoint', data.start, data.end); |
|
|
|
} else { |
|
|
|
// 上一个月 或 上一周 |
|
|
|
daysPre(); |
|
|
|
const arr = data.days.filter(s => s.show); |
|
|
|
const end = `${arr[arr.length - 1].fullDate} 23:59:59`; |
|
|
|
data.start = dayjs(arr[0].fullDate).valueOf(); |
|
|
|
data.end = dayjs(end).valueOf(); |
|
|
|
emit('handleFindPoint', data.start, data.end); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 切换模式 |
|
|
|
// const changeMode = () => { |
|
|
|
// 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) { |
|
|
|
// d = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|
|
|
// } |
|
|
|
// this.initDate(d); |
|
|
|
// }; |
|
|
|
|
|
|
|
// 点击日期 |
|
|
|
const clickItem = e => { |
|
|
|
// this.selectedDate = e.fullDate; |
|
|
|
// this.$emit('selected-change', e); |
|
|
|
data.selectedDate = e.fullDate; |
|
|
|
emit('selected-change', e); |
|
|
|
}; |
|
|
|
|
|
|
|
// 返回 |
|
|
|
const goToday = () => { |
|
|
|
// const d = new Date(); |
|
|
|
// this.initDate(d); |
|
|
|
const d = new Date(); |
|
|
|
initDate(d); |
|
|
|
}; |
|
|
|
|
|
|
|
</script> |
|
|
|
|
