|
|
@@ -0,0 +1,338 @@
|
|
|
+import { Button, Col, Radio, RadioGroup, 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'
|
|
|
+import iconQuestion from '../icon-question.png'
|
|
|
+import ColField from '@/components/col-field'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { browser } from '@/helpers/utils'
|
|
|
+import { postMessage } from '@/helpers/native-message'
|
|
|
+dayjs.extend(customParseFormat)
|
|
|
+dayjs.extend(isSameOrBefore)
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'timer',
|
|
|
+ props: {
|
|
|
+ onChoice: {
|
|
|
+ // 点击选择时间
|
|
|
+ type: Function,
|
|
|
+ default: (item: any) => {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startSetting: '08:00', // 开始设置时间
|
|
|
+ endSetting: '18:00', // 结束设置时间
|
|
|
+ freeMinutes: 5, // 空余时长
|
|
|
+ courseMinutes: 25, // // 课程时长
|
|
|
+ timerObject: {},
|
|
|
+ chargeTypeArr: {
|
|
|
+ 0: '否',
|
|
|
+ 1: '是'
|
|
|
+ },
|
|
|
+ timerList: [],
|
|
|
+ skipHolidayFlag: 1,
|
|
|
+ list: [] as any,
|
|
|
+ weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
+ weekType: [
|
|
|
+ 'monday',
|
|
|
+ 'tuesday',
|
|
|
+ 'wednesday',
|
|
|
+ 'thursday',
|
|
|
+ 'friday',
|
|
|
+ 'saturday',
|
|
|
+ 'sunday'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ this._initFetch()
|
|
|
+ this.list = this.timerInit(
|
|
|
+ this.startSetting,
|
|
|
+ this.endSetting,
|
|
|
+ this.courseMinutes + this.freeMinutes || 30
|
|
|
+ )
|
|
|
+ console.log(this.endSetting)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async _initFetch() {
|
|
|
+ try {
|
|
|
+ // 获取手续费和分钟数
|
|
|
+ const config = await request.get(
|
|
|
+ '/api-teacher/sysConfig/queryByParamNameList',
|
|
|
+ {
|
|
|
+ params: {
|
|
|
+ paramNames:
|
|
|
+ 'practice_service_fee,course_start_setting,course_end_setting'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ const configData = config.data || []
|
|
|
+ configData.forEach((item: any) => {
|
|
|
+ if (item.paramName === 'course_start_setting') {
|
|
|
+ this.startSetting = item.paramValue
|
|
|
+ }
|
|
|
+ if (item.paramName === 'course_end_setting') {
|
|
|
+ this.endSetting = item.paramValue
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 获取课程设置
|
|
|
+ const setting = await request.post(
|
|
|
+ '/api-teacher/teacherFreeTime/getDetail',
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ defaultFlag: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ const sr = setting.data
|
|
|
+ if (sr) {
|
|
|
+ this.courseMinutes = sr.courseMinutes
|
|
|
+ this.freeMinutes = sr.freeMinutes
|
|
|
+
|
|
|
+ this.timerObject = {
|
|
|
+ monday: sr.monday ? JSON.parse(sr.monday) : [],
|
|
|
+ tuesday: sr.tuesday ? JSON.parse(sr.tuesday) : [],
|
|
|
+ wednesday: sr.wednesday ? JSON.parse(sr.wednesday) : [],
|
|
|
+ thursday: sr.thursday ? JSON.parse(sr.thursday) : [],
|
|
|
+ friday: sr.friday ? JSON.parse(sr.friday) : [],
|
|
|
+ saturday: sr.saturday ? JSON.parse(sr.saturday) : [],
|
|
|
+ sunday: sr.sunday ? JSON.parse(sr.sunday) : []
|
|
|
+ }
|
|
|
+
|
|
|
+ const tempIds: any = []
|
|
|
+ const tempPrices: any = []
|
|
|
+ const subjectPrice = sr.subjectPrice || []
|
|
|
+ subjectPrice.forEach((item: any) => {
|
|
|
+ tempIds.push(item.subjectId)
|
|
|
+ tempPrices.push({
|
|
|
+ subjectId: item.subjectId,
|
|
|
+ subjectPrice: item.subjectPrice,
|
|
|
+ subjectName: item.subjectName
|
|
|
+ })
|
|
|
+ })
|
|
|
+ const to = this.timerObject
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ } catch {}
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+
|
|
|
+ const tempList = this._initData(list)
|
|
|
+ return tempList
|
|
|
+ },
|
|
|
+ _initData(list: Array<any>) {
|
|
|
+ // 回显数据
|
|
|
+ const weekType = this.weekType
|
|
|
+ const timerObject = this.timerObject
|
|
|
+ list.forEach((item: any) => {
|
|
|
+ item.forEach((slot: any, slotIndex: number) => {
|
|
|
+ const dayList = timerObject[weekType[slotIndex]]
|
|
|
+ const startTime = dayjs(slot.startTime, 'HH:mm').format('HH:mm:ss')
|
|
|
+ const isExist = dayList?.some(
|
|
|
+ (course: any) => course.startTime === startTime
|
|
|
+ )
|
|
|
+ isExist && (slot.status = true)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onSubmit() {
|
|
|
+ const list = this.list
|
|
|
+ const weekList = {
|
|
|
+ monday: [],
|
|
|
+ tuesday: [],
|
|
|
+ wednesday: [],
|
|
|
+ thursday: [],
|
|
|
+ friday: [],
|
|
|
+ saturday: [],
|
|
|
+ sunday: []
|
|
|
+ }
|
|
|
+ const weekType = this.weekType
|
|
|
+ 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').subtract(this.freeMinutes, 'minute').format('HH:mm:ss')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ await request.post('/api-teacher/teacherFreeTime/upSet', {
|
|
|
+ ...weekList,
|
|
|
+ skipHolidayFlag: this.skipHolidayFlag
|
|
|
+ })
|
|
|
+ if(browser().isApp) {
|
|
|
+ postMessage({
|
|
|
+ api: 'back'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div class={styles.timer}>
|
|
|
+ <ColField border={false} class={styles.colField}>
|
|
|
+ {{
|
|
|
+ title: () => <div class={styles.title}>
|
|
|
+ <img src={iconQuestion}></img>
|
|
|
+ 是否跳过节假日
|
|
|
+ </div>,
|
|
|
+ default: () => <RadioGroup
|
|
|
+ class={styles['radio-group']}
|
|
|
+ modelValue={this.skipHolidayFlag}
|
|
|
+ onUpdate:modelValue={val => (this.skipHolidayFlag = val)}
|
|
|
+ >
|
|
|
+ {['1', '0'].map((item: string) => {
|
|
|
+ const isActive =
|
|
|
+ Number(item) === Number(this.skipHolidayFlag)
|
|
|
+ const type = isActive ? 'primary' : 'default'
|
|
|
+ return (
|
|
|
+ <Radio class={styles.radio} name={item}>
|
|
|
+ <Tag size="large" plain={isActive} type={type}>
|
|
|
+ {this.chargeTypeArr[item]}
|
|
|
+ </Tag>
|
|
|
+ </Radio>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </RadioGroup>
|
|
|
+ }}
|
|
|
+ </ColField>
|
|
|
+ {/* <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>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
