|
|
@@ -4,7 +4,8 @@ import {
|
|
|
nextTick,
|
|
|
onMounted,
|
|
|
reactive,
|
|
|
- ref
|
|
|
+ ref,
|
|
|
+ watch
|
|
|
} from 'vue'
|
|
|
import umiRequest from 'umi-request'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
@@ -14,10 +15,13 @@ import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
|
|
|
import {
|
|
|
Button,
|
|
|
Cell,
|
|
|
+ CellGroup,
|
|
|
Dialog,
|
|
|
Icon,
|
|
|
Image,
|
|
|
Popup,
|
|
|
+ Radio,
|
|
|
+ RadioGroup,
|
|
|
Sticky,
|
|
|
Tag,
|
|
|
Toast
|
|
|
@@ -34,12 +38,20 @@ import { browser, moneyFormat } from '@/helpers/utils'
|
|
|
import { orderStatus } from '@/views/order-detail/orderStatus'
|
|
|
import iconAlbum from '@/views/music/component/images/icon_album.png'
|
|
|
import iconDownload from '@/views/music/music-detail/images/icon_download.png'
|
|
|
+import iconChangeStaff from '@/views/music/music-detail/images/icon-change-staff.png'
|
|
|
import AstronautJSON from '@/views/music/music-detail/animate/bigLoad.json'
|
|
|
import ColShare from '@/components/col-share'
|
|
|
import iconCollect from '@/views/music/music-detail/images/icon_collect.png'
|
|
|
import iconCollectActive from '@/views/music/music-detail/images/icon_collect_active.png'
|
|
|
import iconListen from '@/views/music/music-detail/images/icon_listen.png'
|
|
|
import iconTeacher from '@common/images/icon_teacher.png'
|
|
|
+
|
|
|
+import activeButtonIcon from '@common/images/icon_checkbox.png'
|
|
|
+import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
|
|
|
+import staffDetafult from '@/views/music/music-detail/images/staff-default.png'
|
|
|
+import firstDefault from '@/views/music/music-detail/images/first-default.png'
|
|
|
+import fixedDefault from '@/views/music/music-detail/images/fixed-default.png'
|
|
|
+import emtpy from '@/views/music/music-detail/images/emtpy.png'
|
|
|
import {
|
|
|
addMusicTitle,
|
|
|
addWatermark,
|
|
|
@@ -54,6 +66,7 @@ import icon_album_active from '@/views/music/component/images/icon_album_active.
|
|
|
import wx_bg from '../images/wx_bg.png'
|
|
|
import { initJumpNativePage, shareCall } from '../share'
|
|
|
import qs from 'query-string'
|
|
|
+import Download from '@/views/music/music-detail/download'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'MusicDetail',
|
|
|
@@ -66,10 +79,20 @@ export default defineComponent({
|
|
|
const footers = ref(null)
|
|
|
const heightInfo = ref<any>('0')
|
|
|
const musicDetail = ref<any>(null)
|
|
|
- const showImg = ref<string>('')
|
|
|
- const accompanyUrl = ref<string>('')
|
|
|
+ // const showImg = ref<string>('')
|
|
|
+ // const accompanyUrl = ref<string>('')
|
|
|
const audioFileUrl = ref('')
|
|
|
const wxStatus = ref<boolean>(false)
|
|
|
+ let showImg = [] as any
|
|
|
+ const firstList = ref<Array<any>>([])
|
|
|
+ const fixedList = ref<Array<any>>([])
|
|
|
+ const staffList = ref<Array<any>>([])
|
|
|
+ const accompanyUrl = ref<string>('')
|
|
|
+ const downloadStatus = ref<boolean>(false)
|
|
|
+ const staff = reactive({
|
|
|
+ status: false,
|
|
|
+ radio: 'staff' // staff first fixed
|
|
|
+ })
|
|
|
|
|
|
const tmpUrl = `${location.origin}/student/#/music-detail?${qs.stringify(
|
|
|
route.query
|
|
|
@@ -91,6 +114,24 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 更改预览状态
|
|
|
+ const onChangeStaff = (type: string) => {
|
|
|
+ staff.radio = type
|
|
|
+ staff.status = false
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ () => staff.radio,
|
|
|
+ (val: string) => {
|
|
|
+ if (val == 'first') {
|
|
|
+ showImg = firstList.value
|
|
|
+ } else if (val == 'fixed') {
|
|
|
+ showImg = fixedList.value
|
|
|
+ } else {
|
|
|
+ showImg = staffList.value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
const FetchList = async (id?: any) => {
|
|
|
if (loading.value) {
|
|
|
return
|
|
|
@@ -115,112 +156,25 @@ export default defineComponent({
|
|
|
background && background.length > 0 ? background[0].audioFileUrl : ''
|
|
|
console.log(audioFileUrl.value)
|
|
|
musicDetail.value = res.data.musicSheet
|
|
|
- showImg.value = musicDetail.value?.musicImg || ''
|
|
|
-
|
|
|
- if (!showImg.value) {
|
|
|
- setAccompanyUrl()
|
|
|
- window.addEventListener(
|
|
|
- 'message',
|
|
|
- async e => {
|
|
|
- // 给图片设置背景色
|
|
|
- const tempCanvas = await imgToCanvas(e.data)
|
|
|
- const img = convasToImg(tempCanvas)
|
|
|
- // 开始上传图片
|
|
|
- uploadFunction(img)
|
|
|
- },
|
|
|
- false
|
|
|
- )
|
|
|
- }
|
|
|
+ // showImg.value = musicDetail.value?.musicImg || ''
|
|
|
+ showImg = musicDetail.value?.musicImg
|
|
|
+ ? musicDetail.value?.musicImg.split(',')
|
|
|
+ : []
|
|
|
+ firstList.value = musicDetail.value?.firstTone
|
|
|
+ ? musicDetail.value?.firstTone.split(',')
|
|
|
+ : []
|
|
|
+ fixedList.value = musicDetail.value?.fixedTone
|
|
|
+ ? musicDetail.value?.fixedTone.split(',')
|
|
|
+ : []
|
|
|
+ staffList.value = musicDetail.value?.musicImg
|
|
|
+ ? musicDetail.value?.musicImg.split(',')
|
|
|
+ : []
|
|
|
} catch (error) {
|
|
|
isError.value = true
|
|
|
}
|
|
|
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() +
|
|
|
- musicDetail.value?.musicSheetName.replaceAll(' ', '_') +
|
|
|
- '.png'
|
|
|
- const keyTime = new Date().getTime() + fileName
|
|
|
- const obj = {
|
|
|
- filename: fileName,
|
|
|
- bucketName: 'cloud-coach',
|
|
|
- postData: {
|
|
|
- filename: fileName,
|
|
|
- acl: 'public-read',
|
|
|
- key: keyTime,
|
|
|
- unknowValueField: []
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const res = await request.post(state.platformApi + '/getUploadSign', {
|
|
|
- data: 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: fileName
|
|
|
- }
|
|
|
- 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 = imgurl
|
|
|
- } catch (e) {
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const setAccompanyUrl = () => {
|
|
|
- const url = 'http://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)
|
|
|
@@ -372,26 +326,37 @@ export default defineComponent({
|
|
|
</div>
|
|
|
),
|
|
|
value: () => (
|
|
|
- <span class={styles.download} onClick={() => onShare()}>
|
|
|
- <img src={iconDownload} />
|
|
|
- 下载曲谱
|
|
|
- </span>
|
|
|
+ // <span class={styles.download} onClick={() => onShare()}>
|
|
|
+ // <img src={iconDownload} />
|
|
|
+ // 下载曲谱
|
|
|
+ // </span>
|
|
|
+ <>
|
|
|
+ {musicDetail.value?.notation ? (
|
|
|
+ <span
|
|
|
+ class={styles.download}
|
|
|
+ onClick={() => {
|
|
|
+ staff.status = true
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={iconChangeStaff} />
|
|
|
+ <span>转谱</span>
|
|
|
+ </span>
|
|
|
+ ) : null}
|
|
|
+ <span class={styles.download} onClick={() => onShare()}>
|
|
|
+ <img src={iconDownload} />
|
|
|
+ <span>下载曲谱</span>
|
|
|
+ </span>
|
|
|
+ </>
|
|
|
)
|
|
|
}}
|
|
|
/>
|
|
|
<div class={styles.musicContent}>
|
|
|
- <iframe
|
|
|
- id="containerPrint"
|
|
|
- ref="print"
|
|
|
- style="width: 100%;page-break-after:always; height: 0"
|
|
|
- src={accompanyUrl.value}
|
|
|
- />
|
|
|
<p class={styles.musicTitle}>
|
|
|
{musicDetail.value?.musicSheetName}
|
|
|
</p>
|
|
|
- {showImg.value ? (
|
|
|
- <img src={showImg.value} alt="" class={styles.musicImg} />
|
|
|
- ) : (
|
|
|
+ {showImg.length > 0 ? (
|
|
|
+ <img src={showImg[0]} alt="" class={styles.musicImg} />
|
|
|
+ ) : loading.value ? (
|
|
|
<>
|
|
|
<Vue3Lottie
|
|
|
animationData={AstronautJSON}
|
|
|
@@ -399,6 +364,11 @@ export default defineComponent({
|
|
|
></Vue3Lottie>
|
|
|
<p class={styles.finchLoad}>加载中...</p>
|
|
|
</>
|
|
|
+ ) : (
|
|
|
+ <div class={styles.empty}>
|
|
|
+ <Image src={emtpy} class={styles.emptyImg} />
|
|
|
+ <p class={styles.emptyTip}>暂无乐谱预览图</p>
|
|
|
+ </div>
|
|
|
)}
|
|
|
|
|
|
<div class={styles.videoOperation}>
|
|
|
@@ -474,6 +444,119 @@ export default defineComponent({
|
|
|
</ColSticky>
|
|
|
)}
|
|
|
|
|
|
+ <Popup v-model:show={downloadStatus.value} position="bottom" round>
|
|
|
+ <Download
|
|
|
+ imgList={JSON.parse(JSON.stringify(showImg))}
|
|
|
+ musicSheetName={musicDetail.value.musicSheetName}
|
|
|
+ />
|
|
|
+ </Popup>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ v-model:show={staff.status}
|
|
|
+ teleport="body"
|
|
|
+ closeable
|
|
|
+ style={{ width: '80%' }}
|
|
|
+ round
|
|
|
+ >
|
|
|
+ <div class={styles.staffContainer}>
|
|
|
+ <div class={styles.staffTitle}>选择转换曲谱</div>
|
|
|
+ <RadioGroup v-model={staff.radio}>
|
|
|
+ <CellGroup border={false}>
|
|
|
+ <Cell
|
|
|
+ center
|
|
|
+ border={false}
|
|
|
+ class={staff.radio === 'staff' ? styles.active : ''}
|
|
|
+ onClick={() => onChangeStaff('staff')}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Image src={staffDetafult} class={styles.staffImg} />
|
|
|
+ ),
|
|
|
+ title: () => <span class={styles.name}>五线谱</span>,
|
|
|
+ value: () => (
|
|
|
+ <Radio name="staff">
|
|
|
+ {{
|
|
|
+ icon: (props: any) => (
|
|
|
+ <Icon
|
|
|
+ class={styles.boxStyle}
|
|
|
+ size={16}
|
|
|
+ name={
|
|
|
+ props.checked
|
|
|
+ ? activeButtonIcon
|
|
|
+ : inactiveButtonIcon
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Radio>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ <Cell
|
|
|
+ center
|
|
|
+ border={false}
|
|
|
+ class={staff.radio === 'first' ? styles.active : ''}
|
|
|
+ onClick={() => onChangeStaff('first')}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Image src={firstDefault} class={styles.staffImg} />
|
|
|
+ ),
|
|
|
+ title: () => <span class={styles.name}>简谱-首调</span>,
|
|
|
+ value: () => (
|
|
|
+ <Radio name="first">
|
|
|
+ {{
|
|
|
+ icon: (props: any) => (
|
|
|
+ <Icon
|
|
|
+ class={styles.boxStyle}
|
|
|
+ size={16}
|
|
|
+ name={
|
|
|
+ props.checked
|
|
|
+ ? activeButtonIcon
|
|
|
+ : inactiveButtonIcon
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Radio>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ <Cell
|
|
|
+ center
|
|
|
+ border={false}
|
|
|
+ class={staff.radio === 'fixed' ? styles.active : ''}
|
|
|
+ onClick={() => onChangeStaff('fixed')}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <Image src={fixedDefault} class={styles.staffImg} />
|
|
|
+ ),
|
|
|
+ title: () => <span class={styles.name}>简谱-固定调</span>,
|
|
|
+ value: () => (
|
|
|
+ <Radio name="fixed">
|
|
|
+ {{
|
|
|
+ icon: (props: any) => (
|
|
|
+ <Icon
|
|
|
+ class={styles.boxStyle}
|
|
|
+ size={16}
|
|
|
+ name={
|
|
|
+ props.checked
|
|
|
+ ? activeButtonIcon
|
|
|
+ : inactiveButtonIcon
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Radio>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ </CellGroup>
|
|
|
+ </RadioGroup>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+
|
|
|
{wxStatus.value && (
|
|
|
<div
|
|
|
class={styles.wxpopup}
|
