更新组件

src/business-components/section-detail/index.tsx

@@ -21,17 +21,27 @@ export default defineComponent({
     border: {
       type: Boolean,
       default: true
+    },
+    titleShow: { // 是否显示标题
+      type: Boolean,
+      default: true
+    },
+    contentClass: {
+      type: String
+    },
+    contentStyle: {
+      type: Object
     }
   },
   render() {
     return (
       <div class={styles['section-detail']}>
         <CellGroup>
-          <Cell center border={this.border} v-slots={{
+          {this.titleShow ? <Cell center border={this.border} v-slots={{
             icon: () => (<Icon name={this.icon === 'courseIntroduction' ? courseIntroduction : courseList} size="18" />),
             title: () => (<div class={styles.name}>{this.title}</div>),
-          }}></Cell>
-          <Cell center>
+          }}></Cell> : null}
+          <Cell center class={this.contentClass} style={this.contentStyle}>
             {this.$slots.default && this.$slots.default()}
           </Cell>
         </CellGroup>

src/teacher/teacher-cert/module/subject-model.module.less → src/business-components/subject-list/index.module.less

@@ -10,7 +10,7 @@
       display: inline-block;
       width: 3px;
       height: 16px;
-      background: #2DC7AA;
+      background: #2dc7aa;
       border-radius: 3px;
       margin-right: 8px;
       vertical-align: text-bottom;
@@ -23,7 +23,7 @@
     left: 0;
     right: 0;
     margin: 12px;
-    background-color: #fff;
+    // background-color: #fff;
   }
 
   .subject-list {
@@ -52,7 +52,11 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
+      background: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, 0.54) 100%
+      );
     }
 
     .checkbox {
@@ -67,7 +71,7 @@
       left: 7px;
       font-size: 16px;
       font-weight: 500;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 22px;
     }
 
@@ -80,8 +84,8 @@
       }
       .van-checkbox__icon--checked .van-icon {
         background: transparent;
-        border: transparent
+        border: transparent;
       }
     }
   }
-}
+}

src/teacher/teacher-cert/module/subject-model.tsx → src/business-components/subject-list/index.tsx

@@ -1,13 +1,13 @@
 import { Button, Checkbox, CheckboxGroup, Icon, Image, Loading } from "vant";
 import { defineComponent } from "vue";
-import styles from './subject-model.module.less';
+import styles from './index.module.less';
 
