| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <div class="flex flex-col"> |
| 3 | <div class="flex-auto flex overflow-hidden"> | |
| 4 | <el-tabs v-model="currentType" class="flex-auto px-[var(--app-content-padding)]"> | |
| 5 | <!-- 我的创作 --> | |
| 6 | <el-tab-pane v-loading="loading" label="我的创作" name="mine"> | |
| 7 | <el-row v-if="mySongList.length" :gutter="12"> | |
| 8 | <el-col v-for="song in mySongList" :key="song.id" :span="24"> | |
| 9 | <songCard :songInfo="song" @play="setCurrentSong(song)"/> | |
| 10 | </el-col> | |
| 11 | </el-row> | |
| 12 | <el-empty v-else description="暂无音乐"/> | |
| 13 | </el-tab-pane> | |
| 14 | ||
| 15 | <!-- 试听广场 --> | |
| 16 | <el-tab-pane v-loading="loading" label="试听广场" name="square"> | |
| 17 | <el-row v-if="squareSongList.length" v-loading="loading" :gutter="12"> | |
| 18 | <el-col v-for="song in squareSongList" :key="song.id" :span="24"> | |
| 19 | <songCard :songInfo="song" @play="setCurrentSong(song)"/> | |
| 20 | </el-col> | |
| 21 | </el-row> | |
| 22 | <el-empty v-else description="暂无音乐"/> | |
| 23 | </el-tab-pane> | |
| 24 | </el-tabs> | |
| 25 | <!-- songInfo --> | |
| 26 | <songInfo class="flex-none"/> | |
| 27 | </div> | |
| 28 | <audioBar class="flex-none"/> | |
| 29 | </div> | |
| 30 | </template> | |
| 31 | ||
| 32 | <script lang="ts" setup> | |
| 33 | import songCard from './songCard/index.vue' | |
| 34 | import songInfo from './songInfo/index.vue' | |
| 35 | import audioBar from './audioBar/index.vue' | |
| 36 | ||
| 37 | defineOptions({ name: 'Index' }) | |
| 38 | ||
| 39 | ||
| 40 | const currentType = ref('mine') | |
| 41 | // loading 状态 | |
| 42 | const loading = ref(false) | |
| 43 | // 当前音乐 | |
| 44 | const currentSong = ref({}) | |
| 45 | ||
| 46 | const mySongList = ref<Recordable[]>([]) | |
| 47 | const squareSongList = ref<Recordable[]>([]) | |
| 48 | ||
| 49 | provide('currentSong', currentSong) | |
| 50 | ||
| 51 | /* | |
| 52 | *@Description: 调接口生成音乐列表 | |
| 53 | *@MethodAuthor: xiaohong | |
| 54 | *@Date: 2024-06-27 17:06:44 | |
| 55 | */ | |
| 56 | function generateMusic (formData: Recordable) { | |
| 57 | console.log(formData); | |
| 58 | loading.value = true | |
| 59 | setTimeout(() => { | |
| 60 | mySongList.value = Array.from({ length: 20 }, (_, index) => { | |
| 61 | return { | |
| 62 | id: index, | |
| 63 | audioUrl: '', | |
| 64 | videoUrl: '', | |
| 65 | title: '我走后' + index, | |
| 66 | imageUrl: 'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg', | |
| 67 | desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic', | |
| 68 | date: '2024年04月30日 14:02:57', | |
| 69 | lyric: `<div class="_words_17xen_66"><div>大江东去，浪淘尽，千古风流人物。 | |
| 70 | </div><div>故垒西边，人道是，三国周郎赤壁。 | |
| 71 | </div><div>乱石穿空，惊涛拍岸，卷起千堆雪。 | |
| 72 | </div><div>江山如画，一时多少豪杰。 | |
| 73 | </div><div> | |
| 74 | </div><div>遥想公瑾当年，小乔初嫁了，雄姿英发。 | |
| 75 | </div><div>羽扇纶巾，谈笑间，樯橹灰飞烟灭。 | |
| 76 | </div><div>故国神游，多情应笑我，早生华发。 | |
| 77 | </div><div>人生如梦，一尊还酹江月。</div></div>` | |
| 78 | } | |
| 79 | }) | |
| 80 | loading.value = false | |
| 81 | }, 3000) | |
| 82 | } | |
| 83 | ||
| 84 | /* | |
| 85 | *@Description: 设置当前播放的音乐 | |
| 86 | *@MethodAuthor: xiaohong | |
| 87 | *@Date: 2024-07-19 11:22:33 | |
| 88 | */ | |
| 89 | function setCurrentSong (music: Recordable) { | |
| 90 | currentSong.value = music | |
| 91 | } | |
| 92 | ||
| 93 | defineExpose({ | |
| 94 | generateMusic | |
| 95 | }) | |
| 96 | </script> | |
| 97 | ||
| 98 | ||
| 99 | <style lang="scss" scoped> | |
| 100 | :deep(.el-tabs) { | |
| 101 | display: flex; | |
| 102 | flex-direction: column; | |
| 103 | .el-tabs__content { | |
| 104 | padding: 0 7px; | |
| 105 | overflow: auto; | |
| 106 | } | |
| 107 | } | |
| 108 | </style> | |
