|
@@ -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 (
|