|
|
@@ -6,7 +6,13 @@ import banner from './images/banner.png'
|
|
|
import colVideo from '@/components/col-video/index'
|
|
|
import iconClose from '@/views/login/images/icon_close.png'
|
|
|
import start from '@/components/albumItem/images/start.png'
|
|
|
+import teacher from '@/views/videoDetailList/images/teacher.png'
|
|
|
+import teacherHeader from '@/common/images/icon_teacher.png'
|
|
|
+import musiceIcon from '@/views/videoDetailList/images/musiceIcon.png'
|
|
|
+import tagItem from '@/components/tagItem'
|
|
|
import code from './images/code.png'
|
|
|
+import musicItem from './modals/musicItem'
|
|
|
+import request from '@/helpers/request'
|
|
|
export default defineComponent({
|
|
|
name: 'muiscDetial',
|
|
|
props: {
|
|
|
@@ -15,18 +21,42 @@ export default defineComponent({
|
|
|
default: ''
|
|
|
}
|
|
|
},
|
|
|
- components:{
|
|
|
- colVideo
|
|
|
+ components: {
|
|
|
+ colVideo,
|
|
|
+ tagItem,
|
|
|
+ musicItem
|
|
|
},
|
|
|
setup(props, conent) {
|
|
|
const state = reactive({
|
|
|
title: props.title,
|
|
|
subjectId: '',
|
|
|
- subjectList:[]
|
|
|
+ subjectList: [],
|
|
|
+ tagList: [],
|
|
|
+ teacherDetail: {} as any,
|
|
|
+ musicList:[]
|
|
|
+ })
|
|
|
+ const getMusicList = async () => {
|
|
|
+ try {
|
|
|
+ const res = await request.post('/api-website/open/music/sheet/list', {
|
|
|
+ data: {
|
|
|
+ albumStatus: 'PASS',
|
|
|
+ page: 1,
|
|
|
+ rows: 5,
|
|
|
+ state: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ state.musicList = res.data.rows
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ onMounted(()=>{
|
|
|
+ getMusicList()
|
|
|
})
|
|
|
return () => (
|
|
|
<>
|
|
|
- <div class={classes.wall}></div>
|
|
|
+ <div class={classes.wall}></div>
|
|
|
<div class={[classes.width1200, classes.musicWrap]}>
|
|
|
<div class={classes.left}>
|
|
|
<div class={classes.title}>
|
|
|
@@ -53,26 +83,100 @@ export default defineComponent({
|
|
|
<img class={classes.close} src={iconClose} alt="" />
|
|
|
<img class={classes.code} src={code} alt="" />
|
|
|
<h2 class={classes.title}>酷乐秀</h2>
|
|
|
- <p class={classes.conent}>扫码下载酷乐秀APP</p>
|
|
|
- <p class={classes.subConent}>使用小酷Ai即可智能练习本首曲目哦！</p>
|
|
|
- <img src={banner} alt="" />
|
|
|
+ <p class={classes.conent}>扫码下载酷乐秀APP</p>
|
|
|
+ <p class={classes.subConent}>
|
|
|
+ 使用小酷Ai即可智能练习本首曲目哦！
|
|
|
+ </p>
|
|
|
+ <img src={banner} alt="" />
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
- <colVideo src="" styleValue={{
|
|
|
- height:'68px',
|
|
|
- bacground:'#333'
|
|
|
- }} type={'audto'} settings={['captions', 'quality', 'speed', 'loop']} class={classes.audios}></colVideo>
|
|
|
+ <colVideo
|
|
|
+ src=""
|
|
|
+ styleValue={{
|
|
|
+ height: '68px',
|
|
|
+ bacground: '#333'
|
|
|
+ }}
|
|
|
+ type={'audto'}
|
|
|
+ settings={['captions', 'quality', 'speed', 'loop']}
|
|
|
+ class={classes.audios}
|
|
|
+ ></colVideo>
|
|
|
</div>
|
|
|
<div class={classes.right}>
|
|
|
- <div class={classes.musicInfo}>
|
|
|
- <h2>曲目：红莲华</h2>
|
|
|
- <div class={classes.collect}>
|
|
|
- <img src={start} class={classes.start} alt="" />
|
|
|
- <p>321人收藏</p>
|
|
|
+ <div class={classes.musicInfo}>
|
|
|
+ <h2>曲目：红莲华</h2>
|
|
|
+ <div class={classes.collect}>
|
|
|
+ <img src={start} class={classes.start} alt="" />
|
|
|
+ <p>321人收藏</p>
|
|
|
+ </div>
|
|
|
+ <div class={classes.tagList}>
|
|
|
+ {state.tagList.map((item: any) => {
|
|
|
+ return <tagItem title={item.key}>{item.key}</tagItem>
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ <p class={classes.subTitle}>
|
|
|
+ 作曲人：<span>草野华余子</span>
|
|
|
+ </p>
|
|
|
+ <p class={classes.subTitle}>
|
|
|
+ 声部：<span>长笛、萨克斯、单簧管</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class={classes.btooom}>
|
|
|
+ <div class={classes.teacherInfo}>
|
|
|
+ <div class={classes.teacherHeadWrap}>
|
|
|
+ <div class={classes.teacherHeadLeft}>
|
|
|
+ <img
|
|
|
+ src={
|
|
|
+ state.teacherDetail.avatar
|
|
|
+ ? state.teacherDetail.avatar
|
|
|
+ : teacherHeader
|
|
|
+ }
|
|
|
+ alt=""
|
|
|
+ class={classes.teacherHeader}
|
|
|
+ />
|
|
|
+ <div class={classes.teacherHeadInfo}>
|
|
|
+ <div class={classes.teacherHeadName}>
|
|
|
+ <span>{state.teacherDetail.username}</span>
|
|
|
+ {state.teacherDetail.teacherType &&
|
|
|
+ state.teacherDetail.teacherType.indexOf('ENTRY') ==
|
|
|
+ -1 ? (
|
|
|
+ ''
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ src={teacher}
|
|
|
+ class={classes.teacherIcon}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ {state.teacherDetail.teacherType &&
|
|
|
+ state.teacherDetail.teacherType.indexOf('MUSICIAN') ==
|
|
|
+ -1 ? (
|
|
|
+ ''
|
|
|
+ ) : (
|
|
|
+ <img
|
|
|
+ src={musiceIcon}
|
|
|
+ class={classes.teacherIcon}
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <p class={classes.fens}>
|
|
|
+ 粉丝 <span>{state.teacherDetail.fansNum}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={classes.teacherHeadRight}>关注</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={classes.otherMusic}>
|
|
|
+ <h2>Ta的曲谱</h2>
|
|
|
+ <div class={classes.otherMusicList}>
|
|
|
+ {state.musicList.map(item=>{
|
|
|
+ return <musicItem item={item}></musicItem>
|
|
|
+ })}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class={classes.tagList}></div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</>
|
mo