colexiu-project/src/views/user-info/video-operation/course-info/index.tsx

import ColCropper from '@/components/col-cropper'
import styles from './index.module.less'
import request from '@/helpers/request'
import { verifyNumberIntegerAndFloat } from '@/helpers/toolsValidate'
import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElImage,
  ElInput,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSelect,
  ElTabPane,
  ElTabs
} from 'element-plus'
import { defineComponent } from 'vue'
import { createState } from '../createState'
import { scrollAnimation } from '@/util/scroll'

export default defineComponent({
  name: 'course-info',
  data() {
    return {
      url: '',
      calcRatePrice: 0 as any
    }
  },
  computed: {
    choiceSubjectIds() {
      // 选择的科目编号
      let ids = createState.lessonGroup.lessonSubject
        ? Number(createState.lessonGroup.lessonSubject)
        : null
      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-website/teacher/querySubject')
        createState.subjectList = res.data || []
      }

      const rate = createState.rate || 0
      const price = createState.lessonGroup.lessonPrice || 0
      this.calcRatePrice = (price - (rate / 100) * price).toFixed(2)
      // setInterval(() => {
      //   console.log(
      //     createState.lessonGroup.lessonCoverTemplateUrl,
      //     'createState.lessonGroup.lessonCoverTemplateUrl'
      //   )
      // }, 1000)
    } catch {
      //
    }
  },
  methods: {
    // onChoice(id: number) {
    //   createState.lessonGroup.lessonSubject = id
    //   this.subjectStatus = false
    // },
    onFormatter(e: any) {
      e.target.value = verifyNumberIntegerAndFloat(e.target.value)

      // 计算手续费
      let rate = createState.rate || 0
      let price = e.target.value || 0
      this.calcRatePrice = (price - (rate / 100) * price).toFixed(2)
    },
    tabChange(name: number) {
      ;(this as any).$refs.form.clearValidate('lessonCoverTemplateUrl')
      ;(this as any).$refs.form.clearValidate('lessonCoverUrl')
      createState.tabIndex = name
    },
    selectImg(val: string) {
      createState.lessonGroup.lessonCoverUrl = ''
      createState.lessonGroup.lessonCoverTemplateUrl = val
    }
  },
  render() {
    return (
      <div class={styles.courseInfo}>
        <ElForm
          class="px-6 pb-10 pt-7"
          size="large"
          ref="form"
          labelWidth={'120px'}
          labelPosition="left"
          model={createState.lessonGroup}
        >
          <ElFormItem
            label="课程名称"
            prop="lessonName"
            rules={[
              {
                required: true,
                message: '请输入课程名称'
              }
            ]}
          >
            <ElInput
              v-model={createState.lessonGroup.lessonName}
              maxlength={50}
              placeholder="请输入课程名称"
            />
          </ElFormItem>
          <ElFormItem
            label="课程声部"
            prop="lessonSubject"
            rules={[
              {
                required: true,
                message: '请选择课程声部'
              }
            ]}
          >
            <ElSelect
              class="w-full"
              v-model={createState.lessonGroup.lessonSubject}
              placeholder="请选择课程声部"
            >
              {createState.subjectList.map((item: any) => (
                <ElOption key={item.id} value={item.id} label={item.name} />
              ))}
            </ElSelect>
          </ElFormItem>
          <ElFormItem
            label="课程介绍"
            prop="lessonDesc"
            rules={[
              {
                required: true,
                message: '请输入课程介绍'
              }
            ]}
          >
            <ElInput
              placeholder="请输入课程介绍"
              v-model={createState.lessonGroup.lessonDesc}
              type="textarea"
              // @ts-ignore
              maxlength={200}
              rows={4}
              showWordLimit
            />
          </ElFormItem>
          <ElFormItem
            label="课程组售价"
            prop="lessonPrice"
            rules={[
              {
                required: true,
                message: '请输入课程组售价'
              }
            ]}
          >
            <ElInput
              placeholder="请输入课程组售价"
              v-model={createState.lessonGroup.lessonPrice}
              // @ts-ignore
              onKeyup={this.onFormatter}
              maxlength={9}
              v-slots={{
                suffix: () => <span class="text-base text-[#999]">元</span>
              }}
            />
          </ElFormItem>
          <div class="text-sm text-[#999] pl-[120px] leading-relaxed pb-2">
            <p>扣除手续费后您的课程预计收入为： </p>
            <p>
              课程组总收入
              <span class="px-1 text-[#FF4E19]">{this.calcRatePrice}</span>元/人
            </p>
            <p>您的课程收入将在课程结束后结算到您的账户中 </p>
          </div>
          <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="lessonCoverTemplateUrl"
              rules={[
                {
                  required: true,
                  message: '请上传课程封面'
                }
              ]}
            >
              <ElRadioGroup
                v-model={createState.lessonGroup.lessonCoverTemplateUrl}
              >
                <ElRow>
                  {createState.templateList.map((item: any) => (
                    <ElCol span={7} class="mb-3 cursor-pointer">
                      <div
                        class="w-[152px] 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'
                }
              ]}
            >
              {/* <ColUpload
                v-model:modelValue={createState.lessonGroup.lessonCoverUrl}
                onChange={(value: any) => {
                  createState.lessonGroup.lessonCoverTemplateUrl = ''
                }}
              /> */}
              <ColCropper
                modelValue={createState.lessonGroup.lessonCoverUrl}
                class={styles.imgCover}
                bucket="video-course"
                cropUploadSuccess={(data: any) => {
                  createState.lessonGroup.lessonCoverUrl = data
                  createState.lessonGroup.lessonCoverTemplateUrl = ''
                }}
                options={{
                  // fixedNumber: [3, 2],
                  // autoCropWidth: 300,
                  // autoCropHeight: 200
                  title: '课程封面',
                  fixedNumber: [3.34, 2],
                  autoCropWidth: 375,
                  autoCropHeight: 212
                }}
              />
            </ElFormItem>
          )}
        </ElForm>
        <div class=" text-center pt-6 pb-7">
          <ElButton
            type="primary"
            round
            class="!w-44 !h-[48px] !text-base"
            onClick={() => {
              ;(this as any).$refs.form.validate(async (valid: boolean) => {
                if (valid) {
                  createState.active = 1
                  const currentY =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop
                  scrollAnimation(currentY, 0)
                } else {
                  this.$nextTick(() => {
                    let isError = document.getElementsByClassName('is-error')
                    isError[0].scrollIntoView({
                      block: 'center',
                      behavior: 'smooth'
                    })
                  })
                  return false
                }
              })
            }}
          >
            下一步
          </ElButton>
        </div>
      </div>
    )
  }
})