去除视频课和直播课 默认模板

1

src/teacher/live-class/create-components/course-start.tsx

@@ -1,311 +1,312 @@
-import ColField from '@/components/col-field'
-import ColFieldGroup from '@/components/col-field-group'
-import {
-  Button,
-  Col,
-  Field,
-  Form,
-  Radio,
-  RadioGroup,
-  Row,
-  Sticky,
-  Tab,
-  Tabs,
-  Image,
-  Icon,
-  Popup,
-  DatetimePicker
-} from 'vant'
-import { defineComponent } from 'vue'
-import { createState } from './createState'
-import styles from './course-start.module.less'
-import ColUpload from '@/components/col-upload'
-import { verifiyNumberInteger } from '@/helpers/toolsValidate'
-import { formatterDate } from '@/helpers/utils'
-
-import activeButtonIcon from '@common/images/icon_checkbox.png'
-import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
-import dayjs from 'dayjs'
-
-export default defineComponent({
-  name: 'course-start',
-  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')
-  },
-  methods: {
-    tabChange(name: number) {
-      createState.tabIndex = name
-    },
-    selectImg(val: string) {
-      createState.live.backgroundPic = ''
-      createState.live.backgroundPicTemplate = val
-    },
-    onFormatterInt(val: any) {
-      if (val && val >= 1) {
-        return verifiyNumberInteger(val)
-      } else {
-        return ''
-      }
-    },
-    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 (
-      <Form
-        class={styles.courseStart}
-        onSubmit={() => (createState.active = 5)}
-        scrollToError
-      >
-        <ColFieldGroup>
-          <ColField title="开售日期" required>
-            <Field
-              v-model={createState.live.salesStartDate}
-              name="salesStartDate"
-              readonly
-              isLink
-              placeholder="请选择开售日期"
-              onClick={() => {
-                this.minDate = dayjs().toDate()
-                this.currentDate = dayjs(
-                  createState.live.salesStartDate
-                ).toDate()
-                this.typeDateTime = 'start'
-                this.dateStatus = true
-              }}
-              rules={[{ required: true, message: '请选择开售日期' }]}
-            />
-          </ColField>
-          <ColField title="停售日期" required>
-            <Field
-              v-model={createState.live.salesEndDate}
-              name="salesEndDate"
-              readonly
-              isLink
-              onClick={() => {
-                this.minDate = dayjs(createState.live.salesStartDate).toDate()
-                this.currentDate = dayjs(createState.live.salesEndDate).toDate()
-                this.typeDateTime = 'end'
-                this.dateStatus = true
-              }}
-              rules={[{ required: true, message: '请选择停售日期' }]}
-              placeholder="请选择停售日期"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField
-            title="最低开课人数"
-            required
-            style={{
-              marginBottom: '10px'
-            }}
-          >
-            <Field
-              v-model={createState.live.mixStudentNum}
-              name="mixStudentNum"
-              placeholder="请输入最低开课人数"
-              type="number"
-              maxlength={8}
-              formatter={this.onFormatterInt}
-              rules={[{ required: true, message: '请输入最低开课人数' }]}
-              v-slots={{
-                button: () => <span>人</span>
-              }}
-            />
-          </ColField>
-          <div class={styles.stepTips}>
-            课程停售时付费学员达到该人数可开课，若未达到该人数课程将会失效，已付费学员将自动退款
-          </div>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField
-            required
-            border={false}
-            v-slots={{
-              title: () => (
-                <Tabs
-                  v-model:active={createState.tabIndex}
-                  class={styles.infoField}
-                  onChange={this.tabChange}
-                  shrink
-                  color="var(--van-primary)"
-                  lineWidth={20}
-                >
-                  <Tab title="图片模板" name={1}></Tab>
-                  <Tab title="自定义模板" name={2}></Tab>
-                </Tabs>
-              )
-            }}
-          >
-            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
-            {/* {createState.tabIndex === 1 ? ( */}
-            <Field
-              name="backgroundPicTemplate"
-              border={false}
-              v-show={createState.tabIndex === 1}
-              rules={[
-                {
-                  required:
-                    createState.tabIndex === 1 &&
-                    !createState.live.backgroundPic,
-                  message: '请选择图片模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <RadioGroup v-model={createState.live.backgroundPicTemplate}>
-                    <Row justify="space-between" style={{ width: '100%' }}>
-                      {createState.templateList.map((item: any) => (
-                        <Col
-                          span={12}
-                          class={styles.imgContainer}
-                          onClick={() => this.selectImg(item)}
-                        >
-                          <Image class={styles.imgContainer} src={item} />
-                          <Radio
-                            name={item}
-                            v-slots={{
-                              icon: (props: any) => (
-                                <Icon
-                                  class={styles.boxStyle}
-                                  name={
-                                    props.checked
-                                      ? activeButtonIcon
-                                      : inactiveButtonIcon
-                                  }
-                                  size="18"
-                                />
-                              )
-                            }}
-                          />
-                        </Col>
-                      ))}
-                    </Row>
-                  </RadioGroup>
-                )
-              }}
-            />
-            {/* ) : null} */}
-            {/* {createState.tabIndex == 2 ? ( */}
-            <Field
-              name="backgroundPic"
-              border={false}
-              v-show={createState.tabIndex == 2}
-              rules={[
-                {
-                  required: createState.tabIndex == 2,
-                  message: '请上传自定义模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <Row justify="space-between" style={{ width: '100%' }}>
-                    <Col span={12} class={styles.imgContainer}>
-                      <ColUpload
-                        cropper
-                        bucket="live-rewind"
-                        options={{
-                          fixedNumber: [1.77, 1],
-                          autoCropWidth: 750,
-                          autoCropHeight: 424
-                        }}
-                        onUploadChange={(val: any) => {
-                          if (val) {
-                            createState.live.backgroundPicTemplate = ''
-                          }
-                        }}
-                        v-model={createState.live.backgroundPic}
-                        class={styles.imgContainer}
-                      />
-                    </Col>
-                    <Col span={24}>
-                      <p
-                        class={styles.photoTip}
-                        style={{ color: '#ff4e19', padding: '0' }}
-                      >
-                        图片尺寸为750*424能达到最佳显示效果
-                      </p>
-                    </Col>
-                  </Row>
-                )
-              }}
-            />
-            {/* // ) : null} */}
-          </ColField>
-        </ColFieldGroup>
-
-        <Sticky offsetBottom={0} position="bottom">
-          <div class={['btnGroup', 'btnMore']}>
-            <Button
-              block
-              round
-              type="primary"
-              plain
-              onClick={() => {
-                createState.active = 3
-                createState.live.salesStartDate = ''
-                createState.live.salesEndDate = ''
-                createState.live.backgroundPic = ''
-                createState.live.backgroundPicTemplate = ''
-                createState.live.mixStudentNum = null
-              }}
-            >
-              上一步
-            </Button>
-            <Button block round type="primary" native-type="submit">
-              下一步
-            </Button>
-          </div>
-        </Sticky>
-
-        <Popup show={this.dateStatus} position="bottom" round>
-          <DatetimePicker
-            type="date"
-            v-model={this.currentDate}
-            minDate={this.minDate}
-            maxDate={this.maxDate}
-            formatter={formatterDate}
-            onCancel={() => {
-              this.dateStatus = false
-            }}
-            onConfirm={this.onConfirm}
-          />
-        </Popup>
-      </Form>
-    )
-  }
-})
+import ColField from '@/components/col-field'
+import ColFieldGroup from '@/components/col-field-group'
+import {
+  Button,
+  Col,
+  Field,
+  Form,
+  Radio,
+  RadioGroup,
+  Row,
+  Sticky,
+  Tab,
+  Tabs,
+  Image,
+  Icon,
+  Popup,
+  DatetimePicker
+} from 'vant'
+import { defineComponent } from 'vue'
+import { createState } from './createState'
+import styles from './course-start.module.less'
+import ColUpload from '@/components/col-upload'
+import { verifiyNumberInteger } from '@/helpers/toolsValidate'
+import { formatterDate } from '@/helpers/utils'
+
+import activeButtonIcon from '@common/images/icon_checkbox.png'
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
+import dayjs from 'dayjs'
+
+export default defineComponent({
+  name: 'course-start',
+  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')
+  },
+  methods: {
+    tabChange(name: number) {
+      createState.tabIndex = name
+    },
+    selectImg(val: string) {
+      createState.live.backgroundPic = ''
+      createState.live.backgroundPicTemplate = val
+    },
+    onFormatterInt(val: any) {
+      if (val && val >= 1) {
+        return verifiyNumberInteger(val)
+      } else {
+        return ''
+      }
+    },
+    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 (
+      <Form
+        class={styles.courseStart}
+        onSubmit={() => (createState.active = 5)}
+        scrollToError
+      >
+        <ColFieldGroup>
+          <ColField title="开售日期" required>
+            <Field
+              v-model={createState.live.salesStartDate}
+              name="salesStartDate"
+              readonly
+              isLink
+              placeholder="请选择开售日期"
+              onClick={() => {
+                this.minDate = dayjs().toDate()
+                this.currentDate = dayjs(
+                  createState.live.salesStartDate
+                ).toDate()
+                this.typeDateTime = 'start'
+                this.dateStatus = true
+              }}
+              rules={[{ required: true, message: '请选择开售日期' }]}
+            />
+          </ColField>
+          <ColField title="停售日期" required>
+            <Field
+              v-model={createState.live.salesEndDate}
+              name="salesEndDate"
+              readonly
+              isLink
+              onClick={() => {
+                this.minDate = dayjs(createState.live.salesStartDate).toDate()
+                this.currentDate = dayjs(createState.live.salesEndDate).toDate()
+                this.typeDateTime = 'end'
+                this.dateStatus = true
+              }}
+              rules={[{ required: true, message: '请选择停售日期' }]}
+              placeholder="请选择停售日期"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField
+            title="最低开课人数"
+            required
+            style={{
+              marginBottom: '10px'
+            }}
+          >
+            <Field
+              v-model={createState.live.mixStudentNum}
+              name="mixStudentNum"
+              placeholder="请输入最低开课人数"
+              type="number"
+              maxlength={8}
+              formatter={this.onFormatterInt}
+              rules={[{ required: true, message: '请输入最低开课人数' }]}
+              v-slots={{
+                button: () => <span>人</span>
+              }}
+            />
+          </ColField>
+          <div class={styles.stepTips}>
+            课程停售时付费学员达到该人数可开课，若未达到该人数课程将会失效，已付费学员将自动退款
+          </div>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField
+            required
+            border={false}
+            v-slots={{
+              title: () => (
+                // <Tabs
+                //   v-model:active={createState.tabIndex}
+                //   class={styles.infoField}
+                //   onChange={this.tabChange}
+                //   shrink
+                //   color="var(--van-primary)"
+                //   lineWidth={20}
+                // >
+                //   <Tab title="图片模板" name={1}></Tab>
+                //   <Tab title="自定义模板" name={2}></Tab>
+                // </Tabs>
+                <p>请上传自定义模板</p>
+              )
+            }}
+          >
+            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
+            {/* {createState.tabIndex === 1 ? ( */}
+            {/* <Field
+              name="backgroundPicTemplate"
+              border={false}
+              v-show={createState.tabIndex === 1}
+              rules={[
+                {
+                  required:
+                    createState.tabIndex === 1 &&
+                    !createState.live.backgroundPic,
+                  message: '请选择图片模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <RadioGroup v-model={createState.live.backgroundPicTemplate}>
+                    <Row justify="space-between" style={{ width: '100%' }}>
+                      {createState.templateList.map((item: any) => (
+                        <Col
+                          span={12}
+                          class={styles.imgContainer}
+                          onClick={() => this.selectImg(item)}
+                        >
+                          <Image class={styles.imgContainer} src={item} />
+                          <Radio
+                            name={item}
+                            v-slots={{
+                              icon: (props: any) => (
+                                <Icon
+                                  class={styles.boxStyle}
+                                  name={
+                                    props.checked
+                                      ? activeButtonIcon
+                                      : inactiveButtonIcon
+                                  }
+                                  size="18"
+                                />
+                              )
+                            }}
+                          />
+                        </Col>
+                      ))}
+                    </Row>
+                  </RadioGroup>
+                )
+              }}
+            /> */}
+            {/* ) : null} */}
+            {/* {createState.tabIndex == 2 ? (   v-show={createState.tabIndex == 2}*/}
+            <Field
+              name="backgroundPic"
+              border={false}
+
+              rules={[
+                {
+                  required: true,
+                  message: '请上传自定义模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <Row justify="space-between" style={{ width: '100%' }}>
+                    <Col span={12} class={styles.imgContainer}>
+                      <ColUpload
+                        cropper
+                        bucket="live-rewind"
+                        options={{
+                          fixedNumber: [1.77, 1],
+                          autoCropWidth: 750,
+                          autoCropHeight: 424
+                        }}
+                        onUploadChange={(val: any) => {
+                          if (val) {
+                            createState.live.backgroundPicTemplate = ''
+                          }
+                        }}
+                        v-model={createState.live.backgroundPic}
+                        class={styles.imgContainer}
+                      />
+                    </Col>
+                    <Col span={24}>
+                      <p
+                        class={styles.photoTip}
+                        style={{ color: '#ff4e19', padding: '0' }}
+                      >
+                        图片尺寸为750*424能达到最佳显示效果
+                      </p>
+                    </Col>
+                  </Row>
+                )
+              }}
+            />
+            {/* // ) : null} */}
+          </ColField>
+        </ColFieldGroup>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={['btnGroup', 'btnMore']}>
+            <Button
+              block
+              round
+              type="primary"
+              plain
+              onClick={() => {
+                createState.active = 3
+                createState.live.salesStartDate = ''
+                createState.live.salesEndDate = ''
+                createState.live.backgroundPic = ''
+                createState.live.backgroundPicTemplate = ''
+                createState.live.mixStudentNum = null
+              }}
+            >
+              上一步
+            </Button>
+            <Button block round type="primary" native-type="submit">
+              下一步
+            </Button>
+          </div>
+        </Sticky>
+
+        <Popup show={this.dateStatus} position="bottom" round>
+          <DatetimePicker
+            type="date"
+            v-model={this.currentDate}
+            minDate={this.minDate}
+            maxDate={this.maxDate}
+            formatter={formatterDate}
+            onCancel={() => {
+              this.dateStatus = false
+            }}
+            onConfirm={this.onConfirm}
+          />
+        </Popup>
+      </Form>
+    )
+  }
+})

