xuexiaole-mobile/src/pages/inspector/student/date-view.vue

<template>
  <view class="view-main">
    <view class="current-date">
      <wd-icon name="arrow-left" size="30rpx" color="#A9AAB5" @click="prePlanDate"></wd-icon>
      <text>{{ currentDay.format('MM月DD日') }}</text>
      <wd-icon name="arrow-right" size="30rpx" color="#A9AAB5" @click="nextPlanDate"></wd-icon>
    </view>
    <view class="date-choose-view">
      <view :class="{ 'all-active': allDateIs }" @click="allDateQuery">全部</view>
      <view>｜</view>
      <view class="calendar-view" @click="calendarTrigger">
        <text>日历</text>
        <svg-calendar-icon />
      </view>
    </view>
  </view>
  <wd-popup v-model="calendarVisible" position="bottom">
    <qy-student-calendar v-model:value="calendarValue" />
    <view class="calendar-operates">
      <wd-button custom-class="calendar-operates-cancel" @click="calendarVisible = false"
        >取消
      </wd-button>
      <wd-button custom-class="calendar-operates-sure" @click="changeDay">确定</wd-button>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { getCourseTable } from '@/api/inspector/student';

defineProps({});

const emit = defineEmits(['change']);

const calendarVisible = ref<boolean>(false);
const currentDay = ref(dayjs());
const calendarValue = ref(dayjs().format('YYYY-MM-DD'));
const dateList = ref([]);

const initData = async () => {
  const data = await getCourseTable();
  dateList.value = (data ?? []).map(item => {
    return {
      ...item,
      courseDate: dayjs(item.courseDate),
    };
  });
  // .sort((pre, next) => {
  //   return pre.courseDate.isBefore(next.courseDate);
  // });
  currentDay.value =
    dateList.value.length > 0
      ? dateList.value.find(item => {
          return (
            item.courseDate.isSame(dayjs(), 'date') || item.courseDate.isAfter(dayjs(), 'date')
          );
        })?.courseDate
      : dayjs();

  emit('change', currentDay.value.format('YYYY-MM-DD'));
};

const calendarTrigger = () => {
  calendarValue.value = currentDay.value.format('YYYY-MM-DD');
  calendarVisible.value = !calendarVisible.value;
};

const changeDay = () => {
  if (calendarValue.value !== currentDay.value.format('YYYY-MM-DD')) {
    currentDay.value = dayjs(calendarValue.value);
    allDateIs.value = false;
    emit('change', calendarValue.value);
  }
  calendarVisible.value = false;
};

const nextPlanDate = () => {
  const nextDay = dateList.value.find(item => {
    return item.courseDate.isAfter(currentDay.value, 'date');
  });
  if (nextDay) {
    allDateIs.value = false;
    currentDay.value = nextDay.courseDate;
    emit('change', nextDay.courseDate.format('YYYY-MM-DD'));
  }
};

const prePlanDate = () => {
  const preDay = dateList.value
    .slice()
    .reverse()
    .find(item => {
      return item.courseDate.isBefore(currentDay.value, 'date');
    });
  if (preDay) {
    allDateIs.value = false;
    currentDay.value = preDay.courseDate;
    emit('change', preDay.courseDate.format('YYYY-MM-DD'));
  }
};

const allDateIs = ref(false);
const allDateQuery = () => {
  allDateIs.value = true;
  emit('change', undefined);
};

onMounted(() => {
  initData();
});
</script>

<style scoped lang="scss">
.view-main {
  width: 690rpx;
  height: 108rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .current-date {
    display: flex;
    place-content: center;
    align-items: center;
    justify-content: space-between;

    & > svg {
      width: 30rpx;
      height: 30rpx;
    }

    & > text {
      color: #0a1f13;
      text-align: center;
      font-size: 34rpx;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      padding: 0 10rpx;
    }
  }

  .date-choose-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    text-align: right;
    font-size: 30rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    .all-active {
      color: #615dff;
    }

    .calendar-view {
      display: flex;
      align-items: center;

      & > svg {
        width: 30rpx;
        height: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
}

.calendar-operates {
  display: flex;
  gap: 20rpx;
  margin: 30rpx 0;

  &-cancel {
    width: 230rpx;
    height: 90rpx;
    flex-shrink: 0;
    border-radius: 20rpx;
    background-color: #efefff !important;
    color: #615dff !important;
    font-size: 30rpx;
  }

  &-sure {
    width: 440rpx;
    height: 90rpx;
    flex-shrink: 0;
    border-radius: 20rpx;
    background-color: #615dff !important;
    color: white;
    font-size: 30rpx;
  }
}
</style>