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

import CoursePlanStep from '@/business-components/course-plan-step'
import SectionDetail from '@/business-components/section-detail'
import UserDetail from '@/business-components/user-detail'
import UserList from '@/business-components/user-list'
import ColResult from '@/components/col-result'
import { postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import { state } from '@/state'
import dayjs from 'dayjs'
import { Button, Sticky, Tab, Tabs, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './live-detail.module.less'
interface IProps {
  courseTime: string
  coursePlan: string
  videoPosterUrl?: string
  id?: number | string
}
export default defineComponent({
  name: 'LiveDetail',
  data() {
    const query = this.$route.query
    return {
      groupId: query.groupId,
      courseId: query.courseId,
      live: {} as any
    }
  },
  computed: {
    userInfo() {
      const live = this.live as any
      const planList = live.planList || []
      const startTime = planList[0]?.startTime || new Date()
      const endTime = planList[0]?.endTime || new Date()
      return {
        headUrl: state.user.data?.heardUrl,
        username:
          state.user.data?.username || `游客${state.user.data?.userId || ''}`,
        startTime:
          `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
            'HH:mm'
          )}~${dayjs(endTime).format('HH:mm')}` || '',
        lessonPrice: live.coursePrice,
        buyNum: live.studentCount || 0,
        lessonDesc: live.courseIntroduce,
        lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
        lessonName: live.courseGroupName
      }
    },
    courseInfo() {
      let tempArr = [] as IProps[]
      const coursePlanList = this.live.planList || []
      coursePlanList.forEach((item: any) => {
        const startTime = item.startTime || new Date()
        const endTime = item.endTime || new Date()
        tempArr.push({
          courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
            startTime
          ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
          coursePlan: item.plan,
          id: item.id
        })
      })
      return tempArr || []
    },
    studentList() {
      const live = this.live as any
      return live.studentList || []
    },
    courseOffStatus() {
      const live = this.live as any
      let status = false
      if (
        (live.status === 'APPLY' && live.studentList.length === 0) ||
        live.status === 'NOT_SALE'
      ) {
        status = true
      }
      return status
    }
  },
  async mounted() {
    try {
      const res = await request.get(
        '/api-teacher/courseGroup/queryLiveCourseInfo',
        {
          params: {
            groupId: this.groupId
          }
        }
      )
      console.log(res)
      this.live = res.data || {}

      console.log(this.live)
    } catch {}
  },
  methods: {
    async cancelCourseGroup() {
      try {
        const res = await request.get(
          '/api-teacher/courseGroup/cancelCourseGroup',
          {
            params: {
              groupId: this.groupId
            }
          }
        )
        Toast('下架成功')
        setTimeout(() => {
          postMessage({ api: 'back', content: {} })
        }, 500)
      } catch {}
    }
  },
  render() {
    return (
      <div class={[styles['live-detail'], 'mb12']}>
        <UserDetail userInfo={this.userInfo} />
        <SectionDetail>
          <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">
              <CoursePlanStep
                courseInfo={this.courseInfo}
                courseId={Number(this.courseId) || 0}
              />
            </Tab>
            <Tab title="学员列表" titleClass="van-hairline--bottom">
              {this.studentList.map((item: any) => (
                <UserList
                  class="mb12"
                  users={{
                    avatar: item.avatar,
                    studentId: item.studentId,
                    studentName: item.userName,
                    createTime: item.createTime
                  }}
                />
              ))}
              {this.studentList.length === 0 && (
                <ColResult
                  tips="暂无购买学员"
                  classImgSize="SMALL"
                  btnStatus={false}
                />
              )}
            </Tab>
          </Tabs>
        </SectionDetail>

        {this.courseOffStatus && (
          <Sticky offsetBottom={0} position="bottom">
            <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
              <Button
                block
                round
                type="primary"
                onClick={this.cancelCourseGroup}
              >
                下架
              </Button>
            </div>
          </Sticky>
        )}
      </div>
    )
  }
})