h5-colexiu/src/teacher/video-class/class-content.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 ColUploadVideo from '@/components/col-upload-video'
import {
  Button,
  Col,
  Dialog,
  Field,
  Form,
  Icon,
  Row,
  Sticky,
  Switch
} from 'vant'
import { defineComponent } from 'vue'
import styles from './class-content.module.less'
import { createState } from './createState'
import MusicAlbum from './model/music-album'

export default defineComponent({
  name: 'ClassContent',
  data() {
    return {
      url: '',
      checked: null,
      musicStatus: false,
      selectItem: {} as any // 选中的课程
    }
  },
  methods: {
    onSubmit(values: any) {
      createState.active = 3
    },
    addItem() {
      createState.lessonList.push({
        videoTitle: '',
        videoContent: '',
        videoUrl: '',
        coverUrl: '',
        relationList: [],
        posterUrl: '' // 视频封面图
      })
    },
    removeItem(index: number) {
      // 最少一节课
      if (createState.lessonList.length <= 1) return
      Dialog.confirm({
        title: '操作',
        message: `确定删除该条数据吗？`,
        confirmButtonColor: '#2DC7AA'
      }).then(() => {
        createState.lessonList.splice(index, 1)
      })
    },
    getName(item: any) {
      const relation =
        item.relationList.length > 0 ? item.relationList[0] : null
      return relation
        ? (relation.relationMusicAlbum === 'ALBUM' ? '专辑：' : '曲目：') +
            relation.musicAlbumName
        : ''
    }
  },
  render() {
    return (
      <Form
        class={styles['class-content']}
        onSubmit={this.onSubmit}
        scrollToError
      >
        <div class={styles.createVideoTips}>
          您可为每个视频关联曲目或专辑作为本课程教学内容推荐
        </div>
        {createState.lessonList.map((item: any, index: number) => (
          <>
            <div class={styles.titleSection}>
              <span class={styles.title}>第{index + 1}课</span>
              <Icon
                name="delete-o"
                style={{ fontWeight: 600 }}
                class={
                  createState.lessonList.length <= 1 ? styles.disabled : null
                }
                onClick={() => this.removeItem(index)}
                size={20}
              />
            </div>
            <ColFieldGroup>
              <ColField title="课程标题" required>
                <Field
                  v-model={item.videoTitle}
                  maxlength={50}
                  rules={[{ required: true, message: '请输入课程标题' }]}
                  name="videoTitle"
                  placeholder="请输入您的课程标题"
                />
              </ColField>
              <ColField title="课程内容" required>
                <Field
                  v-model={item.videoContent}
                  type="textarea"
                  rows="2"
                  autosize
                  showWordLimit
                  maxlength={200}
                  rules={[{ required: true, message: '请输入课程内容' }]}
                  name="videoContent"
                  placeholder="请输入您的课程内容"
                />
              </ColField>
              <ColField title="课程视频及视频封面" required border={false}>
                <Row
                  justify="space-between"
                  style={{ width: '100%', paddingTop: '12px' }}
                >
                  <Col span={12}>
                    <Field
                      style={{ padding: 0 }}
                      name="videoUrl"
                      rules={[{ required: true, message: '请上传课程视频' }]}
                      v-slots={{
                        input: () => (
                          <ColUploadVideo
                            bucket="video-course"
                            v-model={item.videoUrl}
                            v-model:posterUrl={item.posterUrl}
                            class={styles.upload}
                            tips="点击上传视频"
                          />
                        )
                      }}
                    />
                  </Col>
                  <Col span={12}>
                    <Field
                      style={{ padding: 0 }}
                      name="coverUrl"
                      rules={[{ required: true, message: '请上传课程封面' }]}
                      error
                      v-slots={{
                        input: () => (
                          <ColUpload
                            class={styles.upload}
                            cropper
                            bucket="video-course"
                            options={{
                              fixedNumber: [1.77, 1],
                              autoCropWidth: 750,
                              autoCropHeight: 424
                            }}
                            v-model={item.coverUrl}
                            tips="点击上传视频封面"
                          />
                        )
                      }}
                    />
                  </Col>
                </Row>
              </ColField>
              {/* <van-icon name="clear" /> */}
              <ColField title="关联曲目或专辑">
                <Field
                  modelValue={
                    item.relationList.length > 0 &&
                    item.relationList[0].musicAlbumId
                      ? this.getName(item)
                      : ''
                  }
                  readonly
                  isLink
                  clickable={false}
                  clearable
                  rightIcon={
                    item.relationList.length > 0 &&
                    item.relationList[0].musicAlbumId
                      ? 'clear'
                      : ''
                  }
                  onClick-right-icon={(e: MouseEvent) => {
                    e.stopPropagation()
                    item.relationList[0].musicAlbumId = 0
                    item.relationList[0].musicAlbumName = ''
                  }}
                  onClick={() => {
                    this.selectItem = item
                    this.musicStatus = true
                  }}
                  placeholder="请选择关联曲目或专辑"
                />
              </ColField>
            </ColFieldGroup>
          </>
        ))}

        <Button
          class={styles['add-item']}
          block
          icon="add-o"
          onClick={this.addItem}
        >
          添加课程
        </Button>

        <Sticky offsetBottom={0} position="bottom" zIndex={999999}>
          <div class={['btnGroup', 'btnMore']}>
            <Button
              block
              round
              type="primary"
              plain
              onClick={() => {
                createState.active = 1
              }}
            >
              上一步
            </Button>
            <Button block round type="primary" native-type="submit">
              提交
            </Button>
          </div>
        </Sticky>

        <ColPopup v-model={this.musicStatus} zIndex={999999}>
          <MusicAlbum
            subjectId={createState.lessonGroup.lessonSubject}
            onSelect={(item: any) => {
              this.musicStatus = false
              if (this.selectItem.relationList.length > 0) {
                this.selectItem.relationList[0].musicAlbumId = item.id
                this.selectItem.relationList[0].musicAlbumName =
                  item.selectType === 'ALBUM'
                    ? item.albumName
                    : item.musicSheetName
                this.selectItem.relationList[0].relationMusicAlbum =
                  item.selectType
              } else {
                this.selectItem.relationList = [
                  {
                    musicAlbumId: item.id,
                    musicAlbumName:
                      item.selectType === 'ALBUM'
                        ? item.albumName
                        : item.musicSheetName,
                    relationMusicAlbum: item.selectType,
                    useRelationType: 'RECOMMEND'
                  }
                ]
              }
            }}
          />
        </ColPopup>
      </Form>
    )
  }
})