优化

1

src/components/col-header/modals/loganInfo.tsx

@@ -21,10 +21,11 @@ import changeIcon from '../images/changeIcon.png'
 import backIcon from '../images/backIcon.png'
 import peopleIcon from '../images/peopleIcon.png'
 import planIcon from '../images/planIcon.png'
-import ablumIcon from '../images/ablumIcon.png'
-import noAblumIcon from '../images/noAblumIcon.png'
 import memberIcon from '../images/memberIcon.png'
 import noMemberIcon from '../images/noMemberIcon.png'
+
+import ablumIcon from '../images/ablumIcon.png'
+import noAblumIcon from '../images/noAblumIcon.png'
 import onlineIcon from '../images/onlineIcon.png'
 import noOnlineIcon from '../images/noOnlineIcon.png'
 import styleIcon from '../images/styleIcon.png'

src/components/musicLIstItem/index.module.less

@@ -73,7 +73,7 @@
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  padding: 16px 0px;
+  padding: 22px 0px 16px;
   border-bottom: 1px solid #ececec;
   cursor: pointer;
   .left {

src/views/albumDetail/modals/musicLIstItem/index.module.less

@@ -65,14 +65,14 @@
   --music-list-item-charge-bg: #3f90d6;
   --music-list-item-charge-color: #3f90d6;
 
-  height: 188px;
+  // height: 188px;
   background: #ffffff;
   // border-radius: 12px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
-  padding: 16px 0px;
+  padding: 20px 0px ;
   border-bottom: 1px solid #ececec;
 
   cursor: pointer;
@@ -126,7 +126,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    margin-top: 35px;
+    margin-top: 32px;
     .authorInfo {
       display: flex;
       flex-direction: row;

src/views/muiscDetial/index.module.less

@@ -527,6 +527,20 @@
       }
     }
   }
