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'
import { tradeOrder } from '../trade/tradeOrder'
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-student/videoLesson/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: 'VIDEO',
              bizId: this.params.groupId
            }
          }
        )
        const userInfo = this.userInfo
        orderStatus.orderObject.orderType = 'VIDEO'
        orderStatus.orderObject.orderName = '视频课购买'
        orderStatus.orderObject.orderDesc = '视频课购买'
        orderStatus.orderObject.actualPrice = userInfo.lessonPrice
        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
          }
        ]

        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}>
                立即购买
              </Button>
            </div>
          </Sticky>
        )}
      </div>
    )
  }
})