-import checkBoxActive from '../images/checkbox_active.png';
-import checkBoxDefault from '../images/checkbox_default.png';
+import checkBoxActive from '@/teacher/teacher-cert/images/checkbox_active.png';
+import checkBoxDefault from '@/teacher/teacher-cert/images/checkbox_default.png';
 import ColResult from "@/components/col-result";
 
 export default defineComponent({
-  name: "subject-model",
+  name: "SubjectList",
   props: {
     onChoice: {
       type: Function,
@@ -45,7 +45,7 @@ export default defineComponent({
       <div class={styles.subjects}>
         {this.subjectList.length ? <CheckboxGroup v-model={this.checkBox} max={this.max}>
           {this.subjectList.map((item: any) => (
-            <>
+            item.subjects && item.subjects.length > 0 ? <>
               <div class={styles.title}>{item.name}</div>
               <div class={styles['subject-list']}>
                 {item.subjects && item.subjects.map((sub: any) => (
@@ -64,7 +64,7 @@ export default defineComponent({
                   </div>
                 ))}
               </div>
-            </>
+            </> : null
           ))}
         </CheckboxGroup> : <ColResult tips="暂无声部数据" btnStatus={false} />}
 

src/business-components/user-list/index.module.less

@@ -0,0 +1,26 @@
+.user-detail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  line-height: 22px;
+  color: #1a1a1a;
+  .user-names {
+    display: flex;
+    align-items: center;
+  }
+
+  .user-logo {
+    width: 40px;
+    height: 40%;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 8px;
+  }
+
+  .user-time {
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+  }
+}

src/business-components/user-list/index.tsx

@@ -0,0 +1,20 @@
+import { Image } from "vant";
+import { defineComponent } from "vue";
+import styles from './index.module.less';
+
+import defaultIcon from '@common/images/icon_teacher.png';
+
+export default defineComponent({
+  name: "UserDetail",
+  render() {
+    return (
+      <div class={styles['user-detail']}>
+        <div class={styles['user-names']}>
+          <Image class={styles['user-logo']} src={defaultIcon} fit="cover" />
+          邓飞宇
+        </div>
+        <span class={styles['user-time']}>2022年3月31日19:26:37</span>
+      </div>
+    )
+  }
+})

src/router/routes-teacher.ts

@@ -25,7 +25,7 @@ export default [
         component: () => import('@/teacher/home/index')
       },
       {
-        path: 'teacherCert',
+        path: '/teacherCert',
         name: 'teacherCert',
         component: () => import('@/teacher/teacher-cert/index'),
         meta: {
@@ -47,7 +47,7 @@ export default [
         }
       },
       {
-        path: 'openLive',
+        path: '/openLive',
         name: 'openLive',
         component: () => import('@/teacher/open-live/index'),
         meta: {
@@ -55,7 +55,15 @@ export default [
         }
       },
       {
-        path: 'musicCert',
+        path: '/liveDetail',
+        name: 'liveDetail',
+        component: () => import('@/teacher/open-live/live-detail'),
+        meta: {
+          title: '直播课详情'
+        }
+      },
+      {
+        path: '/musicCert',
         name: 'musicCert',
         component: () => import('@/teacher/music-cert/index'),
         meta: {
@@ -63,12 +71,20 @@ export default [
         }
       },
       {
-        path: 'videoCreate',
+        path: '/videoCreate',
         name: 'videoCreate',
         component: () => import('@/teacher/video-class/create'),
         meta: {
           title: '创建视频课'
         }
+      },
+      {
+        path: '/videoDetail',
+        name: 'videoDetail',
+        component: () => import('@/teacher/video-class/video-detail'),
+        meta: {
+          title: '视频课详情'
+        }
       }
     ]
   },

src/teacher/open-live/live-detail.module.less

@@ -0,0 +1,13 @@
+.live-detail {
+  .introduction {
+    color: #7a7a7a;
+    line-height: 23px;
+    padding-bottom: 8px;
+  }
+
+  :global {
+    .van-tabs__wrap {
+      margin-bottom: 15px;
+    }
+  }
+}

src/teacher/open-live/live-detail.tsx

@@ -0,0 +1,41 @@
+import SectionDetail from "@/business-components/section-detail";
+import UserDetail from "@/business-components/user-detail";
+import UserList from "@/business-components/user-list";
+import { Tab, Tabs } from "vant";
+import { defineComponent } from "vue";
+import styles from "./live-detail.module.less";
+
+export default defineComponent({
+  name: "LiveDetail",
+  render() {
+    return (
+      <div class={[styles['live-detail'], 'mb12']}>
+        <UserDetail />
+        <SectionDetail>
+          <p class={styles.introduction}>小酷老师带您零基础学习竖笛，通过4节课的学习掌握竖笛演奏的基本方式，培养娘好的吐息习惯。</p>
+        </SectionDetail>
+
+        <SectionDetail title="课程列表" icon="courseList" titleShow={false} contentStyle={{ paddingTop: '0' }}>
+          <Tabs color="var(--van-primary)" lineWidth={20} sticky>
+            <Tab title="全部课程" titleClass="van-hairline--bottom">
+              {/* {[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(item => (
+                <CourseVideoItem class={'mb12'} detail={{
+                  id: 1,
+                  title: "竖笛演奏基础",
+                  content: "使学生初步了解竖笛的构造，学会吹奏姿势掌握基本呼吸掌握基本呼吸掌握基本呼吸方法。",
+                  imgUrl: 'https://daya.ks3-cn-beijing.ksyun.com/202201/SvB6tqR.png'
+                }} onPlay={this.onPlay} />
+              ))} */}
+              1111
+            </Tab>
+            <Tab title="已购课程" titleClass="van-hairline--bottom">
+              {[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(item => (
+                <UserList class="mb12" />
+              ))}
+            </Tab>
+          </Tabs>
+        </SectionDetail>
+      </div>
+    )
+  }
+})

src/teacher/teacher-cert/cert-two.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue";
 import ColField from "@/components/col-field";
-import SubjectModel from './module/subject-model';
+import SubjectModel from '../../business-components/subject-list';
 import styles from './cert-two.module.less';
 import { Button, Field, Icon, Popup, Tag } from "vant";
 import { teacherState } from "./teacherState";

src/teacher/video-class/class-info.tsx

@@ -6,7 +6,7 @@ import request from "@/helpers/request";
 import { create } from "domain";
 import { Button, Col, Field, Form, Image, Row, Sticky } from "vant";
 import { defineComponent } from "vue";
-import SubjectModel from "../teacher-cert/module/subject-model";
+import SubjectModel from "../../business-components/subject-list";
 import styles from "./class-info.module.less";
 import { createState } from './createState'
 
@@ -145,7 +145,7 @@ export default defineComponent({
                     </Col>
                     <Col span={12} class={styles.imgContainer}>
                       <ColUpload cropper options={{
-                        fixedNumber: [3 , 2],
+                        fixedNumber: [3, 2],
                         autoCropWidth: 750,
                         autoCropHeight: 500,
                       }} v-model={createState.createVideo.courseImg} class={styles.imgContainer} />

src/teacher/video-class/video-detail.module.less

@@ -0,0 +1,13 @@
+.video-detail {
+  .introduction {
+    color: #7a7a7a;
+    line-height: 23px;
+    padding-bottom: 8px;
+  }
+
+  :global {
+    .van-tabs__wrap {
+      margin-bottom: 15px;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import CourseVideoItem from "@/business-components/course-video-item";
+import SectionDetail from "@/business-components/section-detail";
+import UserDetail from "@/business-components/user-detail";
+import UserList from "@/business-components/user-list";
+import { Tab, Tabs } from "vant";
+import { defineComponent } from "vue";
+import styles from './video-detail.module.less';
+
+export default defineComponent({
+  name: 'VideoDetail',
+  methods: {
+    onPlay(detail: any) {
+      console.log(detail);
+    }
+  },
+  render() {
+    return (
+      <div class={[styles['video-detail'], 'mb12']}>
+        <UserDetail />
+        <SectionDetail>
+          <p class={styles.introduction}>小酷老师带您零基础学习竖笛，通过4节课的学习掌握竖笛演奏的基本方式，培养娘好的吐息习惯。</p>
+        </SectionDetail>
+
+        <SectionDetail title="课程列表" icon="courseList" titleShow={false} contentStyle={{ paddingTop: '0' }}>
+          <Tabs color="var(--van-primary)" lineWidth={20} sticky>
+            <Tab title="全部课程" titleClass="van-hairline--bottom">
+              {[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(item => (
+                <CourseVideoItem class={'mb12'} detail={{
+                  id: 1,
+                  title: "竖笛演奏基础",
+                  content: "使学生初步了解竖笛的构造，学会吹奏姿势掌握基本呼吸掌握基本呼吸掌握基本呼吸方法。",
+                  imgUrl: 'https://daya.ks3-cn-beijing.ksyun.com/202201/SvB6tqR.png'
+                }} onPlay={this.onPlay} />
+              ))}
+            </Tab>
+            <Tab title="已购课程" titleClass="van-hairline--bottom">
+              {[1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3].map(item => (
+                <UserList class="mb12" />
+              ))}
+            </Tab>
+          </Tabs>
+        </SectionDetail>
+      </div >
+    )
+  }
+})