h5-colexiu/src/student/video-class/video-class-detail.tsx

import CourseVideoItem from '@/business-components/course-video-item'
import SectionDetail from '@/business-components/section-detail'
import ColHeader from '@/components/col-header'
import ColVideo from '@/components/col-video'
import request from '@/helpers/request'
import {
  Cell,
  Icon,
  Rate,
  Tab,
  Tabs,
  Image,
  Button,
  Sticky,
  Field,
  List,
  Toast
} from 'vant'
import { defineComponent } from 'vue'
import styles from './video-class-detail.module.less'
import { state } from '@/state'

import iconTeacher from '@common/images/icon_teacher.png'
import ColResult from '@/components/col-result'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'VideoClassDetail',
  data() {
    const query = this.$route.query
    return {
      groupId: query.groupId,
      classId: query.classId,
      tabIndex: 1,
      title: '',
      lessonPrice: 0,
      useRelationType: '',
      alreadyBuy: false,
      detailList: [],
      posterUrl: '',
      srcUrl: '',
      message: '',
      navHeight: 0 as any,
      currentClassIndex: 1,
      reload: false,
      videoContent: '',
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 20
      },
      freeRate: 0, // 试看百分比
      trySee: false, // 是否试看
      videoHeight: '212px'
    }
  },
  computed: {
    users() {
      return state.user.data
    },
    offsetTop() {
      const navHeight: number = this.navHeight
      const top = Number(navHeight) + 44
      return top + 'px'
    }
  },
  async mounted() {
    // 处理视频显示
    const width = document.body.clientWidth || document.body.offsetWidth
    this.videoHeight = (width / 16) * 9 + 'px'
    this.navHeight = sessionStorage.getItem('navHeight') || 0
    try {
      //
      this.reload = true
      const res = await request.get(
        '/api-student/videoLesson/selectVideoLesson',
        {
          params: {
            groupId: this.groupId
          }
        }
      )
      const result = res.data || {}
      this.title = result.lessonGroup.lessonName
      this.lessonPrice = result.lessonGroup.lessonPrice
      this.useRelationType = result.lessonGroup.relationType
      this.alreadyBuy = result.alreadyBuy
      this.detailList = result.detailList || []
      this.trySee = !result.alreadyBuy
      this.detailList.forEach((item: any, index: number) => {
        if (item.id === Number(this.classId)) {
          this.posterUrl = item.coverUrl
          this.srcUrl = item.videoUrl
          this.title = item.videoTitle
          this.currentClassIndex = index + 1
          this.videoContent = item.videoContent
        }
      })
      this.reload = false

      const config = await request.get(
        '/api-student/sysConfig/queryByParamNameList',
        {
          params: {
            paramNames: 'video_lesson_free_rate'
          }
        }
      )
      this.freeRate = config.data[0]?.paramValue || 0
    } catch {}

    this.getList()
  },
  methods: {
    onSearch() {
      this.params.page = 1
      this.list = []
      this.dataShow = true // 判断是否有数据
      this.loading = false
      this.finished = false
      this.getList()
    },
    async getList() {
      try {
        let params = this.params
        const res = await request.post('/api-student/videoLesson/page', {
          data: {
            ...params,
            videoId: this.classId
          }
        })
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    },
    onPlay(item: any) {
      // 判断是否点击的是当前播放的视频
      if (item.id === Number(this.classId)) {
        return
      }
      this.reload = true
      this.posterUrl = item.imgUrl
      this.srcUrl = item.videoUrl
      this.title = item.title
      this.currentClassIndex = item.index
      this.videoContent = item.content
      this.classId = item.id
      this.onSearch()
      setTimeout(() => {
        this.reload = false
      }, 0)
    },
    async onSubmit() {
      try {
        await request.post('/api-student/videoLesson/evaluate', {
          data: {
            isTeacher: 0,
            videoId: this.classId,
            content: this.message,
            studentId: state.user.data.userId
          }
        })
        Toast('评论成功')
        this.message = ''
        setTimeout(() => {
          this.onSearch()
        }, 500)
      } catch {}
    }
  },
  render() {
    return (
      <div class={styles['video-class-detail']}>
        {/* <Sticky offsetTop={0} position="top"> */}
        <ColHeader
          v-slots={{
            default: () =>
              !this.reload && (
                <ColVideo
                  freeRate={Number(this.freeRate)}
                  freeTitleStatus={this.lessonPrice > 0 ? true : false}
                  trySee={this.trySee}
                  src={this.srcUrl}
                  poster={this.posterUrl}
                  height={this.videoHeight}
                />
              )
          }}
        />
        {/* </Sticky> */}
        <Cell
          border={false}
          class={styles.cell}
          title={this.title}
          titleClass={[styles.titleInfo, 'van-ellipsis']}
          v-slots={{
            icon: () => (
              <Icon
                name="video"
                size={18}
                color="var(--van-primary)"
                style={{ display: 'flex', alignItems: 'center' }}
              />
            ),
            value: () => (
              <div class={styles.label}>
                <span>{this.currentClassIndex}</span>/{this.detailList.length}
                课时
              </div>
            )
          }}
        ></Cell>
        <div class={styles.videoDesc}>{this.videoContent}</div>

        <Tabs
          v-model:active={this.tabIndex}
          class={styles.infoField}
          color="var(--van-primary)"
          sticky
          offsetTop={this.offsetTop}
          lineWidth={20}
        >
          <Tab title="目录" name={1}>
            <div
              style={{
                // height: `calc(100vh - 320px - ${this.navHeight}px)`,
                overflowY: 'auto'
              }}
            >
              <SectionDetail title="课程列表" icon="courseList" border>
                {this.detailList.map((item: any, index: number) => {
                  const musicAlbumInfos = item.musicAlbumInfos || []
                  const temp = musicAlbumInfos.map((info: any) => {
                    return {
                      relationMusicAlbum: info.relationType,
                      musicAlbumName: info.name,
                      musicAlbumId: info.musicAlbumId,
                      status: info.status,
                      useRelationType: this.useRelationType
                    }
                  })
                  return (
                    <CourseVideoItem
                      musicAlbumInfos={temp}
                      playId={Number(this.classId)}
                      detail={{
                        id: item.id,
                        title: item.videoTitle,
                        content: item.videoContent,
                        imgUrl: item.coverUrl,
                        videoUrl: item.videoUrl,
                        index: index + 1
                      }}
                      onPlay={this.onPlay}
                      onMusicAlbumDetail={(item: any) => {
                        if (!this.alreadyBuy && !item.status) {
                          Toast('数据正在维护中，请稍后在试')
                          return
                        }
                        if (item.relationMusicAlbum === 'MUSIC') {
                          this.$router.push({
                            path: '/music-detail',
                            query: {
                              id: item.musicAlbumId
                            }
                          })
                        } else if (item.relationMusicAlbum === 'ALBUM') {
                          this.$router.push({
                            path: '/music-album-detail/' + item.musicAlbumId
                          })
                        }
                      }}
                    />
                  )
                })}
              </SectionDetail>
            </div>
          </Tab>
          <Tab title="讨论" name={3}>
            <div
              style={{
                // height: `calc(100vh - 380px - ${this.navHeight}px)`,
                overflowY: 'auto',
                marginBottom:
                  'calc(var(--van-cell-vertical-padding) * 2 + var( --van-cell-line-height))'
              }}
            >
              {this.dataShow ? (
                <List
                  v-model:loading={this.loading}
                  finished={this.finished}
                  finishedText=" "
                  immediateCheck={false}
                  onLoad={this.getList}
                >
                  {this.list.map((item: any) => (
                    <Cell
                      class={[
                        styles['message-list'],
                        item.isTeacher === 1 && styles['message-active']
                      ]}
                      valueClass={styles['message-time']}
                      v-slots={{
                        icon: () => (
                          <Image
                            class={styles.userLogo}
                            src={item.avatar || iconTeacher}
                            fit="cover"
                          />
                        ),
                        title: () => (
                          <div class={styles.title}>
                            <div class={styles['message-name']}>
                              {item.userName}
                            </div>
                            <div class={styles['message-time']}>
                              {dayjs(item.evaluateTime).format(
                                'YYYY年MM月DD日'
                              )}
                            </div>
                          </div>
                        ),
                        label: () => (
                          <div class={styles.label}>{item.content}</div>
                        )
                      }}
                    />
                  ))}
                </List>
              ) : (
                <ColResult btnStatus={false} tips="暂无讨论" />
              )}
            </div>

            {/* <Sticky offsetBottom={0} position="bottom"> */}
            <div class={styles.messageContainer}>
              <Field
                placeholder="快来讨论吧～"
                v-model={this.message}
                v-slots={{
                  button: () => (
                    <Button
                      type="primary"
                      disabled={!this.message}
                      style={{ padding: '0 20px' }}
                      size="small"
                      round
                      onClick={this.onSubmit}
                    >
                      发布
                    </Button>
                  )
                }}
              />
            </div>
            {/* </Sticky> */}
          </Tab>
        </Tabs>
      </div>
    )
  }
})