更新

src/components/col-calendar/index.module.less

@@ -77,66 +77,44 @@
   }
 }
 
-.calenderPopup {
-  border-radius: 8px;
-  overflow: hidden;
-  padding: 18px 12px 28px;
-  .popup {
-    width: 312px;
-    background: #ffffff;
+.container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-bottom: 14px;
+}
+.noDay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 25px 0 35px;
+  .clock {
+    width: 30px;
   }
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    font-size: 18px;
+  span {
+    padding-left: 10px;
+    font-size: 14px;
     font-weight: 500;
-    color: #333333;
-    line-height: 25px;
-    padding: 0 20px 25px;
-  }
-  .container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding-bottom: 14px;
-    & > div {
-      flex-basis: 33.33%;
-      text-align: center;
-    }
-  }
-  .noDay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    padding: 25px 0 35px;
-    .clock {
-      width: 30px;
-    }
-    span {
-      padding-left: 10px;
-      font-size: 14px;
-      font-weight: 500;
-      color: #999;
-    }
+    color: #999;
   }
-  .tag {
-    padding: 8px 10px;
-    margin-bottom: 10px;
-    font-size: 12px;
-    color: #333333 !important;
-    border-color: #d8d8d8 !important;
+}
+// .tag {
+//   background-color: red;
+//   padding: 8px 10px;
+//   margin-bottom: 10px;
+//   font-size: 12px;
+//   color: #333333 !important;
+//   border-color: #d8d8d8 !important;
 
-    &.active {
-      color: var(--van-primary) !important;
-      background: #e0f7f3;
-      border-color: var(--van-primary) !important;
-    }
-  }
+//   &.active {
+//     color: var(--van-primary) !important;
+//     background: #e0f7f3;
+//     border-color: var(--van-primary) !important;
+//   }
+// }
 
-  .dayBtn {
-    display: flex;
-    align-items: center;
-  }
+.dayBtn {
+  display: flex;
+  align-items: center;
 }

src/components/col-calendar/index.tsx

