|
|
@@ -40,9 +40,12 @@ import ColSticky from '@/components/col-sticky'
|
|
|
import { browser, moneyFormat } from '@/helpers/utils'
|
|
|
import { orderStatus } from '@/views/order-detail/orderStatus'
|
|
|
import iconShare from '@/views/music/album/icon_share.svg'
|
|
|
-import iconAlbum from '@/views/music/component/images/icon_album.png'
|
|
|
+import iconAlbum from './images/icon_album.png'
|
|
|
import iconDownload from './images/icon_download.png'
|
|
|
-import iconChangeStaff from './images/icon-change-staff.png'
|
|
|
+import iconChange from './images/icon-change.png'
|
|
|
+import iconAddCourse from './images/icon-add-course.png'
|
|
|
+import iconRemoveCourse from './images/icon-remove-course.png'
|
|
|
+
|
|
|
import AstronautJSON from './animate/bigLoad.json'
|
|
|
import ColShare from '@/components/col-share'
|
|
|
import iconCollect from './images/icon_collect.png'
|
|
|
@@ -131,17 +134,23 @@ export default defineComponent({
|
|
|
const onChangeStaff = (type: string) => {
|
|
|
staff.radio = type
|
|
|
staff.status = false
|
|
|
- const tempPdf = musicDetail.value?.firstPdfUrl
|
|
|
+
|
|
|
if (type == 'first' && !defaultImgs.value.first) {
|
|
|
loading.value = false
|
|
|
+ const tempPdf = musicDetail.value?.firstPdfUrl
|
|
|
initIframe(tempPdf, 'first', staffData.musicXml)
|
|
|
- } else if (type == 'fixed' && (!defaultImgs.value.fixed || musicDetail.value?.jianPdfUrl)) {
|
|
|
+ } else if (
|
|
|
+ type == 'fixed' &&
|
|
|
+ (!defaultImgs.value.fixed || musicDetail.value?.jianPdfUrl)
|
|
|
+ ) {
|
|
|
loading.value = false
|
|
|
- initIframe(tempPdf, 'first', staffData.musicXml)
|
|
|
+ const tempPdf = musicDetail.value?.jianPdfUrl
|
|
|
+ initIframe(tempPdf, 'fixed', staffData.musicXml)
|
|
|
} else {
|
|
|
if (!defaultImgs.value.staff) {
|
|
|
loading.value = false
|
|
|
- initIframe(tempPdf, 'first', staffData.musicXml)
|
|
|
+ const tempPdf = musicDetail.value?.musicPdfUrl
|
|
|
+ initIframe(tempPdf, 'staff', staffData.musicXml)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -153,7 +162,10 @@ export default defineComponent({
|
|
|
} else {
|
|
|
musicPdfUrl.value = ''
|
|
|
// 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
|
|
|
- if (staffData.iframeSrc.indexOf('pdf/web') !== -1) {
|
|
|
+ if (
|
|
|
+ !staffData.iframeSrc ||
|
|
|
+ staffData.iframeSrc.indexOf('pdf/web') !== -1
|
|
|
+ ) {
|
|
|
renderStaff()
|
|
|
} else {
|
|
|
resetRenderPage(staff, xml)
|
|
|
@@ -198,20 +210,7 @@ export default defineComponent({
|
|
|
? res.data.fixedTone.split(',')
|
|
|
: []
|
|
|
staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
|
|
|
- // if (!showImg.value.value) {
|
|
|
- // setAccompanyUrl()
|
|
|
- // window.addEventListener(
|
|
|
- // 'message',
|
|
|
- // async e => {
|
|
|
- // // 给图片设置背景色
|
|
|
- // const tempCanvas = await imgToCanvas(e.data)
|
|
|
- // const img = convasToImg(tempCanvas)
|
|
|
- // // 开始上传图片
|
|
|
- // uploadFunction(img)
|
|
|
- // },
|
|
|
- // false
|
|
|
- // )
|
|
|
- // }
|
|
|
+
|
|
|
// 初始化默认数据是否有值
|
|
|
if (firstList.value.length > 0) {
|
|
|
defaultImgs.value.first = true
|
|
|
@@ -249,103 +248,6 @@ export default defineComponent({
|
|
|
loading.value = false
|
|
|
}
|
|
|
}
|
|
|
- const base64ToBlob = data => {
|
|
|
- const arr = data.split(','),
|
|
|
- mime = arr[0].match(/:(.*?);/)[1]
|
|
|
-
|
|
|
- const bstr = atob(arr[1])
|
|
|
- let n = bstr.length
|
|
|
- const u8arr = new Uint8Array(n)
|
|
|
-
|
|
|
- while (n--) {
|
|
|
- u8arr[n] = bstr.charCodeAt(n)
|
|
|
- }
|
|
|
- return new Blob([u8arr], { type: mime })
|
|
|
- }
|
|
|
- const uploadFunction = async file => {
|
|
|
- try {
|
|
|
- const formData = new FormData()
|
|
|
- const fileName =
|
|
|
- new Date().getTime() + Math.ceil(Math.random() * 1000) + '.png'
|
|
|
- const keyTime = new Date().getTime() + fileName
|
|
|
- const obj = {
|
|
|
- filename: keyTime,
|
|
|
- bucketName: 'cloud-coach',
|
|
|
- postData: {
|
|
|
- filename: keyTime,
|
|
|
- acl: 'public-read',
|
|
|
- key: keyTime
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // const res = await request.post(state.platformApi + '/getUploadSign', {
|
|
|
- // data: obj
|
|
|
- // })
|
|
|
-
|
|
|
- const res = await getUploadSign(obj)
|
|
|
-
|
|
|
- Toast.loading({
|
|
|
- message: '加载中...',
|
|
|
- forbidClick: true,
|
|
|
- loadingType: 'spinner',
|
|
|
- duration: 0
|
|
|
- })
|
|
|
-
|
|
|
- const dataObj = {
|
|
|
- policy: res.data.policy,
|
|
|
- signature: res.data.signature,
|
|
|
- key: keyTime,
|
|
|
- KSSAccessKeyId: res.data.kssAccessKeyId,
|
|
|
- acl: 'public-read',
|
|
|
- name: keyTime
|
|
|
- }
|
|
|
- const files = base64ToBlob(file)
|
|
|
- const ossUploadUrl = getOssUploadUrl('cloud-coach')
|
|
|
- const imgurl = await onOnlyFileUpload(ossUploadUrl, {
|
|
|
- ...dataObj,
|
|
|
- file: files
|
|
|
- })
|
|
|
- // for (const key in dataObj) {
|
|
|
- // formData.append(key, dataObj[key])
|
|
|
- // }
|
|
|
- // const files = base64ToBlob(file)
|
|
|
-
|
|
|
- // formData.append('file', files, fileName)
|
|
|
- // const ossUploadUrl = getOssUploadUrl('cloud-coach')
|
|
|
- // await umiRequest(ossUploadUrl, {
|
|
|
- // method: 'POST',
|
|
|
- // data: formData
|
|
|
- // })
|
|
|
- Toast.clear()
|
|
|
- // const imgurl = getOssUploadUrl('cloud-coach') + keyTime
|
|
|
-
|
|
|
- await request.post(state.platformApi + '/open/music/sheet/img', {
|
|
|
- data: { musicSheetId: musicDetail.value.id, musicImg: imgurl }
|
|
|
- })
|
|
|
- // showImg.value.value = imgurl
|
|
|
- } catch (e) {
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const setAccompanyUrl = () => {
|
|
|
- let url = location.origin
|
|
|
- if (
|
|
|
- location.host.includes('dev.colexiu') ||
|
|
|
- location.host.includes('192.168') ||
|
|
|
- location.host.includes('localhost')
|
|
|
- ) {
|
|
|
- url = 'https://dev.colexiu.com'
|
|
|
- }
|
|
|
- const music = musicDetail.value
|
|
|
- let subjectId = ''
|
|
|
- if (music.background && music.background.length > 0) {
|
|
|
- subjectId = music.background[0].id
|
|
|
- }
|
|
|
- accompanyUrl.value =
|
|
|
- url +
|
|
|
- `/accompany/colxiu-website.html?id=${music.id}&part-index=${subjectId}`
|
|
|
- }
|
|
|
const player = ref<any>(null)
|
|
|
const audio = ref<any>(null)
|
|
|
const freeRate = ref<any>(0)
|
|
|
@@ -450,7 +352,7 @@ export default defineComponent({
|
|
|
// console.log(res)
|
|
|
setTimeout(() => {
|
|
|
musicDetail.value.coursewareId = res.data.id || ''
|
|
|
- Toast('添加成功')
|
|
|
+ Toast('已将曲目添加到课件')
|
|
|
musicDetail.value.coursewareStatus = 1
|
|
|
}, 100)
|
|
|
} catch {
|
|
|
@@ -695,7 +597,7 @@ export default defineComponent({
|
|
|
musicDetail.value?.musicSheetType === 'CONCERT'
|
|
|
? getInstrumentName(staffData.partList[staffData.partIndex]?.track)
|
|
|
: ''
|
|
|
-
|
|
|
+
|
|
|
if (musicDetail.value?.musicSheetType === 'SINGLE') {
|
|
|
musicPdfUrl.value = musicDetail.value?.musicPdfUrl
|
|
|
} else {
|
|
|
@@ -710,42 +612,29 @@ export default defineComponent({
|
|
|
try {
|
|
|
nextTick(() => {
|
|
|
if (musicPdfUrl.value) {
|
|
|
-
|
|
|
-
|
|
|
- // staffData.iframeSrc = `${location.origin}${
|
|
|
- // location.pathname
|
|
|
- // }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`
|
|
|
+ // const url = `${location.origin}/pdf/web/viewer-pdf.html?file=${encodeURIComponent(
|
|
|
+ // musicPdfUrl.value
|
|
|
+ // )}&t=${Date.now()}`
|
|
|
+ const url = `${location.origin}${
|
|
|
+ location.pathname
|
|
|
+ }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
|
|
|
+ musicPdfUrl.value
|
|
|
+ )}&t=${Date.now()}`
|
|
|
|
|
|
const iframeRef = document.querySelector('#staffIframeRef') as any
|
|
|
- console.log(iframeRef, 'iframeRef')
|
|
|
- iframeRef.contentWindow.location.replace(
|
|
|
- '/pdf/web/viewer-pdf.html?file=' +
|
|
|
- encodeURIComponent(musicPdfUrl.value) +
|
|
|
- '&t=' +
|
|
|
- Date.now()
|
|
|
- )
|
|
|
-
|
|
|
- // const iframeRef = document.querySelector('#staffIframeRef') as any
|
|
|
- // iframeRef.contentWindow.location.replace(
|
|
|
- // `${location.origin}${
|
|
|
- // location.pathname
|
|
|
- // }pdf/web/viewer-pdf.html?file=${encodeURIComponent(
|
|
|
- // musicPdfUrl.value
|
|
|
- // )}&t=${Date.now()}`
|
|
|
- // )
|
|
|
+ iframeRef.contentWindow.location.replace(url)
|
|
|
+ staffData.iframeSrc = url
|
|
|
} else {
|
|
|
- staffData.iframeSrc = `${
|
|
|
- location.origin
|
|
|
- }/osmd/index.html?t=${new Date().getTime()}`
|
|
|
-
|
|
|
- // staffData.iframeSrc = `${location.origin}${
|
|
|
- // location.pathname
|
|
|
- // }osmd/index.html?t=${new Date().getTime()}`
|
|
|
+ const url = `${location.origin}${
|
|
|
+ location.pathname
|
|
|
+ }osmd/index.html?t=${new Date().getTime()}`
|
|
|
+ // const url = `${location.origin}/osmd/index.html`
|
|
|
|
|
|
const iframeRef = document.querySelector('#staffIframeRef') as any
|
|
|
iframeRef.contentWindow.location.replace(
|
|
|
`${location.origin}${location.pathname}osmd/index.html`
|
|
|
)
|
|
|
+ staffData.iframeSrc = url
|
|
|
}
|
|
|
})
|
|
|
} catch (error) {
|
|
|
@@ -828,6 +717,7 @@ export default defineComponent({
|
|
|
<div ref={headers}>
|
|
|
<ColHeader
|
|
|
background="transparent"
|
|
|
+ hideHeader={false}
|
|
|
border={false}
|
|
|
isFixed={false}
|
|
|
color="#fff"
|
|
|
@@ -860,187 +750,229 @@ export default defineComponent({
|
|
|
height: `calc(100vh - var(--header-height) - var(--bottom-height) - 16px)`
|
|
|
}}
|
|
|
>
|
|
|
- <Cell
|
|
|
- border={false}
|
|
|
- center
|
|
|
- class={styles.musicInfo}
|
|
|
- v-slots={{
|
|
|
- icon: () => (
|
|
|
- <Image
|
|
|
- class={styles.pImg}
|
|
|
- src={musicDetail.value?.titleImg}
|
|
|
- />
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.info}>
|
|
|
- <h4
|
|
|
- class="van-ellipsis"
|
|
|
- // onClick={() => handleGotoMusicScore(musicDetail.value)}
|
|
|
- >
|
|
|
- {musicDetail.value?.musicSheetName}
|
|
|
- </h4>
|
|
|
- <p
|
|
|
- style={{
|
|
|
- display: 'flex'
|
|
|
- }}
|
|
|
- >
|
|
|
- {paymentType.value.map(tag => (
|
|
|
- tag && <Tag
|
|
|
- style={{ color: colors[tag]?.color }}
|
|
|
- class={styles.tag}
|
|
|
- type="success"
|
|
|
- plain
|
|
|
- >
|
|
|
- {colors[tag].text}
|
|
|
- </Tag>
|
|
|
- ))}
|
|
|
- {musicDetail.value?.exquisiteFlag === 1 && (
|
|
|
- <Image
|
|
|
- class={styles.exquisiteFlag}
|
|
|
- src={getAssetsHomeFile('icon_exquisite.png')}
|
|
|
- />
|
|
|
- )}
|
|
|
+ <div>
|
|
|
+ <Cell
|
|
|
+ border={false}
|
|
|
+ center
|
|
|
+ class={styles.musicInfo}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => (
|
|
|
+ <Image
|
|
|
+ class={styles.pImg}
|
|
|
+ src={musicDetail.value?.titleImg}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.info}>
|
|
|
+ <h4
|
|
|
+ class="van-ellipsis"
|
|
|
+ // onClick={() => handleGotoMusicScore(musicDetail.value)}
|
|
|
+ >
|
|
|
+ {musicDetail.value?.musicSheetName}
|
|
|
+ </h4>
|
|
|
+ <p
|
|
|
+ style={{
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {paymentType.value.map(
|
|
|
+ tag =>
|
|
|
+ tag && (
|
|
|
+ <Tag
|
|
|
+ style={{ color: colors[tag]?.color }}
|
|
|
+ class={styles.tag}
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ >
|
|
|
+ {colors[tag].text}
|
|
|
+ </Tag>
|
|
|
+ )
|
|
|
+ )}
|
|
|
+ {musicDetail.value?.exquisiteFlag === 1 && (
|
|
|
+ <Image
|
|
|
+ class={styles.exquisiteFlag}
|
|
|
+ src={getAssetsHomeFile('icon_exquisite.png')}
|
|
|
+ />
|
|
|
+ )}
|
|
|
|
|
|
- {musicDetail.value?.albumNums > 0 && (
|
|
|
- <Image
|
|
|
- class={styles.songAlbum}
|
|
|
- src={getAssetsHomeFile('icon_album_active.png')}
|
|
|
- />
|
|
|
- )}
|
|
|
- <span class={styles.coomposer}>
|
|
|
- {musicDetail.value?.composer}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- value: () => (
|
|
|
- <>
|
|
|
- {musicDetail.value?.notation ? (
|
|
|
+ {musicDetail.value?.albumNums > 0 && (
|
|
|
+ <Image
|
|
|
+ class={styles.songAlbum}
|
|
|
+ src={getAssetsHomeFile('icon_album_active.png')}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <span class={styles.coomposer}>
|
|
|
+ {musicDetail.value?.composer}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ value: () => (
|
|
|
+ <>
|
|
|
<span
|
|
|
+ style={{
|
|
|
+ visibility:
|
|
|
+ state.platformType === 'TEACHER' ? '' : 'hidden'
|
|
|
+ }}
|
|
|
class={styles.download}
|
|
|
onClick={() => {
|
|
|
- staff.status = true
|
|
|
+ if (musicDetail.value?.coursewareStatus) {
|
|
|
+ removeCourse()
|
|
|
+ } else {
|
|
|
+ onAddCourse()
|
|
|
+ }
|
|
|
}}
|
|
|
+ >
|
|
|
+ <img src={iconAddCourse} />
|
|
|
+ <span>添加课件</span>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
style={{
|
|
|
display:
|
|
|
- musicDetail.value?.musicSheetType !== 'CONCERT'
|
|
|
+ musicDetail.value?.musicSheetType === 'CONCERT'
|
|
|
? ''
|
|
|
: 'none'
|
|
|
}}
|
|
|
+ class={styles.download}
|
|
|
+ onClick={() => toggleFavorite()}
|
|
|
>
|
|
|
- <img src={iconChangeStaff} />
|
|
|
- <span>转谱</span>
|
|
|
+ <img
|
|
|
+ src={
|
|
|
+ musicDetail.value?.favorite
|
|
|
+ ? iconCollectActive
|
|
|
+ : iconCollect
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <span>收藏</span>
|
|
|
</span>
|
|
|
- ) : null}
|
|
|
-
|
|
|
- <span
|
|
|
- class={styles.download}
|
|
|
- onClick={() => {
|
|
|
- if (musicPdfUrl.value) {
|
|
|
- const songName =
|
|
|
- musicDetail.value?.musicSheetName +
|
|
|
- (staffData.instrumentName
|
|
|
- ? `(${staffData.instrumentName})`
|
|
|
- : '')
|
|
|
- promisefiyPostMessage({
|
|
|
- api: 'downloadFile',
|
|
|
- content: {
|
|
|
- downloadUrl: musicPdfUrl.value,
|
|
|
- fileName: songName
|
|
|
- }
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- if (showImg.value.length > 0) {
|
|
|
- downloadStatus.value = true
|
|
|
- } else {
|
|
|
- Toast('暂无图片')
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <div class={styles.functionSection}>
|
|
|
+ <div
|
|
|
+ class={styles.functionItem}
|
|
|
+ onClick={() => {
|
|
|
+ router.push({
|
|
|
+ path: '/look-album-list',
|
|
|
+ query: {
|
|
|
+ id: musicDetail.value?.id,
|
|
|
+ musicSubject: musicDetail.value?.musicSubject
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={iconAlbum} />
|
|
|
+ <span>专辑</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.functionItem}
|
|
|
+ // style={{
|
|
|
+ // display:
|
|
|
+ // musicDetail.value?.musicSheetType === 'CONCERT'
|
|
|
+ // ? ''
|
|
|
+ // : 'none'
|
|
|
+ // }}
|
|
|
+ onClick={() => {
|
|
|
+ if (musicDetail.value?.musicSheetType === 'CONCERT') {
|
|
|
+ staffData.open = true
|
|
|
+ } else {
|
|
|
+ staff.status = true
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={iconChange} />
|
|
|
+ <span>
|
|
|
+ {musicDetail.value?.musicSheetType === 'CONCERT'
|
|
|
+ ? '切换乐器'
|
|
|
+ : '转谱'}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={styles.functionItem}
|
|
|
+ onClick={() => {
|
|
|
+ if (musicPdfUrl.value) {
|
|
|
+ const songName =
|
|
|
+ musicDetail.value?.musicSheetName +
|
|
|
+ (staffData.instrumentName
|
|
|
+ ? `(${staffData.instrumentName})`
|
|
|
+ : '')
|
|
|
+ promisefiyPostMessage({
|
|
|
+ api: 'downloadFile',
|
|
|
+ content: {
|
|
|
+ downloadUrl: musicPdfUrl.value,
|
|
|
+ fileName: songName
|
|
|
}
|
|
|
- }}
|
|
|
- >
|
|
|
- <img src={iconDownload} />
|
|
|
- <span>下载曲谱</span>
|
|
|
- </span>
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (showImg.value.length > 0) {
|
|
|
+ downloadStatus.value = true
|
|
|
+ } else {
|
|
|
+ Toast('暂无图片')
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={iconDownload} />
|
|
|
+ <span>下载</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <span
|
|
|
- style={{
|
|
|
- display:
|
|
|
- musicDetail.value?.musicSheetType === 'CONCERT'
|
|
|
- ? ''
|
|
|
- : 'none'
|
|
|
- }}
|
|
|
- class={styles.download}
|
|
|
- onClick={() => {
|
|
|
- staffData.open = true
|
|
|
- }}
|
|
|
- >
|
|
|
- <Icon class={styles.iconExchange} name="exchange" />
|
|
|
- <span>切换乐器</span>
|
|
|
- </span>
|
|
|
- </>
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
<div class={styles.musicContent}>
|
|
|
- {/* <p class={styles.musicTitle}>
|
|
|
- {(musicDetail.value?.musicSheetName
|
|
|
- ? musicDetail.value?.musicSheetName
|
|
|
- : '') +
|
|
|
- (staffData.instrumentName
|
|
|
- ? `(${staffData.instrumentName})`
|
|
|
- : '')}
|
|
|
- </p> */}
|
|
|
{musicDetail.value?.musicSheetType === 'CONCERT' ||
|
|
|
!defaultImgs.value[staff.radio] ? (
|
|
|
<>
|
|
|
- {musicPdfUrl.value ? (
|
|
|
- <iframe
|
|
|
- id="staffIframeRef"
|
|
|
- style={{
|
|
|
- opacity: loading.value ? 0 : 1
|
|
|
- }}
|
|
|
- src={staffData.iframeSrc}
|
|
|
- onLoad={() => {
|
|
|
- // 判断是用哪个渲染的
|
|
|
- loading.value = false
|
|
|
- }}
|
|
|
- ></iframe>
|
|
|
- ) : (
|
|
|
- <>
|
|
|
- <p class={styles.musicTitle}>
|
|
|
- {(musicDetail.value?.musicSheetName
|
|
|
- ? musicDetail.value?.musicSheetName
|
|
|
- : '') +
|
|
|
- (staffData.instrumentName
|
|
|
- ? `(${staffData.instrumentName})`
|
|
|
- : '')}
|
|
|
- </p>
|
|
|
- {loading.value && (
|
|
|
- <div>
|
|
|
- <Vue3Lottie
|
|
|
- animationData={AstronautJSON}
|
|
|
- class={styles.finch}
|
|
|
- ></Vue3Lottie>
|
|
|
- {/* <p class={styles.finchLoad}>加载中...</p> */}
|
|
|
- </div>
|
|
|
+ {musicPdfUrl.value ? (
|
|
|
+ <iframe
|
|
|
+ id="staffIframeRef"
|
|
|
+ style={{
|
|
|
+ opacity: loading.value ? 0 : 1
|
|
|
+ }}
|
|
|
+ src={staffData.iframeSrc}
|
|
|
+ onLoad={() => {
|
|
|
+ // 判断是用哪个渲染的
|
|
|
+ loading.value = false
|
|
|
+ }}
|
|
|
+ ></iframe>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <p class={styles.musicTitle}>
|
|
|
+ {(musicDetail.value?.musicSheetName
|
|
|
+ ? musicDetail.value?.musicSheetName
|
|
|
+ : '') +
|
|
|
+ (staffData.instrumentName
|
|
|
+ ? `(${staffData.instrumentName})`
|
|
|
+ : '')}
|
|
|
+ </p>
|
|
|
+ {loading.value && (
|
|
|
+ <div>
|
|
|
+ <Vue3Lottie
|
|
|
+ animationData={AstronautJSON}
|
|
|
+ class={styles.finch}
|
|
|
+ ></Vue3Lottie>
|
|
|
+ {/* <p class={styles.finchLoad}>加载中...</p> */}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <iframe
|
|
|
+ id="staffIframeRef"
|
|
|
+ style={{
|
|
|
+ opacity: loading.value ? 0 : 1
|
|
|
+ }}
|
|
|
+ src={staffData.iframeSrc}
|
|
|
+ onLoad={() => {
|
|
|
+ if (!defaultImgs.value[staff.radio]) {
|
|
|
+ onChangeStaff(staff.radio)
|
|
|
+ } else {
|
|
|
+ musicIframeLoad()
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ ></iframe>
|
|
|
+ </>
|
|
|
)}
|
|
|
- <iframe
|
|
|
- id="staffIframeRef"
|
|
|
- style={{
|
|
|
- opacity: loading.value ? 0 : 1
|
|
|
- }}
|
|
|
- src={staffData.iframeSrc}
|
|
|
- onLoad={() => {
|
|
|
- if (!defaultImgs.value[staff.radio]) {
|
|
|
- onChangeStaff(staff.radio)
|
|
|
- } else {
|
|
|
- musicIframeLoad()
|
|
|
- }
|
|
|
- }}
|
|
|
- ></iframe>
|
|
|
</>
|
|
|
- )}
|
|
|
- </>
|
|
|
+ ) : (
|
|
|
// <>
|
|
|
// {loading.value && (
|
|
|
// <>
|
|
|
@@ -1066,16 +998,15 @@ export default defineComponent({
|
|
|
// }}
|
|
|
// ></iframe>
|
|
|
// </>
|
|
|
- ) : (
|
|
|
<>
|
|
|
- <p class={styles.musicTitle}>
|
|
|
- {(musicDetail.value?.musicSheetName
|
|
|
- ? musicDetail.value?.musicSheetName
|
|
|
- : '') +
|
|
|
- (staffData.instrumentName
|
|
|
- ? `(${staffData.instrumentName})`
|
|
|
- : '')}
|
|
|
- </p>
|
|
|
+ <p class={styles.musicTitle}>
|
|
|
+ {(musicDetail.value?.musicSheetName
|
|
|
+ ? musicDetail.value?.musicSheetName
|
|
|
+ : '') +
|
|
|
+ (staffData.instrumentName
|
|
|
+ ? `(${staffData.instrumentName})`
|
|
|
+ : '')}
|
|
|
+ </p>
|
|
|
{showImg.value.length > 0 ? (
|
|
|
<div class={styles.musicImg}>
|
|
|
<img src={showImg.value[0]} alt="" />
|
|
|
@@ -1096,109 +1027,6 @@ export default defineComponent({
|
|
|
)}
|
|
|
</>
|
|
|
)}
|
|
|
-
|
|
|
- <div class={styles.videoOperation}>
|
|
|
- {audioFileUrl.value && (
|
|
|
- <>
|
|
|
- {!buyState.value.play &&
|
|
|
- freeRate.value != 100 &&
|
|
|
- freeRate.value != 0 && (
|
|
|
- <div class={[styles.audition]}>
|
|
|
- <img src={iconListen} />
|
|
|
- <span>每首曲目可试听{freeRate.value}%</span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- <div class={[styles.audio, styles.collectCell]}>
|
|
|
- <audio id="player" controls ref={audio}>
|
|
|
- <source src={audioFileUrl.value} type="audio/mp3" />
|
|
|
- </audio>
|
|
|
- </div>
|
|
|
- </>
|
|
|
- )}
|
|
|
-
|
|
|
- <div class={[styles.collect, styles.collectCell]}>
|
|
|
- <div
|
|
|
- class={[styles.userInfo]}
|
|
|
- onClick={() => {
|
|
|
- if (
|
|
|
- browser().isApp &&
|
|
|
- musicDetail.value?.sourceType === 'TEACHER' &&
|
|
|
- state.platformType === 'STUDENT'
|
|
|
- ) {
|
|
|
- router.push({
|
|
|
- path: '/teacherHome',
|
|
|
- query: {
|
|
|
- teacherId: musicDetail.value?.userId,
|
|
|
- tabs: 'music'
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <img src={musicDetail.value?.userAvatar || iconTeacher} />
|
|
|
- <span>{musicDetail.value?.userName}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class={styles.functionSection}>
|
|
|
- <div
|
|
|
- class={[styles.collectSection]}
|
|
|
- onClick={() => toggleFavorite()}
|
|
|
- >
|
|
|
- <span>{musicDetail.value?.favoriteCount}人收藏</span>
|
|
|
- <img
|
|
|
- src={
|
|
|
- musicDetail.value?.favorite
|
|
|
- ? iconCollectActive
|
|
|
- : iconCollect
|
|
|
- }
|
|
|
- />
|
|
|
- </div>
|
|
|
- {state.platformType === 'TEACHER' && (
|
|
|
- <div
|
|
|
- class={[styles.collectSection]}
|
|
|
- onClick={() => {
|
|
|
- if (musicDetail.value?.coursewareStatus) {
|
|
|
- removeCourse()
|
|
|
- } else {
|
|
|
- onAddCourse()
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <span>
|
|
|
- {musicDetail.value?.coursewareStatus
|
|
|
- ? '移出课件'
|
|
|
- : '添加到课件'}
|
|
|
- </span>
|
|
|
- {musicDetail.value?.coursewareStatus ? (
|
|
|
- <Icon name="clear" />
|
|
|
- ) : (
|
|
|
- <Icon name="add" size={18} />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class={[styles.lookAlbum, styles.collectCell]}
|
|
|
- onClick={() => {
|
|
|
- router.push({
|
|
|
- path: '/look-album-list',
|
|
|
- query: {
|
|
|
- id: musicDetail.value?.id,
|
|
|
- musicSubject: musicDetail.value?.musicSubject
|
|
|
- }
|
|
|
- })
|
|
|
- }}
|
|
|
- >
|
|
|
- <div>
|
|
|
- <img src={iconAlbum} />
|
|
|
- <span>进入曲目所在平台专辑列表</span>
|
|
|
- </div>
|
|
|
- <Icon name="arrow" size={16} color="#666" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -1209,6 +1037,26 @@ export default defineComponent({
|
|
|
varName="--bottom-height"
|
|
|
>
|
|
|
<div ref={footers}>
|
|
|
+ <div class={styles.videoOperation}>
|
|
|
+ {audioFileUrl.value && (
|
|
|
+ <>
|
|
|
+ {!buyState.value.play &&
|
|
|
+ freeRate.value != 100 &&
|
|
|
+ freeRate.value != 0 && (
|
|
|
+ <div class={[styles.audition]}>
|
|
|
+ <img src={iconListen} />
|
|
|
+ <span>每首曲目可试听{freeRate.value}%</span>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <div class={[styles.audio, styles.collectCell]}>
|
|
|
+ <audio id="player" controls ref={audio}>
|
|
|
+ <source src={audioFileUrl.value} type="audio/mp3" />
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
{/* 判断是否是免费的，或者已经购买过，是否从专辑过来的 */}
|
|
|
{buyState.value.play ||
|
|
|
(state.platformType === 'TEACHER' &&
|
|
|
@@ -1453,32 +1301,31 @@ export default defineComponent({
|
|
|
staffData.partXmlIndex = value.xmlValue
|
|
|
showImg.value = []
|
|
|
nextTick(() => {
|
|
|
-
|
|
|
- let tempPdf = value?.musicPdfUrl
|
|
|
- if (musicDetail.value?.musicSheetType !== 'CONCERT') {
|
|
|
- // tempPdf = ''
|
|
|
- if (staff.radio === 'first') {
|
|
|
- tempPdf = value?.firstPdfUrl
|
|
|
- } else if (staff.radio === 'fixed') {
|
|
|
- tempPdf = value?.jianPdfUrl
|
|
|
- } else if (staff.radio === 'staff') {
|
|
|
- tempPdf = value?.musicPdfUrl
|
|
|
+ let tempPdf = value?.musicPdfUrl
|
|
|
+ if (musicDetail.value?.musicSheetType !== 'CONCERT') {
|
|
|
+ // tempPdf = ''
|
|
|
+ if (staff.radio === 'first') {
|
|
|
+ tempPdf = value?.firstPdfUrl
|
|
|
+ } else if (staff.radio === 'fixed') {
|
|
|
+ tempPdf = value?.jianPdfUrl
|
|
|
+ } else if (staff.radio === 'staff') {
|
|
|
+ tempPdf = value?.musicPdfUrl
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- if (tempPdf) {
|
|
|
- musicPdfUrl.value = tempPdf
|
|
|
- renderStaff()
|
|
|
- } else {
|
|
|
- musicPdfUrl.value = ''
|
|
|
- loading.value = true
|
|
|
- // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
|
|
|
- if (staffData.iframeSrc.indexOf('pdf/web') !== -1) {
|
|
|
+ if (tempPdf) {
|
|
|
+ musicPdfUrl.value = tempPdf
|
|
|
renderStaff()
|
|
|
} else {
|
|
|
- resetRender()
|
|
|
+ musicPdfUrl.value = ''
|
|
|
+ loading.value = true
|
|
|
+ // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
|
|
|
+ if (staffData.iframeSrc.indexOf('pdf/web') !== -1) {
|
|
|
+ renderStaff()
|
|
|
+ } else {
|
|
|
+ resetRender()
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
})
|
|
|
}}
|
|
|
onCancel={() => (staffData.open = false)}
|
