提交

1

src/router/routes-admin.ts

@@ -30,6 +30,15 @@ export default [
       title: '谱库'
     }
   },
+  {
+    path: '/searchdetail',
+    name: 'searchdetail',
+    component: () => import('@/views/musicLibrary/searchdetail'),
+    meta: {
+      title: '谱库'
+    }
+  },
+
 
   {
     path: '/teacherAuth',

src/views/musicLibrary/index.tsx

@@ -16,7 +16,7 @@ import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
 export default defineComponent({
-  name: 'home',
+  name: 'musicLibrary',
   components: {
     albumItem,
     videoDetailItem,

src/views/musicLibrary/searchdetail.tsx

@@ -0,0 +1,83 @@
+// import { PaperClipIcon } from '@heroicons/vue/solid'
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
+import styles from './index.module.less'
+import albumItem from '@/components/albumItem'
+import videoDetailItem from '@/components/videoDetailItem'
+import musicLIstItem from '@/components/musicLIstItem'
+import hotSearch from '@/components/hotSearch'
+import request from '@/helpers/request'
+import silder from '@/components/silder'
+import searchInput from '@/components/searchInput'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import 'swiper/css/scrollbar'
+import { ElTabPane, ElTabs } from 'element-plus'
+export default defineComponent({
+  name: 'searchdetail',
+  components: {
+    hotSearch,
+    silder,
+    searchInput
+  },
+  setup() {
+    const state = reactive({
+      albumList: [],
+      musicList: []
+    })
+
+    const getAlbumList = async () => {
+      try {
+        const res = await request.post('/api-website/open/music/album/list', {
+          data: {
+            albumStatus: 1,
+            page: 1,
+            rows: 10
+          }
+        })
+
+        state.albumList = res.data.rows
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    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(() => {
+      getAlbumList()
+      getMusicList()
+    })
+    return () => (
+      <div>
+        <div class="bg-white">
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+              <searchInput></searchInput>
+              <hotSearch type={'search'}></hotSearch>
+              <ElTabs>
+                <ElTabPane label="专辑" name="album"></ElTabPane>
+                <ElTabPane label="乐谱" name="music"></ElTabPane>
+              </ElTabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})