更新

src/views/music/album-detail/index.module.less

@@ -168,13 +168,15 @@
   padding-top: 20px;
   color: #999;
   font-size: 14px;
-  & > img {
+  img {
     display: inline-block;
     width: 20px;
     height: 20px;
     margin-right: 6px;
   }
   .right {
+    display: flex;
+    align-items: center;
     margin-left: 26px;
   }
 }

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

@@ -3,18 +3,19 @@ import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
 import { Button, Icon, Image, List, NavBar, Sticky } from 'vant'
-import classNames from 'classnames'
-import Footer from '../album/footer'
-import FavoriteIcon from '../album/favorite.svg'
-import FavoritedIcon from '../album/favorited.svg'
+// import classNames from 'classnames'
+// import Footer from '../album/footer'
+// import FavoriteIcon from '../album/favorite.svg'
+// import FavoritedIcon from '../album/favorited.svg'
 import styles from './index.module.less'
-import Item from '../list/item'
+// import Item from '../list/item'
 import { useRect } from '@vant/use'
 import { useEventListener, useWindowScroll } from '@vueuse/core'
 import { getRandomKey, musicBuy } from '../music'
 import { state } from '@/state'
 import IconPan from './pan.png'
 import oStart from './oStart.png'
+import iStart from './iStart.png'
 import Title from '../component/title'
 import Song from '../component/song'
 import ColResult from '@/components/col-result'
@@ -39,10 +40,10 @@ export default defineComponent({
       rows: 200
     })
     const albumDetail = ref<any>(null)
-    const data = ref<any>(null)
+    // const data = ref<any>(null)
     const rows = ref<any[]>([])
     const loading = ref(false)
-    const finished = ref(false)
+    // const finished = ref(false)
     const isError = ref(false)
     const favorited = ref(0)
     const albumFavoriteCount = ref(0)
@@ -154,8 +155,13 @@ export default defineComponent({
             <div class={styles.alumCollect}>
               <img src={IconPan} />
               <span>共{albumDetail.value?.musicSheetCount}首曲目</span>
-              <img class={styles.right} src={oStart} />
-              <span>{albumDetail.value?.albumFavoriteCount}人收藏</span>
+              <div
+                class={styles.right}
+                onClick={() => toggleFavorite(albumDetail.value?.id)}
+              >
+                <img src={favorited.value ? iStart : oStart} />
+                <span>{albumFavoriteCount.value}人收藏</span>
+              </div>
             </div>
           </div>
           <div class={styles.alumnContainer}>

src/views/music/component/music-grid/index.tsx

@@ -1,7 +1,7 @@
 import { Grid, GridItem, Icon, Image, Loading } from 'vant'
 import { defineComponent, PropType } from 'vue'
 import styles from './index.module.less'
-import IconXin from '@/assets/icon-xin.png'
+import IconXin from '../images/icon-xin.png'
 
 export default defineComponent({
   name: 'TheMusicGrid',