@@ -5,7 +5,7 @@ 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 { ElButton, ElDialog, ElMessage } from 'element-plus'
+import { ElButton, ElDialog, ElMessage, ElTag } from 'element-plus'
 
 export default defineComponent({
   name: 'calendar',
@@ -215,7 +215,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      <div>
         <Calendar
           class={styles.calendar}
           showTitle={false}
@@ -253,117 +253,60 @@ export default defineComponent({
         <ElDialog
           modelValue={this.show}
           onUpdate:modelValue={e => (this.show = e)}
-          class={styles.calenderPopup}
+          title={this.selectDayTitle}
+          width={'520px'}
         >
-          <div class={styles.popup}>
-            <div class={styles.title}>
-              <span>{this.selectDayTitle}</span>
-            </div>
-
-            <div class={styles.container}>
-              {this.dayList.map((item: any) => (
-                <div>
-                  <Tag
-                    round
-                    class={[styles.tag, item.checked ? styles.active : '']}
-                    size="large"
-                    plain
-                    onClick={() => this.onSelectDay(item)}
-                  >
-                    {item.start}～{item.end}
-                  </Tag>
-                </div>
-              ))}
-              {this.dayList.length <= 0 && (
-                <div class={styles.noDay}>
-                  <Image src={IconClock} class={styles.clock} fit="cover" />
-                  <span>今日已约满</span>
-                </div>
-              )}
-            </div>
-
-            <div class={[styles.dayBtn, 'flex']}>
-              <ElButton
-                round
-                plain
-                style={{ width: '33.33%', marginRight: '10px' }}
-                onClick={() => {
-                  this.show = false
-                  this.selectDays = []
-                }}
-              >
-                取消
-              </ElButton>
-              <ElButton
-                type="primary"
-                round
-                disabled={!(this.selectDays.length > 0)}
-                onClick={() => {
-                  this.selectDay && this.selectDay(this.selectDays)
-                  this.show = false
-                }}
-              >
-                确认
-              </ElButton>
-            </div>
+          <div class={[styles.container, 'flex flex-wrap']}>
+            {this.dayList.map((item: any) => (
+              <div class="w-1/4 mb-2">
+                <ElTag
+                  round
+                  class={[
+                    'cursor-pointer w-28 !border-[#2DC7AA] !color-[#2DC7AA]'
+                  ]}
+                  size="large"
+                  onClick={() => this.onSelectDay(item)}
+                  effect={item.checked ? 'dark' : 'light'}
+                >
+                  {item.start}～{item.end}
+                </ElTag>
+              </div>
+            ))}
+            {this.dayList.length <= 0 && (
+              <div class={styles.noDay}>
+                <Image src={IconClock} class={styles.clock} fit="cover" />
+                <span>今日已约满</span>
+              </div>
+            )}
           </div>
-        </ElDialog>
-        {/* <Popup show={this.show} class={styles.calenderPopup}>
-          <div class={styles.popup}>
-            <div class={styles.title}>
-              <span>{this.selectDayTitle}</span>
-            </div>
-
-            <div class={styles.container}>
-              {this.dayList.map((item: any) => (
-                <div>
-                  <Tag
-                    round
-                    class={[styles.tag, item.checked ? styles.active : '']}
-                    size="large"
-                    plain
-                    onClick={() => this.onSelectDay(item)}
-                  >
-                    {item.start}～{item.end}
-                  </Tag>
-                </div>
-              ))}
-              {this.dayList.length <= 0 && (
-                <div class={styles.noDay}>
-                  <Image src={IconClock} class={styles.clock} fit="cover" />
-                  <span>今日已约满</span>
-                </div>
-              )}
-            </div>
 
-            <div class={styles.dayBtn}>
-              <Button
-                round
-                plain
-                style={{ width: '33.33%', marginRight: '10px' }}
-                onClick={() => {
-                  this.show = false
-                  this.selectDays = []
-                }}
-              >
-                取消
-              </Button>
-              <Button
-                type="primary"
-                block
-                round
-                disabled={!(this.selectDays.length > 0)}
-                onClick={() => {
-                  this.selectDay && this.selectDay(this.selectDays)
-                  this.show = false
-                }}
-              >
-                确认
-              </Button>
-            </div>
+          <div class={[styles.dayBtn, 'flex justify-center mt-4']}>
+            <ElButton
+              round
+              plain
+              class="!w-40 !h-[38px]"
+              onClick={() => {
+                this.show = false
+                this.selectDays = []
+              }}
+            >
+              取消
+            </ElButton>
+            <ElButton
+              type="primary"
+              round
+              class="!w-40 !h-[38px]"
+              disabled={!(this.selectDays.length > 0)}
+              onClick={() => {
+                this.selectDay && this.selectDay(this.selectDays)
+                this.show = false
+              }}
+            >
+              确认
+            </ElButton>
           </div>
-        </Popup> */}
-      </>
+        </ElDialog>
+      </div>
     )
   }
 })

src/helpers/request.ts

