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 {
      typeDateTime: 'start',
      dateStatus: false,
      currentDate: new Date(),
      minDate: dayjs().toDate(),
      maxDate: new Date()
    }
  },
  computed: {
    disabled() {
      return createState.live.courseGroupId ? true : false
    }
  },
  mounted() {
    if (createState.selectCourseList[0]?.startTime) {
      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="请选择开售日期"
              disabled={this.disabled}
              onClick={() => {
                if (createState.live.courseGroupId) {
                  return
                }
                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
              disabled={this.disabled}
              onClick={() => {
                if (createState.live.courseGroupId) {
                  return
                }
                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}
              disabled={this.disabled}
              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 ? (   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
                if (!createState.live.courseGroupId) {
                  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>
    )
  }
})