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

dev

This commit is contained in:
牛子源 2025-05-26 10:28:46 +08:00
parent d2e325e5fc
commit ca29c30198
1 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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