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

import CourseVideoItem from '@/business-components/course-video-item'
import SectionDetail from '@/business-components/section-detail'
import UserDetail from '@/business-components/user-detail'
import UserList from '@/business-components/user-list'
import { Button, List, Popup, Sticky, Tab, Tabs, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './video-detail.module.less'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'
import ColShare from '@/components/col-share'
import ColSticky from '@/components/col-sticky'
import LiveItem from '@/views/live-class/live-item'
export default defineComponent({
  name: 'VideoDetail',
  data() {
    const query = this.$route.query
    return {
      userInfo: {} as any,
      detailList: [],
      buyUserList: [], // 购买学生数
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      share: query.share,
      params: {
        videoLessonGroupId: query.groupId,
        page: 1,
        rows: 20
      },
      shareStatus: false,
      shareUrl: ''
    }
  },
  async mounted() {
    try {
      const res = await request.get(
        '/api-teacher/videoLessonGroup/selectVideoLesson',
        {
          params: {
            groupId: this.params.videoLessonGroupId
          }
        }
      )
      const result = res.data || {}
      this.userInfo = {
        id: result.lessonGroup.teacherId,
        username: result.lessonGroup.username,
        headUrl: result.lessonGroup.avatar,
        buyNum: result.lessonGroup.countStudent,
        lessonId: result.lessonGroup.id,
        lessonNum: result.lessonGroup.lessonCount,
        lessonName: result.lessonGroup.lessonName,
        lessonDesc: result.lessonGroup.lessonDesc,
        lessonPrice: result.lessonGroup.lessonPrice,
        lessonCoverUrl: result.lessonGroup.lessonCoverUrl,
        lessonSubjectName: result.lessonGroup.lessonSubjectName
      }
      this.detailList = result.detailList || []

      // shareVideo?recomUserId=56&groupId=124
      this.shareUrl = `${location.origin}/teacher/#/shareVideo?recomUserId=${this.userInfo.id}&groupId=${this.params.videoLessonGroupId}`

      this.getList()
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    async getList() {
      try {
        const params = this.params
        const res = await request.post('/api-teacher/videoLesson/pageStudent', {
          data: {
            ...params
          }
        })
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.buyUserList.length > 0 && result.pageNo === 1) {
          return
        }
        this.buyUserList = this.buyUserList.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.buyUserList.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    },
    onPlay(detail: any) {
      this.$router.push({
        path: '/videoClassDetail',
        query: {
          groupId: this.params.videoLessonGroupId,
          classId: detail.id
        }
      })
    }
  },
  render() {
    return (
      <div class={[styles['video-detail'], 'mb12']}>
        {this.userInfo.id && <UserDetail userInfo={this.userInfo} />}
        <SectionDetail border>
          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
        </SectionDetail>

        <SectionDetail
          title="课程列表"
          icon="courseList"
          titleShow={false}
          contentStyle={{ paddingTop: '0' }}
        >
          <Tabs color="var(--van-primary)" lineWidth={20} sticky>
            <Tab title="课程" titleClass="van-hairline--bottom">
              {this.detailList.map((item: any) => (
                <CourseVideoItem
                  class={'mb12'}
                  detail={{
                    id: item.id,
                    title: item.videoTitle,
                    content: item.videoContent,
                    imgUrl: item.coverUrl
                  }}
                  onPlay={this.onPlay}
                />
              ))}
            </Tab>
            <Tab title="学员列表" titleClass="van-hairline--bottom">
              {this.dataShow ? (
                <List
                  v-model:loading={this.loading}
                  finished={this.finished}
                  finishedText="没有更多了"
                  onLoad={this.getList}
                >
                  {this.buyUserList.map((item: any) => (
                    <UserList
                      class="mb12"
                      users={{
                        avatar: item.avatar,
                        studentId: item.userId,
                        studentName: item.username,
                        createTime: item.createTime
                      }}
                    />
                  ))}
                </List>
              ) : (
                <ColResult
                  btnStatus={false}
                  classImgSize="SMALL"
                  tips="暂无学生购买"
                />
              )}
            </Tab>
          </Tabs>
        </SectionDetail>

        {this.share == '1' && this.detailList.length > 0 && (
          <ColSticky position="bottom">
            <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
              <Button
                block
                round
                type="primary"
                onClick={() => {
                  this.shareStatus = true
                }}
              >
                分享课程
              </Button>
            </div>
          </ColSticky>
        )}

        <Popup
          v-model:show={this.shareStatus}
          style={{ background: 'transparent' }}
        >
          <ColShare teacherId={this.userInfo.id} shareUrl={this.shareUrl}>
            <LiveItem
              class={styles.shareCourse}
              liveInfo={{
                backgroundPic: this.userInfo.lessonCoverUrl,
                courseGroupId: this.userInfo.lessonId,
                courseGroupName: this.userInfo.lessonName,
                courseNum: this.userInfo.lessonNum,
                coursePrice: this.userInfo.lessonPrice,
                teacherName: this.userInfo.username,
                teacherId: this.userInfo.id,
                avatar: this.userInfo.avatar,
                studentCount: this.userInfo.buyNum,
                existBuy: 0,
                subjectName: this.userInfo.lessonSubjectName
              }}
            />
          </ColShare>
        </Popup>
      </div>
    )
  }
})