|
|
@@ -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>
|
|
|
</>
|
|
|
)
|
|
|
}
|
mo
