专辑分享

src/components/col-share/share-item.tsx

@@ -55,7 +55,7 @@ export default defineComponent({
       } else if (this.shareType === 'vip') {
         return '小酷Ai智能陪练VIP！推荐给你~'
       } else if (this.shareType === 'album') {
-        return '精选曲目专辑！推荐给你～'
+        return '更多曲目扫码下载酷乐秀查看'
       } else {
         return '这个课程挺不错！推荐给你～'
       }

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

@@ -297,3 +297,8 @@
   color: #ffffff;
   line-height: 24px;
 }
+.shareMusicList{
+  margin-top: 12px;
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
+  padding: 0 10px;
+}

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

@@ -35,6 +35,8 @@ import { orderStatus } from '@/views/order-detail/orderStatus'
 import iconShare from '../album/icon_share.svg'
 import iconShare2 from '../album/icon_share2.svg'
 import ColShare from '@/components/col-share'
+import iconShareMusic from '/src/views/music/component/images/icon_album_active.png'
+import SongShare from '../component/song-share'
 
 const noop = () => {}
 
@@ -246,6 +248,11 @@ export default defineComponent({
       const album = albumDetail.value?.musicPaymentTypes
       return album && album.includes('VIP')
     })
+
+    /** 分享曲谱列表, 最大数量4 */
+    const shareMusicList = computed(() => {
+      return rows.value.length > 4 ? rows.value.slice(0, 4) : rows.value
+    })
     return () => {
       return (
         <div class={styles.detail}>
@@ -486,6 +493,10 @@ export default defineComponent({
                   </p>
                 </div>
               </div>
+
+              <div class={[styles.shareVip, styles.shareMusicList]}>
+                <SongShare list={shareMusicList.value} />
+              </div>
             </ColShare>
           </Popup>
         </div>

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

@@ -0,0 +1,187 @@
+.theSong {
+  width: 100%;
+  .item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #f2f2f2;
+    padding: 16px 0;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .item:last-child {
+    border: none;
+  }
+  .content {
+    flex: 1;
+    .top {
+      display: flex;
+      align-items: center;
+    }
+    .tag {
+      flex-shrink: 0;
+      padding: 2px 4px 0;
+      border-radius: 4px;
+    }
+    .tags {
+      & > span {
+        display: inline-block;
+        background: #effbf9;
+        border-radius: 20px;
+        color: var(--van-primary-color);
+        padding: 4px 8px;
+        margin: 0 4px;
+        font-size: 12px;
+        transform: scale(0.9);
+        white-space: nowrap;
+      }
+    }
+    .title {
+      max-width: 145px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #1a1a1a;
+      margin-right: 6px;
+    }
+    .singer {
+      max-width: 50px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+
+  .play {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.mb100 {
+  margin-bottom: 100px;
+}
+
+.pImg {
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.moreSection {
+  margin-left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  // padding-right: 10px;
+}
+
+.collection {
+  width: 13px;
+  height: 12px;
+  margin-right: 8px;
+}
+
+.musicInfo {
+  padding-top: 23px !important;
+  padding-bottom: 23px !important;
+  margin-bottom: 10px;
+  .tag {
+    flex-shrink: 0;
+    // padding: 2px 4px 0;
+    border-radius: 4px;
+  }
+
+  .info {
+    margin-left: 14px;
+    flex: 1;
+    margin-right: 14px;
+    word-break: break-all;
+    > h4 {
+      font-size: 16px;
+      font-weight: bold;
+      color: #1a1a1a;
+      width: 200px;
+      padding-bottom: 3px;
+    }
+    > p {
+      font-size: 12px;
+      color: #999;
+      line-height: 17px;
+    }
+  }
+}
+
+.shareIcon {
+  display: flex;
+  width: 22px;
+  height: 19px;
+  margin-right: 14px;
+
+  .share {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.shareMate {
+  position: relative;
+  margin-top: 50px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 11px 12px;
+  background: #ffffff;
+  border-radius: 10px;
+  // border: 1px solid #2dc7aa;
+  .icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+  .info {
+    margin-left: 14px;
+    flex: 1;
+    margin-right: 14px;
+    word-break: break-all;
+    > h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      font-weight: 600;
+      width: 200px;
+    }
+    > p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
+    }
+  }
+
+  .tagDiscount {
+    position: absolute;
+    top: -26px;
+    left: 15px;
+    padding: 2px 10px 1px;
+    height: 23px;
+    background: linear-gradient(180deg, #ffb635 0%, #ff4e18 100%);
+    border-radius: 8px 8px 0px 0px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 20px;
+  }
+}
+
+.exquisiteFlag {
+  width: 14px;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+.songAlbum {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,85 @@
+import { CellGroup, Cell, Icon, Image, Popup, Tag, Toast } from 'vant'
+import { computed, defineComponent, PropType, ref } from 'vue'
+import styles from './index.module.less'
+import IconPlay from '@/common/images/icon-play.png'
+import { useRouter } from 'vue-router'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+export default defineComponent({
+  name: 'TheSong',
+  props: {
+    list: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    },
+    showPlay: {
+      type: Boolean,
+      default: true
+    },
+    musicNameClass: {
+      type: String as PropType<unknown>
+    },
+    authorClass: {
+      type: String as PropType<unknown>
+    }
+  },
+  emits: ['detail'],
+  setup(props, { emit }) {
+
+    const list = computed(() => {
+      return props.list.map(n => {
+        if (typeof n.paymentType === 'string')
+          n.paymentType = n.paymentType.split(',')
+        return { ...n }
+      })
+    })
+
+    return () => {
+      return (
+        <div class={styles.theSong}>
+          {list.value.map((n: any) => (
+            <div class={styles.item} onClick={() => emit('detail', n)}>
+              <div class={styles.content}>
+                <div class={styles.top}>
+                  {n.exquisiteFlag === 1 && (
+                    <Image
+                      class={styles.exquisiteFlag}
+                      src={getAssetsHomeFile('icon_exquisite.png')}
+                    />
+                  )}
+
+                  {n.albumNums > 0 && (
+                    <Image
+                      class={styles.songAlbum}
+                      src={getAssetsHomeFile('icon_album_active.png')}
+                    />
+                  )}
+
+                  <span
+                    class={[styles.title, props.musicNameClass, 'van-ellipsis']}
+                  >
+                    {n.musicSheetName}
+                  </span>
+                  <span
+                    class={[styles.singer, props.authorClass, 'van-ellipsis']}
+                  >
+                    -{n.composer}
+                  </span>
+
+                  <div class={styles.tags}>
+                    {n?.subjectNames.split(',').map((name: any) => (
+                      <span>{name}</span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )
+    }
+  }
+})