更新

src/router/index-teacher.ts

@@ -3,7 +3,15 @@ import { createRouter, createWebHashHistory, Router } from 'vue-router'
 import routes from './routes-teacher'
 const router: Router = createRouter({
   history: createWebHashHistory(),
-  routes
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
+    }
+  }
 })
 
 router.beforeEach((to, from, next) => {

src/router/routes-common.ts

@@ -146,6 +146,7 @@ export const router = [
   },
   {
     path: '/music-album-detail/:id',
+    name: 'music-album-detail',
     component: () => import('@/views/music/album-detail'),
     meta: {
       title: '专辑详情'

src/views/music/album-detail/index.tsx

@@ -51,7 +51,7 @@ export default defineComponent({
     const heightInfo = ref<any>('auto')
 
     const route = useRoute()
-    const FetchList = async () => {
+    const FetchList = async (id?: any) => {
       if (loading.value) {
         return
       }
@@ -61,18 +61,15 @@ export default defineComponent({
         const res = await request.post('/music/album/detail', {
           prefix:
             state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
-          data: { id: route.params.id, ...params }
+          data: { id: id || route.params.id, ...params }
         })
         const { musicSheetList, ...rest } = res.data
-        rows.value = [...rows.value, ...musicSheetList.rows]
+        rows.value = [...musicSheetList.rows]
         const musicTagNames = rest?.musicTagNames?.split(',') || []
         albumDetail.value = {
           ...rest,
           musicTagNames
         }
-        data.value = musicSheetList
-        params.page = musicSheetList.pageNo + 1
-        finished.value = musicSheetList.pageNo >= musicSheetList.totalPage
         favorited.value = rest.favorite
         albumFavoriteCount.value = rest.albumFavoriteCount
       } catch (error) {
@@ -178,7 +175,7 @@ export default defineComponent({
               />
 
               {rows.value && rows.value.length <= 0 && (
-                <ColResult btnStatus={false} tips="暂无曲目" />
+                <ColResult btnStatus={false} tips="暂无曲目列表" />
               )}
             </div>
 
@@ -196,11 +193,19 @@ export default defineComponent({
 
                   <MusicGrid
                     list={albumDetail.value?.relatedMusicAlbum}
-                    onGoto={(n: any) =>
-                      router.push({
-                        path: '/music-album-detail/' + n.id
-                      })
-                    }
+                    onGoto={(n: any) => {
+                      router
+                        .push({
+                          name: 'music-album-detail',
+                          params: {
+                            id: n.id
+                          }
+                        })
+                        .then(() => {
+                          FetchList(n.id)
+                          window.scrollTo(0, 0)
+                        })
+                    }}
                   />
                 </>
               )}

src/views/music/component/collection/index.tsx

@@ -0,0 +1,13 @@
+import { Cell, CellGroup } from 'vant'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Collection',
+  setup() {
+    return () => (
+      <CellGroup>
+        <Cell title={'收藏曲目'} />
+      </CellGroup>
+    )
+  }
+})

src/views/music/component/song/index.module.less

@@ -3,6 +3,7 @@
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0px 2px 10px 0px rgba(229, 229, 229, 0.1);
+  // --van-popup-close-icon-z-index: 19;
   .item {
     display: flex;
     align-items: center;
@@ -12,9 +13,6 @@
   .item:last-child {
     border: none;
   }
-  .play {
-    flex-shrink: 0;
-  }
   .content {
     flex: 1;
     .top {
@@ -62,4 +60,34 @@
       color: #999;
     }
   }
+
+  .play {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.pImg {
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.info {
+  margin-left: 14px;
+  flex: 1;
+  margin-right: 14px;
+  word-break: break-all;
+  > h4 {
+    color: #1a1a1a;
+    font-size: 14px;
+    font-weight: 600;
+    width: 300px;
+  }
+  > p {
+    color: #999;
+    line-height: 17px;
+  }
 }

src/views/music/component/song/index.tsx

@@ -1,7 +1,8 @@
-import { Icon, NoticeBar, Tag } from 'vant'
-import { defineComponent, PropType } from 'vue'
+import { CellGroup, Cell, Icon, Image, Popup, Tag } from 'vant'
+import { defineComponent, PropType, ref } from 'vue'
 import styles from './index.module.less'
 import IconPlay from '@/common/images/icon-play.png'
+import IconMore from '@/common/images/icon_more.png'
 import { useRouter } from 'vue-router'
 export default defineComponent({
   name: 'TheSong',
@@ -13,6 +14,8 @@ export default defineComponent({
   },
   emits: ['detail'],
   setup(props, { emit }) {
+    const isMore = ref<boolean>(false)
+    const moreData = ref<any>({})
     const router = useRouter()
     const colors: any = {
       FREE: {
@@ -62,11 +65,60 @@ export default defineComponent({
                 </div>
               </div>
             </div>
-            <div style={styles.play}>
+            <div class={styles.play}>
               <Icon name={IconPlay} size={28} />
+
+              <Icon
+                name={IconMore}
+                size={18}
+                style={{ marginLeft: '12px  ' }}
+                onClick={() => {
+                  isMore.value = true
+                  moreData.value = n
+                }}
+              />
             </div>
           </div>
         ))}
+
+        <Popup v-model:show={isMore.value} position="bottom" round>
+          <CellGroup border={false}>
+            <Cell
+              center
+              v-slots={{
+                icon: () => (
+                  <Image class={styles.pImg} src={moreData?.value.titleImg} />
+                ),
+                title: () => (
+                  <div class={styles.info}>
+                    <h4 class="van-ellipsis">
+                      {moreData?.value.musicSheetName}
+                    </h4>
+                    <p>
+                      <Tag
+                        style={{
+                          color: colors[moreData?.value.chargeType].color,
+                          marginRight: '6px'
+                        }}
+                        class={styles.tag}
+                        type="success"
+                        plain
+                      >
+                        {colors[moreData?.value.chargeType].text}
+                      </Tag>
+                      {moreData?.value.composer}
+                    </p>
+                  </div>
+                )
+              }}
+            />
+            <Cell border={false} size="large" title={'收藏曲目'} />
+            <Cell border={false} size="large" title={'分享曲目'} />
+            <Cell border={false} size="large" title={'作曲：xxx'} />
+            <Cell border={false} size="large" title={`上传：xxx`} />
+            <Cell border={false} size="large" title={'小酷Ai练习'} />
+          </CellGroup>
+        </Popup>
       </div>
     )
   }