准备走查

src/components/videoDetailItem/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, reactive, onMounted, ref} from 'vue'
+import { defineComponent, toRefs, reactive, onMounted, ref,watch} from 'vue'
 
 import classes from './index.module.less'
 import detaile from './images/detaile.png'
@@ -35,6 +35,12 @@ export default defineComponent({
       detail:props.detail,
       isFull:props.isFull
     })
+    watch(
+      () => props.detail,
+      detail => {
+        state.detail = detail
+      }
+    )
     const router = useRouter()
     const gotoVideoDetail = ()=>{
       if(state.isFull){

src/style/index.css

@@ -25,3 +25,22 @@ body {
 .user-shadow {
   box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.04);
 }
+
+::-webkit-scrollbar {
+  width: 8px; /* 纵向滚动条*/
+  height: 8px; /* 横向滚动条 */
+  background-color: #fff;
+}
+
+/*定义滚动条轨道 内阴影*/
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0);
+  background-color: #fff;
+}
+
+/*定义滑块 内阴影*/
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0);
+  background-color: #d5d5d5;
+}
+

src/views/App.module.less

@@ -8,5 +8,7 @@
     .el-dialog__body {
       padding: 0;
     }
+
   }
 }
+

src/views/albumDetail/index.tsx

@@ -15,6 +15,7 @@ import albumItem from './modals/albumItem'
 import request from '@/helpers/request'
 import musicLIstItem from '@/components/musicLIstItem'
 import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
