添加专辑

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

@@ -37,6 +37,20 @@
     right: -6px;
     top: 8px;
   }
+
+  .albumType {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+    box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+    border-radius: 10px 0px 10px 0px;
+    font-size: 12px;
+    padding: 0 6px;
+    line-height: 20px;
+    color: #ffffff;
+    z-index: 9;
+  }
 }
 .detailContent {
   background-color: white;
@@ -184,6 +198,23 @@
     margin-left: 26px;
   }
 }
+.albumTips {
+  background: rgba(0, 0, 0, 0.32);
+  border-radius: 16px;
+  // opacity: 0.32;
+  padding: 8px 12px 6px 10px;
+  margin-top: 12px;
+  font-size: 12px;
+  // line-height: 17px;
+  color: #999999;
+  display: flex;
+  justify-content: space-between;
+  .albumPrice {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffaa00;
+  }
+}
 .alumnContainer {
   position: relative;
   padding: 0 16px;

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

@@ -22,6 +22,7 @@ import Song from '../component/song'
 import ColResult from '@/components/col-result'
 import MusicGrid from '../component/music-grid'
 import { useEventTracking } from '@/helpers/hooks'
+import ColSticky from '@/components/col-sticky'
 
 const noop = () => {}
 
@@ -144,6 +145,7 @@ export default defineComponent({
           <div class={styles.bg}>
             <div class={styles.alumWrap}>
               <div class={styles.img}>
+                <span class={styles.albumType}>付费</span>
                 <Image
                   class={styles.image}
                   width="100%"
@@ -174,14 +176,21 @@ export default defineComponent({
             </div>
             <div class={styles.alumCollect}>
               <img src={IconPan} />
-              <span>共{albumDetail.value?.musicSheetCount}首曲目{state.platformType}</span>
+              <span>
+                共{albumDetail.value?.musicSheetCount}首曲目{state.platformType}
+              </span>
               <div
-                  class={styles.right}
-                  onClick={() => toggleFavorite(albumDetail.value?.id)}
-                >
-                  <img src={favorited.value ? iStart : oStart} />
-                  <span>{albumFavoriteCount.value}人收藏</span>
-                </div>
+                class={styles.right}
+                onClick={() => toggleFavorite(albumDetail.value?.id)}
+              >
+                <img src={favorited.value ? iStart : oStart} />
+                <span>{albumFavoriteCount.value}人收藏</span>
+              </div>
+            </div>
+
+            <div class={styles.albumTips}>
+              <span>此专辑为收费类型，购买即可自由练习该专辑</span>
+              <span class={styles.albumPrice}>¥19.9</span>
             </div>
           </div>
           <div class={styles.alumnContainer}>
@@ -237,6 +246,25 @@ export default defineComponent({
                 </>
               )}
           </div>
+
+          <ColSticky position="bottom" background="white">
+            <div class={['btnGroup', 'btnMore']} style={{ paddingTop: '12px' }}>
+              <Button block round type="primary" style={{ fontSize: '16px' }}>
+                购买专辑
+              </Button>
+              <Button
+                block
+                round
+                type="primary"
+                style={{ fontSize: '16px' }}
+                onClick={() => {
+                  router.push('/memberCenter')
+                }}
+              >
+                开通会员
+              </Button>
+            </div>
+          </ColSticky>
         </div>
       )
     }

src/views/music/album/item.module.less

@@ -4,6 +4,19 @@
   background-color: var(--music-list-item-background-color);
   border-radius: 10px;
   display: flex;
+  position: relative;
+  .albumType {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+    box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+    border-radius: 10px 0px 10px 0px;
+    font-size: 12px;
+    padding: 0 6px;
+    line-height: 20px;
+    color: #ffffff;
+  }
   .img {
     width: 94px;
     height: 94px;

src/views/music/album/item.tsx

@@ -20,6 +20,7 @@ export default defineComponent({
         onClick={() => router.push('/music-album-detail/' + data.id)}
       >
         <Image class={styles.img} src={data.albumCoverUrl} />
+        <span class={styles.albumType}>付费</span>
         <div class={styles.content}>
           <h4 class="van-ellipsis">{data.albumName}</h4>
           <p class="van-multi-ellipsis--l3">{data.albumDesc}</p>

src/views/music/songbook/album.tsx

@@ -57,6 +57,7 @@ export default defineComponent({
                   onClick={() => router.push('/music-album-detail/' + item.id)}
                 >
                   <div class={styles.main}>
+                    <span class={styles.albumType}>付费</span>
                     <Image class={styles.img} src={item.albumCoverUrl} />
                     <p class={styles.favorite}>
                       <span>{item.albumFavoriteCount}</span>人收藏

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

@@ -37,6 +37,19 @@
     // overflow: hidden;
     width: 94px;
     flex-shrink: 0;
+    .albumType {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+      box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+      border-radius: 10px 0px 10px 0px;
+      font-size: 12px;
+      padding: 0 6px;
+      line-height: 20px;
+      color: #ffffff;
+      z-index: 9;
+    }
     .main {
       position: relative;
       .favorite {