h5-colexiu/src/teacher/practice-class/model/timer.tsx

import { Button, Col, Row, Sticky, Tag } from 'vant'
import { defineComponent } from 'vue'
import styles from './timer.module.less'
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)
dayjs.extend(isSameOrBefore)

export default defineComponent({
  name: 'timer',
  props: {
    onChoice: {
      type: Function,
      default: (item: any) => {}
    },
    courseMinutes: {
      type: Number,
      default: 25
    },
    freeMinutes: {
      type: Number,
      default: 5
    },
    startSetting: {
      type: String,
      default: '08:00'
    },
    endSetting: {
      type: String,
      default: '18:00'
    }
  },
  data() {
    return {
      timerList: [],
      list: [] as any,
      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  },
  mounted() {
    this.list = this.timerInit(
      this.startSetting,
      this.endSetting,
      this.courseMinutes + this.freeMinutes || 30
    )
  },
  methods: {
    timerInit(startTime: string, endTime: string, space: number) {
      let start = dayjs(startTime, 'HH:mm')
      const end = dayjs(endTime, 'HH:mm')

      const timerList: any = []
      while (start.add(space, 'minute').isSameOrBefore(dayjs(end))) {
        const item = {
          startTime: start.format('HH:mm'),
          endTime: start.add(space, 'minute').format('HH:mm'),
          status: false
        }
        // 一周
        timerList.push(item)
        for (let i = 0; i < 7; i++) {}
        start = start.add(space, 'minute')
      }
      const list: any = []
      timerList.forEach((item: any) => {
        const weekList: any = []
        for (let i = 0; i < 7; i++) {
          weekList.push({
            ...item
          })
        }
        list.push(weekList)
      })
      return list
    },
    btnStatus(index: number, type: 'row' | 'col') {
      if (type === 'row') {
        return this.list.every((item: any) => {
          return item[index].status
        })
      }

      if (type == 'col') {
        return this.list[index].every((item: any) => item.status)
      }
    },
    choice(index: number, type: 'row' | 'col', status?: boolean) {
      if (type === 'row') {
        this.list.forEach((item: any, i: number) => {
          const type = !status ? true : false
          item[index].status = type
        })
      }

      if (type == 'col') {
        this.list[index].forEach((item: any, i: number) => {
          const type = !status ? true : false
          item.status = type
        })
      }
    },
    onSubmit() {
      const list = this.list
      const weekList = {
        monday: [],
        tuesday: [],
        wednesday: [],
        thursday: [],
        friday: [],
        saturday: [],
        sunday: []
      }
      const weekType = [
        'monday',
        'tuesday',
        'wednesday',
        'thursday',
        'friday',
        'saturday',
        'sunday'
      ]
      let status = false
      list.forEach((item: any, i: number) => {
        item.forEach((times: any, j: number) => {
          if (times.status) {
            status = true
            weekList[weekType[j]].push({
              startTime: dayjs(times.startTime, 'HH:mm').format('HH:mm:ss'),
              endTime: dayjs(times.endTime, 'HH:mm').format('HH:mm:ss')
            })
          }
        })
      })
      this.onChoice && this.onChoice(weekList, status)
    }
  },
  render() {
    return (
      <div class={styles.timer}>
        <div class={styles.tips}>
          <div class={styles.tipsTitle}>请选择陪练开始时间</div>
          <div class={styles.tipsTime}>
            陪练课单课时时长为 <span>{this.courseMinutes}</span> 分钟
          </div>
        </div>

        <div class={[styles.timerContainer, 'mb12']}>
          <Row gutter={5}>
            <Col span={3}></Col>
            {this.weekList.map((item: any) => (
              <Col span={3}>
                <span class={styles.tag}>{item}</span>
              </Col>
            ))}
          </Row>

          <Row gutter={5}>
            <Col span={3}></Col>
            {this.weekList.map((item: any, index: number) => (
              <Col span={3}>
                <span
                  class={[
                    styles.tag,
                    this.btnStatus(index, 'row') && styles.active
                  ]}
                  onClick={() =>
                    this.choice(index, 'row', this.btnStatus(index, 'row'))
                  }
                  title={item}
                >
                  全选
                </span>
              </Col>
            ))}
          </Row>

          {this.list.map((item: any, index: number) => (
            <Row gutter={5}>
              <Col span={3}>
                <span
                  class={[
                    styles.tag,
                    this.btnStatus(index, 'col') && styles.active
                  ]}
                  onClick={() =>
                    this.choice(index, 'col', this.btnStatus(index, 'col'))
                  }
                >
                  全选
                </span>
              </Col>
              {item.map((week: any) => (
                <Col span={3}>
                  <span
                    class={[styles.tag, week.status && styles.select]}
                    title={week}
                    style={{ color: '#333333' }}
                    onClick={() => (week.status = !week.status)}
                  >
                    {week.startTime}
                  </span>
                </Col>
              ))}
            </Row>
          ))}
        </div>

        <Sticky offsetBottom={0} position="bottom">
          <div class={'btnGroup'}>
            <Button block round type="primary" onClick={this.onSubmit}>
              确定
            </Button>
          </div>
        </Sticky>
      </div>
    )
  }
})