12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154 |
- import {
- computed,
- defineComponent,
- nextTick,
- onMounted,
- onUnmounted,
- reactive,
- ref,
- watch
- } from 'vue'
- import umiRequest from 'umi-request'
- import { useRoute, useRouter } from 'vue-router'
- import request from '@/helpers/request'
- import ColHeader from '@/components/col-header'
- import {
- Button,
- Cell,
- CellGroup,
- Checkbox,
- Dialog,
- Icon,
- Image,
- Popup,
- RadioGroup,
- Sticky,
- Tag,
- Radio,
- Toast,
- Picker
- } from 'vant'
- import styles from './index.module.less'
- // import Item from '../list/item'
- import { useRect } from '@vant/use'
- import { Vue3Lottie } from 'vue3-lottie'
- import { getRandomKey, musicBuy } from '../music'
- import { getOssUploadUrl, state } from '@/state'
- import { useEventTracking } from '@/helpers/hooks'
- 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 iconDownload from './images/icon_download.png'
- import iconChangeStaff from './images/icon-change-staff.png'
- import AstronautJSON from './animate/bigLoad.json'
- import ColShare from '@/components/col-share'
- import iconCollect from './images/icon_collect.png'
- import iconCollectActive from './images/icon_collect_active.png'
- import iconListen from './images/icon_listen.png'
- import iconTeacher from '@common/images/icon_teacher.png'
- import emtpy from './images/emtpy.png'
- import activeButtonIcon from '@common/images/icon_checkbox.png'
- import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
- import staffDetafult from './images/staff-default.png'
- import staffActive from './images/staff-active.png'
- import firstDefault from './images/first-default.png'
- import firstActive from './images/first-active.png'
- import fixedDefault from './images/fixed-default.png'
- import fixedActive from './images/fixed-active.png'
- import Plyr from 'plyr'
- import 'plyr/dist/plyr.css'
- import Download from './download'
- import { getInstrumentName } from '@/constant/instruments'
- import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload'
- import { svgtopng } from '@/tenant/music/music-detail/formatSvgToImg'
- export const getAssetsHomeFile = (fileName: string) => {
- const path = `../component/images/${fileName}`
- const modules = import.meta.globEager('../component/images/*')
- return modules[path].default
- }
- export default defineComponent({
- name: 'MusicDetail',
- setup() {
- localStorage.setItem('behaviorId', getRandomKey())
- const router = useRouter()
- const route = useRoute()
- const loading = ref(false)
- const aId = Number(route.query.activityId) || 0
- const studentActivityId = ref(aId)
- const isError = ref(false)
- const headers = ref(null)
- const footers = ref(null)
- const heightInfo = ref<any>('0')
- const musicDetail = ref<any>(null)
- const audioFileUrl = ref('')
- 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 colors: any = {
- FREE: {
- color: '#01B84F',
- text: '免费'
- },
- VIP: {
- color: '#CD863E',
- text: '会员'
- },
- CHARGE: {
- color: '#3591CE',
- text: '点播'
- }
- }
- // 更改预览状态
- 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
- }
- loading.value = true
- isError.value = false
- try {
- const res = await request.get(`/music/sheet/detail/${route.query.id}`, {
- prefix:
- state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
- })
- musicDetail.value = res.data
- console.log(musicDetail.value.notation, 'musicDetail')
- // 取原音,如果有多个则默认第一个
- const background = res.data.background
- audioFileUrl.value =
- background && background.length > 0 ? background[0].audioFileUrl : ''
- // const arrImgs = res.data.musicImg ? res.data.musicImg.split(',') : []
- showImg = res.data.musicImg ? res.data.musicImg.split(',') : []
- firstList.value = res.data.firstTone
- ? res.data.firstTone.split(',')
- : []
- fixedList.value = res.data.fixedTone
- ? res.data.fixedTone.split(',')
- : []
- staffList.value = res.data.musicImg ? res.data.musicImg.split(',') : []
- // if (!showImg.value) {
- // setAccompanyUrl()
- // window.addEventListener(
- // 'message',
- // async e => {
- // // 给图片设置背景色
- // const tempCanvas = await imgToCanvas(e.data)
- // const img = convasToImg(tempCanvas)
- // // 开始上传图片
- // uploadFunction(img)
- // },
- // false
- // )
- // }
- nextTick(() => {
- renderStaff()
- })
- } catch (error) {
- isError.value = true
- }
- if (musicDetail.value?.musicSheetType !== 'CONCERT') {
- 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 = 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)
- const initAudio = async () => {
- const controls = [
- 'play-large',
- 'play',
- 'progress',
- 'captions',
- // 'fullscreen',
- 'duration'
- ]
- player.value = new Plyr(audio.value, {
- controls: controls
- })
- const config = await request.get(
- '/api-student/sysConfig/queryByParamNameList',
- {
- params: {
- paramNames: 'music_sheet_free_rate'
- }
- }
- )
- freeRate.value = config.data[0]?.paramValue || 0
- player.value.on('timeupdate', () => {
- // 允许播放时间
- const players = player.value
- const playTime = (players.duration * freeRate.value) / 100 || 0
- // 时间,不能播放
- if (players.currentTime >= playTime && !buyState.value.play) {
- players.stop()
- // players.pause()
- }
- })
- }
- const showLoading = async (e: any) => {
- if (e.data?.api === 'musicStaffRender') {
- loading.value = e.data.loading
- const osmdImg = e.data.osmdImg
- showImg = []
- const img = await svgtopng(osmdImg.img, osmdImg.width, osmdImg.height)
- const fileName =
- route.query.id + state.user.data.userId + +new Date() + '.png'
- const obj = {
- filename: fileName,
- bucketName: 'cloud-coach',
- postData: {
- filename: fileName,
- acl: 'public-read',
- key: fileName
- }
- }
- const { data } = await getUploadSign(obj, true)
- const dataObj = {
- policy: data.policy,
- signature: data.signature,
- key: fileName,
- KSSAccessKeyId: data.kssAccessKeyId,
- acl: 'public-read',
- name: fileName
- }
- const files = base64ToBlob(img)
- const ossUploadUrl = getOssUploadUrl('cloud-coach')
- const imgurl = await onOnlyFileUpload(ossUploadUrl, {
- ...dataObj,
- file: files
- })
- showImg = [imgurl]
- }
- }
- onMounted(async () => {
- await FetchList()
- const { height } = useRect(headers as any)
- const footer = useRect(footers as any)
- heightInfo.value = height + footer.height
- // 初始化音频
- if (audioFileUrl.value) {
- initAudio()
- }
- window.addEventListener('message', showLoading)
- })
- onUnmounted(() => {
- window.removeEventListener('message', showLoading)
- })
- const toggleFavorite = async () => {
- try {
- await request.post('/music/sheet/favorite/' + musicDetail.value?.id, {
- prefix:
- state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
- })
- musicDetail.value.favorite = musicDetail.value?.favorite ? 0 : 1
- musicDetail.value.favoriteCount = musicDetail.value?.favorite
- ? musicDetail.value.favoriteCount + 1
- : musicDetail.value.favoriteCount - 1 < 0
- ? 0
- : musicDetail.value.favoriteCount - 1
- setTimeout(() => {
- Toast(musicDetail.value?.favorite ? '收藏成功' : '取消收藏成功')
- }, 100)
- } catch (error) {
- //
- }
- }
- const onAddCourse = async () => {
- try {
- const res = await request.post('/api-teacher/courseCourseware/submit', {
- data: {
- musicSheetId: musicDetail.value.id,
- clientType: 'TEACHER',
- userId: state.user.data?.userId
- }
- })
- console.log(res)
- setTimeout(() => {
- musicDetail.value.coursewareId = res.data.id || ''
- Toast('添加成功')
- musicDetail.value.coursewareStatus = 1
- }, 100)
- } catch {
- //
- }
- }
- const removeCourse = async () => {
- Dialog.confirm({
- title: '提示',
- message: '您是否确定移除课件',
- confirmButtonColor: '#269a93',
- cancelButtonText: '取消',
- confirmButtonText: '确定'
- }).then(async () => {
- try {
- await request.post(
- '/api-teacher/courseCourseware/remove/' +
- musicDetail.value.coursewareId,
- {
- data: {}
- }
- )
- setTimeout(() => {
- Toast('移除成功')
- musicDetail.value.coursewareStatus = 0
- }, 100)
- } catch {
- //
- }
- })
- }
- const onBuy = async () => {
- const music = musicDetail.value
- orderStatus.orderObject.orderType = 'MUSIC'
- orderStatus.orderObject.orderName = music.musicSheetName
- orderStatus.orderObject.orderDesc = music.musicSheetName
- orderStatus.orderObject.actualPrice = music.musicPrice
- orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
- orderStatus.orderObject.activityId = route.query.activityId || 0
- orderStatus.orderObject.orderNo = ''
- orderStatus.orderObject.orderList = [
- {
- orderType: 'MUSIC',
- goodsName: music.musicSheetName,
- actualPrice: music.musicPrice,
- ...music
- }
- ]
- const res = await request.post('/api-student/userOrder/getPendingOrder', {
- data: {
- goodType: 'MUSIC',
- bizId: music.id
- }
- })
- const result = res.data
- if (result) {
- Dialog.confirm({
- title: '提示',
- message: '您有一个未支付的订单,是否继续支付?',
- confirmButtonColor: '#269a93',
- cancelButtonText: '取消订单',
- confirmButtonText: '继续支付'
- })
- .then(async () => {
- orderStatus.orderObject.orderNo = result.orderNo
- orderStatus.orderObject.actualPrice = result.actualPrice
- orderStatus.orderObject.discountPrice = result.discountPrice
- orderStatus.orderObject.paymentConfig = {
- ...result.paymentConfig,
- paymentVendor: result.paymentVendor,
- paymentVersion: result.paymentVersion
- }
- routerTo()
- })
- .catch(() => {
- Dialog.close()
- // 只用取消订单,不用做其它处理
- cancelPayment(result.orderNo)
- })
- } else {
- routerTo()
- }
- }
- const routerTo = () => {
- const music = musicDetail.value
- router.push({
- path: '/orderDetail',
- query: {
- orderType: 'MUSIC',
- musicId: music.id
- }
- })
- }
- const cancelPayment = async (orderNo: string) => {
- try {
- await request.post('/api-student/userOrder/orderCancel', {
- data: {
- orderNo
- }
- })
- } catch {}
- }
- const paymentType = computed(() => {
- let paymentType = musicDetail.value?.paymentType
- if (typeof paymentType === 'string') {
- paymentType = paymentType.split(',')
- return paymentType
- }
- return []
- })
- const buyState = computed(() => {
- const music = musicDetail.value
- return {
- play: music.play ? true : false, // 是否可以播放
- free: music?.paymentType.includes('FREE'),
- charge: music?.paymentType.includes('CHARGE'),
- vip: music?.paymentType.includes('VIP'),
- buy: music?.orderStatus === 'PAID' // 是否已买
- }
- })
- const shareStatus = ref(false)
- const shareUrl = ref('')
- const shareDiscount = ref(0)
- // console.log(data)
- const onShare = async () => {
- try {
- const res = await request.post('/api-teacher/open/musicShareProfit', {
- data: {
- bizId: musicDetail.value?.id,
- userId: state.user.data?.userId
- }
- })
- let url =
- location.origin +
- `/teacher/#/shareMusic?id=${musicDetail.value?.id}&recomUserId=${state.user.data?.userId}&userType=${state.platformType}`
- // 判断是否有活动
- if (res.data.discount === 1) {
- url += `&activityId=${res.data.activityId}`
- }
- shareDiscount.value = res.data.discount || 0
- console.log(url)
- shareUrl.value = url
- shareStatus.value = true
- return
- } catch {}
- }
- const staffData = reactive({
- open: false,
- iframeSrc: '',
- musicXml: '',
- instrumentName: '',
- iframeRef: null as any,
- partIndex: 0,
- partList: [] as any[]
- })
- /** 渲染五线谱 */
- const renderStaff = () => {
- staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
- staffData.musicXml = musicDetail.value?.xmlFileUrl || ''
- staffData.partList = musicDetail.value?.background || []
- staffData.instrumentName = getInstrumentName(
- staffData.partList[staffData.partIndex]?.track
- )
- }
- const musicIframeLoad = () => {
- const iframeRef: any = document.getElementById('staffIframeRef')
- if (iframeRef && iframeRef.contentWindow.renderXml) {
- iframeRef.contentWindow.renderXml(
- staffData.musicXml,
- staffData.partIndex
- )
- }
- }
- const resetRender = () => {
- const iframeRef: any = document.getElementById('staffIframeRef')
- if (iframeRef && iframeRef.contentWindow.renderXml) {
- iframeRef.contentWindow.resetRender(staffData.partIndex)
- staffData.instrumentName = getInstrumentName(
- staffData.partList[staffData.partIndex]?.track
- )
- }
- }
- const partColumns = computed(() => {
- return staffData.partList.map((item: any, index: number) => {
- const instrumentName = getInstrumentName(item.track)
- return {
- text: item.track + (instrumentName ? `(${instrumentName})` : ''),
- value: index
- }
- })
- })
- return () => {
- return (
- <div class={styles.detail}>
- <Sticky position="top">
- <div ref={headers}>
- <ColHeader
- background="transparent"
- border={false}
- isFixed={false}
- color="#fff"
- title={musicDetail.value?.musicSheetName}
- backIconColor="white"
- v-slots={{
- right: () => (
- <div
- class={styles.shareBtn}
- style={{
- color: '#fff'
- }}
- onClick={onShare}
- >
- <Image src={iconShare} />
- 分享
- </div>
- )
- }}
- />
- </div>
- </Sticky>
- <img class={styles.bgImg} src={musicDetail.value?.titleImg} />
- <div class={styles.bgContent}></div>
- <div
- class={styles.musicContainer}
- style={{
- marginTop: '16px',
- height: `calc(100vh - ${heightInfo.value + 16 + 'px'})`
- }}
- >
- <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
- 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 ? (
- <span
- class={styles.download}
- onClick={() => {
- staff.status = true
- }}
- style={{
- display:
- musicDetail.value?.musicSheetType !== 'CONCERT'
- ? ''
- : 'none'
- }}
- >
- <img src={iconChangeStaff} />
- <span>转谱</span>
- </span>
- ) : null}
- <span
- class={styles.download}
- onClick={() => {
- if (showImg.length > 0) {
- downloadStatus.value = true
- } else {
- Toast('暂无图片')
- }
- }}
- >
- <img src={iconDownload} />
- <span>下载曲谱</span>
- </span>
- <span
- style={{
- display:
- musicDetail.value?.musicSheetType === 'CONCERT'
- ? ''
- : 'none'
- }}
- class={styles.download}
- onClick={() => {
- staffData.open = true
- }}
- >
- <Icon
- style={{
- background: 'rgba(246,246,246,1)',
- borderRadius: '50%',
- padding: '4px'
- }}
- size="20px"
- 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' ? (
- <>
- {loading.value && (
- <>
- <Vue3Lottie
- animationData={AstronautJSON}
- class={styles.finch}
- ></Vue3Lottie>
- <p class={styles.finchLoad}>加载中...</p>
- </>
- )}
- <iframe
- id="staffIframeRef"
- style={{
- opacity: loading.value ? 0 : 1
- }}
- src={staffData.iframeSrc}
- onLoad={musicIframeLoad}
- ></iframe>
- </>
- ) : (
- <>
- {showImg.length > 0 ? (
- <img src={showImg[0]} alt="" class={styles.musicImg} />
- ) : loading.value ? (
- <>
- <Vue3Lottie
- animationData={AstronautJSON}
- class={styles.finch}
- ></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}>
- {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>
- {musicDetail.value?.id && (
- <ColSticky position="bottom" background="white">
- <div ref={footers}>
- {/* 判断是否是免费的,或者已经购买过 */}
- {buyState.value.play ? (
- <Button
- round
- block
- type="primary"
- color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
- onClick={() => {
- player.value && player.value.stop()
- musicBuy(musicDetail.value, () => {}, {
- 'part-index': staffData.partIndex || 0,
- sett: staff.radio
- })
- }}
- >
- 立即练习
- </Button>
- ) : (
- <div class={styles.colSticky}>
- {/* 只有,有点播类型的才显示价格 */}
- {buyState.value.charge && (
- <div class={styles.priceSection}>
- <span>点播价:</span>
- <span class={styles.price}>
- <i>¥</i>
- {moneyFormat(musicDetail.value?.musicPrice)}
- </span>
- </div>
- )}
- <div class={[styles.buyBtn]}>
- {/* 判断是否是需要收费的 */}
- {buyState.value.charge && (
- <Button
- round
- type="primary"
- color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
- class={styles.primary}
- onClick={onBuy}
- >
- 立即点播
- </Button>
- )}
- {/* 判断是否有会员的 */}
- {buyState.value.vip && (
- <Button
- round
- block={!buyState.value.charge ? true : false}
- type="primary"
- color="linear-gradient(180deg, #F7BD8D 0%, #CD8806 100%)"
- class={styles.memeber}
- onClick={() => {
- router.push({
- path: '/memberCenter',
- query: {
- ...route.query
- }
- })
- }}
- >
- {studentActivityId.value > 0 && (
- <div class={[styles.buttonDiscount]}>专属优惠</div>
- )}
- 开通会员
- </Button>
- )}
- </div>
- </div>
- )}
- </div>
- </ColSticky>
- )}
- <Popup
- v-model:show={shareStatus.value}
- style={{ background: 'transparent' }}
- teleport="body"
- >
- <ColShare
- teacherId={state.user.data?.userId}
- shareUrl={shareUrl.value}
- shareType="music"
- >
- <div class={styles.shareMate}>
- {shareDiscount.value === 1 && (
- <div class={styles.tagDiscount}>专属优惠</div>
- )}
- <img
- class={styles.icon}
- crossorigin="anonymous"
- src={musicDetail.value?.titleImg + `?t=${+new Date()}`}
- />
- <div class={styles.info}>
- <h4 class="van-multi-ellipsis--l2">
- {musicDetail.value?.musicSheetName}
- </h4>
- <p>作曲人:{musicDetail.value?.composer}</p>
- </div>
- </div>
- </ColShare>
- </Popup>
- <Popup v-model:show={downloadStatus.value} position="bottom" round>
- {downloadStatus.value && (
- <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>
- <Popup
- teleport="body"
- position="bottom"
- round
- v-model:show={staffData.open}
- >
- <Picker
- columns={partColumns.value}
- onConfirm={value => {
- staffData.open = false
- staffData.partIndex = value.value
- nextTick(() => {
- resetRender()
- })
- }}
- onCancel={() => (staffData.open = false)}
- />
- </Popup>
- </div>
- )
- }
- }
- })
|