准备 扫码弹窗

1

src/views/videoDetailList/index.module.less

@@ -1,6 +1,6 @@
 .w1200 {
   width: 1200px;
-  margin: 0 auto;
+  margin: 20px auto 0;
 }
 
 .videoList {
@@ -15,6 +15,7 @@
   .detailLeft {
     width: 690px;
     margin-right: 16px;
+    background-color: #fff;
     .detailTopImg {
       width: 690px;
       margin-bottom: 20px;

src/views/videoDetailList/modals/videoCourseItem.module.less

@@ -6,6 +6,19 @@
     width: 240px;
     margin-right: 10px;
   }
+  .videoImgWrap {
+    cursor: pointer;
+    position: relative;
+    .player {
+      position: absolute;
+      width: 32px;
+      height: 32px;
+      left: 50%;
+      top: 50%;
+      margin-left: -16px;
+      margin-top: -16px;
+    }
+  }
   .courseInfo {
     padding-top: 8px;
     h4 {
@@ -27,5 +40,6 @@
       -webkit-line-clamp: 4;
       -webkit-box-orient: vertical;
     }
+
   }
 }

src/views/videoDetailList/modals/videoCourseItem.tsx

@@ -1,6 +1,6 @@
 
 import { defineComponent , toRefs, reactive, onMounted, ref } from 'vue'
-
+import player from '../images/player.png'
 import classes from './videoCourseItem.module.less'
 import detaile from '@/components/videoDetailItem/images/detaile.png'
 export default defineComponent({
@@ -16,16 +16,21 @@ export default defineComponent({
   },
   setup(props, conent) {
     const state = reactive({
-      title:props.item
+      title:props.item,
+      item:props.item
     })
     return () => (
       <>
         <div class={classes.videoWrap}>
-            <img src={detaile} alt="" />
+          <div  class={classes.videoImgWrap}>
+          <img src={state.item.coverUrl?state.item.coverUrl: detaile} alt="" />
+          <img src={player} alt="" class={classes.player} />
+          </div>
+
             <div class={classes.courseInfo}>
-              <h4>第1课时</h4>
+              <h4>{state.item.videoTitle}</h4>
               <p class={classes.courseDetial}>
-              小酷老师带您零基础学习竖笛，通过4节课的学习掌握竖笛演奏的基本方式，培养良好的吐息习惯，完整的演奏曲目。
+              {state.item.videoContent}
               </p>
             </div>
 

src/views/videoDetailList/videoDetail.tsx

@@ -33,7 +33,32 @@ export default defineComponent({
     const state = reactive({
       title: props.title,
       videoList: [],
-      id:'',
+      videoDetail: {
+        "auditId": 0,
+        "auditName": "",
+        "auditStatus": "",
+        "auditVersion": "",
+        "avatar": "",
+        "countStudent": 0,
+        "createTime": "",
+        "hotFlag": 0,
+        "id": 0,
+        "lessonCount": 0,
+        "lessonCoverUrl": "",
+        "lessonDesc": "",
+        "lessonName": "",
+        "lessonPrice": 0,
+        "lessonSubject": "",
+        "lessonSubjectName": "",
+        "lessonTag": "",
+        "realName": "",
+        "sortNumber": 0,
+        "teacherId": 0,
+        "topFlag": 0,
+        "updateTime": "",
+        "username": ""
+      },
+      id: '',
       pageInfo: {
         // 分页规则
         limit: 9, // 限制显示条数
@@ -46,10 +71,11 @@ export default defineComponent({
     const getVideoList = async () => {
       try {
         const res = await request.post(
-          '/api-website/open/videoLessonGroup/selectVideoLesson',
+          '/api-website/open/videoLessonGroup/info/page',
           {
             data: {
-              groupId: state.id,
+              auditStatus: 'PASS',
+              videoLessonGroupId: state.id,
               page: state.pageInfo.page,
               rows: state.pageInfo.limit
             }
@@ -61,11 +87,27 @@ export default defineComponent({
         console.log(e)
       }
     }
+    const getVideoDetail = async () => {
+      try {
+        const res = await request.get(
+          '/api-website/open/videoLessonGroup/selectVideoLesson',
+          {
+            data: {
+              groupId: state.id
+            }
+          }
+        )
+        state.videoDetail = {...res.data.lessonGroup}
+      } catch (e) {}
+    }
     onMounted(() => {
-      if(route.query.id){
+      if (route.query.id) {
         state.id = route.query.id as string
       }
       getVideoList()
+      setTimeout(() => {
+        getVideoDetail()
+      }, 100)
     })
     return () => (
       <>
@@ -73,7 +115,7 @@ export default defineComponent({
           <div class="wall" style={{ height: '70px' }}></div>
           <div class={[styles.w1200, styles.detailWrap]}>
             <div class={styles.detailLeft}>
-              <img src={detaile} class={styles.detailTopImg} alt="" />
+              <img src={ state.videoDetail.lessonCoverUrl?state.videoDetail.lessonCoverUrl :detaile} class={styles.detailTopImg} alt="" />
               <div class={styles.courseWrap}>
                 <div class={styles.courseTitle}>
                   <img src={courseIcon} alt="" />
@@ -81,7 +123,7 @@ export default defineComponent({
                 </div>
                 <div class={styles.courseInfo}>
                   <p>
-                    小酷老师带您零基础学习竖笛，通过8节课的学习掌握竖笛演奏的基本方式，培养良好的吐息习惯。
+                    {state.videoDetail.lessonDesc}
                   </p>
                 </div>
                 {/* courseList */}
@@ -89,11 +131,12 @@ export default defineComponent({
                   <div class={styles.courseTitle}>
                     <div class={styles.courseTitleLeft}>
                       <img src={TimetableIcon} alt="" />
-                      <span>课程介绍</span>
+                      <span>课程列表</span>
                     </div>
-                    <span class={styles.courseTitlTimer}>共8课时</span>
+                    <span class={styles.courseTitlTimer}>共{state.videoDetail.lessonCount}课时</span>
                   </div>
-                  <videoCourseItem></videoCourseItem>
+                  {state.videoList.map(item=>{return <videoCourseItem item={item}></videoCourseItem>})}
+
                 </div>
               </div>
               <pagination
@@ -147,13 +190,11 @@ export default defineComponent({
                   </div>
                 </div>
               </div>
-              <div  class={styles.otherCourse}>
-                <h2>
-                  其他课程
-                </h2>
+              <div class={styles.otherCourse}>
+                <h2>其他课程</h2>
                 <div>
                   <videoDetailItem></videoDetailItem>
-                {/* videoDetailItem */}
+                  {/* videoDetailItem */}
                 </div>
               </div>
             </div>