提交一下

1

src/components/banner/index.module.less

@@ -0,0 +1,13 @@
+.mySwiper {
+  min-height: 300px;
+  /deep/.swiper-slide {
+    min-height: 300px;
+  }
+}
+
+:global{
+  .swiper-button-next {
+    right: 130px;
+  }
+}
+

src/components/banner/index.tsx

@@ -0,0 +1,76 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import classes from './index.module.less'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+import request from '@/helpers/request'
+export default defineComponent({
+  name: 'tagItem',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    Swiper,
+    SwiperSlide
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.title,
+      modules: [Navigation, Pagination, Scrollbar, A11y],
+      bannerList:[]
+    })
+    const onSwiper = swiper => {
+      // console.log(swiper)
+    }
+    const onSlideChange = () => {
+      console.log('slide change')
+    }
+    const getBannerList = async () => {
+      try {
+        const res = await request.get('/api-website/open/banner/list', {
+          data: {
+
+          }
+        })
+
+        state.bannerList = res.data
+      } catch (e) {
+        console.log(e)
+      }
+    }
+      onMounted(()=>{
+        getBannerList()
+      })
+    return () => (
+      <>
+        <swiper
+          modules={state.modules}
+          class={classes.mySwiper}
+          slides-per-view={1}
+          space-between={50}
+          pagination={{ clickable: true }}
+          navigation={{
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }}
+          loop={true}
+          onSwiper={onSwiper}
+          onSlideChange={onSlideChange}
+        >
+          {
+          state.bannerList.map((item:any)=>{
+            return <swiper-slide><img src={item.coverImage} alt="" /></swiper-slide>
+          })
+        }
+
+
+
+          <div class="swiper-button-prev"></div>
+          <div class="swiper-button-next"></div>
+        </swiper>
+      </>
+    )
+  }
+})

src/components/musicLIstItem/index.tsx

@@ -34,6 +34,7 @@ export default defineComponent({
   },
   setup(props: any) {
     const item = props.item
+    console.log(item)
     return () => (
       <div
         onClick={() => {
@@ -68,10 +69,10 @@ export default defineComponent({
             <div
               class={[
                 classes.touchButton,
-                classes[item.chargeType.toLocaleLowerCase()]
+                classes[item.chargeType?.toLocaleLowerCase()]
               ]}
             >
-              {chargeTypes[item.chargeType]}
+              {chargeTypes[item.chargeType]?chargeTypes[item.chargeType]:'点播'}
             </div>
             <img class={classes.arrow} src={arrow} alt="" />
           </div>

src/router/routes-admin.ts

@@ -29,15 +29,15 @@ export default [
     meta: {
       title: '谱库',
       index: 2
-    }
+    },
   },
   {
-    path: '/searchdetail',
+    path: '/musicLibrary/searchdetail',
     name: 'searchdetail',
     component: () => import('@/views/musicLibrary/searchdetail'),
     meta: {
-      title: '谱库',
-      index: 2
+      title: '搜索',
+      index: 3
     }
   },
 

src/views/home/index.module.less

@@ -1,10 +1,4 @@
 
-.mySwiper {
-  min-height: 300px;
-  /deep/.swiper-slide {
-    min-height: 300px;
-  }
-}
 .title {
   font-size: 20px;
   color: red;

src/views/home/index.tsx

@@ -7,10 +7,8 @@ import videoDetailItem from '@/components/videoDetailItem'
 import musicLIstItem from '@/components/musicLIstItem'
 import titleDot from './images/titleDot.png'
 import hotSearch from '@/components/hotSearch'
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+import banner from '@/components/banner'
 import request from '@/helpers/request'
-
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -22,21 +20,15 @@ export default defineComponent({
     videoDetailItem,
     musicLIstItem,
     hotSearch,
-    Swiper,
-    SwiperSlide,
+    banner
   },
   setup() {
     const state = reactive({
-      modules: [Navigation, Pagination, Scrollbar, A11y],
+
       albumList: [],
       videoList:[]
     })
-    const onSwiper = swiper => {
-      console.log(swiper)
-    }
-    const onSlideChange = () => {
-      console.log('slide change')
-    }
+
     const getAlbumList = async () => {
       try {
         const res = await request.post('/api-website/open/music/album/list', {
@@ -74,29 +66,7 @@ export default defineComponent({
     })
     return () => (
       <div>
-        <swiper
-          modules={state.modules}
-          class={styles.mySwiper}
-          slides-per-view={1}
-          space-between={50}
-          pagination={{ clickable: true }}
-          navigation={{
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev'
-          }}
-          loop={true}
-          onSwiper={onSwiper}
-          onSlideChange={onSlideChange}
-        >
-          <swiper-slide>Slide 1</swiper-slide>
-          <swiper-slide>Slide 2</swiper-slide>
-          <swiper-slide>Slide 3</swiper-slide>
-          <swiper-slide>Slide 4</swiper-slide>
-          <swiper-slide>Slide 5</swiper-slide>
-          <swiper-slide>Slide 6</swiper-slide>
-        </swiper>
-        <div class="swiper-button-prev"></div>
-        <div class="swiper-button-next"></div>
+        <banner />
         <div class="bg-white">
           <div class={styles.w1200}>
             <div class={styles.section}>

src/views/musicLibrary/index.module.less

@@ -83,3 +83,7 @@
     }
   }
 }
+
+.myTab {
+  margin-top: 28px;
+}

src/views/musicLibrary/index.tsx

@@ -131,7 +131,7 @@ export default defineComponent({
               </div>
               <div class={styles.musicList}>
                 {state.musicList.map(item => {
-                  return <musicLIstItem detail={item}></musicLIstItem>
+                  return <musicLIstItem item={item}></musicLIstItem>
                 })}
               </div>
             </div>

src/views/musicLibrary/searchdetail.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
             <div class={styles.section}>
               <searchInput></searchInput>
               <hotSearch type={'search'}></hotSearch>
-              <ElTabs>
+              <ElTabs class={styles.myTab}>
                 <ElTabPane label="专辑" name="album">
                   <searchAlbum/>
                 </ElTabPane>