✨ feat: 添加单曲收藏

src/student/music/list/item.tsx

@@ -1,10 +1,12 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { Button, Icon, Image, Tag } from 'vant'
 import classNames from 'classnames'
 import MusicIcon from './icons/music-icon.png'
 import InitUserIcon from './icons/init-user-icon.png'
 import FavoriteIcon from '../album/favorite.svg'
+import FavoritedIcon from '../album/favorited.svg'
 import styles from './item.module.less'
+import request from '@/helpers/request'
 
 const chargeTypes = {
   CHARGE: '点播',
@@ -21,6 +23,21 @@ export default defineComponent({
     }
   },
   setup({ data }) {
+    const favorite = ref(data.favorite)
+    const favoriteLoading = ref(false)
+
+    const toggleFavorite = async () => {
+      favoriteLoading.value = true
+      try {
+        await request.post('/api-student/music/sheet/favorite', {
+          params: {
+            id: data.id
+          }
+        })
+        favorite.value = !favorite.value
+      } catch (error) {}
+      favoriteLoading.value = false
+    }
     return () => (
       <div class={styles.item}>
         <header class={styles.header}>
@@ -58,7 +75,16 @@ export default defineComponent({
             </div>
           </div>
           <div class={styles.icons}>
-            <Icon class={styles.favorite} name={FavoriteIcon} />
+            <Button
+              style={{ border: 'none' }}
+              onClick={toggleFavorite}
+              loading={favoriteLoading.value}
+            >
+              <Icon
+                class={styles.favorite}
+                name={favorite.value ? FavoritedIcon : FavoriteIcon}
+              />
+            </Button>
           </div>
         </footer>
       </div>

src/student/music/personal/album.tsx

@@ -42,19 +42,19 @@ export default defineComponent({
       <List
         loading={loading.value}
         finished={finished.value}
-        finished-text="没有更多了"
+        finished-text={data.value && data.value.rows.length ? '没有更多了' : ''}
         onLoad={FetchList}
         error={isError.value}
       >
-        {data.value && data.value.rows.length ? (
-          data.value.rows.map(item => <Item data={item} />)
-        ) : (
-          <ColResult
-            tips="暂无收藏专辑"
-            classImgSize="SMALL"
-            btnStatus={false}
-          />
-        )}
+        {data.value && data.value.rows.length
+          ? data.value.rows.map(item => <Item data={item} />)
+          : !loading.value && (
+              <ColResult
+                tips="暂无收藏曲目"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )}
       </List>
     )
   }

src/student/music/personal/collection.tsx

@@ -42,19 +42,19 @@ export default defineComponent({
       <List
         loading={loading.value}
         finished={finished.value}
-        finished-text="没有更多了"
+        finished-text={data.value && data.value.rows.length ? '没有更多了' : ''}
         onLoad={FetchList}
         error={isError.value}
       >
-        {data.value && data.value.rows.length ? (
-          data.value.rows.map(item => <Item data={item} />)
-        ) : (
-          <ColResult
-            tips="暂无收藏曲目"
-            classImgSize="SMALL"
-            btnStatus={false}
-          />
-        )}
+        {data.value && data.value.rows.length
+          ? data.value.rows.map(item => <Item data={item} />)
+          : !loading.value && (
+              <ColResult
+                tips="暂无收藏曲目"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )}
       </List>
     )
   }

src/student/music/personal/index.module.less

@@ -1,4 +1,10 @@
 .personal {
+  --van-cell-background-color: transparent;
+  --van-cell-font-size: 16px;
+  --van-cell-text-color: #333;
+  --van-cell-value-color: #999;
+  --van-cell-icon-size: 10px;
+
   :global {
     .van-tab {
       font-size: 16px !important;

src/student/music/personal/personal.tsx

@@ -42,19 +42,19 @@ export default defineComponent({
       <List
         loading={loading.value}
         finished={finished.value}
-        finished-text="没有更多了"
+        finished-text={data.value && data.value.rows.length ? '没有更多了' : ''}
         onLoad={FetchList}
         error={isError.value}
       >
-        {data.value && data.value.rows.length ? (
-          data.value.rows.map(item => <Item data={item} />)
-        ) : (
-          <ColResult
-            tips="暂无个人曲目"
-            classImgSize="SMALL"
-            btnStatus={false}
-          />
-        )}
+        {data.value && data.value.rows.length
+          ? data.value.rows.map(item => <Item data={item} />)
+          : !loading.value && (
+              <ColResult
+                tips="暂无收藏曲目"
+                classImgSize="SMALL"
+                btnStatus={false}
+              />
+            )}
       </List>
     )
   }