Merge branch 'ui-revision-9' into online

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.module.less

@@ -17,7 +17,7 @@
   .tips {
     background-color: white;
     border-radius: 10px;
-    margin: 14px;
+    margin: 14px 12px;
     padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
     h3 {
       display: flex;
@@ -27,6 +27,7 @@
       line-height: 1;
     }
     p {
+      text-align: justify;
       padding-top: 9px;
       font-size: 12px;
       color: #7a7a7a;

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
@@ -247,13 +248,14 @@ export default defineComponent({
       <div class={[styles['live-detail'], 'mb12']}>
         <ColHeader />
         <UserDetail userInfo={this.userInfo} showBuy={false} />
-        <SectionDetail>
+        <SectionDetail border>
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
         </SectionDetail>
 
         <SectionDetail
           title="课程列表"
           icon="courseList"
+          border
           contentStyle={{ paddingTop: '0' }}
         >
           {this.courseInfo.length > 0 && (
@@ -280,23 +282,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/components/music.tsx

@@ -40,6 +40,7 @@ export default defineComponent({
       <>
         <MusicList
           hideSearch
+          myself
           onItemClick={this.onItemClick}
           teacherId={this.teacherId}
         />

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/teacher-dependent/teacher-home.tsx

@@ -46,8 +46,8 @@ export default defineComponent({
     useEventListener(document, 'scroll', evt => {
       const { y } = useWindowScroll()
       // this.background = `rgba(255, 255, 255, ${y.value / 100})`
-      // console.log(y.value)
-      if (y.value > 142) {
+      // console.log(y.value) 142
+      if (y.value > 52) {
         this.headColor = '#000'
         this.background = '#fff'
         this.backIconColor = 'black'
@@ -83,7 +83,7 @@ export default defineComponent({
               this.$nextTick(() => {
                 const { height } = useRect((this as any).$refs.headers)
                 this.height = height
-                this.homeContaiterHeight = `calc(100vh - var(--van-tabs-line-height) - ${height}px - 15px)`
+                // this.homeContaiterHeight = `calc(100vh - var(--van-tabs-line-height) - ${height}px - 15px)`
               })
             }}
           />
@@ -106,29 +106,29 @@ export default defineComponent({
           }}
         >
           <Tab title="个人风采" name="single">
-            <div style={{minHeight: this.homeContaiterHeight}}>
+            <div style={{ minHeight: this.homeContaiterHeight }}>
               {this.tabs === 'single' && <Single userInfo={this.userInfo} />}
             </div>
           </Tab>
           <Tab title="陪练课" name="practice">
-            <div style={{minHeight: this.homeContaiterHeight}}>
+            <div style={{ minHeight: this.homeContaiterHeight }}>
               {this.tabs === 'practice' && (
                 <Practice userInfo={this.userInfo} />
               )}
             </div>
           </Tab>
           <Tab title="直播课" name="live">
-            <div style={{minHeight: this.homeContaiterHeight}}>
+            <div style={{ minHeight: this.homeContaiterHeight }}>
               {this.tabs === 'live' && <Live />}
             </div>
           </Tab>
           <Tab title="视频课" name="video">
-            <div style={{minHeight: this.homeContaiterHeight}}>
+            <div style={{ minHeight: this.homeContaiterHeight }}>
               {this.tabs === 'video' && <VideoList />}
             </div>
           </Tab>
           <Tab title="乐谱" name="music">
-            <div style={{minHeight: this.homeContaiterHeight}}>
+            <div style={{ minHeight: this.homeContaiterHeight }}>
               {this.tabs === 'music' && <Music />}
             </div>
           </Tab>

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

@@ -237,7 +237,7 @@ export default defineComponent({
                 overflowY: 'auto'
               }}
             >
-              <SectionDetail title="课程列表" icon="courseList">
+              <SectionDetail title="课程列表" icon="courseList" border>
                 {this.detailList.map((item: any, index: number) => (
                   <CourseVideoItem
                     class={'mb12'}

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() {
@@ -162,14 +163,14 @@ export default defineComponent({
       <div class={[styles['video-detail']]}>
         <ColHeader />
         <UserDetail userInfo={this.userInfo} />
-        <SectionDetail>
+        <SectionDetail border>
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
         </SectionDetail>
 
-        <SectionDetail title="课程列表" icon="courseList" class="mb12">
+        <SectionDetail title="课程列表" icon="courseList" class="mb12" border>
           {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/styles/index.less

@@ -139,6 +139,12 @@ body {
 //   transform: translateZ(0);
 //   -webkit-transform: translateZ(0);
 // }
+// .van-sticky--fixed {
+//   .btnGroup {
+//     background-color: #fff;
+//     padding-top: 15px;
+//   }
+// }
 
 .sticky {
   position: relative;

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

@@ -249,7 +249,7 @@ export default defineComponent({
         {this.live.status !== 'OUT_SALE' && (
           <>
             {this.courseOffStatus && (
-              <ColSticky position="bottom">
+              <ColSticky position="bottom" background="white">
                 <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
                   <Button
                     block
@@ -264,7 +264,7 @@ export default defineComponent({
             )}
 
             {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
-              <ColSticky position="bottom">
+              <ColSticky position="bottom" background="white">
                 <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
                   <Button block round type="primary" onClick={this.onJoinRoom}>
                     进入直播间
@@ -274,7 +274,7 @@ export default defineComponent({
             )}
 
             {this.share == '1' && this.courseInfo.length > 0 && (
-              <ColSticky position="bottom">
+              <ColSticky position="bottom" background="white">
                 <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
                   <Button
                     block

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

@@ -215,7 +215,7 @@ export default defineComponent({
         {this.shelvesFlag === 1 && (
           <>
             {this.share == '1' && this.detailList.length > 0 && (
-              <ColSticky position="bottom">
+              <ColSticky position="bottom" background="white">
                 <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
                   <Button
                     block
@@ -231,7 +231,7 @@ export default defineComponent({
               </ColSticky>
             )}
             {this.share != '1' && this.detailList.length > 0 && (
-              <ColSticky position="bottom">
+              <ColSticky position="bottom" background="white">
                 <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
                   <Button
                     block

src/views/live-class/index.tsx

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

src/views/music/album/index.tsx

@@ -225,6 +225,7 @@ export default defineComponent({
           >
             <SelectSubject
               isReset
+              type="ALBUM"
               searchParams={subject}
               onComfirm={onComfirmSubject}
             />

src/views/music/component/song/index.tsx

@@ -8,6 +8,8 @@ import { state } from '@/state'
 import request from '@/helpers/request'
 import ColShare from '@/components/col-share'
 import MusicIcon from '../../list/icons/music-icon.png'
+import collection_active from '../images/collection_active.png'
+import collection from '../images/collection.png'
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../images/${fileName}`
   const modules = import.meta.globEager('../images/*')
@@ -178,6 +180,7 @@ export default defineComponent({
                 )
               }}
             />
+
             {state.platformType === 'STUDENT' && (
               <Cell
                 border={false}
@@ -191,8 +194,8 @@ export default defineComponent({
                       <Image
                         src={
                           moreData.value.favorite
-                            ? getAssetsHomeFile('collection_active.png')
-                            : getAssetsHomeFile('collection.png')
+                            ? collection_active
+                            : collection
                         }
                       />
                     </div>

src/views/music/list/index.module.less

@@ -16,4 +16,11 @@
       margin-left: 4px;
     }
   }
-}
+}
+
+.alumnList {
+  padding: 0 12px;
+  border-radius: 18px;
+  background-color: #fff;
+  margin: 14px;
+}

src/views/music/list/index.tsx

@@ -11,6 +11,7 @@ import { getRandomKey, musicBuy } from '../music'
 import { state } from '@/state'
 import SelectSubject from '../search/select-subject'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import Song from '../component/song'
 
 const noop = () => {}
 
@@ -32,9 +33,16 @@ export default defineComponent({
     teacherId: {
       type: String || Number,
       default: ''
+    },
+    myself: {
+      type: Boolean,
+      default: false
     }
   },
-  setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
+  setup(
+    { hideSearch, defauleParams, onItemClick, teacherId, myself },
+    { expose }
+  ) {
     const subjects: any = useSubjectId(SubjectEnum.SEARCH)
     // 判断是否已有数据
     if (!subjects.id) {
@@ -107,8 +115,13 @@ export default defineComponent({
         createBy: teacherId
       }
       // if (state.platformType === 'TEACHER') {
-      tempParams.myself = false
+
       // }
+      if (myself) {
+        tempParams.myself = true
+      } else {
+        tempParams.myself = false
+      }
 
       try {
         const res = await request.post(`${apiSuffix.value}/music/sheet/list`, {
@@ -204,26 +217,48 @@ export default defineComponent({
             </Sticky>
           )}
 
-          {data.value && data.value.rows.length
-            ? data.value.rows.map(item => (
-                <Item
-                  data={item}
-                  onClick={() => {
-                    if (onItemClick === noop) {
-                      musicBuy(item)
-                    } else {
-                      onItemClick?.(item)
-                    }
-                  }}
-                />
-              ))
-            : !loading.value && (
-                <ColResult
-                  tips="暂无曲目"
-                  classImgSize="SMALL"
-                  btnStatus={false}
-                />
-              )}
+          {data.value && data.value.rows.length ? (
+            <div class={styles.alumnList}>
+              <Song
+                list={data.value.rows}
+                onDetail={(item: any) => {
+                  if (onItemClick === noop) {
+                    musicBuy(item)
+                  } else {
+                    onItemClick?.(item)
+                  }
+                  // if (onItemClick === noop || !onItemClick) {
+                  //   musicBuy(item, () => {}, {
+                  //     albumId: route.params.id,
+                  //     albumName: albumDetail.value?.albumName
+                  //   })
+                  // } else {
+                  //   onItemClick(item)
+                  // }
+                }}
+              />
+            </div>
+          ) : (
+            // data.value.rows.map(item => (
+            //     <Item
+            //       data={item}
+            //       onClick={() => {
+            //         if (onItemClick === noop) {
+            //           musicBuy(item)
+            //         } else {
+            //           onItemClick?.(item)
+            //         }
+            //       }}
+            //     />
+            //   ))
+            !loading.value && (
+              <ColResult
+                tips="暂无曲目"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )
+          )}
         </List>
         <Popup
           show={tagVisibility.value}
@@ -253,6 +288,7 @@ export default defineComponent({
         >
           <SelectSubject
             isReset
+            type="MUSIC"
             searchParams={subject}
             onComfirm={onComfirmSubject}
           />

src/views/music/personal/collection.tsx

@@ -6,6 +6,8 @@ import { useRoute } from 'vue-router'
 import ColResult from '@/components/col-result'
 import { musicBuy } from '../music'
 import { state } from '@/state'
+import styles from './index.module.less'
+import Song from '../component/song'
 
 export default defineComponent({
   name: 'MusicList',
@@ -66,24 +68,24 @@ export default defineComponent({
         onLoad={FetchList}
         error={isError.value}
       >
-        {rows.value.length
-          ? rows.value.map(item => (
-              <Item
-                data={item}
-                onClick={() => musicBuy(item)}
-                onFavorite={() => {
-                  reset()
-                  emit('favorite')
-                }}
-              />
-            ))
-          : !loading.value && (
-              <ColResult
-                tips="暂无收藏单曲"
-                classImgSize="SMALL"
-                btnStatus={false}
-              />
-            )}
+        {rows.value.length ? (
+          <div class={styles.personalSong}>
+            <Song
+              list={rows.value}
+              onDetail={(item: any) => {
+                musicBuy(item)
+              }}
+            />
+          </div>
+        ) : (
+          !loading.value && (
+            <ColResult
+              tips="暂无收藏单曲"
+              classImgSize="SMALL"
+              btnStatus={false}
+            />
+          )
+        )}
       </List>
     )
   }

src/views/music/personal/index.module.less

@@ -20,3 +20,14 @@
     }
   }
 }
+
+.practice,
+.personalSong {
+  padding: 0 12px;
+  border-radius: 18px;
+  background-color: #fff;
+  margin: 0 14px 14px;
+}
+.personalSong {
+  margin: 14px;
+}

src/views/music/personal/personal.tsx

@@ -6,6 +6,8 @@ import { musicBuy } from '../music'
 import { useRoute } from 'vue-router'
 import ColResult from '@/components/col-result'
 import { state } from '@/state'
+import styles from './index.module.less'
+import Song from '../component/song'
 
 export default defineComponent({
   name: 'MusicList',
@@ -64,21 +66,20 @@ export default defineComponent({
         onLoad={FetchList}
         error={isError.value}
       >
-        {rows.value.length
-          ? rows.value.map(item => (
-              <Item
-                data={item}
-                onClick={() => musicBuy(item)}
-                onFavorite={() => emit('favorite')}
-              />
-            ))
-          : !loading.value && (
-              <ColResult
-                tips="暂无单曲"
-                classImgSize="SMALL"
-                btnStatus={false}
-              />
-            )}
+        {rows.value.length ? (
+          <div class={styles.personalSong}>
+            <Song
+              list={rows.value}
+              onDetail={(item: any) => {
+                musicBuy(item)
+              }}
+            />
+          </div>
+        ) : (
+          !loading.value && (
+            <ColResult tips="暂无单曲" classImgSize="SMALL" btnStatus={false} />
+          )
+        )}
       </List>
     )
   }

src/views/music/personal/practice.tsx

@@ -5,6 +5,8 @@ import { Cell, Skeleton } from 'vant'
 import Item from '../list/item'
 import { musicBuy } from '../music'
 import { state } from '@/state'
+import styles from './index.module.less'
+import Song from '../component/song'
 
 export default defineComponent({
   name: 'Practice',
@@ -39,8 +41,16 @@ export default defineComponent({
       }
       return (
         <>
-          {prevNum.value > 0 && <Cell title="最近练习" />}
-          {Array.from(Array(prevNum.value)).map((_, index) => {
+          {prevNum.value > 0 && <Cell title="最近练习" border={false} />}
+          <div class={styles.practice}>
+            <Song
+              list={list}
+              onDetail={(item: any) => {
+                musicBuy(item)
+              }}
+            />
+          </div>
+          {/* {Array.from(Array(prevNum.value)).map((_, index) => {
             const item = list[index]
             console.log(list, item)
             if (!item) {
@@ -56,7 +66,7 @@ export default defineComponent({
                 }}
               />
             )
-          })}
+          })} */}
         </>
       )
     }

src/views/music/search/select-subject.tsx

@@ -20,6 +20,10 @@ export default defineComponent({
         id: ''
       }
     },
+    type: {
+      type: String,
+      default: 'MUSIC'
+    },
     onComfirm: {
       type: Function,
       default: (item: any) => {}
@@ -46,7 +50,7 @@ export default defineComponent({
   methods: {
     async getList() {
       const { data } = await request.get(
-        `${this.apiSuffix}/subject/subjectSelect?type=MUSIC`
+        `${this.apiSuffix}/subject/subjectSelect?type=${this.type}`
       )
       if (Array.isArray(data)) {
         this.subjectList = data

src/views/music/songbook/index.module.less

@@ -82,3 +82,10 @@
     }
   }
 }
+
+.listContainer {
+  padding: 0 12px;
+  border-radius: 18px;
+  background-color: #fff;
+  margin: 0 14px 14px;
+}

src/views/music/songbook/list.tsx

@@ -9,6 +9,7 @@ import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
 import { state as tempState } from '@/state'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import Song from '../component/song'
 
 export default defineComponent({
   name: 'Songbook',
@@ -52,7 +53,20 @@ export default defineComponent({
             border={false}
           />
           <div class={styles.listContainer}>
-            {state.value.data.rows.map(item => (
+            <Song
+              list={state.value.data.rows}
+              onDetail={(item: any) => {
+                musicBuy(item, (path: any) => {
+                  router.push({
+                    path,
+                    query: {
+                      orderType: 'MUSIC'
+                    }
+                  })
+                })
+              }}
+            />
+            {/* {state.value.data.rows.map(item => (
               <Item
                 data={item}
                 onClick={(item: any) => {
@@ -66,7 +80,7 @@ export default defineComponent({
                   })
                 }}
               />
-            ))}
+            ))} */}
           </div>
         </>
       ) : (

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>
-    )
-  }
-})