|
|
@@ -50,11 +50,13 @@ export default defineComponent({
|
|
|
selectStatus: false,
|
|
|
coursePlanList: [] as any,
|
|
|
calendarDate: dayjs().add(1, 'day').toDate() as Date, // 日历当前时间
|
|
|
- settingStatus: true // 是否设置陪练课
|
|
|
+ settingStatus: true, // 是否设置陪练课
|
|
|
+ loadDataStatus: true // 是否加载数据
|
|
|
}
|
|
|
},
|
|
|
async mounted() {
|
|
|
try {
|
|
|
+ this.loadDataStatus = true
|
|
|
const res = await request.get(
|
|
|
'/api-student/courseSchedule/getTeacherSubjectPrice',
|
|
|
{
|
|
|
@@ -63,6 +65,7 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
+ this.loadDataStatus = false
|
|
|
const result = res.data || []
|
|
|
if (result.length > 0) {
|
|
|
const userSubjectId = this.subjectId || state.user.data?.subjectId
|
|
|
@@ -92,7 +95,9 @@ export default defineComponent({
|
|
|
} else {
|
|
|
this.settingStatus = false
|
|
|
}
|
|
|
- } catch {}
|
|
|
+ } catch {
|
|
|
+ this.loadDataStatus = false
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
showSelectList() {
|
|
|
@@ -361,192 +366,196 @@ export default defineComponent({
|
|
|
render() {
|
|
|
return (
|
|
|
<>
|
|
|
- {this.settingStatus ? (
|
|
|
- <>
|
|
|
- <div class={styles.practice}>
|
|
|
- <CellGroup class={styles.group} border={false}>
|
|
|
+ {!this.loadDataStatus &&
|
|
|
+ (this.settingStatus ? (
|
|
|
+ <>
|
|
|
+ <div class={styles.practice}>
|
|
|
+ <CellGroup class={styles.group} border={false}>
|
|
|
+ <Cell
|
|
|
+ title="陪练课收费"
|
|
|
+ v-slots={{
|
|
|
+ default: () => (
|
|
|
+ <div class={styles.price}>
|
|
|
+ <span>
|
|
|
+ ¥
|
|
|
+ {(this as any).$filters.moneyFormat(
|
|
|
+ this.subjectInfo.subjectPrice
|
|
|
+ )}
|
|
|
+ </span>
|
|
|
+ /{this.subjectInfo.courseMinutes}分钟
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Cell
|
|
|
+ title="选择专业"
|
|
|
+ isLink
|
|
|
+ value={this.subjectInfo.subjectName}
|
|
|
+ onClick={() => (this.subjectStatus = true)}
|
|
|
+ />
|
|
|
+ <Cell
|
|
|
+ title="课时数"
|
|
|
+ v-slots={{
|
|
|
+ default: () => (
|
|
|
+ <Stepper
|
|
|
+ v-model={this.courseNum}
|
|
|
+ theme="round"
|
|
|
+ max={12}
|
|
|
+ min={1}
|
|
|
+ buttonSize={22}
|
|
|
+ onChange={() => {
|
|
|
+ this.selectCourseList = []
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </CellGroup>
|
|
|
+
|
|
|
+ {this.calendarStatus && (
|
|
|
+ <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}
|
|
|
+ v-model:calendarDate={this.calendarDate}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
<Cell
|
|
|
- title="陪练课收费"
|
|
|
+ class={[styles.arrangeCell]}
|
|
|
v-slots={{
|
|
|
- default: () => (
|
|
|
- <div class={styles.price}>
|
|
|
- <span>
|
|
|
- ¥
|
|
|
- {(this as any).$filters.moneyFormat(
|
|
|
- this.subjectInfo.subjectPrice
|
|
|
- )}
|
|
|
- </span>
|
|
|
- /{this.subjectInfo.courseMinutes}分钟
|
|
|
+ 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
|
|
|
- title="选择专业"
|
|
|
- isLink
|
|
|
- value={this.subjectInfo.subjectName}
|
|
|
- onClick={() => (this.subjectStatus = true)}
|
|
|
- />
|
|
|
- <Cell
|
|
|
- title="课时数"
|
|
|
- v-slots={{
|
|
|
- default: () => (
|
|
|
- <Stepper
|
|
|
- v-model={this.courseNum}
|
|
|
- theme="round"
|
|
|
- max={12}
|
|
|
- min={1}
|
|
|
- buttonSize={22}
|
|
|
- onChange={() => {
|
|
|
- this.selectCourseList = []
|
|
|
- }}
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- </CellGroup>
|
|
|
-
|
|
|
- {this.calendarStatus && (
|
|
|
- <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}
|
|
|
- v-model:calendarDate={this.calendarDate}
|
|
|
- />
|
|
|
- </div>
|
|
|
- )}
|
|
|
+ ></Cell>
|
|
|
|
|
|
- <Cell
|
|
|
- class={[styles.arrangeCell]}
|
|
|
- v-slots={{
|
|
|
- title: () => (
|
|
|
+ <Popup show={this.selectStatus} class={styles.selectPopup}>
|
|
|
+ <div class={styles.selectContainer}>
|
|
|
<div class={styles.rTitle}>
|
|
|
- <span>已选择课程时间</span>
|
|
|
+ <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 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>
|
|
|
- )
|
|
|
- }}
|
|
|
- ></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 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>
|
|
|
- </div>
|
|
|
- </Popup>
|
|
|
+ </Popup>
|
|
|
|
|
|
- <ActionSheet
|
|
|
- show={this.subjectStatus}
|
|
|
- actions={this.teacherSubjectList}
|
|
|
- cancelText="取消"
|
|
|
- closeOnClickAction
|
|
|
- onCancel={() => (this.subjectStatus = false)}
|
|
|
- onSelect={(item: any) => {
|
|
|
- const {
|
|
|
- subjectName,
|
|
|
- subjectPrice,
|
|
|
- courseMinutes,
|
|
|
- subjectId
|
|
|
- } = item
|
|
|
- this.subjectInfo = {
|
|
|
- subjectPrice,
|
|
|
- courseMinutes,
|
|
|
- subjectName,
|
|
|
- subjectId
|
|
|
- }
|
|
|
- this.subjectStatus = false
|
|
|
- }}
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={['btnGroup', styles.fixedBtn]}
|
|
|
- style={{ background: '#fff', paddingTop: '10px' }}
|
|
|
- >
|
|
|
- <Button block round type="primary" onClick={this.onSubmit}>
|
|
|
- 确认约课
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <ColResult
|
|
|
- btnStatus={false}
|
|
|
- classImgSize="SMALL"
|
|
|
- tips="老师暂未开放陪练课"
|
|
|
- />
|
|
|
- )}
|
|
|
+ <ActionSheet
|
|
|
+ show={this.subjectStatus}
|
|
|
+ actions={this.teacherSubjectList}
|
|
|
+ cancelText="取消"
|
|
|
+ closeOnClickAction
|
|
|
+ onCancel={() => (this.subjectStatus = false)}
|
|
|
+ onSelect={(item: any) => {
|
|
|
+ const {
|
|
|
+ subjectName,
|
|
|
+ subjectPrice,
|
|
|
+ courseMinutes,
|
|
|
+ subjectId
|
|
|
+ } = item
|
|
|
+ this.subjectInfo = {
|
|
|
+ subjectPrice,
|
|
|
+ courseMinutes,
|
|
|
+ subjectName,
|
|
|
+ subjectId
|
|
|
+ }
|
|
|
+ this.subjectStatus = false
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={['btnGroup', styles.fixedBtn]}
|
|
|
+ style={{ background: '#fff', paddingTop: '10px' }}
|
|
|
+ >
|
|
|
+ <Button block round type="primary" onClick={this.onSubmit}>
|
|
|
+ 确认约课
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <ColResult
|
|
|
+ btnStatus={false}
|
|
|
+ classImgSize="SMALL"
|
|
|
+ tips="老师暂未开放陪练课"
|
|
|
+ />
|
|
|
+ ))}
|
|
|
</>
|
|
|
)
|
|
|
}
|
