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

import ColCropper from '@/components/col-cropper'
import styles from './index.module.less'
import request from '@/helpers/request'
import {
  verifiyNumberInteger,
  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,
      calcSingleRatePrice: 0 as any
    }
  },
  computed: {
    subjectList() {
      // 学科列表
      return createState.subjectList || []
    }
  },
  async mounted() {
    const rate = createState.rate || 0
    const nums = createState.live.courseNum
    const tempPrice = createState.live.coursePrice || 0
    this.calcRatePrice = (tempPrice - (rate / 100) * tempPrice).toFixed(2)
    this.calcSingleRatePrice = nums
      ? ((tempPrice / nums) * (1 - rate / 100)).toFixed(2)
      : 0
    try {
      // 获取手续费和分钟数
      let config = await request.get(
        '/api-website/sysConfig/queryByParamNameList',
        {
          params: {
            paramNames: 'live_service_rate,live_time_setting'
          }
        }
      )
      let configData = config.data || []
      configData.forEach((item: any) => {
        if (item.paramName === 'live_time_setting') {
          let mins = item.paramValue ? JSON.parse(item.paramValue) : []
          let tempArr = [] as any
          mins.forEach((item: any) => {
            tempArr.push({
              ...item,
              name: item.courseMinutes
            })
          })
          createState.minutes = [...tempArr]
        }
        if (item.paramName === 'live_service_rate') {
          createState.rate = item.paramValue
        }
      })

      let teacher = await request.post('/api-website/teacher/querySubject')
      createState.subjectList = teacher.data || []
    } catch (err: any) {
      console.log(err)
    }
  },
  methods: {
    // onChoice(id: number) {
    //   createState.live.subjectId = id
    //   this.subjectStatus = false
    // },
    onFormaterCourse(e: any) {
      e.target.value = verifiyNumberInteger(e.target.value)
      let rate = createState.rate || 0
      let nums = createState.live.courseNum
      let tempPrice = createState.live.coursePrice || 0
      this.calcSingleRatePrice = nums
        ? ((tempPrice / nums) * (1 - rate / 100)).toFixed(2)
        : 0
    },
    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)

      let nums = createState.live.courseNum
      // let tempPrice = createState.live.coursePrice || 0
      this.calcSingleRatePrice = nums
        ? ((price / nums) * (1 - rate / 100)).toFixed(2)
        : 0
    }
  },
  render() {
    return (
      <div class={styles.formSection}>
        <ElForm
          class="px-6 pb-10 pt-7"
          size="large"
          ref="form"
          labelWidth={'120px'}
          labelPosition="left"
          model={createState.live}
        >
          <ElFormItem
            label="课程名称"
            prop="name"
            rules={[
              {
                required: true,
                message: '请输入课程名称'
              }
            ]}
          >
            <ElInput
              v-model={createState.live.name}
              maxlength={50}
              placeholder="请输入课程名称"
            />
          </ElFormItem>
          <ElFormItem
            label="课程声部"
            prop="subjectId"
            rules={[
              {
                required: true,
                message: '请选择课程声部'
              }
            ]}
          >
            <ElSelect
              class="w-full"
              v-model={createState.live.subjectId}
              placeholder="请选择课程声部"
            >
              {createState.subjectList.map((item: any) => (
                <ElOption key={item.id} value={item.id} label={item.name} />
              ))}
            </ElSelect>
          </ElFormItem>
          <ElFormItem
            label="课程介绍"
            prop="courseIntroduce"
            rules={[
              {
                required: true,
                message: '请输入课程介绍'
              }
            ]}
          >
            <ElInput
              placeholder="请输入课程介绍"
              v-model={createState.live.courseIntroduce}
              type="textarea"
              // @ts-ignore
              maxlength={200}
              rows={4}
              showWordLimit
            />
          </ElFormItem>

          <ElFormItem
            label="课时数"
            prop="courseNum"
            rules={[
              {
                required: true,
                message: '请输入课时数'
              }
            ]}
          >
            <ElInput
              placeholder="请输入课时数"
              v-model={createState.live.courseNum}
              // @ts-ignore
              onKeyup={this.onFormaterCourse}
              maxlength={2}
              v-slots={{
                append: () => <span class="text-base text-[#333]">课时</span>
              }}
            />
          </ElFormItem>
          <ElFormItem
            label="单课时长"
            prop="singleMins"
            rules={[
              {
                required: true,
                message: '请选择单课时长'
              }
            ]}
          >
            <ElSelect
              class="w-full"
              v-model={createState.live.singleMins}
              placeholder="请选择单课时长"
              onChange={(item: any) => {
                createState.minutes.forEach(child => {
                  if (child.courseMinutes === item) {
                    createState.live.freeMinutes = child.freeMinutes
                    createState.live.singleCourseMinutes =
                      Number(item || 0) + Number(child.freeMinutes || 0)
                  }
                })
              }}
            >
              {createState.minutes.map((item: any) => (
                <ElOption
                  key={item.courseMinutes}
                  value={item.courseMinutes}
                  label={item.name}
                />
              ))}
            </ElSelect>
          </ElFormItem>

          <ElFormItem
            label="课程组售价"
            prop="coursePrice"
            rules={[
              {
                required: true,
                message: '请输入课程组售价'
              }
            ]}
          >
            <ElInput
              placeholder="请输入课程组售价"
              v-model={createState.live.coursePrice}
              // onKeyup={this.onFormatter}
              onInput={(value: any) => {
                createState.live.coursePrice =
                  verifyNumberIntegerAndFloat(value)

                // 计算手续费
                const rate = createState.rate || 0
                const price = createState.live.coursePrice || 0
                this.calcRatePrice = (price - (rate / 100) * price).toFixed(2)

                const nums = createState.live.courseNum
                this.calcSingleRatePrice = nums
                  ? ((price / nums) * (1 - rate / 100)).toFixed(2)
                  : 0
              }}
              maxlength={8}
              v-slots={{
                append: () => <span class="text-base text-[#333]">元</span>
              }}
            />
          </ElFormItem>
          <div class="text-sm text-[#999] pl-[120px] leading-relaxed pb-2">
            <p>扣除手续费后您的课程预计收入为：</p>
            <p>
              单课时
              <span class="px-1 text-[#FF4E19]">
                {this.calcSingleRatePrice}
              </span>
              元/人
            </p>
            <p>
              课程组总收入
              <span class="px-1 text-[#FF4E19]">{this.calcRatePrice}</span>元/人
            </p>
            <p>您的课程收入将在课程结束后结算到您的账户中</p>
          </div>
        </ElForm>
        <div class="text-center pt-6 pb-7">
          <ElButton
            type="primary"
            round
            class="!w-44 !h-[48px] !text-base"
            onClick={() => {
              console.log(createState.live)
              ;(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>
    )
  }
})