+  .iconWrapList {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .teacherDetailIcon {
+      width: 26px;
+      height: 26px;
+    }
+    .vipIcon {
+      width: 42px;
+      height: 26px;
+
+    }
+  }
 }
 
 :global {

src/views/muiscDetial/index.tsx

@@ -31,12 +31,24 @@ import music from '@/components/musicLIstItem/images/music.png'
 import tagItem from '@/components/tagItem'
 import code from '@/common/images/student_download.png'
 import musicItem from './modals/musicItem'
+
+import ablumIcon from '@/components/col-header/images/ablumIcon.png'
+import noAblumIcon from '@/components/col-header/images/noAblumIcon.png'
+import onlineIcon from '@/components/col-header/images/onlineIcon.png'
+import noOnlineIcon from '@/components/col-header/images/noOnlineIcon.png'
+import styleIcon from '@/components/col-header/images/styleIcon.png'
+import nostyleIcon from '@/components/col-header/images/nostyleIcon.png'
+import videoIcon from '@/components/col-header/images/videoIcon.png'
+import noVideoIcon from '@/components/col-header/images/noVideoIcon.png'
+import vipIcon from '@/components/col-header/images/vipIcon.png'
+import noVipIcon from '@/components/col-header/images/noVipIcon.png'
+
 import request from '@/helpers/request'
 import { useRoute, useRouter } from 'vue-router'
 import gou from './images/gou.png'
 import member from './images/member.png'
 import palyer from './images/palyer.png'
-import vipIcon from '../images/vipIcon.png'
+// import vipIcon from '../images/vipIcon.png'
 import {
   getUserType,
   vaildTeachingUrl,
@@ -103,28 +115,29 @@ export default defineComponent({
       accompanyUrl: '',
       imgData: '',
       imgUrl: '',
-      showImg: ''
+      showImg: '',
+      iconList: [] as any
+    })
+    nextTick(() => {
+      // 禁用右键
+      // @ts-ignore：无法被执行的代码的错误
+      document.oncontextmenu = new Function('event.returnValue=false')
+      // @ts-ignore：无法被执行的代码的错误
+      // 禁用选择
+      document.onselectstart = new Function('event.returnValue=false')
+      // @ts-ignore：无法被执行的代码的错误
+      //禁止f12
+      document.οnkeydοwn = new Function('event.returnValue=false')
     })
-     nextTick(() => {
-        // 禁用右键
-         // @ts-ignore：无法被执行的代码的错误
-        document.oncontextmenu  = new Function('event.returnValue=false')
-         // @ts-ignore：无法被执行的代码的错误
-        // 禁用选择
-        document.onselectstart = new Function('event.returnValue=false')
-         // @ts-ignore：无法被执行的代码的错误
-        //禁止f12
-        document.οnkeydοwn  = new Function('event.returnValue=false')
-      })
 
-      // 上面的禁止f12那段代码没有生效，但是加了下面这段就能生效。
-      document.onkeydown = function (e) {
-        if (e && e.keyCode === 123) {
-          e.returnValue = false
-          // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
-          return false
-        }
+    // 上面的禁止f12那段代码没有生效，但是加了下面这段就能生效。
+    document.onkeydown = function (e) {
+      if (e && e.keyCode === 123) {
+        e.returnValue = false
+        // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
+        return false
       }
+    }
     const print = ref()
     const getMusicList = async () => {
       try {
@@ -147,6 +160,7 @@ export default defineComponent({
 
         state.teacherDetail = res.data.teacher
         setAccompanyUrl()
+        setUser()
       } catch (e) {
         console.log(e)
       }
@@ -212,6 +226,30 @@ export default defineComponent({
       // 拼链接
       getMusicList()
     })
+
+    const setUser = () => {
+      state.iconList = [] as any
+      if (state.teacherDetail.tag.indexOf('STYLE') != -1) {
+        state.iconList.push(styleIcon)
+      } else {
+        state.iconList.push(nostyleIcon)
+      }
+      if (state.teacherDetail.tag.indexOf('VIDEO') != -1) {
+        state.iconList.push(videoIcon)
+      } else {
+        state.iconList.push(noVideoIcon)
+      }
+      if (state.teacherDetail.tag.indexOf('LIVE') != -1) {
+        state.iconList.push(onlineIcon)
+      } else {
+        state.iconList.push(noOnlineIcon)
+      }
+      if (state.teacherDetail.tag.indexOf('MUSIC') != -1) {
+        state.iconList.push(ablumIcon)
+      } else {
+        state.iconList.push(noAblumIcon)
+      }
+    }
     const printHander = async () => {
       const tempCanvas = await imgToCanvas(state.imgData)
       const showImg = convasToImg(tempCanvas)
@@ -265,14 +303,14 @@ export default defineComponent({
     }
     return () => (
       <>
-      <div class={classes.wallWrap}>
-        <div class={classes.wall}></div>
-        <div class={classes.musicWraps}>
-          <div class={[classes.width1200]}>
-            <div class={[classes.musicWrap]}>
-              <div class={classes.left}>
-              <div class={classes.title}>
-                  {/* <div class={classes.titleLeft}>
+        <div class={classes.wallWrap}>
+          <div class={classes.wall}></div>
+          <div class={classes.musicWraps}>
+            <div class={[classes.width1200]}>
+              <div class={[classes.musicWrap]}>
+                <div class={classes.left}>
+                  <div class={classes.title}>
+                    {/* <div class={classes.titleLeft}>
                     <p>声部：</p>
                     <ElSelect
                       class="w-full subjectChiose"
@@ -291,150 +329,161 @@ export default defineComponent({
                       ))}
                     </ElSelect>
                   </div> */}
-                  <div class={classes.titleRight} onClick={() => printHander()}>
-                    <img src={printIcon} alt="" />
-                    <p>下载乐谱</p>
+                    <div
+                      class={classes.titleRight}
+                      onClick={() => printHander()}
+                    >
+                      <img src={printIcon} alt="" />
+                      <p>下载乐谱</p>
+                    </div>
                   </div>
-                </div>
 
-                <div class={classes.musicContent}>
-                  {/*        id="iframe"       ref="iframe"*/}
+                  <div class={classes.musicContent}>
+                    {/*        id="iframe"       ref="iframe"*/}
 
-                  <img
-                    class={classes.musicStag}
-                    src={chargeImg[state.musicDetail.chargeType]}
-                    alt=""
-                  />
-                  <iframe
-                    id="containerPrint"
-                    ref="print"
-                    style="width: 538px;page-break-after:always; "
-                    src={state.accompanyUrl}
-                    class={classes.iframe}
-                  />
-                  <p class={classes.musicTitle}>
-                    {state.musicDetail.musicSheetName}
-                  </p>
-                  {state.showImg ? (
-                    <img src={state.showImg} alt="" />
+                    <img
+                      class={classes.musicStag}
+                      src={chargeImg[state.musicDetail.chargeType]}
+                      alt=""
+                    />
+                    <iframe
+                      id="containerPrint"
+                      ref="print"
+                      style="width: 538px;page-break-after:always; "
+                      src={state.accompanyUrl}
+                      class={classes.iframe}
+                    />
+                    <p class={classes.musicTitle}>
+                      {state.musicDetail.musicSheetName}
+                    </p>
+                    {state.showImg ? (
+                      <img src={state.showImg} alt="" />
+                    ) : (
+                      <div>
+                        <Vue3Lottie
+                          animationData={AstronautJSON}
+                          class={classes.finch}
+                        ></Vue3Lottie>
+                        <p class={classes.finchLoad}>加载中...</p>
+                      </div>
+                    )}
+                  </div>
+
+                  {state.mp3Type == 'MP3' ? (
+                    <colVideo
+                      src={state.activeRow.audioFileUrl}
+                      styleValue={{
+                        height: '68px',
+                        bacground: '#333'
+                      }}
+                      type={'audto'}
+                      settings={[
+                        'captions',
+                        'quality',
+                        'speed',
+                        'loop',
+                        'title'
+                      ]}
+                      class={classes.audios}
+                      poster={state.activeRow.title}
+                    ></colVideo>
                   ) : (
-                    <div>
-                      <Vue3Lottie
-                        animationData={AstronautJSON}
-                        class={classes.finch}
-                      ></Vue3Lottie>
-                      <p class={classes.finchLoad}>加载中...</p>
-                    </div>
+                    <>
+                      <div class={classes.noMoreWrap}>
+                        <img src={noMore} alt="" />
+                        <p>温馨提示：该曲目暂不支持播放喔～</p>
+                      </div>
+                    </>
                   )}
-                </div>
 
-                {state.mp3Type == 'MP3' ? (
-                  <colVideo
-                    src={state.activeRow.audioFileUrl}
-                    styleValue={{
-                      height: '68px',
-                      bacground: '#333'
-                    }}
-                    type={'audto'}
-                    settings={['captions', 'quality', 'speed', 'loop', 'title']}
-                    class={classes.audios}
-                    poster={state.activeRow.title}
-                  ></colVideo>
-                ) : (
-                  <>
-                    <div class={classes.noMoreWrap}>
-                      <img src={noMore} alt="" />
-                      <p>温馨提示：该曲目暂不支持播放喔～</p>
-                    </div>
-                  </>
-                )}
-
-                {state.showCode ? (
-                  <div class={classes.showCode}>
-                    <div class={classes.showCodeWrap}>
-                      <img
-                        class={classes.close}
-                        src={iconClose}
-                        alt=""
-                        onClick={() => {
-                          state.showCode = false
-                        }}
-                      />
-                      <img class={classes.code} src={code} alt="" />
-                      {/* <h2 class={classes.title}>酷乐秀</h2>
+                  {state.showCode ? (
+                    <div class={classes.showCode}>
+                      <div class={classes.showCodeWrap}>
+                        <img
+                          class={classes.close}
+                          src={iconClose}
+                          alt=""
+                          onClick={() => {
+                            state.showCode = false
+                          }}
+                        />
+                        <img class={classes.code} src={code} alt="" />
+                        {/* <h2 class={classes.title}>酷乐秀</h2>
                   <p class={classes.conent}>扫码下载酷乐秀APP</p>
                   <p class={classes.subConent}>
                     使用小酷Ai即可智能练习本首曲目哦！
                   </p> */}
-                      <img src={banner} class={classes.banner} alt="" />
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-              <div class={classes.right}>
-                <div class={classes.musicInfo}>
-                  <h2>
-                    <span
-                      class={[
-                        classes.musicTag,
-                        classes[chargeClass[state.musicDetail.chargeType]]
-                      ]}
-                    >
-                      {chargeTypes[state.musicDetail.chargeType]}
-                    </span>
-                    {state.musicDetail.musicSheetName}
-                  </h2>
-                  <div class={classes.collectWrap}>
-                    <div class={classes.masker} onClick={favoriteMusic}>
-                      <img
-                        src={state.musicDetail.favorite ? lineStart : start}
-                        alt=""
-                      />
+                        <img src={banner} class={classes.banner} alt="" />
+                      </div>
                     </div>
-                    <img src={music} class={classes.musiceIcon} alt="" />
-                    <div>
-                      <div class={classes.collect} onClick={favoriteMusic}>
+                  ) : null}
+                </div>
+                <div class={classes.right}>
+                  <div class={classes.musicInfo}>
+                    <h2>
+                      <span
+                        class={[
+                          classes.musicTag,
+                          classes[chargeClass[state.musicDetail.chargeType]]
+                        ]}
+                      >
+                        {chargeTypes[state.musicDetail.chargeType]}
+                      </span>
+                      {state.musicDetail.musicSheetName}
+                    </h2>
+                    <div class={classes.collectWrap}>
+                      <div class={classes.masker} onClick={favoriteMusic}>
                         <img
-                          src={state.musicDetail.favorite ? oLineStart : oStart}
-                          class={classes.start}
+                          src={state.musicDetail.favorite ? lineStart : start}
                           alt=""
                         />
-                        <p>{state.musicDetail.favoriteNum}人收藏</p>
-                      </div>
-
-                      <div class={classes.tagList}>
-                        {state.tagList.map((item: any) => {
-                          return <div class={classes.tag}>{item}</div>
-                        })}
                       </div>
-                      <p class={classes.subTitle}>
-                        作曲人：<span>{state.musicDetail.composer}</span>
-                      </p>
-                      <p class={classes.subTitle}>
-                        声部：<span>{state.musicDetail.subjectNames}</span>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div class={classes.btooom}>
-                  {state.teacherDetail.userId ? (
-                    <div class={classes.teacherInfo}>
-                      <h2>上传者</h2>
-                      <div class={classes.teacherHeadWrap}>
-                        <div class={classes.teacherHeadLeft}>
+                      <img src={music} class={classes.musiceIcon} alt="" />
+                      <div>
+                        <div class={classes.collect} onClick={favoriteMusic}>
                           <img
                             src={
-                              state.teacherDetail.userAvatar
-                                ? state.teacherDetail.userAvatar
-                                : teacherHeader
+                              state.musicDetail.favorite ? oLineStart : oStart
                             }
+                            class={classes.start}
                             alt=""
-                            class={classes.teacherHeader}
                           />
-                          <div class={classes.teacherHeadInfo}>
-                            <div class={classes.teacherHeadName}>
-                              <p>{state.teacherDetail.userName}</p>
-                              {/* {!state.teacherDetail.entryFlag ? (
+                          <p>{state.musicDetail.favoriteNum}人收藏</p>
+                        </div>
+
+                        <div class={classes.tagList}>
+                          {state.tagList.map((item: any) => {
+                            return <div class={classes.tag}>{item}</div>
+                          })}
+                        </div>
+                        <p class={classes.subTitle}>
+                          作曲人：<span>{state.musicDetail.composer}</span>
+                        </p>
+                        <p class={classes.subTitle}>
+                          声部：<span>{state.musicDetail.subjectNames}</span>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class={classes.btooom}>
+                    {state.teacherDetail.userId ? (
+                      <div class={classes.teacherInfo}>
+                        <h2>上传者</h2>
+                        <div class={classes.teacherHeadWrap}>
+                          <div class={classes.teacherHeadLeft}>
+                            <img
+                              src={
+                                state.teacherDetail.userAvatar
+                                  ? state.teacherDetail.userAvatar
+                                  : teacherHeader
+                              }
+                              alt=""
+                              class={classes.teacherHeader}
+                            />
+                            <div class={classes.teacherHeadInfo}>
+                              <div class={classes.teacherHeadName}>
+                                <p>{state.teacherDetail.userName}</p>
+                                {/* {!state.teacherDetail.entryFlag ? (
                             ''
                           ) : (
                             <img
@@ -452,64 +501,79 @@ export default defineComponent({
                               alt=""
                             />
                           )} */}
-                              {state.userType == 'STUDENT' ? (
-                                <div
-                                  class={[
-                                    classes.teacherHeadRight,
-                                    state.teacherDetail.star
-                                      ? classes.isStart
-                                      : ''
-                                  ]}
-                                  onClick={() => followVideo()}
-                                >
-                                  {state.teacherDetail.star
-                                    ? '已关注'
-                                    : '+ 关注'}
-                                </div>
-                              ) : null}
+                                {state.userType == 'STUDENT' ? (
+                                  <div
+                                    class={[
+                                      classes.teacherHeadRight,
+                                      state.teacherDetail.star
+                                        ? classes.isStart
+                                        : ''
+                                    ]}
+                                    onClick={() => followVideo()}
+                                  >
+                                    {state.teacherDetail.star
+                                      ? '已关注'
+                                      : '+ 关注'}
+                                  </div>
+                                ) : (
+                                  <div class={classes.iconWrapList}>
+                                    <img
+                                      src={ state.teacherDetail.isVip?vipIcon:noVipIcon}
+                                      class={classes.vipIcon}
+                                      alt=""
+                                    />
+                                    {state.iconList.map(item => (
+                                      <img
+                                        class={classes.teacherDetailIcon}
+                                        src={item}
+                                        alt=""
+                                      />
+                                    ))}
+                                  </div>
+                                )}
+                              </div>
                             </div>
                           </div>
-                        </div>
-                        <div>
-                          <p class={classes.fensNum}>
-                            {state.teacherDetail.fansNum}
-                          </p>
-                          <p class={classes.fens}>粉丝数</p>
+                          <div>
+                            <p class={classes.fensNum}>
+                              {state.teacherDetail.fansNum}
+                            </p>
+                            <p class={classes.fens}>粉丝数</p>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ) : null}
+                    ) : null}
 
-                  <div class={classes.otherMusic}>
-                    <div class={classes.videoNav}>
-                      <h5>TA的曲谱</h5>
-                      <div
-                        class={classes.wrapRight}
-                        onClick={() => gotoMusic()}
-                      >
-                        <span>更多</span>
-                        <img class={classes.arrow} src={arrow} alt="" />
+                    <div class={classes.otherMusic}>
+                      <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>
 
-                    <div class={classes.otherMusicList}>
-                      {state.musicList.map(item => {
-                        return (
-                          <musicItem
-                            item={item}
-                            onMusicDetail={val => getDetail(val)}
-                          ></musicItem>
-                        )
-                      })}
+                      <div class={classes.otherMusicList}>
+                        {state.musicList.map(item => {
+                          return (
+                            <musicItem
+                              item={item}
+                              onMusicDetail={val => getDetail(val)}
+                            ></musicItem>
+                          )
+                        })}
+                      </div>
                     </div>
                   </div>
                 </div>
+                {/* <img src={state.imgUrl} alt="" /> */}
               </div>
-              {/* <img src={state.imgUrl} alt="" /> */}
             </div>
           </div>
         </div>
-        </div>
       </>
     )
   }

src/views/videoDetailList/index.module.less

@@ -242,6 +242,20 @@
             margin-right: 5px;
           }
         }
+        .iconWrapList {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          .teacherDetailIcon {
+            width: 26px;
+            height: 26px;
+          }
+          .vipIcon {
+            width: 42px;
+            height: 26px;
+
+          }
+        }
       }
       .fensNum {
         font-size: 24px;

src/views/videoDetailList/videoDetail.tsx

@@ -19,6 +19,20 @@ import teacher from './images/teacher.png'
 import teacherHeader from '@/common/images/icon_teacher.png'
 import musiceIcon from './images/musiceIcon.png'
 import TimetableIcon from './images/TimetableIcon.png'
+
+
+import ablumIcon from '@/components/col-header/images/ablumIcon.png'
+import noAblumIcon from '@/components/col-header/images/noAblumIcon.png'
+import onlineIcon from '@/components/col-header/images/onlineIcon.png'
+import noOnlineIcon from '@/components/col-header/images/noOnlineIcon.png'
+import styleIcon from '@/components/col-header/images/styleIcon.png'
+import nostyleIcon from '@/components/col-header/images/nostyleIcon.png'
+import videoIcon from '@/components/col-header/images/videoIcon.png'
+import noVideoIcon from '@/components/col-header/images/noVideoIcon.png'
+import vipIcon from '@/components/col-header/images/vipIcon.png'
+import noVipIcon from '@/components/col-header/images/noVipIcon.png'
+
+
 import styles from './index.module.less'
 import videoDetailItem from '@/components/videoDetailItem'
 import colVideo from '@/components/col-video/index'
@@ -88,7 +102,8 @@ export default defineComponent({
       userType: '',
       showVideoDetail: false,
       activeItem: null as any,
-      styleList:[]as any
+      styleList:[]as any,
+      iconList:[] as any
     })
 
     const route = useRoute()
@@ -127,6 +142,7 @@ export default defineComponent({
           `/api-website/open/teacher/detail/${res.data.lessonGroup.teacherId}`
         )
         state.teacherDetail = { ...teacherRes.data }
+        setUser()
 
       } catch (e) {}
     }
@@ -153,6 +169,29 @@ export default defineComponent({
         _init()
       })
     }
+    const setUser = () => {
+      state.iconList = [] as any
+      if (state.teacherDetail.tag.indexOf('STYLE') != -1) {
+        state.iconList.push(styleIcon)
+      } else {
+        state.iconList.push(nostyleIcon)
+      }
+      if (state.teacherDetail.tag.indexOf('VIDEO') != -1) {
+        state.iconList.push(videoIcon)
+      } else {
+        state.iconList.push(noVideoIcon)
+      }
+      if (state.teacherDetail.tag.indexOf('LIVE') != -1) {
+        state.iconList.push(onlineIcon)
+      } else {
+        state.iconList.push(noOnlineIcon)
+      }
+      if (state.teacherDetail.tag.indexOf('MUSIC') != -1) {
+        state.iconList.push(ablumIcon)
+      } else {
+        state.iconList.push(noAblumIcon)
+      }
+    }
     const _init = () => {
       getVideoList()
       setTimeout(() => {
@@ -275,7 +314,20 @@ export default defineComponent({
                             >
                               {state.teacherDetail.isStar ? '已关注' : '+ 关注'}
                             </div>
-                          ) : null}
+                          ) :   <div class={styles.iconWrapList}>
+                          <img
+                            src={ state.teacherDetail.isVip?vipIcon:noVipIcon}
+                            class={styles.vipIcon}
+                            alt=""
+                          />
+                          {state.iconList.map(item => (
+                            <img
+                              class={styles.teacherDetailIcon}
+                              src={item}
+                              alt=""
+                            />
+                          ))}
+                        </div>}
                         </div>
                       </div>
                     </div>