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

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'
import { state } from '@/state'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'ClassInfo',
  data() {
    return {
      subjectStatus: false,
      checked: 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() {
      // 计算手续费
      const rate = createState.rate || 0
      const 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 || []
      }

      const resVersion = await request.post('/api-teacher/open/appVersion', {
        data: {
          platform:
            state.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher',
          version: state.version
        }
      })
      this.checked = resVersion.data.check ? true : false
      // 审核版本金额默认为0
      if (this.checked) {
        createState.lessonGroup.lessonPrice = 0
      }
    } catch {
      //
    }
  },
  methods: {
    onChoice(id: number) {
      // 切换声部，初始化专辑，曲目选择
      if (id != createState.lessonGroup.lessonSubject) {
        createState.lessonList.forEach((element: any) => {
          element.relationList = []
        })
      }
      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 border={false}>
            <div class={styles.radioGroup}>
              <div
                onClick={() => {
                  createState.lessonGroup.payType = 'PAY'
                }}
                class={[
                  styles.radio,
                  createState.lessonGroup.payType === 'PAY'
                    ? styles.active
                    : null
                ]}
              >
                购买
              </div>
              <div
                onClick={() => {
                  createState.lessonGroup.payType = 'VIP'
                }}
                class={[
                  styles.radio,
                  createState.lessonGroup.payType === 'VIP'
                    ? styles.active
                    : null
                ]}
              >
                会员
              </div>
            </div>
          </ColField>
        </ColFieldGroup>

        {createState.lessonGroup.payType === 'PAY' && (
          <>
            {!this.checked && (
              <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>
                您的课程收入将在学员购买{createState.video_account_period}
                天后结算到您的账户中
              </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 zIndex={9999999}>
          <ColHeader />
          <SubjectModel
            selectType="Radio"
            single
            subjectList={createState.subjectList}
            choiceSubjectIds={this.choiceSubjectIds}
            onChoice={this.onChoice}
          />
        </ColPopup>
      </Form>
    )
  }
})