1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246 |
- import {
- TransitionGroup,
- computed,
- defineComponent,
- nextTick,
- onMounted,
- reactive,
- ref,
- watch
- } from 'vue';
- import styles from './index.module.less';
- import MSearch from '@/components/m-search';
- // import icon_play from '@/common/images/icon_play.svg';
- import {
- Empty,
- Icon,
- List,
- Loading,
- NoticeBar,
- Popover,
- Popup,
- showLoadingToast,
- showToast
- } from 'vant';
- import icon_back from './image/icon_back.svg';
- import icon_down from '@/common/images/icon_down.svg';
- // import icon_jianpu from '@/common/images/icon_jianpu.svg';
- import icon_jianpuActive from '@/common/images/icon_jianpuActive.svg';
- import iconFire from './image/icon_hot.png';
- import icons from '@/common/images/index.json';
- import {
- listenerMessage,
- postMessage,
- promisefiyPostMessage
- } from '@/helpers/native-message';
- import html2canvas from 'html2canvas';
- import {
- api_musicSheetCategoriesPage,
- api_musicSheetPage,
- api_subjectList
- } from './api';
- import { state } from '@/state';
- import MEmpty from '@/components/m-empty';
- import Coaiguide from '@/custom-plugins/guide-page/coai-guide';
- import TheVip from '@/components/the-vip';
- import request from '@/helpers/request';
- import { useRoute } from 'vue-router';
- import { addWatermark, convasToImg, imgToCanvas } from './imageFunction';
- import ChangeVoice from './change-voice';
- import { storage } from '@/helpers/storage';
- import { ACCESS_TOKEN } from '@/store/mutation-types';
- import {
- sortMusical,
- getInstrumentName,
- vaildMusicScoreUrl,
- trackToCode
- } from '@/helpers/utils';
- import { audioPlayType } from '@/helpers/constant';
- export default defineComponent({
- name: 'co-ai',
- setup() {
- const route = useRoute();
- const categorForms = reactive({
- page: 1,
- rows: 999,
- enable: true,
- // subjectId: state.user.data?.subjectId || '',
- musicTagIds: route.query.musicTagId ? [route.query.musicTagId] : []
- });
- const musicForms = reactive({
- page: 1,
- rows: 20,
- status: 1,
- keyword: '', // 关键词
- audioPlayTypes: [],
- musicSheetCategoriesId: route.query.id as any
- // musicalInstrumentId: ''
- });
- const data = reactive({
- musicSheetCategoriesName: route.query.name as any,
- audioPlayTypeItem: {} as any,
- /** 教材Index */
- typeIndex: 0,
- /** 音乐Index */
- musicIndex: 0,
- /** 显示哪种曲谱 */
- showMusicImg: 'staff' as 'staff' | 'first' | 'fixed',
- popoverShow: false,
- popoverMusicShow: false,
- /** 教材列表 */
- types: [] as any[],
- /** 音乐列表 */
- musics: [] as any[],
- loading: true,
- finshed: false,
- showChangeVoice: false,
- selectMusicInstrumentIndex: 0,
- musicPdfUrl: '',
- iframeSrc: '',
- searchNoticeShow: false,
- searchNotice: {
- left: '',
- top: '',
- width: '',
- height: ''
- },
- showVip: false,
- vipMember: state.user.data?.vipMember,
- subjectStatus: false,
- audioPlayTypeList: [] as any, // 场景
- subjectList: [],
- subjectItem: {} as any, // 当前乐器,
- trackList: [] as any, // 可筛选的分轨信息
- showTransBtn: true // 是否显示转谱按钮
- });
- const downRef = ref();
- const showGuide = ref(false);
- const _actions = computed(() => {
- const details = data.musics[data.musicIndex];
- let { scoreType, isConvertibleScore } = details || {};
- let action: any[] = [
- {
- value: 'first',
- text: '首调'
- },
- {
- value: 'fixed',
- text: '固定调'
- }
- ];
- if (
- !(
- ['JIAN', 'FIRST'].includes(scoreType) && isConvertibleScore === false
- ) &&
- !(isConvertibleScore === undefined || isConvertibleScore === null)
- ) {
- action.unshift({
- value: 'staff',
- text: '五线谱'
- });
- }
- return action.map((item, index) => {
- return {
- ...item,
- color:
- data.showMusicImg === item.value ? 'var(--van-primary-color)' : '',
- className: data.showMusicImg === item.value ? 'fontBlod' : ''
- };
- });
- });
- const _types = computed(() => {
- return data.types.map((item: any) => {
- return {
- ...item,
- color:
- musicForms.musicSheetCategoriesId == item.value
- ? 'var(--van-primary-color)'
- : '',
- className:
- musicForms.musicSheetCategoriesId == item.value ? 'fontBlod' : ''
- };
- });
- });
- // 返回
- const goback = () => {
- postMessage({ api: 'back' });
- };
- /** 去云练习 */
- const handleGoto = () => {
- if (
- !data.vipMember &&
- data.musics[data.musicIndex]?.paymentType === 'VIP'
- ) {
- data.showVip = true;
- return;
- }
- // 默认进页面显示对应的曲谱
- let lineType = 'staff';
- if (data.showMusicImg === 'first') {
- lineType = 'firstTone';
- } else if (data.showMusicImg === 'fixed') {
- lineType = 'fixedTone';
- } else if (data.showMusicImg === 'staff') {
- lineType = 'staff';
- }
- let src = `${vaildMusicScoreUrl()}/instrument/?id=${
- data.musics[data.musicIndex]?.id
- }&musicRenderType=${lineType}&showGuide=true&part-index=${
- data.selectMusicInstrumentIndex
- }`;
- // if (data.musics[data.musicIndex]?.paymentType === 'FREE') {
- // src += `showCourseMember=true`;
- // }
- postMessage({
- api: 'openAccompanyWebView',
- content: {
- url: src,
- orientation: 0,
- isHideTitle: true,
- statusBarTextColor: false,
- isOpenLight: true,
- c_orientation: 0 // 0 横屏 1 竖屏
- }
- });
- };
- /** 保存图片 */
- const handleSave = async () => {
- if(data.musicPdfUrl) {
- const songName = data.musics[data.musicIndex]?.musicSheetName;
- promisefiyPostMessage({
- api: "downloadFile",
- content: {
- downloadUrl: data.musicPdfUrl,
- fileName: songName,
- },
- });
- return
- }
- showLoadingToast({ message: '正在保存', duration: 0 });
- try {
- html2canvas(downRef.value, {
- backgroundColor: '#fff',
- allowTaint: true,
- useCORS: true
- })
- .then(async canvas => {
- // 添加水印
- const waterCanvasImg = await addWatermark(canvas);
- // canvas转图片
- const dataURL = await convasToImg(waterCanvasImg);
- console.log(dataURL, 'dataURL');
- setTimeout(() => {
- showToast('已保存到相册');
- }, 500);
- await promisefiyPostMessage({
- api: 'savePicture',
- content: {
- base64: dataURL
- }
- });
- })
- .catch(() => {
- setTimeout(() => {
- showToast('保存失败');
- }, 500);
- });
- } catch (error) {
- setTimeout(() => {
- showToast('保存失败');
- }, 500);
- }
- };
- /** 获取音乐教材列表 */
- const getMusicSheetCategories = async () => {
- try {
- const res = await api_musicSheetCategoriesPage({
- ...categorForms
- });
- if (res.code === 200 && Array.isArray(res?.data?.rows)) {
- const temp: any = [];
- res.data.rows.forEach((item: any) => {
- temp.push({
- value: item.id,
- text: item.name
- });
- });
- data.types = temp;
- }
- } catch (error) {
- console.log('🚀 ~ error:', error);
- }
- };
- /** 获取曲谱列表 */
- const getMusicList = async () => {
- data.loading = true;
- try {
- const res = await api_musicSheetPage({
- ...musicForms,
- audioPlayTypes: data.audioPlayTypeItem.value
- ? data.audioPlayTypeItem.value === 'PLAY_SING'
- ? ['PLAY', 'SING']
- : [data.audioPlayTypeItem.value]
- : []
- // musicalInstrumentId: data.subjectItem.value || null
- });
- if (res.code === 200) {
- if (Array.isArray(res?.data?.rows)) {
- data.musics = [...data.musics, ...res.data.rows];
- data.finshed = !res.data.next;
- // 是否显示总谱
- const selectMusic = data.musics[data.musicIndex];
- if (
- selectMusic &&
- selectMusic.isScoreRender &&
- data.musicIndex === 0
- ) {
- data.selectMusicInstrumentIndex = 999;
- }
- } else {
- data.finshed = true;
- }
- } else showGuide.value = true;
- } catch (error) {
- console.log('🚀 ~ error:', error);
- }
- data.loading = false;
- };
- const handleReset = async () => {
- musicForms.page = 1;
- data.musics = [];
- await getMusicList();
- initLoadingObv();
- };
- const spinRef = ref();
- const handleResh = () => {
- if (data.loading || data.finshed) return;
- musicForms.page = musicForms.page + 1;
- getMusicList();
- };
- const musicIframeLoad = () => {
- const token = storage.get(ACCESS_TOKEN);
- const details = data.musics[data.musicIndex];
- if (!details?.id) {
- data.iframeSrc = '';
- return;
- }
- // 如果在配置里面匹配不到,则默认显示五线谱
- const musicRenderType =
- data.showMusicImg === 'first'
- ? 'firstTone'
- : data.showMusicImg === 'fixed'
- ? 'fixedTone'
- : data.showMusicImg === 'staff'
- ? 'staff'
- : 'staff';
-
- // pdf
- const musicSheetType = details?.musicSheetType;
- let musicPdfUrl = ''
-
- if(musicSheetType === "SINGLE" || data.selectMusicInstrumentIndex === 999) {
- if( data.showMusicImg === "first") {
- musicPdfUrl = details.firstPdfUrl
- } else if(data.showMusicImg === 'fixed') {
- musicPdfUrl = details.jianPdfUrl
- } else {
- musicPdfUrl = details.musicPdfUrl
- }
- } else {
- const trackList = data.trackList || []
- const selectTrack = trackList.find((item: any) => item.value === data.selectMusicInstrumentIndex)
- const background = details.background || []
- const selectItem = background.find((item: any) => item.track === selectTrack?.track && item.audioPlayType === "PLAY")
- // console.log({
- // selectItem,
- // selectTrack,
- // background
- // }, '11111')
- if(selectItem) {
- if( data.showMusicImg === "first") {
- musicPdfUrl = selectItem.firstPdfUrl
- } else if(data.showMusicImg === 'fixed') {
- musicPdfUrl = selectItem.jianPdfUrl
- } else {
- musicPdfUrl = selectItem.musicPdfUrl
- }
- }
-
- }
- data.musicPdfUrl = musicPdfUrl
- if(musicPdfUrl) {
- console.log(musicPdfUrl, 'musicPdfUrl')
- // data.iframeSrc = `/pdf/web/viewer.html?file=${encodeURIComponent(data.musicPdfUrl)}&t=${Date.now()}`;
- data.iframeSrc = `${location.origin}${location.pathname}pdf/web/viewer.html?file=${encodeURIComponent(data.musicPdfUrl)}&t=${Date.now()}`;
- } else {
- // const origin = /(localhost|192)/.test(location.host)
- // ? 'https://test.lexiaoya.cn'
- // : location.origin;
- // data.iframeSrc = `${origin}/instrument/?id=${details.id}&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${data.selectMusicInstrumentIndex}&musicRenderType=${musicRenderType}`;
- data.iframeSrc = `${vaildMusicScoreUrl()}/instrument/?id=${
- details?.id
- }&modelType=practise&modeType=json&Authorization=${token}&isPreView=true&part-index=${
- data.selectMusicInstrumentIndex
- }&musicRenderType=${musicRenderType}&zoom=0.6`;
- }
-
- console.log('地址', data.iframeSrc);
- };
- const setSearchBox = () => {
- const el = document.querySelector('.searchNotice .van-field__control');
- if (el) {
- const rect = el.getBoundingClientRect();
- data.searchNotice.left = rect.x + 'px';
- data.searchNotice.top = rect.y + 'px';
- data.searchNotice.width = rect.width + 'px';
- data.searchNotice.height = rect.height + 'px';
- }
- };
- // 根据musicSheetType返回的值,判断是否显示切换声轨按钮
- const isEnsemble = computed(() => {
- if (data.musics.length) {
- const musicSheetType = data.musics[data.musicIndex]?.musicSheetType;
- if (musicSheetType === 'SINGLE') {
- return false;
- } else {
- return true;
- }
- } else {
- return false;
- }
- });
- // 判断 值当前有没有图片
- const isMusicImg = computed(() => {
- const musicsData = data.musics[data.musicIndex];
- if (data.showMusicImg === 'first' && musicsData?.musicFirstImg) {
- return true;
- }
- if (data.showMusicImg === 'fixed' && musicsData?.musicJianImg) {
- return true;
- }
- if (musicsData?.musicImg) {
- return true;
- }
- return false;
- });
- // 判断是否可转谱 - 为空也可以转谱
- const checkConverTible = (isConvertibleScore: any, scoreType: string) => {
- if (
- isConvertibleScore ||
- isConvertibleScore === '' ||
- isConvertibleScore === undefined ||
- isConvertibleScore === null ||
- (['JIAN', 'FIRST'].includes(scoreType) && !isConvertibleScore)
- ) {
- return true;
- } else {
- return false;
- }
- };
- const getSubjecList = async () => {
- try {
- let subjectIds = state.user.data?.subjectId || '';
- subjectIds = subjectIds.split(',');
- const subjectId = subjectIds[0] || '';
- const res = await api_subjectList({
- enableFlag: true,
- delFlag: 0,
- page: 1,
- subjectId: subjectId || '',
- rows: 999
- });
- if (subjectId) {
- const result = res.data || [];
- let tempSubjects: any = [];
- result.forEach((item: any) => {
- const instruments = item.instruments || [];
- if (Number(subjectId) === item.id && instruments.length > 0) {
- instruments.forEach((child: any, index: number) => {
- tempSubjects.push({
- text: child.name,
- value: child.id,
- className: index === 0 ? 'selected' : ''
- });
- });
- }
- });
- data.subjectList = tempSubjects;
- if (tempSubjects.length > 0) {
- data.subjectItem = tempSubjects[0];
- }
- }
- } catch {
- //
- }
- };
- // 解析xml,获取分轨信息
- const analyzeXml = async () => {
- const details = data.musics[data.musicIndex];
- console.log(details?.musicSheetType, 'details?.musicSheetType');
- if (details?.musicSheetType === 'CONCERT') {
- if (details.xmlFileUrl) {
- const res = await fetch(details.xmlFileUrl).then(response =>
- response.text()
- );
- filterTracks(res);
- }
- } else {
- // showMusicImg: 'first' as 'staff' | 'first' | 'fixed',
- const { scoreType, isConvertibleScore } = details || {};
- let musicImgType: 'staff' | 'first' | 'fixed' = 'first';
- musicImgType =
- scoreType === 'STAVE'
- ? 'staff'
- : scoreType === 'JIAN'
- ? 'fixed'
- : scoreType === 'FIRST'
- ? 'first'
- : 'first';
- data.showMusicImg = musicImgType;
- data.showTransBtn = checkConverTible(isConvertibleScore, scoreType);
- }
- };
- /** 获取分轨名称 */
- const getInstrumentNameCode = (instruments: any, name = '') => {
- name = name.toLocaleLowerCase().replace(/ /g, '').replace(/\d*/gi, '');
- if (!name) return '';
- for (let key of instruments) {
- const _key = key.toLocaleLowerCase().replace(/ /g, '');
- // if (_key.includes(name)) {
- // return key
- // }
- if (_key === name) {
- return _key;
- }
- }
- // for (let key of instruments) {
- // const _key = key.toLocaleLowerCase().replace(/ /g, '')
- // if (name.includes(_key)) {
- // return key
- // }
- // }
- return '';
- };
- // 通过乐器编码返回乐器编号
- const instrumentCodeToInstrumentId = (
- subjectList: Array<any>,
- code: string
- ) => {
- const codeIdMap = new Map<string, []>() as any;
- const codeMapKeys: string[] = [];
- subjectList.forEach((data: any) => {
- if (data.enableFlag) {
- const codes = data.code?.split(/[,,]/);
- codes.forEach((code: string) => {
- let codeTemp = code?.replace(/ /g, '').toLowerCase();
- codeMapKeys.push(codeTemp);
- if (codeIdMap.has(codeTemp)) {
- codeIdMap.get(codeTemp).push(data.id + '');
- } else {
- const arr = [] as any;
- arr.push(data.id + '');
- codeIdMap.set(codeTemp, arr);
- }
- });
- }
- });
- if (!code) {
- return '';
- }
- code = code && code?.replace(/ /g, '').toLowerCase();
- const tempCode = getInstrumentNameCode(codeMapKeys, code);
- if (codeIdMap.has(tempCode)) {
- const result = codeIdMap.get(tempCode);
- console.log('result:', result);
- return result[0] || '';
- }
- return '';
- };
- // 初始化编号
- const initUserDefaultInstrument = () => {
- const userInstrumentId = state.user.data.instrumentId;
- const item = data.trackList.find(
- (track: any) => track.instrumentId === userInstrumentId + ''
- );
- data.selectMusicInstrumentIndex = item ? item.value : 0;
- };
- // 过滤出能切换的分轨
- const filterTracks = (xml: any) => {
- const xmlParse = new DOMParser().parseFromString(xml, 'text/xml');
- const partList: any =
- xmlParse
- .getElementsByTagName('part-list')?.[0]
- ?.getElementsByTagName('score-part') || [];
- const partListNames = Array.from(partList).map(
- (item: any) =>
- item.getElementsByTagName('part-name')?.[0]?.textContent?.trim() ||
- item.getAttribute('id') ||
- ''
- );
- const parts: any = xmlParse.getElementsByTagName('part');
- /** 第一分谱如果是约定的配置分谱则跳过 */
- if (partListNames[0]?.toLocaleUpperCase?.() === 'COMMON') {
- partListNames.shift();
- }
- // 根据后台已选择的分轨筛选出能切换的声轨
- const multiTracksSelection =
- data.musics[data.musicIndex]?.multiTracksSelection;
- const canSelectTracks = multiTracksSelection
- ? multiTracksSelection?.split(',')
- : [];
- const musicalInstruments =
- data.musics[data.musicIndex]?.musicalInstruments || [];
- // console.log(canSelectTracks, partListNames);
- const arr = partListNames
- .map((item: any, index: number) => {
- // 该声轨能否被选
- const canselect =
- canSelectTracks.length == 0 || canSelectTracks.includes(item)
- ? true
- : false;
- const instrumentName = getInstrumentName(item);
- const instrumentId = instrumentCodeToInstrumentId(
- musicalInstruments,
- item
- );
- const sortId = sortMusical(instrumentName, index);
- return {
- text: item + (instrumentName ? `(${instrumentName})` : ''),
- value: index,
- instrumentId,
- sortId,
- canselect,
- track: item
- };
- })
- .filter((item: any) => item.canselect);
- //.sort((a: any, b: any) => a.sortId - b.sortId);
- data.trackList = arr;
-
- // 是否显示总谱
- const selectMusic = data.musics[data.musicIndex];
- if (selectMusic) {
- const musicalInstruments = selectMusic.musicalInstruments || [];
- if (selectMusic.isScoreRender) {
- data.trackList.unshift({
- text: '总谱',
- value: 999,
- sortId: 0,
- canselect: true,
- track: 999
- });
- if (selectMusic.defaultScoreRender) {
- data.selectMusicInstrumentIndex = 999;
- } else {
- initUserDefaultInstrument();
- }
- } else {
- initUserDefaultInstrument();
- }
- }
- // let track = arr.find(
- // (item: any) => item.value === data.selectMusicInstrumentIndex
- // )?.track;
- // track = trackToCode(track);
- // let musicRenderType: 'staff' | 'first' | 'fixed' = 'staff';
- // let canTrans = true;
- // data.musics[data.musicIndex]?.musicalInstruments.forEach((item: any) => {
- // if (item.code.toLocaleLowerCase() === track.toLocaleLowerCase()) {
- // musicRenderType =
- // item.defaultScore === 'STAVE'
- // ? 'staff'
- // : item.defaultScore === 'JIAN'
- // ? 'fixed'
- // : item.defaultScore === 'FIRST'
- // ? 'first'
- // : 'staff';
- // canTrans = item.transferFlag;
- // }
- // });
- // data.showTransBtn = canTrans;
- // data.showMusicImg = musicRenderType;
- const details = data.musics[data.musicIndex];
- const { scoreType, isConvertibleScore } = details || {};
- let musicImgType: 'staff' | 'first' | 'fixed' = 'first';
- musicImgType =
- scoreType === 'STAVE'
- ? 'staff'
- : scoreType === 'JIAN'
- ? 'fixed'
- : scoreType === 'FIRST'
- ? 'first'
- : 'first';
- data.showMusicImg = musicImgType;
- data.showTransBtn = checkConverTible(isConvertibleScore, scoreType);
- };
- watch(
- () => data.musicIndex,
- async () => {
- data.selectMusicInstrumentIndex = 0;
- analyzeXml();
- }
- );
- const formatUsedNum = (num: number) => {
- if (num < 10000) {
- return num;
- } else {
- const n = num / 10000;
- return Number(n.toFixed(1)) + '万';
- }
- };
- const initLoadingObv = () => {
- const obv = new IntersectionObserver(entries => {
- if (entries[0].intersectionRatio > 0) {
- handleResh();
- }
- });
- nextTick(() => {
- spinRef.value && obv.observe(spinRef.value);
- });
- };
- onMounted(async () => {
- // 场景
- const tempAudio = Object.keys(audioPlayType).map(key => {
- return {
- value: key,
- text: audioPlayType[key]
- };
- });
- data.audioPlayTypeList = [
- { text: '全部场景', value: '', className: 'selected' },
- ...tempAudio
- ];
- data.audioPlayTypeItem = data.audioPlayTypeList[0];
- // 安卓的状态栏
- postMessage({
- api: 'setStatusBarVisibility',
- content: {
- isVisibility: 0
- }
- });
- await getSubjecList();
- await getMusicSheetCategories();
- await getMusicList();
- initLoadingObv();
- console.log(state.user.data);
- const getUserInfo = async () => {
- const res = await request.get('/edu-app/user/getUserInfo', {
- initRequest: true, // 初始化接口
- requestType: 'form',
- hideLoading: true
- });
- if (res?.code === 200) {
- data.vipMember = res.data.vipMember;
- }
- };
- await analyzeXml();
- musicIframeLoad();
- listenerMessage('webViewOnResume', () => {
- console.log('页面显示', data.iframeSrc);
- getUserInfo();
- // 为了处理返回显示刷新的问题
- // data.typeIndex = 0;
- // data.musicIndex = 0;
- // handleReset();
- });
- setSearchBox();
- });
- return () => (
- <div class={styles.container}>
- <div class={styles.back} onClick={goback}>
- <img src={icon_back} />
- </div>
- <div class={styles.musicCFixed}>
- <Popover
- v-model:show={data.popoverMusicShow}
- class={styles.popoverMusic}
- actions={_types.value}
- placement="bottom"
- showArrow={false}
- onSelect={(item: any) => {
- // data.showMusicImg = item.value;
- if (item.value == musicForms.musicSheetCategoriesId) {
- return;
- }
- data.musics = [];
- musicForms.musicSheetCategoriesId = item.value;
- data.musicSheetCategoriesName = item.text;
- data.popoverMusicShow = false;
- // getMusicList();
- handleReset();
- }}>
- {{
- reference: () => (
- <span class={styles.musicName}>
- {data.musicSheetCategoriesName}
- <Icon name="arrow-down"></Icon>
- </span>
- )
- }}
- </Popover>
- </div>
- <div class={styles.content}>
- <div class={[styles.leftContent]}>
- <div class={styles.leftBg2}></div>
- <div class={styles.center}>
- <div class={styles.centerSearch}>
- <div id="coai-0">
- <MSearch
- class={[
- 'searchNotice'
- // data.searchNoticeShow ? styles.searchNoticeShow : ''
- ]}
- shape="round"
- // background="transparent"
- clearable={false}
- placeholder="请输入关键字"
- modelValue={musicForms.keyword}
- // onFocus={() => (data.searchNoticeShow = false)}
- onBlur={val => {
- musicForms.keyword = val?.trim() || '';
- }}
- onSearch={async val => {
- if (!data.loading) {
- musicForms.keyword = val;
- data.musicIndex = 0;
- await handleReset();
- await analyzeXml();
- musicIframeLoad();
- }
- }}>
- {{
- left: () => (
- <div class={styles.subjects}>
- <Popover
- v-model:show={data.subjectStatus}
- offset={[0, 8]}
- actions={data.audioPlayTypeList}
- placement="bottom-start"
- showArrow={false}
- class={styles.subjectListContainer}
- onSelect={(item: any) => {
- data.audioPlayTypeList.forEach((c: any) => {
- c.className = '';
- if (c.value === item.value) {
- c.className = 'selected';
- }
- });
- data.audioPlayTypeItem = {
- ...item,
- className: 'selected'
- };
- handleReset();
- }}>
- {{
- reference: () => (
- <div
- class={[
- styles.subjectName,
- data.subjectStatus && styles.active
- ]}>
- <span>{data.audioPlayTypeItem.text}</span>
- <i></i>
- </div>
- )
- }}
- </Popover>
- </div>
- )
- }}
- </MSearch>
- </div>
- </div>
- <div class={styles.musicContent}>
- {data.musics.map((item: any, index: number) => {
- return (
- <div
- class={[
- styles.musicItem,
- data.musicIndex === index
- ? styles.musicActive
- : styles.disableNotic
- ]}
- onClick={async () => {
- data.musicIndex = index;
- await analyzeXml();
- // 是否显示总谱
- const selectMusic = data.musics[data.musicIndex];
- if (selectMusic && selectMusic.isScoreRender) {
- if (selectMusic.defaultScoreRender) {
- data.selectMusicInstrumentIndex = 999;
- } else {
- initUserDefaultInstrument();
- }
- } else {
- initUserDefaultInstrument();
- }
- musicIframeLoad();
- }}>
- <div class={styles.musicAvtor}>
- <i
- class={[
- styles.iconType,
- styles[item.paymentType]
- ]}></i>
- <img
- class={styles.titleImg}
- src={item.titleImg}
- onLoad={(e: Event) => {
- const el = e.target as HTMLImageElement;
- el.setAttribute('loaded', 'true');
- }}
- />
- </div>
- <div class={styles.musicInfo}>
- <div class={styles.musicName}>
- <NoticeBar
- text={item.musicSheetName}
- class={styles.noticeBar}
- background="none"
- />
- </div>
- <div class={styles.musicDes}>
- {/* <div class={styles.musicFavitor}>{item.usedNum}</div> */}
- <span class={styles.hotNum}>
- <img src={iconFire} class={styles.iconFire} />
- {formatUsedNum(item.usedNum)}
- </span>
- {item.audioPlayTypes?.includes('SING') && (
- <span
- class={[styles.iconPlayType, styles.iconSing]}>
- 演唱
- </span>
- )}
- {item.audioPlayTypes?.includes('PLAY') && (
- <span
- class={[styles.iconPlayType, styles.iconPlay]}>
- 演奏
- </span>
- )}
- <div class={[styles.musicAuthor, 'van-ellipsis']}>
- {item.composer || '佚名'}
- </div>
- </div>
- </div>
- {/* <img class={[styles.musicIcon]} src={icon_play} /> */}
- </div>
- );
- })}
- {!data.finshed && (
- <div ref={spinRef} class={styles.loadingWrap}>
- <Loading color="#259CFE" />
- </div>
- )}
- {!data.loading && data.musics.length === 0 && (
- <div class={styles.empty}>
- <MEmpty description="暂无曲谱" />
- </div>
- )}
- </div>
- </div>
- </div>
- <div class={[styles.opacityBg, styles.right]}>
- <div class={styles.rightBox}>
- {isEnsemble.value && (
- <div
- class={styles.iconTransfer}
- onClick={() => (data.showChangeVoice = true)}>
- 切换声部
- </div>
- )}
- <div class={styles.ensembleSection}>
- {!data.musicPdfUrl && <div class={styles['right-musicName']}>
- {data.musics[data.musicIndex]?.musicSheetName}
- </div>}
- {data.iframeSrc && (isEnsemble.value || !isMusicImg.value) ? (
- <div class={styles.iframeSection}>
- <>
- {data.musics[data.musicIndex]?.id ? data.musicPdfUrl ? (
- <iframe
- id="staffIframeRef"
- style={{
- width: '100%'
- // opacity: loading.value ? 0 : 1
- }}
- src={data.iframeSrc}
- ></iframe>
- ) : (
- <iframe
- id="staffIframeRef"
- style={{
- width: '100%'
- // opacity: loading.value ? 0 : 1
- }}
- src={data.iframeSrc}
- ></iframe>
- ) : ''}
-
- </>
- </div>
- ) : (
- <div class={styles.imgSection}>
- {data.showMusicImg === 'first' ? (
- <>
- {data.musics[data.musicIndex]?.musicFirstImg
- ?.split(',')
- .map((item: any, index: number) => {
- return (
- <img
- class={styles.staff}
- src={item + '?v=' + Date.now()}
- key={item}
- crossorigin="anonymous"
- />
- );
- })}
- </>
- ) : data.showMusicImg === 'fixed' ? (
- <>
- <TransitionGroup name="van-fade">
- {data.musics[data.musicIndex]?.musicJianImg
- ?.split(',')
- .map((item: any, index: number) => {
- return (
- <img
- class={styles.staff}
- src={item + '?v=' + Date.now()}
- key={item}
- crossorigin="anonymous"
- />
- );
- })}
- </TransitionGroup>
- </>
- ) : (
- <>
- {data.musics[data.musicIndex]?.musicImg
- ?.split(',')
- .map((item: any, index: number) => {
- return (
- <img
- class={styles.staff}
- src={item + '?v=' + Date.now()}
- key={item}
- crossorigin="anonymous"
- />
- );
- })}
- </>
- )}
- </div>
- )}
- </div>
- <div
- class={styles.ensembleSection}
- ref={downRef}
- style={{
- display: 'block',
- height: 'auto',
- }}>
- <div class={styles['right-musicName']}>
- {data.musics[data.musicIndex]?.musicSheetName}
- </div>
- <div>
- {data.showMusicImg === 'first' ? (
- <>
- {data.musics[data.musicIndex]?.musicFirstImg
- ?.split(',')
- .map((item: any, index: number) => {
- return (
- <img
- class={styles.staff}
- src={item + '?v=' + Date.now()}
- key={item}
- crossorigin="anonymous"
- />
- );
- })}
- </>
- ) : data.showMusicImg === 'fixed' ? (
- <>
- <TransitionGroup name="van-fade">
- {data.musics[data.musicIndex]?.musicJianImg
- ?.split(',')
- .map((item: any, index: number) => {
- return (
- <img
- class={styles.staff}
- src={item + '?v=' + Date.now()}
- key={item}
- crossorigin="anonymous"
- />
- );
- })}
- </TransitionGroup>
- </>
- ) : (
- <>
- {data.musics[data.musicIndex]?.musicImg
- ?.split(',')
- .map((item: any, index: number) => {
- return (
- <img
- class={styles.staff}
- src={item + '?v=' + Date.now()}
- key={item}
- crossorigin="anonymous"
- />
- );
- })}
- </>
- )}
- </div>
- </div>
- </div>
- <div class={styles.rightBtns}>
- {data.showTransBtn && (
- <Popover
- v-model:show={data.popoverShow}
- class={styles.popover}
- actions={_actions.value}
- placement="top-start"
- onSelect={(item: any) => {
- data.showMusicImg = item.value;
- data.popoverShow = false;
- // data.iframeSrc = '';
- musicIframeLoad();
- }}
- >
- {{
- reference: () => <img id="coai-1" src={icon_jianpuActive} />
- }}
- </Popover>
- )}
- {!isEnsemble.value && isMusicImg.value && (
- <img id="coai-2" src={icon_down} onClick={handleSave} />
- )}
- {data.musics[data.musicIndex]?.id && (
- <div class={styles.rightBtnsRight} id="coai-3">
- <img src={icons.icon_start} onClick={() => handleGoto()} />
- </div>
- )}
- </div>
- </div>
- </div>
- {data.searchNotice.width && data.searchNoticeShow && (
- <div class={styles.searchNotice} style={{ ...data.searchNotice }}>
- <NoticeBar
- text={musicForms.keyword}
- color="#333"
- background="none"
- />
- </div>
- )}
- {showGuide.value && <Coaiguide></Coaiguide>}
- <Popup
- class="popup-custom van-scale"
- transition="van-scale"
- closeOnClickOverlay={false}
- v-model:show={data.showVip}>
- <TheVip
- onClose={val => {
- if (val) {
- postMessage({
- api: 'openWebView',
- content: {
- url: `${location.origin}${location.pathname}#/member-center`,
- orientation: 1
- }
- });
- }
- data.showVip = false;
- }}
- />
- </Popup>
- <Popup
- class="popup-custom van-scale"
- transition="van-scale"
- closeOnClickOverlay={false}
- v-model:show={data.showVip}>
- <TheVip
- onClose={val => {
- if (val) {
- postMessage({
- api: 'openWebView',
- content: {
- url: `${location.origin}${location.pathname}#/member-center`,
- orientation: 1
- }
- });
- }
- data.showVip = false;
- }}
- />
- </Popup>
- {data.showChangeVoice && (
- <Popup
- class="popup-custom van-scale"
- transition="van-scale"
- closeOnClickOverlay={false}
- v-model:show={data.showChangeVoice}>
- <ChangeVoice
- musicalInstruments={data.trackList || []}
- musicalInstrumentIndex={data.selectMusicInstrumentIndex}
- onClose={() => (data.showChangeVoice = false)}
- onConfirm={async (index: number) => {
- data.selectMusicInstrumentIndex = index;
- musicIframeLoad();
- data.showChangeVoice = false;
- }}
- />
- </Popup>
- )}
- </div>
- );
- }
- });
|