Browse Source

排课日历修改

skyblued 2 years ago
parent
commit
da5873077d
1 changed files with 33 additions and 9 deletions
  1. 33 9
      src/business-components/calendar/index.tsx

+ 33 - 9
src/business-components/calendar/index.tsx

@@ -1,9 +1,11 @@
-import { Button, Calendar, Icon, Image, Popup, Tag, Toast } from 'vant'
+import { Button, Calendar, Dialog, Icon, Image, Popup, Tag, Toast } from 'vant'
 import { defineComponent } from 'vue'
 import dayjs from 'dayjs'
 import styles from './index.module.less'
 import IconArrow from '@/common/images/icon_arrow.png'
 import IconClock from '@/common/images/icon_clock.png'
+import isToday from 'dayjs/plugin/isToday'
+dayjs.extend(isToday)
 
 export default defineComponent({
   name: 'calendar',
@@ -109,13 +111,14 @@ export default defineComponent({
     formatter(date: any) {
       const dateStr = dayjs(date.date).format('YYYY-MM-DD')
       const dateObj = this.list[dateStr]
+      date.type = ''
       // 判断是否有课程 并且 时间在当前时间之后
-      if (dateObj && dayjs().isBefore(dayjs(date.date))) {
+      if (dateObj && dayjs().subtract(1, 'day').isBefore(dayjs(date.date))) {
+        // fullCourse当天是否排满 0: 未,1:满 , courseTime 当天没有课程
         if (
-          dateObj &&
-          (dateObj.fullCourse ||
-            !dateObj?.courseTime ||
-            dateObj?.courseTime?.length <= 0)
+          dateObj.fullCourse ||
+          !dateObj?.courseTime ||
+          dateObj?.courseTime?.length <= 0
         ) {
           date.bottomInfo = '满'
           date.className = 'full'
@@ -124,12 +127,14 @@ export default defineComponent({
       } else {
         date.type = 'disabled'
       }
+      // 是否是节假日
       if (dateObj && this.isSkipHolidays && dateObj.holiday) {
         // date.bottomInfo = '节假日'
         date.type = 'disabled'
       }
 
-      date.type = date.type === 'selected' ? '' : date.type
+      // date.type = date.type === 'selected' ? 'selected' : date.type
+      // console.log(date.type)
       return date
     },
     onPrevMonth() {
@@ -188,15 +193,34 @@ export default defineComponent({
       const tempDate = dayjs(this.currentDate).add(1, 'day')
       this._dayChange(tempDate.toDate())
     },
-    onDateSelect(date: any) {
+    async onDateSelect(date: any) {
+      if (this.$route.name == 'liveCreate' && dayjs(date).isToday()) {
+        let comfirm = '' as any
+        try {
+          comfirm = await Dialog.alert({
+            title: '提示',
+            message:
+              '直播课选择当天, 售卖时间为: 现在到开课时间, 确定选择今天吗?',
+            theme: 'round-button',
+            showCancelButton: true
+          })
+        } catch (err) {}
+        if (!comfirm) return 
+      }
       // 选择日历上某一个日期
+      // console.log([...this.selectList])
       this.selectDays = [...this.selectList] // 初始化用户选中的值
       this._dayChange(date)
       this.onSelect && this.onSelect(date)
     },
     _dayChange(date: Date) {
       const dateStr = dayjs(date).format('YYYY-MM-DD')
-      let dataList = (this.list[dateStr] && this.list[dateStr].courseTime) || []
+      let dataList = [] as any
+      if (this.list[dateStr] && Array.isArray(this.list[dateStr].courseTime)) {
+        dataList = [...this.list[dateStr].courseTime].filter(n =>
+          dayjs().isBefore(dayjs(n.startTime))
+        )
+      }
       dataList.forEach((item: any) => {
         item.start = dayjs(item.startTime).format('HH:mm')
         item.end = dayjs(item.endTime).format('HH:mm')