更新

src/business-components/course-video-item/index.tsx

@@ -61,7 +61,7 @@ export default defineComponent({
             </div>
           ),
           title: () => (
-            <div class={styles.videoTitle}>
+            <div class={[styles.videoTitle, 'videoSmall']}>
               <p
                 class={[
                   styles.videoTitleText,

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

@@ -0,0 +1,7 @@
+.white {
+  background-color: #fff;
+  > div {
+    padding: 15px;
+    box-shadow: 0px 0px 10px 0px rgba(216, 216, 216, 0.5);
+  }
+}

src/components/col-sticky/index.tsx

@@ -1,5 +1,6 @@
 import { useRect } from '@vant/use'
 import { defineComponent } from 'vue'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'col-sticky',
@@ -7,6 +8,10 @@ export default defineComponent({
     position: {
       type: String,
       default: 'top' as 'top' | 'bottom'
+    },
+    background: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -32,7 +37,7 @@ export default defineComponent({
       <div style={this.sectionStyle}>
         <div
           ref="div"
-          class="van-sticky van-sticky--fixed"
+          class={['van-sticky van-sticky--fixed', styles[this.background]]}
           style={[this.divStyle, this.sectionStyle]}
         >
           {this.$slots.default && this.$slots.default()}

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

@@ -10,6 +10,7 @@ import iconTips from '@common/images/icon_tips.png'
 import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 import ColHeader from '@/components/col-header'
 import { postMessage } from '@/helpers/native-message'
+import ColSticky from '@/components/col-sticky'
 interface IProps {
   courseTime: string
   coursePlan: string
@@ -280,23 +281,37 @@ export default defineComponent({
           </p>
         </div>
         {this.courseInfo.length > 0 && this.live.existBuy !== 1 && (
-          <Sticky offsetBottom={0} position="bottom">
+          // <Sticky offsetBottom={0} position="bottom">
+          //   <div class={['btnGroup', styles.btnMore]}>
+          //     <Button block round type="primary" onClick={this.onBuy}>
+          //       {this.live.coursePrice <= 0 ? '免费领取' : `立即购买`}
+          //     </Button>
+          //   </div>
+          // </Sticky>
+          <ColSticky position="bottom" background="white">
             <div class={['btnGroup', styles.btnMore]}>
               <Button block round type="primary" onClick={this.onBuy}>
                 {this.live.coursePrice <= 0 ? '免费领取' : `立即购买`}
               </Button>
             </div>
-          </Sticky>
+          </ColSticky>
         )}
 
         {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
-          <Sticky offsetBottom={0} position="bottom">
+          // <Sticky offsetBottom={0} position="bottom">
+          //   <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+          //     <Button block round type="primary" onClick={this.onJoinRoom}>
+          //       进入直播间
+          //     </Button>
+          //   </div>
+          // </Sticky>
+          <ColSticky position="bottom" background="white">
             <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
               <Button block round type="primary" onClick={this.onJoinRoom}>
                 进入直播间
               </Button>
             </div>
-          </Sticky>
+          </ColSticky>
         )}
       </div>
     )

src/student/teacher-dependent/components/live.module.less

@@ -10,57 +10,76 @@
 }
 
 .liContent {
-  padding-left: 10px;
+  padding-left: 14px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   .liTitle {
     font-size: 15px;
     font-weight: 500;
     color: #1a1a1a;
     line-height: 20px;
-    padding-bottom: 8px;
-    padding-top: 8px;
+    padding-top: 4px;
     max-width: 180px;
   }
-  .avatar {
-    width: 18px;
-    height: 18px;
-    overflow: hidden;
-    border-radius: 50%;
-    margin-right: 6px;
-  }
-
-  .liUserInfo,
-  .userInfo {
-    display: flex;
-    align-items: center;
-    font-size: 13px;
-    color: #999999;
-    line-height: 18px;
-    flex-wrap: wrap;
-  }
+  // .avatar {
+  //   width: 18px;
+  //   height: 18px;
+  //   overflow: hidden;
+  //   border-radius: 50%;
+  //   margin-right: 6px;
+  // }
 
-  .userInfo {
-    padding-right: 10px;
-    margin-right: 10px;
-  }
+  // .liUserInfo,
+  // .userInfo {
+  //   display: flex;
+  //   align-items: center;
+  //   font-size: 13px;
+  //   color: #999999;
+  //   line-height: 18px;
+  //   flex-wrap: wrap;
+  // }
 
-  .num {
-    color: #ff802c;
-  }
+  // .userInfo {
+  //   padding-right: 10px;
+  //   margin-right: 10px;
+  // }
+}
+.num {
+  color: #ff802c;
+  font-size: 13px;
+}
 
-  .buyNum {
-    color: #999999;
-    display: flex;
-    align-items: center;
-    line-height: 1;
-  }
+.buyNum {
+  color: #ff802c;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  font-size: 13px;
 }
 
 .price {
+  // font-size: 14px;
+  // color: var(--van-primary);
+  // span {
+  //   font-weight: 600;
+  //   font-size: 16px;
+  // }
   font-size: 14px;
-  color: var(--van-primary);
-  span {
-    font-weight: 600;
-    font-size: 16px;
+  color: #999;
+
+  .priceNum {
+    color: #ff0000;
+    font-size: 18px;
+    font-weight: bold;
+    i {
+      font-size: 15px;
+      font-style: normal;
+    }
+  }
+  .label {
+    padding-left: 8px;
   }
 }
 
@@ -72,8 +91,8 @@
 
 .subjectName {
   position: absolute;
-  top: 8px;
-  left: 8px;
+  bottom: 4px;
+  left: 0px;
   font-size: 12px;
   padding: 3px 5px;
   color: #ffffff;
@@ -81,3 +100,10 @@
   border-radius: 1px;
   background: rgba(0, 0, 0, 0.29);
 }
+
+.timerString {
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  color: #666;
+}

src/student/teacher-dependent/components/live.tsx

@@ -97,9 +97,10 @@ export default defineComponent({
                 onClick={() => this.onDetail(item)}
               >
                 <Cell
+                  style={{ paddingTop: '19px', paddingBottom: '19px' }}
                   v-slots={{
                     icon: () => (
-                      <div style={{ position: 'relative' }}>
+                      <div style={{ position: 'relative', lineHeight: '0' }}>
                         <Image
                           class={styles.liCover}
                           src={item.backgroundPic}
@@ -115,7 +116,7 @@ export default defineComponent({
                         <div class={[styles.liTitle, 'van-ellipsis']}>
                           {item.courseGroupName}
                         </div>
-                        <div class={styles.liUserInfo}>
+                        {/* <div class={styles.liUserInfo}>
                           <div class={[styles.userInfo, 'van-hairline--right']}>
                             <Image
                               class={styles.avatar}
@@ -127,16 +128,22 @@ export default defineComponent({
                               {item.teacherName || `游客${item.teacherId}`}
                             </p>
                           </div>
-                          {item.existBuy === 1 ? (
-                            <span class={styles.buyNum}>
-                              {/* <Icon name={iconSuccess} size="15" /> */}
-                              已购买
-                            </span>
-                          ) : (
-                            <span class={styles.num}>
-                              {item.studentCount}人已购买
-                            </span>
+                        </div> */}
+                        <div class={styles.price}>
+                          {item.coursePrice > 0 && (
+                            <>
+                              <span class={styles.priceNum}>
+                                <i>¥</i>
+                                {(this as any).$filters.moneyFormat(
+                                  item.coursePrice
+                                )}
+                              </span>
+                            </>
                           )}
+                          <span class={styles.label}>
+                            {item.coursePrice > 0 && '/'}
+                            {item.courseNum}课时
+                          </span>
                         </div>
                       </div>
                     )
@@ -146,35 +153,22 @@ export default defineComponent({
                   titleStyle={{ color: '#666666', fontSize: '13px' }}
                   v-slots={{
                     title: () => (
-                      <span
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          fontSize: '13px'
-                        }}
-                      >
-                        <Icon
-                          name={iconTimer}
-                          size="16"
-                          style={{ marginRight: '5px' }}
-                        />
+                      <span class={styles.timerString}>
                         {this.formatTime(item.salesStartDate)}
                       </span>
                     ),
                     default: () => (
-                      <div class={styles.price}>
-                        {item.coursePrice > 0 && (
-                          <>
-                            <span>
-                              ¥
-                              {(this as any).$filters.moneyFormat(
-                                item.coursePrice
-                              )}
-                            </span>
-                            /
-                          </>
+                      <div>
+                        {item.existBuy === 1 ? (
+                          <span class={styles.buyNum}>
+                            {/* <Icon name={iconSuccess} size="15" /> */}
+                            已购买
+                          </span>
+                        ) : (
+                          <span class={styles.num}>
+                            {item.studentCount}人已购买
+                          </span>
                         )}
-                        {item.courseNum}课时
                       </div>
                     )
                   }}

src/student/teacher-dependent/model/teacher-header.module.less

@@ -21,9 +21,9 @@
     border: 2px solid #fff;
     background-color: #fff;
   }
-  .avatarActive{
-    border-color: #FFE0B9;
-    background-color: #FFE0B9;
+  .avatarActive {
+    border-color: #ffe0b9;
+    background-color: #ffe0b9;
   }
   .teacherIconVip {
     position: absolute;
@@ -83,16 +83,17 @@
     padding: 3px 12px 1px;
     min-width: 62px;
   }
-  .btnStar{
-    color: #F18400;
-    border-color: #F18400;
+  .btnStar {
+    color: #f18400;
+    border-color: #f18400;
   }
 }
 
 .subjectSection {
-  padding-right: 10px;
-  height: 18px;
-  max-width: 70px;
+  margin-right: 10px;
+  // height: 18px;
+  max-width: 68px;
+  box-sizing: content-box;
 }
 
 .teacher-bottom {
@@ -180,6 +181,7 @@
 .subjectList {
   overflow: auto;
   width: 255px;
+  // height: 18px;
   display: flex;
   flex-wrap: nowrap;
 }
@@ -191,13 +193,13 @@
   .subject {
     display: flex;
     align-items: center;
-    margin-left: 5px;
-    background: #fff1de;
-    border-radius: 4px;
+    margin-left: 4px;
+    background: #effbf9;
+    border-radius: 8px;
     font-size: 12px;
-    line-height: 12px;
-    color: #ff8c00;
-    padding: 3px;
+    line-height: 16px;
+    color: #2dc7aa;
+    padding: 0 5px;
     white-space: nowrap;
     &:first-child {
       margin-left: 0;
@@ -326,15 +328,15 @@
       flex-wrap: wrap;
     }
     .subject {
-      margin: 0 5px 5px 0;
+      margin: 2px 5px 3px 0;
     }
     .teacher-bottom {
       padding-top: 24px;
     }
     .unlinkeBtn {
       font-size: 12px;
-      color: #FF6363;
-      border: 1px solid #FF6363;
+      color: #ff6363;
+      border: 1px solid #ff6363;
       padding: 5px 10px;
       border-radius: 20px;
     }

src/student/teacher-dependent/model/teacher-header.tsx

@@ -166,7 +166,10 @@ export default defineComponent({
                   size="small"
                   plain
                   round
-                  class={[styles.btn, this.userInfo.isStar ? styles.btnStar : '']}
+                  class={[
+                    styles.btn,
+                    this.userInfo.isStar ? styles.btnStar : ''
+                  ]}
                   onClick={this.onStart}
                 >
                   {/* {!this.userInfo.isStar && <Icon name="plus" />} */}

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

@@ -18,4 +18,13 @@
       }
     }
   }
+
+  .videoItem {
+    .van-cell__title {
+      font-size: 22px;
+      p {
+        max-width: 100px;
+      }
+    }
+  }
 }

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

@@ -8,6 +8,7 @@ import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
 import { onSubmitZero, orderStatus } from '@/views/order-detail/orderStatus'
 import { tradeOrder } from '../trade/tradeOrder'
+import ColSticky from '@/components/col-sticky'
 export default defineComponent({
   name: 'VideoDetail',
   data() {
@@ -169,7 +170,7 @@ export default defineComponent({
         <SectionDetail title="课程列表" icon="courseList" class="mb12">
           {this.detailList.map((item: any) => (
             <CourseVideoItem
-              class={'mb12'}
+              class={['mb12', styles.videoItem]}
               detail={{
                 id: item.id,
                 title: item.videoTitle,
@@ -182,13 +183,20 @@ export default defineComponent({
         </SectionDetail>
 
         {this.userInfo.id && !this.userInfo.alreadyBuy && (
-          <Sticky offsetBottom={0} position="bottom">
+          // <Sticky offsetBottom={0} position="bottom">
+          //   <div class={['btnGroup', styles.btnMore]}>
+          //     <Button block round type="primary" onClick={this.onBuy}>
+          //       {this.userInfo.lessonPrice <= 0 ? '免费领取' : `立即购买`}
+          //     </Button>
+          //   </div>
+          // </Sticky>
+          <ColSticky position="bottom" background="white">
             <div class={['btnGroup', styles.btnMore]}>
               <Button block round type="primary" onClick={this.onBuy}>
                 {this.userInfo.lessonPrice <= 0 ? '免费领取' : `立即购买`}
               </Button>
             </div>
-          </Sticky>
+          </ColSticky>
         )}
       </div>
     )

src/student/video-class/video-item.module.less

@@ -12,7 +12,7 @@
   }
 
   .viSection {
-    padding: 8px;
+    padding: 8px 12px 13px;
   }
 
   .viTitle {
@@ -21,50 +21,66 @@
     line-height: 20px;
   }
 
-  .viUserInfo {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    color: #999;
-    padding: 8px 0;
+  // .viUserInfo {
+  //   display: flex;
+  //   align-items: center;
+  //   font-size: 12px;
+  //   color: #999;
+  //   padding: 8px 0;
 
-    .viUserLogo {
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      margin-right: 5px;
-      overflow: hidden;
-    }
+  //   .viUserLogo {
+  //     width: 18px;
+  //     height: 18px;
+  //     border-radius: 50%;
+  //     margin-right: 5px;
+  //     overflow: hidden;
+  //   }
 
-    .viUserName {
-      padding-right: 6px;
-      margin-right: 6px;
-      // &::after {
-      //   content: '|';
-      //   display: inline-block;
-      // }
-    }
+  //   .viUserName {
+  //     padding-right: 6px;
+  //     margin-right: 6px;
+  //     max-width: 60px;
+  //     white-space: nowrap;
+  //     overflow: hidden;
+  //     text-overflow: ellipsis;
+  //     flex: 1 auto;
+  //   }
+  // }
 
-    .viUserNum {
-      color: #ff802c;
-    }
+  .viUserNum {
+    padding-top: 4px;
+    color: #ff802c;
+    font-size: 12px;
   }
 
   .viPrice {
+    padding-top: 10px;
     font-size: 14px;
-    font-weight: 500;
-    color: #2dc7aa;
+    color: #999;
+
+    .priceNum {
+      color: #ff0000;
+      font-size: 18px;
+      font-weight: bold;
+      i {
+        font-size: 15px;
+        font-style: normal;
+      }
+    }
+    .label {
+      padding-left: 8px;
+    }
   }
 
   .subjectName {
     position: absolute;
-    top: 8px;
-    left: 8px;
-    font-size: 12px;
+    bottom: 6px;
+    right: 6px;
+    font-size: 10px;
     padding: 3px 5px;
     color: #ffffff;
     line-height: 1;
-    border-radius: 1px;
+    border-radius: 2px;
     background: rgba(0, 0, 0, 0.29);
   }
 }

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

@@ -15,6 +15,7 @@ interface VideoItemProps {
   lessonPrice: number
   countStudent: number
   lessonSubjectName: string
+  auditVersion: number
 }
 
 export default defineComponent({
@@ -46,24 +47,40 @@ export default defineComponent({
 
         <div class={styles.viSection}>
           <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
-          <div class={styles.viUserInfo}>
+          {/* <div class={styles.viUserInfo}>
             <Image
               src={item?.avatar || iconTeacher}
               class={styles.viUserLogo}
             />
             <span class={[styles.viUserName, 'van-hairline--right']}>
-              {item?.userName || `游客${item?.teacherId || ''}`}
+              {item?.userName ||
+                item?.username ||
+                `游客${item?.teacherId || ''}`}
             </span>
-            <span class={styles.viUserNum}>
-              {item?.countStudent}人已
-              {item?.lessonPrice > 0 ? '购买' : '领取'}
+          </div> */}
+          <div class={styles.viPrice}>
+            <span class={styles.priceNum}>
+              {item?.lessonPrice > 0 && (
+                <>
+                  <i>￥</i>
+                  {item?.lessonPrice}
+                </>
+              )}
+              {item?.lessonPrice <= 0 && item.auditVersion !== 0 && (
+                <>
+                  <i>￥</i>0
+                </>
+              )}
+              {item?.lessonPrice <= 0 && item.auditVersion === 0 && <>免费</>}
             </span>
+            <span class={styles.label}>/{item?.lessonCount}课时</span>
           </div>
-          <div class={styles.viPrice}>
-            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
-            {item?.lessonPrice <= 0 && item.auditVersion !== 0 && <>￥{0}/</>}
-            {item?.lessonPrice <= 0 && item.auditVersion === 0 && <>免费/</>}
-            {item?.lessonCount}课时
+
+          <div class={styles.viUserNum}>
+            {item?.countStudent}人已
+            {item?.lessonPrice <= 0 && item.auditVersion === 0
+              ? '领取'
+              : '购买'}
           </div>
         </div>
       </div>

src/views/live-class/index.tsx

@@ -30,6 +30,7 @@ export default defineComponent({
       openStatus: false,
       subjectList: [],
       sessionSubjectId,
+      lockLoading: false,
       params: {
         search: '',
         subjectId: (sessionSubjectId || subjectId || null) as any,
@@ -92,6 +93,8 @@ export default defineComponent({
     },
     async getList() {
       try {
+        if (this.lockLoading) return
+        this.lockLoading = true
         const params: any = {
           ...this.params
         }
@@ -115,6 +118,7 @@ export default defineComponent({
             ...params
           }
         })
+        this.lockLoading = false
         this.loading = false
         const result = res.data || {}
         // 处理重复请求数据
@@ -128,6 +132,7 @@ export default defineComponent({
       } catch {
         this.dataShow = false
         this.finished = true
+        this.lockLoading = false
       }
     },
     onDetail(item: any) {

src/views/video-class/index.tsx

@@ -3,7 +3,8 @@ import ColSearch from '@/components/col-search'
 import { Sticky, Image, List, Popup, Icon } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
-import VideoItem from './video-item'
+import VideoItem from '@/student/video-class/video-item'
+// import VideoItem from './video-item'
 
 import banner from './images/banner.png'
 import request from '@/helpers/request'

src/views/video-class/video-item.module.less

@@ -1,75 +0,0 @@
-.videoItem {
-  border-radius: 8px;
-  background-color: #fff;
-  overflow: hidden;
-  width: 168px;
-  margin-bottom: 12px;
-
-  .viCover {
-    height: 94px;
-    width: 100%;
-    vertical-align: middle;
-  }
-
-  .viSection {
-    padding: 8px;
-  }
-
-  .viTitle {
-    font-size: 14px;
-    color: #1a1a1a;
-    line-height: 20px;
-  }
-
-  .viUserInfo {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    color: #999;
-    padding: 8px 0;
-
-    .viUserLogo {
-      width: 18px;
-      height: 18px;
-      border-radius: 50%;
-      margin-right: 5px;
-      overflow: hidden;
-    }
-
-    .viUserName {
-      padding-right: 6px;
-      margin-right: 6px;
-      max-width: 60px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1 auto;
-      // &::after {
-      //   content: '|';
-      //   display: inline-block;
-      // }
-    }
-
-    .viUserNum {
-      color: #ff802c;
-    }
-  }
-
-  .viPrice {
-    font-size: 14px;
-    font-weight: 500;
-    color: #2dc7aa;
-  }
-
-  .subjectName {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    font-size: 12px;
-    padding: 3px 5px;
-    color: #ffffff;
-    line-height: 1;
-    border-radius: 1px;
-    background: rgba(0, 0, 0, 0.29);
-  }
-}

src/views/video-class/video-item.tsx

@@ -1,77 +0,0 @@
-import { defineComponent, PropType } from 'vue'
-import { Image } from 'vant'
-import styles from './video-item.module.less'
-
-import iconTeacher from '@common/images/icon_teacher.png'
-
-interface VideoItemProps {
-  id?: number
-  teacherId?: number
-  lessonName: string
-  userName: string
-  avatar: string
-  lessonCoverUrl: string
-  lessonCount: number
-  lessonPrice: number
-  countStudent: number
-  lessonSubjectName: string
-  auditVersion: number
-}
-
-export default defineComponent({
-  name: 'VideoItem',
-  props: {
-    item: Object as PropType<VideoItemProps>,
-    onClick: {
-      type: Function as PropType<(item: any) => void>,
-      default: (item: any) => {}
-    }
-  },
-  render() {
-    const item: any = this.item
-    return (
-      <div
-        class={styles.videoItem}
-        onClick={() => {
-          this.onClick(item)
-        }}
-      >
-        <div style={{ position: 'relative' }}>
-          <Image
-            class={styles.viCover}
-            fit="cover"
-            src={item?.lessonCoverUrl}
-          />
-          <span class={styles.subjectName}>{item?.lessonSubjectName}</span>
-        </div>
-
-        <div class={styles.viSection}>
-          <div class={[styles.viTitle, 'van-ellipsis']}>{item?.lessonName}</div>
-          <div class={styles.viUserInfo}>
-            <Image
-              src={item?.avatar || iconTeacher}
-              class={styles.viUserLogo}
-            />
-            <span class={[styles.viUserName, 'van-hairline--right']}>
-              {item?.userName ||
-                item?.username ||
-                `游客${item?.teacherId || ''}`}
-            </span>
-            <span class={styles.viUserNum}>
-              {item?.countStudent}人已
-              {item?.lessonPrice <= 0 && item.auditVersion === 0
-                ? '领取'
-                : '购买'}
-            </span>
-          </div>
-          <div class={styles.viPrice}>
-            {item?.lessonPrice > 0 && <>￥{item?.lessonPrice}/</>}
-            {item?.lessonPrice <= 0 && item.auditVersion !== 0 && <>￥{0}/</>}
-            {item?.lessonPrice <= 0 && item.auditVersion === 0 && <>免费/</>}
-            {item?.lessonCount}课时
-          </div>
-        </div>
-      </div>
-    )
-  }
-})