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

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 {
      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 = dayjs(this.minDate).format('YYYY-MM-DD')
    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) {
      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.currentDate = dayjs(
                  createState.live.salesStartDate
                ).toDate()
                this.dateStatus = true
              }}
              rules={[{ required: true, message: '请选择停售日期' }]}
            />
          </ColField>
          <ColField title="停售日期" required>
            <Field
              v-model={createState.live.salesEndDate}
              name="salesEndDate"
              readonly
              isLink
              onClick={() => {
                this.currentDate = dayjs(createState.live.salesEndDate).toDate()
                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"
                rules={[{ required: true, 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"
                rules={[{ required: true, message: '请选择课程声部' }]}
                v-slots={{
                  input: () => (
                    <Row justify="space-between" style={{ width: '100%' }}>
                      <Col span={12} class={styles.imgContainer}>
                        <ColUpload
                          cropper
                          options={{
                            fixedNumber: [3, 2],
                            autoCropWidth: 750,
                            autoCropHeight: 500
                          }}
                          onUploadChange={(val: any) => {
                            if (val) {
                              createState.live.backgroundPicTemplate = ''
                            }
                          }}
                          v-model={createState.live.backgroundPic}
                          class={styles.imgContainer}
                        />
                      </Col>
                    </Row>
                  )
                }}
              />
            ) : null}
          </ColField>
        </ColFieldGroup>

        <Sticky offsetBottom={0} position="bottom">
          <div class={['btnGroup', 'btnMore']}>
            <Button
              block
              round
              type="primary"
              plain
              onClick={() => {
                createState.active = 3
              }}
            >
              上一步
            </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>
    )
  }
})