clinic-v2
/
web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: clinic-v2:4b5217b3343fb1ca77568f280b6f6945e18e898e
Branches Tags
clinic-v2:main
..
compare: clinic-v2:c9ef75f035ff5e1455bd36e2365eebeb0bf099cf
Branches Tags
clinic-v2:main

No commits in common. "4b5217b3343fb1ca77568f280b6f6945e18e898e" and "c9ef75f035ff5e1455bd36e2365eebeb0bf099cf" have entirely different histories.
4b5217b334 ... c9ef75f035

1 changed files with 31 additions and 25 deletions
Show Stats Expand all files Collapse all files

56
src/components/common/Calendar.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
import {ref, computed} from 'vue';
import {ArrowLeft, ArrowRight} from '@element-plus/icons-vue'
const currentMonth = ref(new Date().getMonth());
const currentYear = ref(new Date().getFullYear());
const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
@ -51,17 +52,17 @@ const generateCalendarData = (
// 当前月日期
if ((isFirstWeek && day >= firstDayIndex) || (!isFirstWeek && dayCounter <= daysInMonth)) {
const isToday = dayCounter === currentDay && month === currentMonthValue && year === currentYearValue;
weekDays.push({ day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday });
weekDays.push({day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday});
dayCounter++;
}
// 前月日期
else if (isFirstWeek) {
const prevDay = daysInPrevMonth - firstDayIndex + day + 1;
weekDays.push({ day: prevDay, isCurrentMonth: false, isCurrentDay: false });
weekDays.push({day: prevDay, isCurrentMonth: false, isCurrentDay: false});
}
// 下月日期
else {
weekDays.push({ day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false });
weekDays.push({day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false});
nextMonthDayCounter++;
}
}
@ -95,19 +96,19 @@ const nextMonth = () => {
}
selectedDate.value = null;
};
const emit=defineEmits(['dateClick']);
const emit = defineEmits(['dateClick']);
const handleDateClick = (day: number) => {
selectedDate.value = { day, isCurrentMonth:true };
emit('dateClick',`${currentYear.value}-${currentMonth.value + 1}-${day}` )
selectedDate.value = {day, isCurrentMonth: true};
emit('dateClick', `${currentYear.value}-${currentMonth.value + 1}-${day}`)
};
</script>
<template>
<div class="calendar-wrapper">
<div class="header">
<span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
<div class="calendar-wrapper-header">
<span class="btn" @click="prevMonth"><el-icon><ArrowLeft/></el-icon></span>
<span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
<span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
<span class="btn" @click="nextMonth"><el-icon><ArrowRight/></el-icon></span>
</div>
<div class="row">
<div class="item">
@ -148,25 +149,24 @@ const handleDateClick = (day: number) => {
<style scoped lang="scss">
.calendar-wrapper {
.header {
&-header {
margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.current{
.current {
font-weight: 500;
font-size: 18px;
color: #333333;
font-style: normal;
margin-bottom: 8px;
}
.btn {
padding: 5px 10px;
font-size: 14px;
color: #1677FE;
background-color: #FFF;
border-radius: 4px;
border-radius: 6px;
cursor: pointer;
&:hover {
@ -175,10 +175,11 @@ const handleDateClick = (day: number) => {
}
}
}
width: 100%;
height: 100%;
box-sizing: border-box;
padding:0 20px 20px;
padding: 0 20px 20px;
background-color: #FFF;
border-radius: 0 0 8px 8px;
display: flex;
@ -187,41 +188,46 @@ const handleDateClick = (day: number) => {
.row {
flex: 1;
width: 100%;
background: #F9FAFC ;
background: #F9FAFC;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 14px;
font-size: 12px;
color: #999999;
font-style: normal;
.item {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
span {
margin: auto;
height: 34px;
width: 34px;
height: 25px;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 16px;
font-size: 14px;
color: #666666;
font-style: normal;
border-radius:17px;
border-radius: 25px;
}
.currentDay {
background: #1677FE;
color: #fff;
}
.otherMonth{
.otherMonth {
color: #999;
}
.selectedDay {
background: #FFA500;
color: #fff;