|
@@ -35,7 +35,7 @@ import icon_favitor from '/src/common/images/icon-collect-default.png';
|
|
|
import icon_favitorActive from '/src/common/images/icon-collect-active.png';
|
|
|
import icon_default from './images/icon_default.png';
|
|
|
import icon_close from './images/icon-close.png';
|
|
|
-import icon_trans from './images/icon_trans.png'
|
|
|
+import icon_trans from './images/icon_trans.png';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import PlayItem from './component/play-item';
|
|
|
import PlayLoading from './component/play-loading';
|
|
@@ -53,7 +53,7 @@ import TheEmpty from '/src/components/TheEmpty';
|
|
|
import { state } from '/src/state';
|
|
|
import { useResizeObserver } from '@vueuse/core';
|
|
|
import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
|
|
|
-import { getInstrumentName, sortMusical } from '/src/utils'
|
|
|
+import { getInstrumentName, sortMusical } from '/src/utils';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'XiaokuMusic',
|
|
@@ -88,7 +88,7 @@ export default defineComponent({
|
|
|
showMusicImg: 'staff' as 'staff' | 'first' | 'fixed', // 显示哪种曲谱
|
|
|
trackList: [] as any, // 可筛选的分轨信息
|
|
|
showTransBtn: true, // 是否显示转谱按钮
|
|
|
- trackName: '切换声轨' as any, // 分轨名字
|
|
|
+ trackName: '切换声轨' as any // 分轨名字
|
|
|
});
|
|
|
const showGuide = ref(false);
|
|
|
const userStore = useUserStore();
|
|
@@ -313,7 +313,7 @@ export default defineComponent({
|
|
|
? 'fixedTone'
|
|
|
: data.showMusicImg === 'staff'
|
|
|
? 'staff'
|
|
|
- : 'firstTone';
|
|
|
+ : 'firstTone';
|
|
|
data.iframeSrc = `${vaildMusicScoreUrl()}/instrument/?id=${
|
|
|
details.id
|
|
|
}&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${
|
|
@@ -362,16 +362,26 @@ export default defineComponent({
|
|
|
const details: any = data.list[data.listActive];
|
|
|
if (details.musicalInstruments?.length > 1) {
|
|
|
if (details.xmlFileUrl) {
|
|
|
- const res = await fetch(details.xmlFileUrl).then((response) => response.text());
|
|
|
- filterTracks(res)
|
|
|
+ const res = await fetch(details.xmlFileUrl).then(response =>
|
|
|
+ response.text()
|
|
|
+ );
|
|
|
+ filterTracks(res);
|
|
|
}
|
|
|
} else {
|
|
|
// showMusicImg: 'first' as 'staff' | 'first' | 'fixed',
|
|
|
- const { defaultScore, transferFlag } = details.musicalInstruments[0] || {}
|
|
|
+ const { defaultScore, transferFlag } =
|
|
|
+ details.musicalInstruments[0] || {};
|
|
|
let musicImgType: 'staff' | 'first' | 'fixed' = 'staff';
|
|
|
- musicImgType = defaultScore === 'STAVE' ? 'staff' : defaultScore === 'JIAN' ? 'fixed' : defaultScore === 'FIRST' ? 'first' : 'staff'
|
|
|
- data.showMusicImg = musicImgType
|
|
|
- data.showTransBtn = transferFlag
|
|
|
+ musicImgType =
|
|
|
+ defaultScore === 'STAVE'
|
|
|
+ ? 'staff'
|
|
|
+ : defaultScore === 'JIAN'
|
|
|
+ ? 'fixed'
|
|
|
+ : defaultScore === 'FIRST'
|
|
|
+ ? 'first'
|
|
|
+ : 'staff';
|
|
|
+ data.showMusicImg = musicImgType;
|
|
|
+ data.showTransBtn = transferFlag;
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -450,14 +460,32 @@ export default defineComponent({
|
|
|
data.musicInstrumentIndex = 0;
|
|
|
analyzeXml();
|
|
|
}
|
|
|
- );
|
|
|
+ );
|
|
|
watch(
|
|
|
() => data.musicInstrumentIndex,
|
|
|
async () => {
|
|
|
- data.trackName = data.trackList.find((item: any) => item.value === data.musicInstrumentIndex)?.label || '切换声轨'
|
|
|
+ data.trackName =
|
|
|
+ data.trackList.find(
|
|
|
+ (item: any) => item.value === data.musicInstrumentIndex
|
|
|
+ )?.label || '切换声轨';
|
|
|
musicIframeLoad();
|
|
|
}
|
|
|
- );
|
|
|
+ );
|
|
|
+
|
|
|
+ const musicImg = computed(() => {
|
|
|
+ let imgs: any = [];
|
|
|
+ if (data.showMusicImg === 'first') {
|
|
|
+ const img = activeItem.value?.musicFirstSvg;
|
|
|
+ imgs = img ? img.split(',') : [];
|
|
|
+ } else if (data.showMusicImg === 'fixed') {
|
|
|
+ const img = activeItem.value?.musicJianSvg;
|
|
|
+ imgs = img ? img.split(',') : [];
|
|
|
+ } else if (data.showMusicImg === 'staff') {
|
|
|
+ const img = activeItem.value?.musicImg || activeItem.value?.musicSvg;
|
|
|
+ imgs = img ? img.split(',') : [];
|
|
|
+ }
|
|
|
+ return imgs;
|
|
|
+ });
|
|
|
return () => (
|
|
|
<div class={styles.container}>
|
|
|
<NSpace align="center" wrapItem={false} size={16}>
|
|
@@ -705,10 +733,12 @@ export default defineComponent({
|
|
|
lineType = 'fixedTone';
|
|
|
} else if (data.showMusicImg === 'staff') {
|
|
|
lineType = 'staff';
|
|
|
- }
|
|
|
+ }
|
|
|
const src = `${vaildMusicScoreUrl()}/instrument?v=${+new Date()}&platform=pc&showGuide=true&id=${
|
|
|
activeItem.value.id
|
|
|
- }&Authorization=${user.getToken}&musicRenderType=${lineType}&showGuide=true&part-index=${
|
|
|
+ }&Authorization=${
|
|
|
+ user.getToken
|
|
|
+ }&musicRenderType=${lineType}&showGuide=true&part-index=${
|
|
|
data.musicInstrumentIndex
|
|
|
}`;
|
|
|
if (
|
|
@@ -745,20 +775,20 @@ export default defineComponent({
|
|
|
</NPopselect>
|
|
|
)}
|
|
|
{/* 转谱按钮 */}
|
|
|
- { data.showTransBtn &&
|
|
|
+ {data.showTransBtn && (
|
|
|
<NPopselect
|
|
|
options={_actions}
|
|
|
trigger="hover"
|
|
|
v-model:value={data.showMusicImg}
|
|
|
onUpdate:value={async (val: any) => {
|
|
|
data.showMusicImg = val;
|
|
|
- musicIframeLoad();
|
|
|
+ // musicIframeLoad();
|
|
|
}}
|
|
|
// key={item.id}
|
|
|
class={[styles.popTrans]}>
|
|
|
<img class={[styles.transBtn]} src={icon_trans} />
|
|
|
- </NPopselect>
|
|
|
- }
|
|
|
+ </NPopselect>
|
|
|
+ )}
|
|
|
<div class={styles.favitor} onClick={() => handleFavitor()}>
|
|
|
<Transition name="favitor" mode="out-in">
|
|
|
{activeItem.value.favitor ? (
|
|
@@ -783,16 +813,10 @@ export default defineComponent({
|
|
|
onLoad={musicIframeLoad}></iframe>
|
|
|
) : (
|
|
|
<TransitionGroup name="van-fade">
|
|
|
- {activeItem.value?.musicSvg ||
|
|
|
- activeItem.value?.musicImg ? (
|
|
|
- (
|
|
|
- activeItem.value?.musicSvg ||
|
|
|
- activeItem.value?.musicImg
|
|
|
- )
|
|
|
- ?.split(',')
|
|
|
- .map(item => {
|
|
|
- return <img src={item} key={item} />;
|
|
|
- })
|
|
|
+ {musicImg.value.length > 0 ? (
|
|
|
+ musicImg.value.map((item: string) => {
|
|
|
+ return <img src={item} key={item} />;
|
|
|
+ })
|
|
|
) : (
|
|
|
<TheEmpty></TheEmpty>
|
|
|
)}
|