2 years ago · 0e3e39b7f8
--- a/index.html
+++ b/index.html
@@ -38,8 +38,8 @@
 
				 
			
 
				 <body>
			
 
				   <div id="app"></div>
			
 
				-  <!-- <script type="module" src="/src/student/main.ts"></script> -->
			
 
				-  <script type="module" src="/src/teacher/main.ts"></script>
			
 
				+  <script type="module" src="/src/student/main.ts"></script>
			
 
				+  <!-- <script type="module" src="/src/teacher/main.ts"></script> -->
			
 
				 </body>
			
 
				 
			
 
				 </html>
			
--- a/src/common/images/icon_filter.png
+++ b/src/common/images/icon_filter.png
--- a/src/common/images/icon_search.png
+++ b/src/common/images/icon_search.png
--- a/src/components/col-header/index.module.less
+++ b/src/components/col-header/index.module.less
@@ -2,7 +2,8 @@
 
				   &.green {

			
 
				     background-color: var(--van-primary);

			
 
				     :global {

			
 
				-      .van-nav-bar__title, .van-icon {

			
 
				+      .van-nav-bar__title,

			
 
				+      .van-icon {

			
 
				         color: #fff;

			
 
				       }

			
 
				       .van-nav-bar__content {

			
@@ -10,6 +11,9 @@
 
				       }

			
 
				     }

			
 
				   }

			
 
				+  &.transparent {

			
 
				+    background-color: transparent;

			
 
				+  }

			
 
				 }

			
 
				 

			
 
				 .headerSection {

			
--- a/src/components/col-header/index.tsx
+++ b/src/components/col-header/index.tsx
@@ -1,10 +1,10 @@
 
				 import { postMessage } from "@/helpers/native-message";

			
 
				 import { NavBar } from "vant";

			
 
				-import { defineComponent } from "vue";

			
 
				+import { defineComponent, PropType } from "vue";

			
 
				 import styles from './index.module.less'

			
 
				 

			
 
				 type backIconColor = 'black' | 'white';

			
 
				-type backgroundType = 'white' | 'green';

			
 
				+type backgroundType = 'white' | 'green' | 'transparent';

			
 
				 

			
 
				 export default defineComponent({

			
 
				   name: "col-header",

			
@@ -24,13 +24,17 @@ export default defineComponent({
 
				     },

			
 
				     titleClass: String,

			
 
				     background: {

			
 
				-      type: String,

			
 
				-      default: 'white' as backgroundType

			
 
				+      type: String as PropType<backgroundType>,

			
 
				+      default: 'white'

			
 
				     },

			
 
				     rightText: String,

			
 
				     onClickRight: {

			
 
				       type: Function,

			
 
				       default: () => { }

			
 
				+    },

			
 
				+    border: {

			
 
				+      type: Boolean,

			
 
				+      default: true

			
 
				     }

			
 
				   },

			
 
				   data() {

			
@@ -87,7 +91,7 @@ export default defineComponent({
 
				   },

			
 
				   render() {

			
 
				     return (

			
 
				-      <>

			
 
				+      <div>

			
 
				         {this.$slots.content ?

			
 
				           <div style={{ paddingTop: `${this.navBarHeight}px` }} class={styles.headerSection}>

			
 
				             {this.$slots.content()}

			
@@ -95,15 +99,16 @@ export default defineComponent({
 
				           <><div style={{ paddingTop: `${this.navBarHeight}px` }} class={styles.headerSection}>

			
 
				             <NavBar title={this.headerTitle}

			
 
				               // style={{ height: this.titleHeight + 'px', lineHeight: this.titleHeight + 'px' }}

			
 
				-              class={[this.background === 'green' ? styles.green : null, styles.colHeader]}

			
 
				+              class={[styles[this.background], styles.colHeader]}

			
 
				               left-arrow={this.isBack}

			
 
				               rightText={this.rightText}

			
 
				               fixed={this.isFixed}

			
 
				+              border={this.border}

			
 
				               onClick-right={this.clickRight}

			
 
				               onClick-left={this.onClickLeft}></NavBar>

			
 
				           </div>

			
 
				             {this.$slots.default ? this.$slots.default() : null}</>}

			
 
				-      </>

			
 
				+      </div>

			
 
				     )

			
 
				   }

			
 
				 })
			
--- a/src/components/col-search/index.module.less
+++ b/src/components/col-search/index.module.less
@@ -0,0 +1,41 @@
 
				+:global {

			
 
				+  .van-search {

			
 
				+    padding-left: 14px;

			
 
				+    padding-right: 14px;

			
 
				+  }

			
 
				+}

			
 
				+.col-search {

			
 
				+  // padding-left: 14px;

			
 
				+  // padding-right: 14px;

			
 
				+  :global {

			
 
				+    .van-field__left-icon {

			
 
				+      display: flex;

			
 
				+      align-items: center;

			
 
				+    }

			
 
				+    .van-field__right-icon {

			
 
				+      font-size: 0;

			
 
				+    }

			
 
				+    .van-search__action {

			
 
				+      display: flex;

			
 
				+    }

			
 
				+  }

			
 
				+  &.default {

			
 
				+    :global {

			
 
				+      .van-search__content {

			
 
				+        background: #f3f3f3;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+

			
 
				+  &.white {

			
 
				+    :global {

			
 
				+      .van-search__content {

			
 
				+        background: #fff;

			
 
				+      }

			
 
				+    }

			
 
				+  }

			
 
				+

			
 
				+  .searchBtn {

			
 
				+    padding: 0 12px;

			
 
				+  }

			
 
				+}

			
--- a/src/components/col-search/index.tsx
+++ b/src/components/col-search/index.tsx
@@ -0,0 +1,64 @@
 
				+import { Button, Icon, Search } from "vant";

			
 
				+import { defineComponent, PropType } from "vue";

			
 
				+import styles from './index.module.less'

			
 
				+import iconSearch from '@common/images/icon_search.png';

			
 
				+import iconFilter from '@common/images/icon_filter.png';

			
 
				+

			
 
				+type inputBackground = 'default' | 'white'

			
 
				+

			
 
				+export default defineComponent({

			
 
				+  name: "ColSearch",

			
 
				+  props: {

			
 
				+    modelValue: {

			
 
				+      type: String,

			
 
				+      default: ''

			
 
				+    },

			
 
				+    showAction: {

			
 
				+      type: Boolean,

			
 
				+      default: false

			
 
				+    },

			
 
				+    placeholder: {

			
 
				+      type: String,

			
 
				+      default: '请输入搜索关键词'

			
 
				+    },

			
 
				+    background: {

			
 
				+      type: String,

			
 
				+      default: '#fff'

			
 
				+    },

			
 
				+    inputBackground: {

			
 
				+      type: String as PropType<inputBackground>,

			
 
				+      default: 'default'

			
 
				+    },

			
 
				+    onSearch: {

			
 
				+      type: Function,

			
 
				+      default: (val: string) => { }

			
 
				+    },

			
 
				+    onFilter: {

			
 
				+      type: Function,

			
 
				+      default: () => { }

			
 
				+    }

			
 
				+  },

			
 
				+  data() {

			
 
				+    return {

			
 
				+      search: ''

			
 
				+    }

			
 
				+  },

			
 
				+  mounted() {

			
 
				+

			
 
				+  },

			
 
				+  render() {

			
 
				+    return (

			
 
				+      <Search class={[styles['col-search'], styles[this.inputBackground]]} v-model={this.search}

			
 
				+        background={this.background}

			
 
				+        showAction={this.showAction}

			
 
				+        shape="round"

			
 
				+        placeholder={this.placeholder}

			
 
				+        onSearch={(val: string) => { this.onSearch(val) }}

			
 
				+        v-slots={{

			
 
				+          'left-icon': () => (<Icon name={iconSearch} size={16} />),

			
 
				+          'right-icon': () => (<Button class={styles.searchBtn} round type="primary" size="mini" onClick={() => { this.onSearch(this.search) }}>搜索</Button>),

			
 
				+          action: () => (<Icon name={iconFilter} size={28} onClick={() => { this.onFilter }} />)

			
 
				+        }} />

			
 
				+    )

			
 
				+  }

			
 
				+})
			
--- a/src/router/routes-student.ts
+++ b/src/router/routes-student.ts
@@ -31,6 +31,14 @@ export default [
 
				         meta: {
			
 
				           title: '陪练课'
			
 
				         }
			
 
				+      },
			
 
				+      {
			
 
				+        path: '/videoClass',
			
 
				+        name: 'videoClass',
			
 
				+        component: () => import('@/student/video-class/index'),
			
 
				+        meta: {
			
 
				+          title: '视频课'
			
 
				+        }
			
 
				       }
			
 
				     ]
			
 
				   },
			
--- a/src/student/video-class/images/banner.png
+++ b/src/student/video-class/images/banner.png
--- a/src/student/video-class/index.module.less
+++ b/src/student/video-class/index.module.less
@@ -0,0 +1,8 @@
 
				+.classHeader {

			
 
				+  // background: linear-gradient(180deg, #59e5d5 0%, #fff 100%);

			
 
				+  background: linear-gradient(#59e5d5, 30%, #ffffff);

			
 
				+}

			
 
				+.banner {

			
 
				+  background: #fff;

			
 
				+  padding: 12px 14px;

			
 
				+}

			
--- a/src/student/video-class/index.tsx
+++ b/src/student/video-class/index.tsx
@@ -0,0 +1,42 @@
 
				+import ColHeader from "@/components/col-header";

			
 
				+import ColSearch from "@/components/col-search";

			
 
				+import { Sticky, Image } from "vant";

			
 
				+import { defineComponent } from "vue";

			
 
				+import styles from './index.module.less'

			
 
				+import banner from './images/banner.png'

			
 
				+import VideoItem from "./video-item";

			
 
				+

			
 
				+export default defineComponent({

			
 
				+  name: "VideoClass",

			
 
				+  data() {

			
 
				+    return {

			
 
				+      search: ''

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    onClick() {

			
 
				+      console.log(this.search, 'search')

			
 
				+    },

			
 
				+    onSearch(val: string) {

			
 
				+      console.log(val, 'val')

			
 
				+    }

			
 
				+  },

			
 
				+  render() {

			
 
				+    return (

			
 
				+      <div>

			
 
				+        <Sticky offsetTop={0}>

			
 
				+          <ColHeader class={styles.classHeader} border={false} background="transparent" isFixed={false} />

			
 
				+          <ColSearch onSearch={this.onSearch} />

			
 
				+        </Sticky>

			
 
				+

			
 
				+        <div class={styles.banner}>

			
 
				+          <Image src={banner} />

			
 
				+        </div>

			
 
				+

			
 
				+        <div class={styles.videoList}>

			
 
				+          {[1, 2, 3].map((item: any) => <VideoItem />)}

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    );

			
 
				+  }

			
 
				+})
			
--- a/src/student/video-class/video-item.module.less
+++ b/src/student/video-class/video-item.module.less
--- a/src/student/video-class/video-item.tsx
+++ b/src/student/video-class/video-item.tsx
@@ -0,0 +1,28 @@
 
				+import { defineComponent } from "vue";

			
 
				+import { Image } from "vant";

			
 
				+import styles from './video-item.module.less'

			
 
				+

			
 
				+import iconTeacher from '@common/images/icon_teacher.png';

			
 
				+

			
 
				+export default defineComponent({

			
 
				+  name: "VideoItem",

			
 
				+  render() {

			
 
				+    return (

			
 
				+      <div class={styles.videoItem}>

			
 
				+        <Image src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />

			
 
				+

			
 
				+        <div class={styles.viSection}>

			
 
				+          <div class={styles.viTitle}>视频标题</div>

			
 
				+          <div class={styles.viUserInfo}>

			
 
				+            <Image src={iconTeacher} class={styles.viUserLogo} />

			
 
				+            <span class={styles.viUserName}>王老师</span>

			
 
				+            <span class={styles.viUserNum}>6人已购买</span>

			
 
				+          </div>

			
 
				+          <div class={styles.viPrice}>

			
 
				+            ￥120/4课时

			
 
				+          </div>

			
 
				+        </div>

			
 
				+      </div>

			
 
				+    )

			
 
				+  }

			
 
				+})
			
--- a/src/teacher/video-class/video-class-detail.module.less
+++ b/src/teacher/video-class/video-class-detail.module.less
@@ -2,7 +2,7 @@
 
				   .cell {

			
 
				     margin-bottom: 6px;

			
 
				   }

			
 
				-  .title {

			
 
				+  .titleInfo {

			
 
				     padding-left: 8px;

			
 
				     font-size: 15px;

			
 
				     font-weight: 500;

			
@@ -76,4 +76,40 @@
 
				       align-items: center;

			
 
				     }

			
 
				   }

			
 
				+

			
 
				+  .message-list {

			
 
				+    &.message-active {

			
 
				+      .title,

			
 
				+      .label {

			
 
				+        color: var(--van-primary) !important;

			
 
				+      }

			
 
				+    }

			
 
				+    .message-name {

			
 
				+      flex-basis: 70%;

			
 
				+      line-height: 1.2;

			
 
				+    }

			
 
				+    .message-time {

			
 
				+      font-size: 12px;

			
 
				+      color: #999;

			
 
				+    }

			
 
				+

			
 
				+    .userLogo {

			
 
				+      width: 34px;

			
 
				+      height: 34px;

			
 
				+      border-radius: 50%;

			
 
				+      margin-right: 8px;

			
 
				+    }

			
 
				+    .title {

			
 
				+      display: flex;

			
 
				+      justify-content: space-between;

			
 
				+      font-size: 14px;

			
 
				+      color: #999;

			
 
				+      font-weight: 500;

			
 
				+    }

			
 
				+    .label {

			
 
				+      font-size: 14px;

			
 
				+      color: #333333;

			
 
				+      line-height: 20px;

			
 
				+    }

			
 
				+  }

			
 
				 }

			
--- a/src/teacher/video-class/video-class-detail.tsx
+++ b/src/teacher/video-class/video-class-detail.tsx
@@ -62,7 +62,7 @@ export default defineComponent({
 
				             <ColVideo src={this.srcUrl} poster={this.posterUrl} />

			
 
				           )

			
 
				         }} />

			
 
				-        <Cell border={false} class={styles.cell} title={this.title} titleClass={styles.title} v-slots={{

			
 
				+        <Cell border={false} class={styles.cell} title={this.title} titleClass={styles.titleInfo} v-slots={{

			
 
				           icon: () => (<Icon name="video" size={18} style={{ display: 'flex', alignItems: 'center' }} />),

			
 
				           value: () => (<div class={styles.label}><span>1</span>/4课时</div>)

			
 
				         }}></Cell>

			
@@ -80,33 +80,6 @@ export default defineComponent({
 
				                     videoUrl: item.videoUrl

			
 
				                   }} onPlay={this.onPlay} />

			
 
				                 ))}

			
 
				-                {this.detailList.map((item: any) => (

			
 
				-                  <CourseVideoItem class={'mb12'} detail={{

			
 
				-                    id: item.id,

			
 
				-                    title: item.videoTitle,

			
 
				-                    content: item.videoContent,

			
 
				-                    imgUrl: item.coverUrl,

			
 
				-                    videoUrl: item.videoUrl

			
 
				-                  }} onPlay={this.onPlay} />

			
 
				-                ))}

			
 
				-                {this.detailList.map((item: any) => (

			
 
				-                  <CourseVideoItem class={'mb12'} detail={{

			
 
				-                    id: item.id,

			
 
				-                    title: item.videoTitle,

			
 
				-                    content: item.videoContent,

			
 
				-                    imgUrl: item.coverUrl,

			
 
				-                    videoUrl: item.videoUrl

			
 
				-                  }} onPlay={this.onPlay} />

			
 
				-                ))}

			
 
				-                {this.detailList.map((item: any) => (

			
 
				-                  <CourseVideoItem class={'mb12'} detail={{

			
 
				-                    id: item.id,

			
 
				-                    title: item.videoTitle,

			
 
				-                    content: item.videoContent,

			
 
				-                    imgUrl: item.coverUrl,

			
 
				-                    videoUrl: item.videoUrl

			
 
				-                  }} onPlay={this.onPlay} />

			
 
				-                ))}

			
 
				               </SectionDetail>

			
 
				             </div>

			
 
				 

			
@@ -136,7 +109,16 @@ export default defineComponent({
 
				           </Tab>

			
 
				           <Tab title="讨论" name={3}>

			
 
				             <div style={{ height: 'calc(100vh - 365px)', overflowY: 'auto' }}>

			
 
				-              <div style={{ height: '20vh' }}>主体请求</div>

			
 
				+              {[1, 2, 3].map((item: any) => (

			
 
				+                <Cell class={[styles['message-list'], styles['message-active']]} valueClass={styles['message-time']} v-slots={{

			
 
				+                  icon: () => (<Image class={styles.userLogo} src={this.users?.headUrl || iconTeacher} fit="cover" />),

			
 
				+                  title: () => (<div class={styles.title}>

			
 
				+                    <div class={styles['message-name']}>讨论讨论讨</div>

			
 
				+                    <div class={styles['message-time']}>2022年4月11日</div>

			
 
				+                  </div>),

			
 
				+                  label: () => (<div class={styles.label}>电光2323232323冷雾中</div>)

			
 
				+                }} />

			
 
				+              ))}

			
 
				             </div>

			
 
				 

			
 
				             <Sticky offsetBottom={0} position='bottom'>