src/teacher/video-class/class-info.tsx

@@ -1,309 +1,311 @@
-import ColField from '@/components/col-field'
-import ColFieldGroup from '@/components/col-field-group'
-import ColPopup from '@/components/col-popup'
-import ColUpload from '@/components/col-upload'
-import request from '@/helpers/request'
-import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
-import {
-  Button,
-  Col,
-  Field,
-  Form,
-  Icon,
-  Image,
-  Radio,
-  RadioGroup,
-  Row,
-  Sticky,
-  Tab,
-  Tabs
-} from 'vant'
-import { defineComponent } from 'vue'
-import SubjectModel from '../../business-components/subject-list'
-import styles from './class-info.module.less'
-import { createState } from './createState'
-
-import activeButtonIcon from '@common/images/icon_checkbox.png'
-import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
-
-export default defineComponent({
-  name: 'ClassInfo',
-  data() {
-    return {
-      subjectStatus: false
-    }
-  },
-  computed: {
-    choiceSubjectIds() {
-      // 选择的科目编号
-      const ids = createState.lessonGroup.lessonSubject
-        ? Number(createState.lessonGroup.lessonSubject)
-        : null
-      console.log(ids)
-      return ids ? [ids] : []
-    },
-    subjectList() {
-      // 学科列表
-      return createState.subjectList || []
-    },
-    lessonSubjectName() {
-      // 选择的科目
-      let tempStr = ''
-      this.subjectList.forEach((item: any) => {
-        if (this.choiceSubjectIds.includes(item.id)) {
-          tempStr = item.name
-        }
-      })
-      return tempStr
-    },
-    calcRatePrice() {
-      // 计算手续费
-      let rate = createState.rate || 0
-      let price = createState.lessonGroup.lessonPrice || 0
-      return (price - (rate / 100) * price).toFixed(2)
-    }
-  },
-  async mounted() {
-    try {
-      if (createState.subjectList.length <= 0) {
-        const res = await request.post('/api-teacher/teacher/querySubject')
-        createState.subjectList = res.data || []
-      }
-    } catch {
-      //
-    }
-  },
-  methods: {
-    onChoice(id: number) {
-      createState.lessonGroup.lessonSubject = id
-      this.subjectStatus = false
-    },
-    onFormatter(val: any) {
-      return verifyNumberIntegerAndFloat(val)
-    },
-    tabChange(name: number) {
-      ;(this as any).$refs.form.resetValidation('lessonCoverTemplateUrl')
-      ;(this as any).$refs.form.resetValidation('lessonCoverUrl')
-      createState.tabIndex = name
-    },
-    selectImg(val: string) {
-      createState.lessonGroup.lessonCoverUrl = ''
-      createState.lessonGroup.lessonCoverTemplateUrl = val
-    }
-  },
-  render() {
-    return createState.loadingStatus ? (
-      <div></div>
-    ) : (
-      <Form
-        class={styles.classInfo}
-        ref="form"
-        onSubmit={() => (createState.active = 2)}
-        onFailed={(e: any) => console.log(e)}
-        scrollToError
-      >
-        <ColFieldGroup>
-          <ColField title="课程名称" required>
-            <Field
-              v-model={createState.lessonGroup.lessonName}
-              name="lessonName"
-              maxlength={50}
-              placeholder="请输入您的课程名称"
-              rules={[{ required: true, message: '请输入您的课程名称' }]}
-            />
-          </ColField>
-          <ColField title="课程声部" required>
-            <Field
-              modelValue={this.lessonSubjectName}
-              name="lessonSubjectName"
-              readonly
-              isLink
-              onClick={() => {
-                this.subjectStatus = true
-              }}
-              rules={[{ required: true, message: '请选择课程声部' }]}
-              placeholder="请选择课程声部"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField title="课程介绍" required border={false}>
-            <Field
-              v-model={createState.lessonGroup.lessonDesc}
-              name="lessonDesc"
-              placeholder="请输入课程介绍"
-              rows="3"
-              maxlength={200}
-              showWordLimit
-              autosize
-              rules={[{ required: true, message: '请输入课程介绍' }]}
-              type="textarea"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup>
-          <ColField title="课程组售价" required>
-            <Field
-              v-model={createState.lessonGroup.lessonPrice}
-              name="lessonPrice"
-              placeholder="请输入您的课程组售价"
-              formatter={this.onFormatter}
-              type="number"
-              maxlength={8}
-              rules={[{ required: true, message: '请输入您的课程组售价' }]}
-              v-slots={{
-                button: () => <span>元</span>
-              }}
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <div class={styles['class-info-tip']}>
-          <p>扣除手续费后您的课程预计收入为：</p>
-          <p>
-            课程组总收入<span>{this.calcRatePrice}</span>元/人
-          </p>
-          <p>您的课程收入将在课程结束后结算到您的账户中</p>
-        </div>
-
-        <ColFieldGroup>
-          <ColField
-            required
-            border={false}
-            v-slots={{
-              title: () => (
-                <Tabs
-                  v-model:active={createState.tabIndex}
-                  class={styles.infoField}
-                  onChange={this.tabChange}
-                  shrink
-                  color="var(--van-primary)"
-                  lineWidth={20}
-                >
-                  <Tab title="图片模板" name={1}></Tab>
-                  <Tab title="自定义模板" name={2}></Tab>
-                </Tabs>
-              )
-            }}
-          >
-            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
-            {/* {createState.tabIndex === 1 && ( */}
-            <Field
-              name="lessonCoverTemplateUrl"
-              border={false}
-              v-show={createState.tabIndex === 1}
-              rules={[
-                {
-                  required:
-                    createState.tabIndex === 1 &&
-                    !createState.lessonGroup.lessonCoverUrl,
-                  message: '请选择图片模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <RadioGroup
-                    v-model={createState.lessonGroup.lessonCoverTemplateUrl}
-                  >
-                    <Row justify="space-between" style={{ width: '100%' }}>
-                      {createState.templateList.map((item: any) => (
-                        <Col
-                          span={12}
-                          class={styles.imgContainer}
-                          onClick={() => this.selectImg(item)}
-                        >
-                          <Image class={styles.imgContainer} src={item} />
-                          <Radio
-                            name={item}
-                            v-slots={{
-                              icon: (props: any) => (
-                                <Icon
-                                  class={styles.boxStyle}
-                                  name={
-                                    props.checked
-                                      ? activeButtonIcon
-                                      : inactiveButtonIcon
-                                  }
-                                  size="18"
-                                />
-                              )
-                            }}
-                          />
-                        </Col>
-                      ))}
-                    </Row>
-                  </RadioGroup>
-                )
-              }}
-            />
-            {/* )} */}
-            {/* {createState.tabIndex == 2 && ( */}
-            <Field
-              name="lessonCoverUrl"
-              v-show={createState.tabIndex == 2}
-              rules={[
-                {
-                  required: createState.tabIndex == 2,
-                  message: '请上传自定义模板'
-                }
-              ]}
-              v-slots={{
-                input: () => (
-                  <Row justify="space-between" style={{ width: '100%' }}>
-                    <Col span={12} class={styles.imgContainer}>
-                      <ColUpload
-                        cropper
-                        bucket="video-course"
-                        options={{
-                          fixedNumber: [1.77, 1],
-                          autoCropWidth: 750,
-                          autoCropHeight: 424
-                        }}
-                        onUploadChange={(val: any) => {
-                          if (val) {
-                            createState.lessonGroup.lessonCoverTemplateUrl = ''
-                          }
-                        }}
-                        v-model={createState.lessonGroup.lessonCoverUrl}
-                        class={styles.imgContainer}
-                      />
-                    </Col>
-                    <Col span={24}>
-                      <p
-                        class={styles.photoTip}
-                        style={{ color: '#ff4e19', padding: '0' }}
-                      >
-                        图片尺寸为750*424能达到最佳显示效果
-                      </p>
-                    </Col>
-                  </Row>
-                )
-              }}
-            />
-            {/* )} */}
-          </ColField>
-        </ColFieldGroup>
-
-        <Sticky offsetBottom={0} position="bottom">
-          <div class={['btnGroup']}>
-            <Button block round type="primary" native-type="submit">
-              下一步
-            </Button>
-          </div>
-        </Sticky>
-
-        <ColPopup v-model={this.subjectStatus} destroy>
-          <SubjectModel
-            selectType="Radio"
-            single
-            subjectList={createState.subjectList}
-            choiceSubjectIds={this.choiceSubjectIds}
-            onChoice={this.onChoice}
-          />
-        </ColPopup>
-      </Form>
-    )
-  }
-})
+import ColField from '@/components/col-field'
+import ColFieldGroup from '@/components/col-field-group'
+import ColPopup from '@/components/col-popup'
+import ColUpload from '@/components/col-upload'
+import request from '@/helpers/request'
+import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
+import {
+  Button,
+  Col,
+  Field,
+  Form,
+  Icon,
+  Image,
+  Radio,
+  RadioGroup,
+  Row,
+  Sticky,
+  Tab,
+  Tabs
+} from 'vant'
+import { defineComponent } from 'vue'
+import SubjectModel from '../../business-components/subject-list'
+import styles from './class-info.module.less'
+import { createState } from './createState'
+
+import activeButtonIcon from '@common/images/icon_checkbox.png'
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
+
+export default defineComponent({
+  name: 'ClassInfo',
+  data() {
+    return {
+      subjectStatus: false
+    }
+  },
+  computed: {
+    choiceSubjectIds() {
+      // 选择的科目编号
+      const ids = createState.lessonGroup.lessonSubject
+        ? Number(createState.lessonGroup.lessonSubject)
+        : null
+      console.log(ids)
+      return ids ? [ids] : []
+    },
+    subjectList() {
+      // 学科列表
+      return createState.subjectList || []
+    },
+    lessonSubjectName() {
+      // 选择的科目
+      let tempStr = ''
+      this.subjectList.forEach((item: any) => {
+        if (this.choiceSubjectIds.includes(item.id)) {
+          tempStr = item.name
+        }
+      })
+      return tempStr
+    },
+    calcRatePrice() {
+      // 计算手续费
+      let rate = createState.rate || 0
+      let price = createState.lessonGroup.lessonPrice || 0
+      return (price - (rate / 100) * price).toFixed(2)
+    }
+  },
+  async mounted() {
+    try {
+      if (createState.subjectList.length <= 0) {
+        const res = await request.post('/api-teacher/teacher/querySubject')
+        createState.subjectList = res.data || []
+      }
+    } catch {
+      //
+    }
+  },
+  methods: {
+    onChoice(id: number) {
+      createState.lessonGroup.lessonSubject = id
+      this.subjectStatus = false
+    },
+    onFormatter(val: any) {
+      return verifyNumberIntegerAndFloat(val)
+    },
+    tabChange(name: number) {
+      ;(this as any).$refs.form.resetValidation('lessonCoverTemplateUrl')
+      ;(this as any).$refs.form.resetValidation('lessonCoverUrl')
+      createState.tabIndex = name
+    },
+    selectImg(val: string) {
+      createState.lessonGroup.lessonCoverUrl = ''
+      createState.lessonGroup.lessonCoverTemplateUrl = val
+    }
+  },
+  render() {
+    return createState.loadingStatus ? (
+      <div></div>
+    ) : (
+      <Form
+        class={styles.classInfo}
+        ref="form"
+        onSubmit={() => (createState.active = 2)}
+        onFailed={(e: any) => console.log(e)}
+        scrollToError
+      >
+        <ColFieldGroup>
+          <ColField title="课程名称" required>
+            <Field
+              v-model={createState.lessonGroup.lessonName}
+              name="lessonName"
+              maxlength={50}
+              placeholder="请输入您的课程名称"
+              rules={[{ required: true, message: '请输入您的课程名称' }]}
+            />
+          </ColField>
+          <ColField title="课程声部" required>
+            <Field
+              modelValue={this.lessonSubjectName}
+              name="lessonSubjectName"
+              readonly
+              isLink
+              onClick={() => {
+                this.subjectStatus = true
+              }}
+              rules={[{ required: true, message: '请选择课程声部' }]}
+              placeholder="请选择课程声部"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField title="课程介绍" required border={false}>
+            <Field
+              v-model={createState.lessonGroup.lessonDesc}
+              name="lessonDesc"
+              placeholder="请输入课程介绍"
+              rows="3"
+              maxlength={200}
+              showWordLimit
+              autosize
+              rules={[{ required: true, message: '请输入课程介绍' }]}
+              type="textarea"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup>
+          <ColField title="课程组售价" required>
+            <Field
+              v-model={createState.lessonGroup.lessonPrice}
+              name="lessonPrice"
+              placeholder="请输入您的课程组售价"
+              formatter={this.onFormatter}
+              type="number"
+              maxlength={8}
+              rules={[{ required: true, message: '请输入您的课程组售价' }]}
+              v-slots={{
+                button: () => <span>元</span>
+              }}
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <div class={styles['class-info-tip']}>
+          <p>扣除手续费后您的课程预计收入为：</p>
+          <p>
+            课程组总收入<span>{this.calcRatePrice}</span>元/人
+          </p>
+          <p>您的课程收入将在课程结束后结算到您的账户中</p>
+        </div>
+
+        <ColFieldGroup>
+          <ColField
+            required
+            border={false}
+            v-slots={{
+              title: () => (
+                // <Tabs
+                //   v-model:active={createState.tabIndex}
+                //   class={styles.infoField}
+                //   onChange={this.tabChange}
+                //   shrink
+                //   color="var(--van-primary)"
+                //   lineWidth={20}
+                // >
+                //   <Tab title="图片模板" name={1}></Tab>
+                //   <Tab title="自定义模板" name={2}></Tab>
+                // </Tabs>
+              <p>请上传自定义模板</p>
+              )
+            }}
+          >
+            <p class={styles.photoTip}>模板图片将作为该课程封面为学员展示</p>
+            {/* {createState.tabIndex === 1 && ( */}
+            {/* <Field
+              name="lessonCoverTemplateUrl"
+              border={false}
+              v-show={createState.tabIndex === 1}
+              rules={[
+                {
+                  required:
+                    createState.tabIndex === 1 &&
+                    !createState.lessonGroup.lessonCoverUrl,
+                  message: '请选择图片模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <RadioGroup
+                    v-model={createState.lessonGroup.lessonCoverTemplateUrl}
+                  >
+                    <Row justify="space-between" style={{ width: '100%' }}>
+                      {createState.templateList.map((item: any) => (
+                        <Col
+                          span={12}
+                          class={styles.imgContainer}
+                          onClick={() => this.selectImg(item)}
+                        >
+                          <Image class={styles.imgContainer} src={item} />
+                          <Radio
+                            name={item}
+                            v-slots={{
+                              icon: (props: any) => (
+                                <Icon
+                                  class={styles.boxStyle}
+                                  name={
+                                    props.checked
+                                      ? activeButtonIcon
+                                      : inactiveButtonIcon
+                                  }
+                                  size="18"
+                                />
+                              )
+                            }}
+                          />
+                        </Col>
+                      ))}
+                    </Row>
+                  </RadioGroup>
+                )
+              }}
+            /> */}
+            {/* )} */}
+            {/* {createState.tabIndex == 2 && ( */}
+            {/* v-show={createState.tabIndex == 2} createState.tabIndex == 2*/}
+            <Field
+              name="lessonCoverUrl"
+
+              rules={[
+                {
+                  required: true,
+                  message: '请上传自定义模板'
+                }
+              ]}
+              v-slots={{
+                input: () => (
+                  <Row justify="space-between" style={{ width: '100%' }}>
+                    <Col span={12} class={styles.imgContainer}>
+                      <ColUpload
+                        cropper
+                        bucket="video-course"
+                        options={{
+                          fixedNumber: [1.77, 1],
+                          autoCropWidth: 750,
+                          autoCropHeight: 424
+                        }}
+                        onUploadChange={(val: any) => {
+                          if (val) {
+                            createState.lessonGroup.lessonCoverTemplateUrl = ''
+                          }
+                        }}
+                        v-model={createState.lessonGroup.lessonCoverUrl}
+                        class={styles.imgContainer}
+                      />
+                    </Col>
+                    <Col span={24}>
+                      <p
+                        class={styles.photoTip}
+                        style={{ color: '#ff4e19', padding: '0' }}
+                      >
+                        图片尺寸为750*424能达到最佳显示效果
+                      </p>
+                    </Col>
+                  </Row>
+                )
+              }}
+            />
+            {/* )} */}
+          </ColField>
+        </ColFieldGroup>
+
+        <Sticky offsetBottom={0} position="bottom">
+          <div class={['btnGroup']}>
+            <Button block round type="primary" native-type="submit">
+              下一步
+            </Button>
+          </div>
+        </Sticky>
+
+        <ColPopup v-model={this.subjectStatus} destroy>
+          <SubjectModel
+            selectType="Radio"
+            single
+            subjectList={createState.subjectList}
+            choiceSubjectIds={this.choiceSubjectIds}
+            onChoice={this.onChoice}
+          />
+        </ColPopup>
+      </Form>
+    )
+  }
+})

yarn.lock

@@ -2229,9 +2229,9 @@
   "resolved" "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
   "version" "0.9.3"
 
-"esbuild-darwin-64@0.13.15":
-  "integrity" "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ=="
-  "resolved" "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz"
+"esbuild-windows-64@0.13.15":
+  "integrity" "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ=="
+  "resolved" "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz"
   "version" "0.13.15"
 
 "esbuild@^0.13.12":
@@ -2620,11 +2620,6 @@
   "resolved" "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@~2.3.2":
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
-  "resolved" "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"