h5-colexiu/src/student/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 { Sticky, Button, Dialog } from 'vant'
import { defineComponent } from 'vue'
import styles from './video-detail.module.less'
import request from '@/helpers/request'
import ColHeader from '@/components/col-header'
import { orderStatus } from '@/views/order-detail/orderStatus'
export default defineComponent({
  name: 'VideoDetail',
  data() {
    const query = this.$route.query
    return {
      userInfo: {} as any,
      detailList: [],
      params: {
        groupId: query.groupId
      }
    }
  },
  async mounted() {
    try {
      const res = await request.get(
        '/api-teacher/videoLessonGroup/selectVideoLesson',
        {
          params: {
            groupId: this.params.groupId
          }
        }
      )
      const result = res.data || {}
      const lessonGroup = result.lessonGroup || {}
      this.userInfo = {
        alreadyBuy: result.alreadyBuy,
        username: lessonGroup.username || `游客${lessonGroup.teacherId || ''}`,
        headUrl: lessonGroup.avatar,
        buyNum: lessonGroup.countStudent,
        id: lessonGroup.id,
        lessonNum: lessonGroup.lessonCount,
        lessonName: lessonGroup.lessonName,
        lessonDesc: lessonGroup.lessonDesc,
        lessonPrice: lessonGroup.lessonPrice,
        teacherId: lessonGroup.teacherId,
        lessonCoverUrl: lessonGroup.lessonCoverUrl
      }
      this.detailList = result.detailList || []
    } catch {}
  },
  methods: {
    onPlay(detail: any) {
      this.$router.push({
        path: '/videoClassDetail',
        query: {
          groupId: this.params.groupId,
          classId: detail.id
        }
      })
    },
    async onBuy() {
      try {
        const res = await request.post(
          '/api-student/userOrder/getPendingOrder',
          {
            data: {
              goodType: 'LIVE',
              bizId: this.params.groupId
            }
          }
        )
        const userInfo = this.userInfo
        orderStatus.orderType = 'LIVE'
        orderStatus.videoInfo = {
          courseGroupId: userInfo.id,
          courseGroupName: userInfo.lessonName,
          coursePrice: userInfo.lessonPrice,
          teacherName: userInfo.username || `游客${userInfo.teacherId || ''}`,
          teacherId: userInfo.teacherId,
          avatar: userInfo.avatar,
          courseInfo: this.detailList
        }
        const result = res.data
        if (result) {
          Dialog.confirm({
            title: '提示',
            message: '您有一个未支付的订单，是否继续支付？',
            confirmButtonColor: '#269a93',
            cancelButtonText: '取消订单',
            confirmButtonText: '继续支付'
          })
            .then(async () => {
              orderStatus.orderInfo = {
                orderNo: result.orderNo,
                actualPrice: result.actualPrice,
                payStatus: true
              }
              this.routerTo()
            })
            .catch(() => {
              Dialog.close()
              // 只用取消订单，不用做其它处理
              this.cancelPayment(result.orderNo)
            })
        } else {
          this.routerTo()
        }
      } catch {}
    },
    routerTo() {
      this.$router.push({
        path: '/orderDetail',
        query: {
          orderType: 'VIDEO',
          courseGroupId: this.params.groupId
        }
      })
    },
    async cancelPayment(orderNo: string) {
      try {
        await request.post('/api-student/userOrder/orderCancel', {
          data: {
            orderNo
          }
        })
      } catch {}
    }
  },
  render() {
    return (
      <div class={[styles['video-detail']]}>
        <ColHeader />
        <UserDetail userInfo={this.userInfo} />
        <SectionDetail>
          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
        </SectionDetail>

        <SectionDetail title="课程列表" icon="courseList" class="mb12">
          {this.detailList.map((item: any) => (
            <CourseVideoItem
              class={'mb12'}
              detail={{
                id: item.id,
                title: item.videoTitle,
                content: item.videoContent,
                imgUrl: item.coverUrl
              }}
              onPlay={this.onPlay}
            />
          ))}
        </SectionDetail>

        {this.userInfo.id && (
          <Sticky offsetBottom={0} position="bottom">
            <div class={['btnGroup', styles.btnMore]}>
              <Button
                block
                round
                type="primary"
                onClick={this.onBuy}
                disabled={this.userInfo.alreadyBuy}
              >
                {this.userInfo.alreadyBuy ? '已购买' : '立即购买'}
              </Button>
            </div>
          </Sticky>
        )}
      </div>
    )
  }
})