h5-colexiu/src/student/teacher-dependent/model/practice-calendar.tsx

import dayjs from 'dayjs'
import Calendar from '@/business-components/calendar'
import { Button, Cell, Dialog, Popup, Tag } from 'vant'
import { defineComponent } from 'vue'
import styles from './practice-calendar.module.less'
import { getWeekCh } from '@/helpers/utils'
import request from '@/helpers/request'
import { state } from '@/state'

export default defineComponent({
  name: 'practice-calendar',
  props: {
    courseNum: {
      type: Number,
      default: 4
    },
    teacherId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      calendarList: [] as any,
      selectCourseList: [] as any,
      coursePlanStatus: false,
      selectStatus: false,
      coursePlanList: []
    }
  },
  computed: {
    showSelectList() {
      const arr: any = this.selectCourseList
      let list = [...arr]
      list.forEach((item: any) => {
        item.title =
          dayjs(item.startTime).format('YYYY-MM-DD') +
          ' ' +
          getWeekCh(dayjs(item.startTime).day()) +
          ' ' +
          item.start +
          '~' +
          item.end
      })
      return list
    },
    selectType() {
      // 循环次数是否足够
      return this.selectCourseList.length < this.courseNum
        ? 'noEnough'
        : 'enough'
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList(date?: Date) {
      try {
        let params = {
          day: dayjs(date || new Date()).format('DD'),
          month: dayjs(date || new Date()).format('MM'),
          year: dayjs(date || new Date()).format('YYYY')
        }
        let res = await request.post(
          '/api-student/courseSchedule/createPracticeCourseCalendar',
          {
            data: {
              ...params,
              studentId: state.user.data?.userId,
              teacherId: this.teacherId
            }
          }
        )
        const result = res.data || []
        let tempObj = {}
        result.forEach((item: any) => {
          tempObj[item.date] = item
        })
        this.calendarList = tempObj
      } catch {}
    },
    onSelectDay(obj: any) {
      const result = obj || []
      let list = [...this.selectCourseList] as any
      console.log(obj, list)
      result.forEach((item: any) => {
        const isExist = list.some(
          (course: any) => course.startTime === item.startTime
        )
        !isExist && list.push({ ...item })
      })
      // 去掉不在
      list.forEach((item: any) => {
        const isExist = result.some(
          (course: any) => course.startTime === item.startTime
        )
        const index = result.findIndex(
          (course: any) => course.startTime === item.startTime
        )
        !isExist && list.splice(index, 1)
      })
      // 对数组进行排序
      list.sort((first: any, second: any) => {
        if (first.startTime > second.startTime) return 1
        if (first.startTime < second.startTime) return -1
        return 0
      })
      console.log(list, 'list')
      this.selectCourseList = [...list] as any
    },
    onCloseTag(item: any) {
      Dialog.confirm({
        title: '提示',
        message: '您是否要删除该选择的课程？',
        confirmButtonColor: 'var(--van-primary)'
      }).then(() => {
        const index = this.selectCourseList.findIndex(
          (course: any) => course.startTime === item.startTime
        )
        this.selectCourseList.splice(index, 1)
      })
    }
  },
  render() {
    return (
      <>
        <div class={styles.group}>
          <Calendar
            selectList={this.selectCourseList}
            list={this.calendarList}
            maxDays={this.courseNum}
            nextMonth={(date: Date) => this.getList(date)}
            prevMonth={(date: Date) => this.getList(date)}
            selectDay={this.onSelectDay}
          />
        </div>

        <Cell
          class={[styles.arrangeCell, 'mb12']}
          v-slots={{
            title: () => (
              <div class={styles.rTitle}>
                <span>已选择课程时间</span>
              </div>
            ),
            label: () => (
              <div class={styles.rTag}>
                {this.showSelectList.map((item: any) => (
                  <>
                    <Tag
                      plain
                      round
                      closeable
                      size="large"
                      type="primary"
                      class={styles.tag}
                      onClose={() => this.onCloseTag(item)}
                    >
                      {item.title}
                    </Tag>
                    <br />
                  </>
                ))}
              </div>
            )
          }}
        ></Cell>
        <Popup show={this.selectStatus} class={styles.selectPopup}>
          <div class={styles.selectContainer}>
            <div class={styles.rTitle}>
              <span>提示</span>
            </div>
            <div class={styles.selectPopupContent}>
              <p class={styles.desc}>
                {this.selectType === 'noEnough' && !this.coursePlanStatus
                  ? '您所选择的上课时间未达到您输入的课时数，系统根据已选时间将自动按周顺延排课。'
                  : '您已选择以下上课时间段，时间段会暂时锁定，锁定期间学员不可购买该时间段课程。'}
              </p>
              {this.coursePlanList &&
                this.coursePlanList.length > 0 &&
                this.coursePlanStatus && (
                  <p class={styles.times}>
                    {this.coursePlanList.map((item: any) => (
                      <span>
                        {dayjs(item.startTime || new Date()).format(
                          'YYYY-MM-DD'
                        )}{' '}
                        {dayjs(item.startTime || new Date()).format('HH:mm')}~
                        {dayjs(item.endTime || new Date()).format('HH:mm')}
                      </span>
                    ))}
                  </p>
                )}
            </div>

            <div class={styles.selectBtn}>
              <Button
                class={styles.btn}
                type="primary"
                round
                block
                plain
                onClick={this.onReset}
              >
                {this.selectType === 'noEnough' ? '继续选择' : '重新选择'}
              </Button>
              <Button
                class={styles.btn}
                type="primary"
                round
                block
                onClick={this.onSure}
              >
                确认
              </Button>
            </div>
          </div>
        </Popup>
      </>
    )
  }
})