添加免费购买功能

src/components/col-video/index.module.less

@@ -66,6 +66,14 @@
 
   .btn {
     margin: 10px 0;
+    min-width: 94px;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .replay {
+    padding-top: 12px;
   }
 }
 

src/components/col-video/index.tsx

@@ -58,6 +58,15 @@ export default defineComponent({
     onPlay: {
       type: Function,
       default: () => {}
+    },
+    isBuy: {
+      // 是否把购买方法在外部调用
+      type: Boolean,
+      default: false
+    },
+    onBuyEmit: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
@@ -89,12 +98,12 @@ export default defineComponent({
   },
   computed: {
     computedSeeStatus() {
-      console.log(
-        this.showSeeStatus,
-        this.trySee,
-        this.trySeeOver,
-        'this.showSeeStatus, this.trySee'
-      )
+      // console.log(
+      //   this.showSeeStatus,
+      //   this.trySee,
+      //   this.trySeeOver,
+      //   'this.showSeeStatus, this.trySee'
+      // )
       return this.showSeeStatus && this.trySee
     },
     playTime() {
@@ -164,7 +173,6 @@ export default defineComponent({
       }
       this.player.on('loadedmetadata', () => {
         this.loading = false
-        console.log('loading 1111')
         if (this.trySee) {
           this.domPlayVisibility()
         } else {
@@ -248,6 +256,10 @@ export default defineComponent({
       this.showSeeStatus = false
     },
     onBuy() {
+      if (this.isBuy) {
+        this.onBuyEmit()
+        return
+      }
       this.$router.back()
     },
     onReplay() {
@@ -315,32 +327,41 @@ export default defineComponent({
                   onClick={this.onClickPlay}
                 />
                 <p class={styles.freeTxt}>
-                  免费
-                  {this.freeTitleStatus ? '试看' : '领取'}
+                  免费试看
+                  {/* {this.freeTitleStatus ? '试看' : '领取'} */}
                 </p>
                 {/* <p class={styles.freeRate}>每课时可试看{this.freeRate}%</p> */}
               </>
             ) : (
               <>
-                <p class={styles.tips}>
-                  {this.freeTitleStatus
-                    ? '免费试看结束，购买完整课程后继续学习'
-                    : '试看结束，领取课程后继续学习'}
-                </p>
-                <Button
-                  class={styles.btn}
-                  type="primary"
-                  round
-                  size="small"
-                  onClick={this.onBuy}
+                {state.platformType === 'STUDENT' ? (
+                  <p class={styles.tips}>
+                    {this.freeTitleStatus
+                      ? '免费试看结束，购买完整课程后继续学习'
+                      : '试看结束，领取课程后继续学习'}
+                  </p>
+                ) : (
+                  <p class={styles.tips}>若需完整观看，请下载酷乐秀购买</p>
+                )}
+                {state.platformType === 'STUDENT' && (
+                  <Button
+                    class={styles.btn}
+                    type="primary"
+                    round
+                    size="small"
+                    onClick={this.onBuy}
+                  >
+                    {state.platformType === 'STUDENT'
+                      ? this.freeTitleStatus
+                        ? '立即购买'
+                        : '免费领取'
+                      : '返回免费'}
+                  </Button>
+                )}
+                <div
+                  class={state.platformType !== 'STUDENT' && styles.replay}
+                  onClick={this.onReplay}
                 >
-                  {state.platformType === 'STUDENT'
-                    ? this.freeTitleStatus
-                      ? '立即购买'
-                      : '免费领取'
-                    : '返回'}
-                </Button>
-                <div class={styles.replay} onClick={this.onReplay}>
                   <Icon
                     name="replay"
                     style={{ marginRight: '5px' }}

src/student/video-class/video-class-detail.tsx

@@ -14,7 +14,8 @@ import {
   Sticky,
   Field,
   List,
-  Toast
+  Toast,
+  Dialog
 } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './video-class-detail.module.less'
@@ -23,6 +24,7 @@ import { state } from '@/state'
 import iconTeacher from '@common/images/icon_teacher.png'
 import ColResult from '@/components/col-result'
 import dayjs from 'dayjs'
+import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 
 export default defineComponent({
   name: 'VideoClassDetail',
@@ -36,6 +38,7 @@ export default defineComponent({
       lessonPrice: 0,
       useRelationType: '',
       alreadyBuy: false,
+      videoDetail: {} as any,
       detailList: [],
       posterUrl: '',
       srcUrl: '',
@@ -74,32 +77,7 @@ export default defineComponent({
     this.navHeight = sessionStorage.getItem('navHeight') || 0
     try {
       //
-      this.reload = true
-      const res = await request.get(
-        '/api-student/videoLesson/selectVideoLesson',
-        {
-          params: {
-            groupId: this.groupId
-          }
-        }
-      )
-      const result = res.data || {}
-      this.title = result.lessonGroup.lessonName
-      this.lessonPrice = result.lessonGroup.lessonPrice
-      this.useRelationType = result.lessonGroup.relationType
-      this.alreadyBuy = result.alreadyBuy
-      this.detailList = result.detailList || []
-      this.trySee = !result.alreadyBuy
-      this.detailList.forEach((item: any, index: number) => {
-        if (item.id === Number(this.classId)) {
-          this.posterUrl = item.coverUrl
-          this.srcUrl = item.videoUrl
-          this.title = item.videoTitle
-          this.currentClassIndex = index + 1
-          this.videoContent = item.videoContent
-        }
-      })
-      this.reload = false
+      await this.__init()
 
       const config = await request.get(
         '/api-student/sysConfig/queryByParamNameList',
@@ -115,6 +93,39 @@ export default defineComponent({
     this.getList()
   },
   methods: {
+    async __init() {
+      try {
+        this.reload = true
+        const res = await request.get(
+          '/api-student/videoLesson/selectVideoLesson',
+          {
+            params: {
+              groupId: this.groupId
+            }
+          }
+        )
+        const result = res.data || {}
+        this.videoDetail = result.lessonGroup
+        this.title = result.lessonGroup.lessonName
+        this.lessonPrice = result.lessonGroup.lessonPrice
+        this.useRelationType = result.lessonGroup.relationType
+        this.alreadyBuy = result.alreadyBuy
+        this.detailList = result.detailList || []
+        this.trySee = !result.alreadyBuy
+        this.detailList.forEach((item: any, index: number) => {
+          if (item.id === Number(this.classId)) {
+            this.posterUrl = item.coverUrl
+            this.srcUrl = item.videoUrl
+            this.title = item.videoTitle
+            this.currentClassIndex = index + 1
+            this.videoContent = item.videoContent
+          }
+        })
+        this.reload = false
+      } catch {
+        //
+      }
+    },
     onSearch() {
       this.params.page = 1
       this.list = []
@@ -125,7 +136,7 @@ export default defineComponent({
     },
     async getList() {
       try {
-        let params = this.params
+        const params = this.params
         const res = await request.post('/api-student/videoLesson/page', {
           data: {
             ...params,
@@ -197,6 +208,50 @@ export default defineComponent({
                   src={this.srcUrl}
                   poster={this.posterUrl}
                   height={this.videoHeight}
+                  isBuy
+                  onBuyEmit={async () => {
+                    if (this.lessonPrice > 0) {
+                      this.$router.back()
+                      return
+                    }
+                    try {
+                      const userInfo = this.videoDetail
+                      orderStatus.orderObject.orderType = 'VIDEO'
+                      orderStatus.orderObject.orderName = '视频课购买'
+                      orderStatus.orderObject.orderDesc = '视频课购买'
+                      orderStatus.orderObject.actualPrice = userInfo.lessonPrice
+                      orderStatus.orderObject.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,
+                          relationType: userInfo.relationType,
+                          courseInfo: this.detailList,
+                          recomUserId: ''
+                        }
+                      ]
+                      await onSubmitZero(() => {
+                        Dialog.alert({
+                          message: '领取成功',
+                          confirmButtonText: '确定',
+                          confirmButtonColor: '#2dc7aa'
+                        }).then(() => {
+                          this.__init()
+                        })
+                      })
+                    } catch {
+                      //
+                    }
+                  }}
                 />
               )
           }}