+import ColEmpty from '@/components/col-empty'
 import { useRoute, useRouter } from 'vue-router'
 import { watch } from 'fs'
 export default defineComponent({
@@ -25,7 +26,7 @@ export default defineComponent({
       default: ''
     }
   },
-  components: { tagItem, pagination, albumItem, musicLIstItem },
+  components: { tagItem, pagination, albumItem, musicLIstItem,ColEmpty },
   setup(props, conent) {
     const state = reactive({
       title: props.title,
@@ -42,7 +43,8 @@ export default defineComponent({
         page_size: [10, 20, 40, 50] // 选择限制显示条数
       },
       details: {} as any,
-      userType: ''
+      userType: '',
+      isshowData: false,
     })
     const route = useRoute()
     const router = useRouter()
@@ -57,6 +59,11 @@ export default defineComponent({
         })
         state.details = res.data
         state.pageInfo.total = res.data.musicSheetList.total
+        if (state.pageInfo.total == 0) {
+          state.isshowData = true
+        } else {
+          state.isshowData = false
+        }
         state.musicList = res.data.musicSheetList.rows
         state.hotList = res.data.hotMusicAlbum
         state.hotTagList = res.data.musicTagNames.split(',') || []
@@ -157,6 +164,7 @@ export default defineComponent({
                 {state.musicList.map(item => {
                   return <musicLIstItem item={item}></musicLIstItem>
                 })}
+                  {state.isshowData&&<ColEmpty></ColEmpty>}
               </div>
             </div>
             <pagination

src/views/muiscDetial/index.module.less

@@ -9,9 +9,10 @@
   display: flex;
   flex-direction: row;
   .left {
-    width: 692px;
+    width: 826px;
     background-color: #fff;
     margin-right: 14px;
+    margin-bottom: 100px;
     .title {
       padding: 28px 28px 0;
       background-color: #fff;
@@ -45,279 +46,310 @@
     }
     .musicContent {
       page-break-after: always;
-      width: 575px;
-      min-height: 749px;
+      width: 702px;
+      min-height: 665px;
       margin: 0 auto;
       border: 1px dotted #ccc;
     }
-    .showCode {
-      position: relative;
-      .showCodeWrap {
+  }
+  .showCode {
+    position: relative;
+    .showCodeWrap {
+      position: absolute;
+      z-index: 10;
+      bottom: 0;
+      .close {
+        width: 19px;
+        height: 19px;
         position: absolute;
         z-index: 10;
-        bottom: 0;
-        .close {
-          width: 19px;
-          height: 19px;
-          position: absolute;
-          z-index: 10;
-          top: 5px;
-          right: 5px;
-          cursor: pointer;
-        }
-        .code {
-          width: 74px;
-          height: 74px;
-          position: absolute;
-          z-index: 10;
-          top: 10px;
-          left: 10px;
-        }
-        .title {
-          padding: 0;
-          height: 22px;
-          font-size: 16px;
-          font-family: PingFangSC-Semibold, PingFang SC;
-          font-weight: 600;
-          color: #000000;
-          line-height: 22px;
-          position: absolute;
-          z-index: 10;
-          top: 14px;
-          left: 101px;
-          background-color: transparent;
-        }
-        .conent {
-          position: absolute;
-          z-index: 10;
-          top: 38px;
-          left: 101px;
-          font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #333333;
-          line-height: 20px;
-        }
-        .subConent {
-          position: absolute;
-          z-index: 10;
-          top: 58px;
-          left: 101px;
-          font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #333333;
-          line-height: 20px;
-        }
+        top: 5px;
+        right: 5px;
+        cursor: pointer;
       }
-    }
-    .audios {
-      width: 100%;
-      border-radius: 0;
-      background-color: #333;
-    }
-  }
-  .right {
-    .musicInfo {
-      background-color: #fff;
-      padding: 24px;
-      width: 494px;
-      margin-bottom: 14px;
-      h2 {
-        font-size: 20px;
+      .code {
+        width: 74px;
+        height: 74px;
+        position: absolute;
+        z-index: 10;
+        top: 10px;
+        left: 10px;
+      }
+      .title {
+        padding: 0;
+        height: 22px;
+        font-size: 16px;
         font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
         color: #000000;
-        line-height: 28px;
-        margin-bottom: 12px;
+        line-height: 22px;
+        position: absolute;
+        z-index: 10;
+        top: 14px;
+        left: 101px;
+        background-color: transparent;
       }
-      .collect {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 21px;
-        .start {
-          width: 23px;
-          height: 23px;
-          margin-right: 6px;
-        }
-        p {
-          font-size: 18px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #000000;
-          line-height: 25px;
-        }
+      .conent {
+        position: absolute;
+        z-index: 10;
+        top: 38px;
+        left: 101px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 20px;
       }
-      .subTitle {
-        margin-bottom: 15px;
-        span {
-          font-size: 16px;
-          line-height: 22px;
-          color: #666;
-        }
+      .subConent {
+        position: absolute;
+        z-index: 10;
+        top: 58px;
+        left: 101px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 20px;
       }
     }
-    .btooom {
+  }
+  .audios {
+    width: 100%;
+    border-radius: 0;
+    background-color: #333;
+  }
+}
+.right {
+  .musicInfo {
+    background-color: #fff;
+    padding: 24px;
+    width: 360px;
+    margin-bottom: 14px;
+    h2 {
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      line-height: 28px;
+      margin-bottom: 15px;
+    }
+    .tagList {
+      margin-bottom: 15px;
+    }
+    .collect {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 15px;
+      font-size: 16px;
+      .start {
+        width: 23px;
+        height: 23px;
+        margin-right: 6px;
+      }
+      p {
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 25px;
+      }
+    }
+    .subTitle {
+      margin-bottom: 15px;
+      span {
+        font-size: 16px;
+        line-height: 22px;
+        color: #666;
+      }
+    }
+  }
+  .btooom {
+    background-color: #fff;
+    // padding-top: 25px;
+    .teacherInfo {
+      padding: 18px 14px;
       background-color: #fff;
-      padding-top: 25px;
-      .teacherInfo {
-        padding: 20px;
-        background-color: #fff;
 
-        .teacherHeadWrap {
+      .teacherHeadWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        .teacherHeadLeft {
           display: flex;
           flex-direction: row;
           align-items: center;
-          justify-content: space-between;
-          .teacherHeadLeft {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            .teacherHeader {
-              width: 54px;
-              height: 54px;
-              border-radius: 50%;
-              overflow: hidden;
-              margin-right: 16px;
-            }
-            .teacherHeadName {
-              padding-top: 2px;
-              display: flex;
-              flex-direction: row;
-              align-items: center;
-              font-size: 20px;
-              font-family: PingFangSC-Semibold, PingFang SC;
-              font-weight: 600;
-              color: #000000;
-              line-height: 28px;
-              span {
-                margin-right: 12px;
-              }
-              .teacherIcon {
-                width: 54px;
-                height: 22px;
-                margin-right: 5px;
-              }
-            }
-            .fens {
-              font-size: 16px;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #999999;
-              line-height: 22px;
-              span {
-                color: #333333;
-              }
-            }
-          }
-          .teacherHeadRight {
-            width: 67px;
-            background: #2dc7aa;
-            border-radius: 21px;
-            font-size: 16px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            color: #ffffff;
-            line-height: 30px;
-            text-align: center;
-            cursor: pointer;
-          }
-          .teacherHeadRight.isStart {
-            border: 1px solid #2dc7aa;
-            background: #fff;
-            color: #2dc7aa;
-
+          .teacherHeader {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-right: 10px;
           }
-        }
-        //
-        .courseWrap {
-          padding: 20px;
-          background-color: #fff;
-          .courseTitle {
+          .teacherHeadName {
+            padding-top: 2px;
             display: flex;
             flex-direction: row;
             align-items: center;
-            font-size: 20px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
+            font-size: 18px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
             color: #000000;
             line-height: 28px;
-            img {
-              width: 26px;
-              height: 26px;
-              margin-right: 8px;
+            span {
+              margin-right: 12px;
+            }
+            .teacherIcon {
+              width: 54px;
+              height: 22px;
+              margin-right: 5px;
+            }
+          }
+          .fens {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #999999;
+            line-height: 22px;
+            span {
+              color: #333333;
             }
           }
         }
-
-        .titleWrap {
+        .teacherHeadRight {
+          width: 67px;
+          background: #2dc7aa;
+          border-radius: 21px;
+          font-size: 16px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          color: #ffffff;
+          line-height: 30px;
+          text-align: center;
+          cursor: pointer;
+        }
+        .teacherHeadRight.isStart {
+          border: 1px solid #2dc7aa;
+          background: #fff;
+          color: #2dc7aa;
+        }
+      }
+      //
+      .courseWrap {
+        padding: 20px;
+        background-color: #fff;
+        .courseTitle {
           display: flex;
           flex-direction: row;
           align-items: center;
-          justify-content: flex-start;
-          margin-top: 20px;
-          padding-bottom: 12px;
-          span {
-            font-size: 20px;
-            color: #000;
-            line-height: 28px;
-            font-weight: 600;
-          }
+          font-size: 20px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #000000;
+          line-height: 28px;
           img {
-            width: 24px;
-            height: 24px;
-            margin-right: 10px;
+            width: 26px;
+            height: 26px;
+            margin-right: 8px;
           }
         }
-        .teacherDetail {
-          font-size: 18px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #666666;
-          line-height: 25px;
+      }
+
+      .titleWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        margin-top: 20px;
+        padding-bottom: 12px;
+        span {
+          font-size: 20px;
+          color: #000;
+          line-height: 28px;
+          font-weight: 600;
         }
-        .teacherVideoList {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          .videoItem {
-            .Styles {
-              width: 218px;
-              height: 145px;
-            }
-            .videoItemVideo {
-              width: 218px;
-              height: 145px;
-            }
-            margin-right: 18px;
-            margin-bottom: 12px;
+        img {
+          width: 24px;
+          height: 24px;
+          margin-right: 10px;
+        }
+      }
+      .teacherDetail {
+        font-size: 18px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        line-height: 25px;
+      }
+
+      .teacherVideoList {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .videoItem {
+          .Styles {
             width: 218px;
             height: 145px;
-            position: relative;
-            &:nth-child(2n) {
-              margin-right: 0;
-            }
+          }
+          .videoItemVideo {
+            width: 218px;
+            height: 145px;
+          }
+          margin-right: 18px;
+          margin-bottom: 12px;
+          width: 218px;
+          height: 145px;
+          position: relative;
+          &:nth-child(2n) {
+            margin-right: 0;
           }
         }
       }
-      .otherMusic {
-        padding: 0 20px;
-        h2 {
-          font-size: 18px;
-          font-family: PingFangSC-Semibold, PingFang SC;
-          font-weight: 600;
+    }
+    .otherMusic {
+      padding: 0 20px;
+      .videoNav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 14px;
+        h5 {
+          font-size: 22px;
+          font-weight: 500;
           color: #000000;
-          line-height: 25px;
-          margin-bottom: 14px;
+          line-height: 30px;
         }
-        .otherMusicList {
-          padding: 18px 0;
-          border-top: 1px solid #DEDEDE;
+        .wrapRight {
+          display: flex;
+          flex-direction: row;
+          cursor: pointer;
+          span {
+            color: #666;
+          }
+          .arrow {
+            width: 20px;
+            height: 20px;
+            margin-left: 8px;
+          }
         }
       }
+      h2 {
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #000000;
+        line-height: 25px;
+        margin-bottom: 14px;
+      }
+      .otherMusicList {
+        padding: 18px 0;
+        border-top: 1px solid #dedede;
+      }
     }
   }
 }
+
 :global {
   .subjectChiose {
     border-radius: 14px;
@@ -331,7 +363,7 @@
       border: none !important;
       box-shadow: none !important;
     }
-    .el-input.is-focus{
+    .el-input.is-focus {
       .el-input__wrapper {
         background-color: #f1f1f1;
         border: none;
@@ -343,3 +375,15 @@
     background-color: #333;
   }
 }
+:global {
+  .iframe {
+    body {
+      ::-webkit-scrollbar-thumb {
+        background-color: #efeff0;
+        border: 1px solid transparent;
+        background-clip: padding-box;
+        border-radius: 5px;
+      }
+    }
+  }
+}

src/views/muiscDetial/index.tsx

@@ -8,7 +8,7 @@ import {
   nextTick
 } from 'vue'
 import classes from './index.module.less'
-import { ElButton, ElOption, ElSelect } from 'element-plus'
+import { ElButton, ElOption, ElSelect, ElScrollbar } from 'element-plus'
 import printIcon from './images/printIcon.png'
 import banner from './images/banner.png'
 import colVideo from '@/components/col-video/index'
@@ -24,6 +24,7 @@ import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
 import { getUserType, vaildTeachingUrl } from '@/helpers/utils'
 import { imgToCanvas, addWatermark, convasToImg } from '@/helpers/imageFunction'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
 import printJS from 'print-js'
 
 export default defineComponent({
@@ -70,7 +71,9 @@ export default defineComponent({
         state.musicDetail = res.data
         state.musicList = res.data.teacher.musicSheetList
         state.subjectList = res.data.background
-
+        state.tagList = res.data.musicTagNames
+          ? res.data.musicTagNames.split(',')
+          : []
         state.mp3Type = res.data.audioType
         if (state.subjectList && state.subjectList.length > 0) {
           state.activeRow = res.data.background[0]
@@ -117,7 +120,6 @@ export default defineComponent({
         url +
         `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
       // state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
-
     }
     const setSvg = (val: any) => {
       console.log(val)
@@ -154,17 +156,12 @@ export default defineComponent({
       // return
       link.href = imgUrl
       link.click()
-      // printJS({
-      //   printable: imgUrl, // 元素id,不支持多个
-      //   type: 'image',
-      //   targetStyle: ['* '],
-      //   targetStyles: ['*'],
-      //   maxWidth: '', // 最大宽度，默认800,仅支持数字
-      //   style:
-      //     '@page{size:auto; margin: 0;}'
-
-      // } as any)
-      //  '@media print { @page {size: landscape } }' // landscape  默认横向打印
+    }
+    const gotoMusic = () => {
+      router.push({
+        path: '/searchdetail',
+        query: { search: state.teacherDetail.userName as string, type: 'music' }
+      })
     }
     return () => (
       <>
@@ -196,16 +193,19 @@ export default defineComponent({
                 <p>下载乐谱</p>
               </div>
             </div>
-            <div class={classes.musicContent}>
-              {/*        id="iframe"       ref="iframe"*/}
-              <iframe
 
-                id="containerPrint"
-                ref="print"
-                style="width: 100%;height:750px;page-break-after:always;"
-                src={state.accompanyUrl}
-              />
-            </div>
+              <div class={classes.musicContent}>
+                {/*        id="iframe"       ref="iframe"*/}
+                <iframe
+                  id="containerPrint"
+                  ref="print"
+                  style="width: 100%;height:665px;page-break-after:always;"
+                  src={state.accompanyUrl}
+                  class={classes.iframe}
+                />
+
+              </div>
+
             {state.showCode ? (
               <div class={classes.showCode}>
                 <div class={classes.showCodeWrap}>
@@ -250,7 +250,7 @@ export default defineComponent({
               </div>
               <div class={classes.tagList}>
                 {state.tagList.map((item: any) => {
-                  return <tagItem title={item.key}>{item.key}</tagItem>
+                  return <tagItem title={item}>{item}</tagItem>
                 })}
               </div>
               <p class={classes.subTitle}>
@@ -277,7 +277,7 @@ export default defineComponent({
                       <div class={classes.teacherHeadInfo}>
                         <div class={classes.teacherHeadName}>
                           <span>{state.teacherDetail.userName}</span>
-                          {!state.teacherDetail.entryFlag ? (
+                          {/* {!state.teacherDetail.entryFlag ? (
                             ''
                           ) : (
                             <img
@@ -294,7 +294,7 @@ export default defineComponent({
                               class={classes.teacherIcon}
                               alt=""
                             />
-                          )}
+                          )} */}
                         </div>
                         <p class={classes.fens}>
                           粉丝 <span>{state.teacherDetail.fansNum}</span>
@@ -317,7 +317,14 @@ export default defineComponent({
               ) : null}
 
               <div class={classes.otherMusic}>
-                <h2>Ta的曲谱</h2>
+                <div class={classes.videoNav}>
+                  <h5>Ta的曲谱</h5>
+                  <div class={classes.wrapRight} onClick={() => gotoMusic()}>
+                    <span>更多</span>
+                    <img class={classes.arrow} src={arrow} alt="" />
+                  </div>
+                </div>
+
                 <div class={classes.otherMusicList}>
                   {state.musicList.map(item => {
                     return (

src/views/muiscDetial/modals/musicItem.module.less

@@ -24,6 +24,9 @@
         color: #333333;
         line-height: 22px;
         font-size: 14px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
         span {
           font-weight: 400;
           color: #6a6a6a;

src/views/videoDetailList/index.module.less

@@ -254,3 +254,6 @@
   margin-left: -16px;
   margin-top: -16px;
 }
+.hotSearchWrap {
+  margin-top: 20px;
+}

src/views/videoDetailList/index.tsx

@@ -37,6 +37,7 @@ export default defineComponent({
     })
 
     const getVideoList = async () => {
+      console.log('请求接口')
       try {
         const res = await request.post(
           '/api-website/open/videoLessonGroup/page',
@@ -61,12 +62,12 @@ export default defineComponent({
       state.searchs.search = val
     }
     const startSearch = (val: any) => {
-      console.log(val, 'valstartSearch')
       state.searchs = {
         ...state.searchs,
         lessonSubject: val.subject,
         search: val.search
       }
+      console.log(val, 'valstartSearch')
       getVideoList()
     }
     onMounted(() => {
@@ -85,13 +86,15 @@ export default defineComponent({
                   startSearch(val)
                 }}
               ></searchInput>
-              <hotSearch
-                searchType="COURSE"
-                onHotTag={(val: string) => {
-                  gotoSearch(val)
-                }}
-                type={''}
-              ></hotSearch>
+              <div class={styles.hotSearchWrap}>
+                <hotSearch
+                  searchType="COURSE"
+                  onHotTag={(val: string) => {
+                    gotoSearch(val)
+                  }}
+                  type={''}
+                ></hotSearch>
+              </div>
             </div>
             <div class={styles.videoList}>
               {state.videoList.map(item => {