@@ -31,11 +31,11 @@ let initRequest = false
 
 request.interceptors.request.use(
   (url, options: any) => {
-    console.log(url)
+    // console.log(url)
     initRequest = options.initRequest || false
     const Authorization = getAuth() || ''
     const authHeaders: any = {}
-    console.log(/open/gi.test(url))
+    // console.log(/open/gi.test(url))
     if (
       Authorization &&
       ![

src/views/App.tsx

@@ -12,7 +12,7 @@ import silder from '@/components/silder'
 export default defineComponent({
   components: { silder },
   name: 'App',
-  async mounted() {
+  async created() {
     // 获取用户信息
     await getUserInfo()
   },

src/views/user-info/live-operation/course-class/index.module.less

@@ -0,0 +1,18 @@
+.courseContent {
+  :global {
+    .el-dialog {
+      --el-dialog-width: 375px !important;
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+    .el-dialog__footer {
+      background-color: #f6f8f9;
+    }
+
+    .el-tabs__nav-wrap::after {
+      background-color: transparent;
+    }
+  }
+}

src/views/user-info/live-operation/course-class/index.tsx

@@ -0,0 +1,230 @@
+import ColCropper from '@/components/col-cropper'
+import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import {
+  dayjs,
+  ElButton,
+  ElCol,
+  ElDatePicker,
+  ElForm,
+  ElFormItem,
+  ElImage,
+  ElInput,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+  ElTabPane,
+  ElTabs
+} from 'element-plus'
+import { defineComponent } from 'vue'
+import { createState } from '../createState'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'course-class',
+  data() {
+    return {
+      typeDateTime: 'start',
+      dateStatus: false,
+      currentDate: new Date(),
+      minDate: dayjs().toDate(),
+      maxDate: new Date()
+    }
+  },
+  mounted() {
+    // this.maxDate = dayjs(createState.selectCourseList[0].startTime)
+    //   .subtract(1, 'day')
+    //   .toDate()
+
+    // createState.live.salesStartDate =
+    //   createState.live.salesStartDate ||
+    //   dayjs(this.minDate).format('YYYY-MM-DD')
+    // createState.live.salesEndDate =
+    //   createState.live.salesEndDate || dayjs(this.maxDate).format('YYYY-MM-DD')
+    console.log(createState.templateList, '1212')
+  },
+  methods: {
+    tabChange(name: number) {
+      createState.tabIndex = name
+    },
+    selectImg(val: string) {
+      createState.live.backgroundPic = ''
+      createState.live.backgroundPicTemplate = val
+    },
+    onFormatter(e: any) {
+      e.target.value = verifiyNumberInteger(e.target.value)
+    },
+    onConfirm(val: any) {
+      if (this.typeDateTime === 'start') {
+        createState.live.salesStartDate = dayjs(val).format('YYYY-MM-DD')
+        if (
+          createState.live.salesEndDate &&
+          dayjs(createState.live.salesStartDate).isAfter(
+            dayjs(createState.live.salesEndDate)
+          )
+        ) {
+          createState.live.salesEndDate = ''
+        }
+      } else if (this.typeDateTime === 'end') {
+        createState.live.salesEndDate = dayjs(val).format('YYYY-MM-DD')
+      }
+      this.dateStatus = false
+    }
+  },
+  render() {
+    return (
+      <div class={styles.courseContent}>
+        <ElForm
+          class="px-[200px] pb-10 pt-7"
+          size="large"
+          ref="form"
+          labelWidth={'120px'}
+          labelPosition="left"
+          model={createState.live}
+        >
+          <ElFormItem
+            label="开售日期"
+            prop="salesStartDate"
+            rules={[
+              {
+                required: true,
+                message: '请输入开售日期'
+              }
+            ]}
+          >
+            <ElDatePicker
+              class="!w-full"
+              v-model={createState.live.salesStartDate}
+              placeholder="请输入开售日期"
+              type="date"
+            />
+          </ElFormItem>
+          <ElFormItem
+            label="停售日期"
+            prop="salesEndDate"
+            rules={[
+              {
+                required: true,
+                message: '请输入停售日期'
+              }
+            ]}
+          >
+            <ElDatePicker
+              class="!w-full"
+              v-model={createState.live.salesEndDate}
+              placeholder="请输入停售日期"
+              type="date"
+            />
+          </ElFormItem>
+          <ElFormItem
+            label="最低开课人数"
+            prop="mixStudentNum"
+            rules={[
+              {
+                required: true,
+                message: '请输入最低开课人数'
+              }
+            ]}
+          >
+            <ElInput
+              placeholder="请输入最低开课人数"
+              v-model={createState.live.mixStudentNum}
+              // @ts-ignore
+              onKeyup={this.onFormatter}
+              maxlength={5}
+              v-slots={{
+                append: () => <span class="text-base text-[#333]">人</span>
+              }}
+            />
+          </ElFormItem>
+          <ElFormItem label="课程封面" class="!mb-0" required>
+            <ElTabs
+              v-model={createState.tabIndex}
+              class={styles.tabs}
+              onTab-change={(name: any) => {
+                this.tabChange(name)
+              }}
+            >
+              <ElTabPane label="图片模板" name={1}></ElTabPane>
+              <ElTabPane label="自定义模板" name={2}></ElTabPane>
+            </ElTabs>
+          </ElFormItem>
+
+          {createState.tabIndex === 1 && (
+            <ElFormItem
+              prop="backgroundPicTemplate"
+              rules={[
+                {
+                  required: true,
+                  message: '请上传课程封面'
+                }
+              ]}
+            >
+              <ElRadioGroup v-model={createState.live.backgroundPicTemplate}>
+                <ElRow>
+                  {createState.templateList.map((item: any) => (
+                    <ElCol span={10} class="mb-3 cursor-pointer">
+                      <div
+                        class="w-40 relative rounded-xl overflow-hidden border"
+                        onClick={() => {
+                          this.selectImg(item)
+                        }}
+                      >
+                        <ElImage src={item} class="align-middle" />
+                        <ElRadio
+                          label={item}
+                          class="!absolute bottom-2 right-0 !h-auto z-10"
+                        >
+                          {''}
+                        </ElRadio>
+                      </div>
+                    </ElCol>
+                  ))}
+                </ElRow>
+              </ElRadioGroup>
+            </ElFormItem>
+          )}
+
+          {createState.tabIndex === 2 && (
+            <ElFormItem
+              prop="backgroundPic"
+              rules={[
+                {
+                  required: true,
+                  message: '请上传课程封面',
+                  trigger: 'change'
+                }
+              ]}
+            >
+              <ColCropper
+                modelValue={createState.live.backgroundPic}
+                bucket="video-course"
+                cropUploadSuccess={(data: any) => {
+                  createState.live.backgroundPic = data
+                  createState.live.backgroundPicTemplate = ''
+                }}
+                options={{
+                  fixedNumber: [3, 2],
+                  autoCropWidth: 300,
+                  autoCropHeight: 200
+                }}
+              />
+            </ElFormItem>
+          )}
+        </ElForm>
+        <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
+          <ElButton
+            class="!w-40 !h-[38px]"
+            onClick={() => {
+              console.log(true)
+            }}
+          >
+            上一步
+          </ElButton>
+          <ElButton type="primary" class="!w-40 !h-[38px]" onClick={() => {}}>
+            下一步
+          </ElButton>
+        </div>
+      </div>
+    )
+  }
+})

src/views/user-info/live-operation/course-content/index.module.less

@@ -31,40 +31,31 @@
     }
   }
 
-  .selectPopup {
-    width: 312px;
-    background: #ffffff;
-    border-radius: 8px;
-    .selectContainer {
-      padding: 18px 14px;
-    }
-    .rTitle {
-      font-size: 18px;
-    }
-    .selectPopupContent {
-      padding: 20px 0;
-    }
-    .desc,
-    .times {
-      font-size: 14px;
-      color: #666666;
-      line-height: 20px;
-    }
+  .desc,
+  .times {
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+  }
 
-    .times {
-      padding-top: 15px;
-      span {
-        display: block;
-      }
+  .times {
+    padding-top: 10px;
+    span {
+      display: block;
+      padding-bottom: 5px;
     }
+  }
+
+  .selectBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 15px;
+  }
 
-    .selectBtn {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .btn {
-        width: 48%;
-      }
+  :global {
+    .el-dialog__body {
+      padding-top: 10px;
     }
   }
 }

src/views/user-info/live-operation/course-content/index.tsx

@@ -7,7 +7,7 @@ import { createState } from '../createState'
 import { state } from '@/state'
 import { getWeekCh } from '@/helpers/utils'
 import ColCalendar from '@/components/col-calendar'
-import { ElButton, ElMessageBox } from 'element-plus'
+import { ElButton, ElDialog, ElMessageBox, ElTag } from 'element-plus'
 
 export default defineComponent({
   name: 'arrange',
@@ -106,8 +106,10 @@ export default defineComponent({
       createState.selectCourseList = [...tempList]
     },
     onCloseTag(item: any) {
-      ElMessageBox.confirm('确定删除该课程吗？', '提示', {
-        type: 'warning'
+      Dialog.confirm({
+        title: '提示',
+        message: '您是否要删除该选择的课程？',
+        confirmButtonColor: 'var(--van-primary)'
       }).then(() => {
         const index = createState.selectCourseList.findIndex(
           (course: any) => course.startTime === item.startTime
@@ -164,8 +166,10 @@ export default defineComponent({
       } catch (e: any) {
         // 报错时需要重置日历表的数据
         const message = e.message
-        ElMessageBox.confirm(message, '提示', {
-          type: 'warning'
+        Dialog.alert({
+          title: '提示',
+          confirmButtonColor: 'var(--van-primary)',
+          message
         }).then(() => {
           this.getList(this.calendarDate || new Date())
           createState.selectCourseList = []
@@ -196,17 +200,28 @@ export default defineComponent({
       } else if (this.selectType === 'noEnough') {
         this.selectStatus = false
       }
-      createState.live.coursePlanList = []
+      // 只能重置课程时间
+      createState.live.coursePlanList.forEach((item: any) => {
+        item.startTime = ''
+        item.endTime = ''
+      })
+
       setTimeout(() => {
         createState.coursePlanStatus = false
       }, 500)
     },
     async onSure() {
       // 判断是否有锁课状态 或 是锁课类型的 并且已经有课的
-      if (
-        this.selectType === 'enough' ||
-        createState.live.coursePlanList.length > 0
-      ) {
+      console.log(
+        this.selectType,
+        createState.coursePlanStatus,
+        createState.live.coursePlanList
+      )
+      let courseLength = 0
+      createState.live.coursePlanList.forEach((item: any) => {
+        item.startTime && courseLength++
+      })
+      if (this.selectType === 'enough' || courseLength > 0) {
         this.selectStatus = false
         createState.active = 4
         return
@@ -244,17 +259,16 @@ export default defineComponent({
             <div class={styles.rTag}>
               {this.showSelectList.map((item: any) => (
                 <>
-                  <Tag
-                    plain
+                  <ElTag
                     round
-                    closeable
                     size="large"
-                    type="primary"
-                    class={styles.tag}
+                    effect="light"
+                    class={['mb-2 !border-[#2DC7AA] !color-[#2DC7AA]']}
+                    closable
                     onClose={() => this.onCloseTag(item)}
                   >
                     {item.title}
-                  </Tag>
+                  </ElTag>
                   <br />
                 </>
               ))}
@@ -282,7 +296,58 @@ export default defineComponent({
           </ElButton>
         </div>
 
-        <Popup show={this.selectStatus} class={styles.selectPopup}>
+        <ElDialog
+          modelValue={this.selectStatus}
+          onUpdate:modelValue={e => (this.selectStatus = e)}
+          width={'400px'}
+          title="提示"
+        >
+          <div class={styles.selectContainer}>
+            <div class={styles.selectPopupContent}>
+              <p class={styles.desc}>
+                {this.selectType === 'noEnough' && !createState.coursePlanStatus
+                  ? '您所选择的上课时间未达到您输入的课时数，系统根据已选时间将自动按周顺延排课。'
+                  : '您已选择以下上课时间段，时间段会暂时锁定，锁定期间学员不可购买该时间段课程。'}
+              </p>
+              {createState.live.coursePlanList &&
+                createState.live.coursePlanList.length > 0 &&
+                createState.coursePlanStatus && (
+                  <p class={styles.times}>
+                    {createState.live.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}>
+              <ElButton
+                type="primary"
+                round
+                plain
+                class="!w-40 !h-[38px]"
+                onClick={this.onReset}
+              >
+                {this.selectType === 'noEnough' ? '继续选择' : '重新选择'}
+              </ElButton>
+              <ElButton
+                type="primary"
+                round
+                class="!w-40 !h-[38px]"
+                onClick={this.onSure}
+              >
+                确认
+              </ElButton>
+            </div>
+          </div>
+        </ElDialog>
+        {/* <Popup show={this.selectStatus} class={styles.selectPopup}>
           <div class={styles.selectContainer}>
             <div class={styles.rTitle}>
               <span>提示</span>
@@ -332,7 +397,7 @@ export default defineComponent({
               </Button>
             </div>
           </div>
-        </Popup>
+        </Popup> */}
       </div>
     )
   }

src/views/user-info/live-operation/course-info/index.tsx

@@ -261,80 +261,6 @@ export default defineComponent({
             </p>
             <p>您的课程收入将在课程结束后结算到您的账户中</p>
           </div>
-          {/* <ElFormItem label="课程封面" class="!mb-0">
-            <ElTabs
-              v-model={createState.tabIndex}
-              class={styles.tabs}
-              onTab-change={(name: any) => {
-                this.tabChange(name)
-              }}
-            >
-              <ElTabPane label="图片模板" name={1}></ElTabPane>
-              <ElTabPane label="自定义模板" name={2}></ElTabPane>
-            </ElTabs>
-          </ElFormItem>
-
-          {createState.tabIndex === 1 && (
-            <ElFormItem
-              prop="lessonCoverTemplateUrl"
-              rules={[
-                {
-                  required: true,
-                  message: '请上传课程封面'
-                }
-              ]}
-            >
-              <ElRadioGroup v-model={createState.live.lessonCoverTemplateUrl}>
-                <ElRow>
-                  {createState.templateList.map((item: any) => (
-                    <ElCol span={10} class="mb-3 cursor-pointer">
-                      <div
-                        class="w-40 relative rounded-xl overflow-hidden border"
-                        onClick={() => {
-                          this.selectImg(item)
-                        }}
-                      >
-                        <ElImage src={item} class="align-middle" />
-                        <ElRadio
-                          label={item}
-                          class="!absolute bottom-2 right-0 !h-auto z-10"
-                        >
-                          {''}
-                        </ElRadio>
-                      </div>
-                    </ElCol>
-                  ))}
-                </ElRow>
-              </ElRadioGroup>
-            </ElFormItem>
-          )}
-
-          {createState.tabIndex === 2 && (
-            <ElFormItem
-              prop="lessonCoverUrl"
-              rules={[
-                {
-                  required: true,
-                  message: '请上传课程封面',
-                  trigger: 'change'
-                }
-              ]}
-            >
-              <ColCropper
-                modelValue={createState.live.lessonCoverUrl}
-                bucket="video-course"
-                cropUploadSuccess={(data: any) => {
-                  createState.live.lessonCoverUrl = data
-                  createState.live.lessonCoverTemplateUrl = ''
-                }}
-                options={{
-                  fixedNumber: [3, 2],
-                  autoCropWidth: 300,
-                  autoCropHeight: 200
-                }}
-              />
-            </ElFormItem>
-          )} */}
         </ElForm>
         <div class="border-t border-t-[#E5E5E5] text-center pt-6 pb-7">
           <ElButton

src/views/user-info/live-operation/createState.ts

@@ -10,7 +10,7 @@ export const basePlan = {
 const original = () => {
   return {
     subjectList: [], // 声部列表
-    active: 2,
+    active: 3,
     rate: 0,
     minutes: [] as any,
     tabIndex: 1,
@@ -26,10 +26,10 @@ const original = () => {
       name: '',
       subjectId: null as any,
       courseIntroduce: '',
-      courseNum: 4 as any,
+      courseNum: null as any,
       singleCourseMinutes: 0,
-      singleMins: 25 as any,
-      freeMinutes: 5,
+      singleMins: null as any,
+      freeMinutes: 0,
       coursePrice: null as any,
       salesStartDate: '',
       salesEndDate: '',

src/views/user-info/live-operation/index.tsx

@@ -1,6 +1,7 @@
 import ColSteps from '@/components/col-steps'
 import request from '@/helpers/request'
 import { defineComponent } from 'vue'
+import CourseClass from './course-class'
 import CourseContent from './course-content'
 import CourseInfo from './course-info'
 import CoursePlan from './course-plan'
@@ -31,7 +32,7 @@ export default defineComponent({
           {createState.active === 0 && <CourseInfo />}
           {createState.active === 1 && <CoursePlan />}
           {createState.active === 2 && <CourseContent />}
-          {/* {createState.active === 1 && <CourseContent />} */}
+          {createState.active === 3 && <CourseClass />}
         </div>
       </>
     )