更新

src/views/music/list/index.module.less

@@ -16,4 +16,11 @@
       margin-left: 4px;
     }
   }
-}
+}
+
+.alumnList {
+  padding: 0 12px;
+  border-radius: 18px;
+  background-color: #fff;
+  margin: 14px;
+}

src/views/music/list/index.tsx

@@ -11,6 +11,7 @@ import { getRandomKey, musicBuy } from '../music'
 import { state } from '@/state'
 import SelectSubject from '../search/select-subject'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import Song from '../component/song'
 
 const noop = () => {}
 
@@ -182,26 +183,48 @@ export default defineComponent({
             </Sticky>
           )}
 
-          {data.value && data.value.rows.length
-            ? data.value.rows.map(item => (
-                <Item
-                  data={item}
-                  onClick={() => {
-                    if (onItemClick === noop) {
-                      musicBuy(item)
-                    } else {
-                      onItemClick?.(item)
-                    }
-                  }}
-                />
-              ))
-            : !loading.value && (
-                <ColResult
-                  tips="暂无曲目"
-                  classImgSize="SMALL"
-                  btnStatus={false}
-                />
-              )}
+          {data.value && data.value.rows.length ? (
+            <div class={styles.alumnList}>
+              <Song
+                list={data.value.rows}
+                onDetail={(item: any) => {
+                  if (onItemClick === noop) {
+                    musicBuy(item)
+                  } else {
+                    onItemClick?.(item)
+                  }
+                  // if (onItemClick === noop || !onItemClick) {
+                  //   musicBuy(item, () => {}, {
+                  //     albumId: route.params.id,
+                  //     albumName: albumDetail.value?.albumName
+                  //   })
+                  // } else {
+                  //   onItemClick(item)
+                  // }
+                }}
+              />
+            </div>
+          ) : (
+            // data.value.rows.map(item => (
+            //     <Item
+            //       data={item}
+            //       onClick={() => {
+            //         if (onItemClick === noop) {
+            //           musicBuy(item)
+            //         } else {
+            //           onItemClick?.(item)
+            //         }
+            //       }}
+            //     />
+            //   ))
+            !loading.value && (
+              <ColResult
+                tips="暂无曲目"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )
+          )}
         </List>
         <Popup
           show={tagVisibility.value}

src/views/music/songbook/index.module.less

@@ -82,3 +82,10 @@
     }
   }
 }
+
+.listContainer {
+  padding: 0 12px;
+  border-radius: 18px;
+  background-color: #fff;
+  margin: 0 14px 14px;
+}

src/views/music/songbook/list.tsx

@@ -9,6 +9,7 @@ import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
 import { state as tempState } from '@/state'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import Song from '../component/song'
 
 export default defineComponent({
   name: 'Songbook',
@@ -52,7 +53,20 @@ export default defineComponent({
             border={false}
           />
           <div class={styles.listContainer}>
-            {state.value.data.rows.map(item => (
+            <Song
+              list={state.value.data.rows}
+              onDetail={(item: any) => {
+                musicBuy(item, (path: any) => {
+                  router.push({
+                    path,
+                    query: {
+                      orderType: 'MUSIC'
+                    }
+                  })
+                })
+              }}
+            />
+            {/* {state.value.data.rows.map(item => (
               <Item
                 data={item}
                 onClick={(item: any) => {
@@ -66,7 +80,7 @@ export default defineComponent({
                   })
                 }}
               />
-            ))}
+            ))} */}
           </div>
         </>
       ) : (