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 { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
import { tradeOrder } from '../trade/tradeOrder'
export default defineComponent({
  name: 'VideoDetail',
  data() {
    const query = this.$route.query
    return {
      userInfo: {} as any,
      detailList: [],
      recomUserId: query.recomUserId, // 推荐人id
      params: {
        groupId: query.groupId
      }
    }
  },
  async mounted() {
    await this._init()
  },
  methods: {
    async _init() {
      try {
        const res = await request.get(
          '/api-student/videoLesson/selectVideoLesson',
          {
            params: {
              groupId: this.params.groupId
            }
          }
        )
        const result = res.data || {}
        const lessonGroup = result.lessonGroup || {}
        const teachertTag = result.teachertTag || ''
        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,
          auditVersion: lessonGroup.auditVersion,
          isDegree: teachertTag?.includes('DEGREE') || false,
          isTeacher: teachertTag?.includes('TEACHER') || false
        }
        this.detailList = result.detailList || []
      } catch {
        //
      }
    },
    onPlay(detail: any) {
      this.$router.push({
        path: '/videoClassDetail',
        query: {
          groupId: this.params.groupId,
          classId: detail.id
        }
      })
    },
    async onBuy() {
      try {
        const userInfo = this.userInfo
        orderStatus.orderObject.orderType = 'VIDEO'
        orderStatus.orderObject.orderName = '视频课购买'
        orderStatus.orderObject.orderDesc = '视频课购买'
        orderStatus.orderObject.actualPrice = userInfo.lessonPrice
        orderStatus.orderObject.recomUserId = this.recomUserId
        orderStatus.orderObject.orderNo = ''
        orderStatus.orderObject.orderList = [
          {
            orderType: 'VIDEO',
            goodsName: '视频课购买',
            courseGroupId: userInfo.id,
            courseGroupName: userInfo.lessonName,
            coursePrice: userInfo.lessonPrice,
            teacherName: userInfo.username || `游客${userInfo.teacherId || ''}`,
            teacherId: userInfo.teacherId,
            avatar: userInfo.headUrl,
            courseInfo: this.detailList,
            recomUserId: this.recomUserId
          }
        ]

        // 判断是否是0无订单
        if (userInfo.lessonPrice <= 0) {
          await onSubmitZero(() => {
            Dialog.alert({
              message: '领取成功',
              confirmButtonText: '确定',
              confirmButtonColor: '#2dc7aa'
            }).then(() => {
              this._init()
            })
          })
          return
        }

        const res = await request.post(
          '/api-student/userOrder/getPendingOrder',
          {
            data: {
              goodType: 'VIDEO',
              bizId: this.params.groupId
            }
          }
        )
        const result = res.data
        if (result) {
          Dialog.confirm({
            title: '提示',
            message: '您有一个未支付的订单，是否继续支付？',
            confirmButtonColor: '#269a93',
            cancelButtonText: '取消订单',
            confirmButtonText: '继续支付'
          })
            .then(async () => {
              tradeOrder(result, 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 && !this.userInfo.alreadyBuy && (
          <Sticky offsetBottom={0} position="bottom">
            <div class={['btnGroup', styles.btnMore]}>
              <Button block round type="primary" onClick={this.onBuy}>
                {this.userInfo.lessonPrice <= 0 ? '免费领取' : `立即购买`}
              </Button>
            </div>
          </Sticky>
        )}
      </div>
    )
  }
})