添加专辑分享

src/components/col-share/index.module.less

@@ -177,6 +177,10 @@
       background-size: cover;
     }
   }
+  &.album {
+    background: url('./images/album1.png') no-repeat top center #fff;
+    background-size: contain;
+  }
 
   .shareContent {
     padding-top: 124px;

src/components/col-share/index.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
     shareType: {
       // 分享类型
       type: String as PropType<
-        '' | 'video' | 'music' | 'live' | 'mall' | 'vip'
+        '' | 'video' | 'music' | 'live' | 'mall' | 'vip' | 'album'
       >,
       default: ''
     },
@@ -182,24 +182,25 @@ export default defineComponent({
                   this.image = null
                 }}
                 v-slots={{
-                  indicator: (active: any) => (
-                    <div class={styles.swipe__indicators}>
-                      <div class={styles.indicators}>
-                        {Array.from({ length: active.total }, (_, i) => (
-                          <div
-                            class={[
-                              styles.swipe__indicator,
-                              i == active.active &&
-                                styles['swipe__indicator--active']
-                            ]}
-                          ></div>
-                        ))}
+                  indicator: (active: any) =>
+                    this.shareArray.length > 1 && (
+                      <div class={styles.swipe__indicators}>
+                        <div class={styles.indicators}>
+                          {Array.from({ length: active.total }, (_, i) => (
+                            <div
+                              class={[
+                                styles.swipe__indicator,
+                                i == active.active &&
+                                  styles['swipe__indicator--active']
+                              ]}
+                            ></div>
+                          ))}
+                        </div>
+                        <div class={styles.total}>
+                          分享模板 {active.active + 1}/{active.total}
+                        </div>
                       </div>
-                      <div class={styles.total}>
-                        分享模板 {active.active + 1}/{active.total}
-                      </div>
-                    </div>
-                  )
+                    )
                 }}
               >
                 {this.shareArray.map((item: any, index: number) => (

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

@@ -36,7 +36,7 @@ export default defineComponent({
     shareType: {
       // 分享类型
       type: String as PropType<
-        '' | 'video' | 'music' | 'live' | 'mall' | 'vip'
+        '' | 'video' | 'music' | 'live' | 'mall' | 'vip' | 'album'
       >,
       default: ''
     }
@@ -54,6 +54,8 @@ export default defineComponent({
         return '这件商品挺不错！推荐给你～'
       } else if (this.shareType === 'vip') {
         return '小酷Ai智能陪练VIP！推荐给你~'
+      } else if (this.shareType === 'album') {
+        return '精选曲目专辑！推荐给你～'
       } else {
         return '这个课程挺不错！推荐给你～'
       }
@@ -111,7 +113,9 @@ export default defineComponent({
                 <p class={styles.name}>{this.getString}</p>
                 <p class={styles.titleTips}>
                   <span>{state.user.data.username}</span>
-                  { state.platformType == 'TEACHER' ? " 酷乐秀入驻老师" : " 为您推荐"}
+                  {state.platformType == 'TEACHER'
+                    ? ' 酷乐秀入驻老师'
+                    : ' 为您推荐'}
                 </p>
               </div>
             )

src/router/routes-teacher.ts

@@ -38,6 +38,14 @@ const noLoginRouter = [
     meta: {
       title: '会员中心'
     }
+  },
+  {
+    path: '/shareAblum',
+    name: 'shareAblum',
+    component: () => import('@/teacher/share-page/share-album/index'),
+    meta: {
+      title: '分享专辑'
+    }
   }
 ]
 
@@ -283,19 +291,17 @@ export default [
       },
       {
         path: '/leaderboard',
-        component: () =>
-          import('@/teacher/leaderboard/index'),
+        component: () => import('@/teacher/leaderboard/index'),
         meta: {
-          title: '曲目挑战排行榜',
+          title: '曲目挑战排行榜'
           // isExternal: true // 是否外部浏览器可以打开
         }
       },
       {
         path: '/mySheetMusic',
-        component: () =>
-          import('@/teacher/my-sheetMusic'),
+        component: () => import('@/teacher/my-sheetMusic'),
         meta: {
-          title: '我的乐谱',
+          title: '我的乐谱'
         }
       }
     ]

src/student/main.ts

@@ -14,8 +14,8 @@ import { browser } from '@/helpers/utils'
 
 const app = createApp(App)
 
-// import Vconsole from 'vconsole'
-// const vconsole = new Vconsole()
+import Vconsole from 'vconsole'
+const vconsole = new Vconsole()
 postMessage(
   {
     api: 'getVersion'

src/student/teacher-dependent/model/teacher-header.module.less

@@ -41,7 +41,7 @@
     font-size: 20px;
     font-weight: 500;
     color: #1a1a1a;
-    line-height: 18px;
+    // line-height: 22px;
     max-width: 150px;
     overflow: hidden;
     white-space: nowrap;

src/teacher/share-page/share-album/index.module.less

@@ -0,0 +1,300 @@
+.base > div {
+  background: url(./header-bg.png) no-repeat top center;
+  // background-attachment: fixed;
+}
+.detail {
+  overflow: hidden;
+
+  --van-nav-bar-background-color: transparent;
+  --van-nav-bar-icon-color: #fff;
+  --van-nav-bar-text-color: #fff;
+  --van-nav-bar-title-text-color: #fff;
+
+  .wxpopup {
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    img {
+      width: 88%;
+      margin: 0 6%;
+    }
+  }
+}
+.base {
+  :global(.van-sticky--fixed) {
+    box-shadow: 10px 10px 10px var(--box-shadow-color);
+  }
+}
+.img {
+  width: 94px;
+  height: 94px;
+  margin-right: 18px;
+  position: relative;
+  > img,
+  > div {
+    position: absolute;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+  &::before {
+    content: '';
+    width: 80px;
+    height: 80px;
+    border-radius: 9px;
+    background-color: var(--music-list-item-background-color);
+    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
+    position: absolute;
+    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;
+  }
+}
+.shareBtn {
+  display: flex;
+  align-items: flex-start;
+  color: #fff;
+  font-size: 14px;
+  line-height: 20px !important;
+  :global(.van-image) {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+}
+.detailContent {
+  background-color: white;
+  padding: 0 14px;
+  border-radius: 17px 17px 0px 0px;
+  .main {
+    padding-top: 24px;
+    padding-bottom: 20px;
+    display: flex;
+  }
+  .favoriteContaineer {
+    border: none;
+    color: var(--music-list-item-mate-color);
+    height: auto;
+    :global(.van-button__text) {
+      display: flex;
+      align-items: center;
+      span {
+        line-height: 1;
+        padding-top: 2px;
+      }
+    }
+    > span {
+      display: inline-block;
+      line-height: 16px;
+      margin-top: 1px;
+    }
+  }
+  .favorite {
+    font-size: 16px;
+    margin-right: 5px;
+  }
+  .content {
+    flex: 1;
+    display: inline-grid;
+    > h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 14px;
+      height: 20px;
+      line-height: 20px;
+      margin-top: 7px;
+      // word-break: break-all;
+      // text-overflow: ellipsis;
+    }
+    > p {
+      margin-top: 6px;
+      /* prettier-ignore */
+      font-size: 12PX;
+      color: var(--music-list-item-desc-color);
+      /* prettier-ignore */
+      line-height: 17PX;
+      /* prettier-ignore */
+      height: 51PX;
+    }
+  }
+}
+.footerBar {
+  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  > footer {
+    margin-top: 0;
+  }
+}
+
+.bgImg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 265px;
+  object-fit: cover;
+  filter: blur(10px);
+}
+.musicContent {
+  position: absolute;
+  top: 0;
+  height: 265px;
+  width: 100%;
+  padding-top: 55px;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.bg {
+  position: relative;
+  height: 100%;
+  padding: 16px;
+  z-index: 11;
+}
+.alumWrap {
+  display: flex;
+  align-items: center;
+  .img {
+    width: 115px;
+    height: 115px;
+    flex-shrink: 0;
+    border-radius: 6px;
+    overflow: hidden;
+    margin-right: 14px;
+  }
+  .alumTitle {
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+    padding-bottom: 8px;
+  }
+  .alumDes {
+    width: calc(100% - 129px);
+    .des {
+      color: #999;
+    }
+  }
+}
+.tags {
+  margin: 6px -2px 22px -2px;
+  .tag {
+    margin: 0 2px;
+    padding: 2px 6px;
+    color: #000;
+    background-color: rgba(113, 138, 147, 1);
+    border-radius: 20px;
+  }
+}
+.alumCollect {
+  display: flex;
+  align-items: center;
+  padding-top: 20px;
+  color: #999;
+  font-size: 14px;
+  img {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-right: 6px;
+  }
+  span {
+    padding-top: 1px;
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    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;
+  // margin-top: -16px;
+  z-index: 12;
+  .alumnList {
+    padding: 0 12px;
+    border-radius: 18px;
+    background-color: #fff;
+    margin-bottom: 16px;
+  }
+}
+
+.shareVip {
+  position: relative;
+  margin-top: 35px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 7px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .icon {
+    width: 72px;
+    height: 72px;
+    border-radius: 10px;
+  }
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
+    > h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 16px;
+      font-weight: 600;
+    }
+    > p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
+    }
+  }
+}
+
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  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: 24px;
+}

src/teacher/share-page/share-album/index.tsx

@@ -0,0 +1,229 @@
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import request from '@/helpers/request'
+import ColHeader from '@/components/col-header'
+import { postMessage } from '@/helpers/native-message'
+import { Button, Dialog, Icon, Image, List, NavBar, Popup, Sticky } from 'vant'
+import styles from './index.module.less'
+import { useRect } from '@vant/use'
+import { useEventListener, useWindowScroll } from '@vueuse/core'
+import { getRandomKey } from '@/views/music/music'
+import IconPan from './pan.png'
+import oStart from './oStart.png'
+import iStart from './iStart.png'
+import Title from '@/views/music/component/title'
+import Song from '@/views/music/component/song'
+import ColResult from '@/components/col-result'
+import MusicGrid from '@/views/music/component/music-grid'
+import ColSticky from '@/components/col-sticky'
+import { browser, moneyFormat } from '@/helpers/utils'
+import { initJumpNativePage, shareCall } from '../share'
+import wxImage from '../images/wx_bg.png'
+import qs from 'query-string'
+
+export default defineComponent({
+  name: 'AlbumDetail',
+  setup() {
+    localStorage.setItem('behaviorId', getRandomKey())
+    const router = useRouter()
+    const route = useRoute()
+    const params = reactive({
+      search: '',
+      relatedNum: 6, //相关专辑数
+      page: 1,
+      rows: 200
+    })
+    const albumDetail = ref<any>(null)
+    // const data = ref<any>(null)
+    const rows = ref<any[]>([])
+    const loading = ref(false)
+    // const finished = ref(false)
+    const isError = ref(false)
+    const favorited = ref(0)
+    const albumFavoriteCount = ref(0)
+    const headers = ref(null)
+    const background = ref<string>('rgba(55, 205, 177, 0)')
+    const color = ref<string>('#fff')
+    const heightInfo = ref<any>('auto')
+
+    const tmpUrl = `${location.origin}/student/#/music-album-detail/${
+      route.query.id
+    }?${qs.stringify(route.query)}`
+    const jumpUrl = ref<string>(tmpUrl)
+
+    const FetchList = async (id?: any) => {
+      if (loading.value) {
+        return
+      }
+      loading.value = true
+      isError.value = false
+      try {
+        const res = await request.post('/api-teacher/open/albumShareProfit', {
+          data: { bizId: id || route.query.id, userId: route.query.recomUserId }
+        })
+        const { musicSheetList, ...rest } = res.data.musicAlbum
+        rows.value = [...musicSheetList.rows]
+        const musicTagNames = rest?.musicTagNames?.split(',') || []
+        albumDetail.value = {
+          ...rest,
+          musicTagNames
+        }
+        favorited.value = rest.favorite
+        albumFavoriteCount.value = rest.albumFavoriteCount
+      } catch (error) {
+        isError.value = true
+      }
+      loading.value = false
+    }
+
+    onMounted(() => {
+      console.log(jumpUrl.value)
+      initJumpNativePage(jumpUrl.value)
+      FetchList()
+      useEventListener(document, 'scroll', evt => {
+        const { y } = useWindowScroll()
+        if (y.value > 20) {
+          background.value = `rgba(255, 255, 255)`
+          color.value = 'black'
+        } else {
+          background.value = 'transparent'
+          color.value = '#fff'
+        }
+      })
+    })
+
+    const wxStatus = ref<boolean>(false)
+    const onShare = () => {
+      console.log(browser().weixin)
+      if (browser().weixin) {
+        wxStatus.value = true
+        return
+      }
+      // 尝试拉起app
+      shareCall(jumpUrl.value)
+      // 不管有没有拉起app则都跳转到下载app
+      setTimeout(() => {
+        window.location.href = location.origin + '/student/#/download'
+      }, 3000)
+    }
+
+    return () => {
+      return (
+        <div class={styles.detail}>
+          <div ref={headers}>
+            <ColHeader
+              background={background.value}
+              border={false}
+              color={color.value}
+              backIconColor="white"
+              onHeaderBack={() => {
+                nextTick(() => {
+                  const { height } = useRect(headers as any)
+                  heightInfo.value = height
+                })
+              }}
+            />
+          </div>
+          <img class={styles.bgImg} src={albumDetail.value?.albumCoverUrl} />
+          <div class={styles.musicContent}></div>
+          <div class={styles.bg}>
+            <div class={styles.alumWrap}>
+              <div class={styles.img}>
+                {albumDetail.value?.paymentType === 'CHARGE' && (
+                  <span class={styles.albumType}>付费</span>
+                )}
+                <Image
+                  class={styles.image}
+                  width="100%"
+                  height="100%"
+                  fit="cover"
+                  src={albumDetail.value?.albumCoverUrl}
+                />
+              </div>
+              <div class={styles.alumDes}>
+                <div class={[styles.alumTitle, 'van-ellipsis']}>
+                  {albumDetail.value?.albumName}
+                </div>
+                <div class={styles.tags}>
+                  {albumDetail.value?.musicTagNames?.map((tag: any) => (
+                    <span class={styles.tag}>{tag}</span>
+                  ))}
+                </div>
+                <div
+                  class={[styles.des, 'van-multi-ellipsis--l3']}
+                  style={{
+                    height: '48px',
+                    lineHeight: '16px'
+                  }}
+                >
+                  {albumDetail.value?.albumDesc}
+                </div>
+              </div>
+            </div>
+            <div class={styles.alumCollect}>
+              <img src={IconPan} />
+              <span>共{albumDetail.value?.musicSheetCount}首曲目</span>
+              <div class={styles.right}>
+                <img src={favorited.value ? iStart : oStart} />
+                <span>{albumFavoriteCount.value}人收藏</span>
+              </div>
+            </div>
+          </div>
+          <div class={styles.alumnContainer}>
+            <div class={styles.alumnList}>
+              <Title title="曲目列表" isMore={false} />
+              <Song list={rows.value} showMore={false} showPlay={false} />
+
+              {rows.value && rows.value.length <= 0 && (
+                <ColResult btnStatus={false} tips="暂无曲目" />
+              )}
+            </div>
+
+            {/* {albumDetail.value?.relatedMusicAlbum &&
+              albumDetail.value?.relatedMusicAlbum.length > 0 && (
+                <>
+                  <Title
+                    title="相关专辑"
+                    onMore={() => {
+                      router.push({
+                        path: '/music-album'
+                      })
+                    }}
+                  />
+
+                  <MusicGrid
+                    list={albumDetail.value?.relatedMusicAlbum}
+                  />
+                </>
+              )} */}
+          </div>
+
+          <ColSticky position="bottom" background="white">
+            <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
+              <Button
+                block
+                round
+                type="primary"
+                onClick={onShare}
+                color="linear-gradient(220deg, #DFA164 0%, #FAC87E 100%)"
+              >
+                下载小酷Ai开始练习吧！
+              </Button>
+            </div>
+          </ColSticky>
+
+          {wxStatus.value && (
+            <div
+              class={styles.wxpopup}
+              onClick={() => {
+                wxStatus.value = false
+              }}
+            >
+              <img src={wxImage} alt="" />
+            </div>
+          )}
+        </div>
+      )
+    }
+  }
+})

src/teacher/share-page/share-vip/index.tsx

@@ -21,7 +21,8 @@ export default defineComponent({
   name: 'MemberCenter',
   data() {
     const query = this.$route.query
-    query.recomUserId = query.userType && query.userType == 'STUDENT' ? '' : query.recomUserId
+    query.recomUserId =
+      query.userType && query.userType == 'STUDENT' ? '' : query.recomUserId
     const tmpUrl = `${location.origin}/student/#/memberCenter?${qs.stringify(
       query
     )}`

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

@@ -52,6 +52,18 @@
     z-index: 9;
   }
 }
+.shareBtn {
+  display: flex;
+  align-items: flex-start;
+  color: #fff;
+  font-size: 14px;
+  line-height: 20px !important;
+  :global(.van-image) {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+}
 .detailContent {
   background-color: white;
   padding: 0 14px;
@@ -227,3 +239,48 @@
     margin-bottom: 16px;
   }
 }
+
+.shareVip {
+  position: relative;
+  margin-top: 35px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 7px;
+  background: #ffffff;
+  border-radius: 10px;
+
+  .icon {
+    width: 72px;
+    height: 72px;
+    border-radius: 10px;
+  }
+  .info {
+    margin-left: 6px;
+    flex: 1;
+    word-break: break-all;
+    > h4 {
+      color: var(--music-list-item-title-color);
+      font-size: 16px;
+      font-weight: 600;
+    }
+    > p {
+      color: var(--music-list-item-mate-color);
+      line-height: 17px;
+    }
+  }
+}
+
+.tagDiscount {
+  position: absolute;
+  top: -23px;
+  left: 15px;
+  padding: 0 10px;
+  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: 24px;
+}

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

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
 import { postMessage } from '@/helpers/native-message'
-import { Button, Dialog, Icon, Image, List, NavBar, Sticky } from 'vant'
+import { Button, Dialog, Icon, Image, List, NavBar, Popup, Sticky } from 'vant'
 // import classNames from 'classnames'
 // import Footer from '../album/footer'
 // import FavoriteIcon from '../album/favorite.svg'
@@ -25,6 +25,8 @@ import { useEventTracking } from '@/helpers/hooks'
 import ColSticky from '@/components/col-sticky'
 import { moneyFormat } from '@/helpers/utils'
 import { orderStatus } from '@/views/order-detail/orderStatus'
+import iconShare from './icon_share.png'
+import ColShare from '@/components/col-share'
 
 const noop = () => {}
 
@@ -131,13 +133,14 @@ export default defineComponent({
       orderStatus.orderObject.orderName = album.albumName
       orderStatus.orderObject.orderDesc = album.albumName
       orderStatus.orderObject.actualPrice = album.albumPrice
-      // orderStatus.orderObject.recomUserId = this.recomUserId
-      // orderStatus.orderObject.activityId = this.activityId
+      orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
+      orderStatus.orderObject.activityId = route.query.activityId || 0
       orderStatus.orderObject.orderNo = ''
       orderStatus.orderObject.orderList = [
         {
           orderType: 'ALBUM',
           goodsName: album.albumName,
+          recomUserId: route.query.recomUserId || 0,
           price: album.albumPrice,
           ...album
         }
@@ -201,6 +204,32 @@ export default defineComponent({
       } catch {}
     }
 
+    const shareStatus = ref<boolean>(false)
+    const shareUrl = ref<string>('')
+    const shareDiscount = ref<number>(0)
+    const onShare = async () => {
+      const userId = state.user.data.userId
+      const id = route.params.id
+      let activityId = 0
+      console.log(state.user, userId)
+      if (state.platformType === 'TEACHER') {
+        const res = await request.post('/api-teacher/open/vipProfit', {
+          data: {
+            bizId: id,
+            userId
+          }
+        })
+        activityId = res.data.activityId || 0
+        shareDiscount.value = res.data.discount || 0
+      }
+
+      shareDiscount.value = 1
+      activityId = 1053
+      shareUrl.value = `${location.origin}/teacher#/shareAblum?id=${id}&recomUserId=${userId}&activityId=${activityId}&userType=${state.platformType}`
+      console.log(shareUrl.value, 'shareUrl')
+      shareStatus.value = true
+    }
+
     return () => {
       return (
         <div class={styles.detail}>
@@ -216,6 +245,14 @@ export default defineComponent({
                   heightInfo.value = height
                 })
               }}
+              v-slots={{
+                right: () => (
+                  <div class={styles.shareBtn} onClick={onShare}>
+                    <Image src={iconShare} />
+                    分享
+                  </div>
+                )
+              }}
             />
           </div>
           <img class={styles.bgImg} src={albumDetail.value?.albumCoverUrl} />
@@ -360,7 +397,12 @@ export default defineComponent({
                         type="primary"
                         style={{ fontSize: '16px' }}
                         onClick={() => {
-                          router.push('/memberCenter')
+                          router.push({
+                            path: '/memberCenter',
+                            query: {
+                              ...route.query
+                            }
+                          })
                         }}
                       >
                         开通会员
@@ -369,6 +411,43 @@ export default defineComponent({
                 </div>
               </ColSticky>
             )}
+
+          <Popup
+            v-model:show={shareStatus.value}
+            style={{ background: 'transparent' }}
+          >
+            <ColShare
+              teacherId={state.user.data.userId}
+              shareUrl={shareUrl.value}
+              shareType="album"
+              shareLength={1}
+            >
+              <div class={styles.shareVip}>
+                {shareDiscount.value === 1 && (
+                  <div class={styles.tagDiscount}>专属优惠</div>
+                )}
+
+                <img
+                  class={styles.icon}
+                  src={albumDetail.value?.albumCoverUrl}
+                />
+                <div class={styles.info}>
+                  <h4 class="van-multi-ellipsis--l2">
+                    {albumDetail.value?.albumName}
+                  </h4>
+                  <p
+                    class={['van-multi-ellipsis--l3']}
+                    style={{
+                      height: '48px',
+                      lineHeight: '16px'
+                    }}
+                  >
+                    {albumDetail.value?.albumDesc}
+                  </p>
+                </div>
+              </div>
+            </ColShare>
+          </Popup>
         </div>
       )
     }

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

@@ -25,6 +25,10 @@ export default defineComponent({
     showMore: {
       type: Boolean,
       default: true
+    },
+    showPlay: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['detail'],
@@ -153,7 +157,7 @@ export default defineComponent({
                 </div>
               </div>
               <div class={styles.play}>
-                <Icon name={IconPlay} size={28} />
+                {props.showPlay && <Icon name={IconPlay} size={28} />}
 
                 {props.showMore && (
                   <span class={styles.moreSection}>

src/views/music/songbook/album.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { Image, Skeleton, Cell } from 'vant'
+import { Image, Skeleton, Cell, Icon } from 'vant'
 import request from '@/helpers/request'
 import { useAsyncState } from '@vueuse/core'
 import styles from './index.module.less'
@@ -7,6 +7,8 @@ import classNames from 'classnames'
 import { useRoute, useRouter } from 'vue-router'
 import { state as tempState } from '@/state'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import IconXin from '@/common/images/icon-xin.png'
+import IconXinActive from '@/common/images/icon-xin-active.png'
 
 export default defineComponent({
   name: 'Songbook',
@@ -43,10 +45,18 @@ export default defineComponent({
           <>
             <Cell
               class={styles.title}
+              titleClass={styles.cellTitle}
               title="专辑"
-              is-link
+              // is-link
               to="/music-album"
-              value="更多"
+              v-slots={{
+                value: () => (
+                  <span class={styles.cellValue}>
+                    更多
+                    <Icon name="arrow" />
+                  </span>
+                )
+              }}
               border={false}
             />
             <div class={styles.albumContainer}>
@@ -61,9 +71,15 @@ export default defineComponent({
                       <span class={styles.albumType}>付费</span>
                     )}
                     <Image class={styles.img} src={item.albumCoverUrl} />
-                    <p class={styles.favorite}>
+                    {/* <p class={styles.favorite}>
                       <span>{item.albumFavoriteCount}</span>人收藏
-                    </p>
+                    </p> */}
+                    <div class={styles.model}>
+                      <Icon name={item.favorite ? IconXinActive : IconXin} />
+                      <span class={styles.num}>
+                        {item.albumFavoriteCount}人
+                      </span>
+                    </div>
                   </div>
                   <h4 class={classNames(styles.title, 'van-ellipsis')}>
                     {item.albumName}

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

@@ -21,6 +21,20 @@
     font-size: 12px;
   }
 }
+.cellTitle {
+  font-size: 17px;
+  color: #333;
+  font-weight: 600;
+}
+.cellValue {
+  line-height: 20px;
+  height: 20px;
+  padding: 0 5px 0 7px;
+  background: #dfefec;
+  display: inline-block;
+  border-radius: 9px;
+  color: var(--van-primary);
+}
 .albumContainer::-webkit-scrollbar {
   display: none; /* Chrome Safari */
 }
@@ -77,22 +91,44 @@
         border-radius: 10px;
         overflow: hidden;
       }
-      &::before {
-        content: '';
-        width: 80px;
-        height: 80px;
-        border-radius: 9px;
-        background-color: #fff;
-        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
-        position: absolute;
-        right: -6px;
-        top: 8px;
-      }
+      // &::before {
+      //   content: '';
+      //   width: 80px;
+      //   height: 80px;
+      //   border-radius: 9px;
+      //   background-color: #fff;
+      //   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
+      //   position: absolute;
+      //   right: -6px;
+      //   top: 8px;
+      // }
     }
     .title {
+      padding-top: 8px;
+      font-size: 14px;
+      color: #333;
+      font-weight: 400;
       width: 94px;
       text-align: center;
     }
+    .model {
+      position: absolute;
+      left: 4px;
+      bottom: 4px;
+      background: rgba(67, 67, 67, 0.6);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      display: flex;
+      align-items: center;
+      padding: 4px 6px;
+      border-radius: 20px;
+      font-size: 12px;
+      color: #fff;
+      transform: scale(0.9);
+    }
+    .num {
+      margin-left: 3px;
+    }
   }
 }
 

src/views/music/songbook/list.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, reactive, ref } from 'vue'
-import { Cell, Image, List } from 'vant'
+import { Cell, Icon, Image, List } from 'vant'
 import request from '@/helpers/request'
 // import { useAsyncState } from '@vueuse/core'
 // import Item from '../list/item'
@@ -73,11 +73,17 @@ export default defineComponent({
         {data.value && data.value.rows.length > 0 && (
           <Cell
             class={styles.title}
+            titleClass={styles.cellTitle}
             title="曲谱"
-            is-link
             to="/music-list"
-            value="更多"
             border={false}
+            v-slots={{
+              value: () => (
+                <span class={styles.cellValue}>
+                  更多 <Icon name="arrow" />
+                </span>
+              )
+            }}
           />
         )}