样式发自

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

@@ -72,6 +72,7 @@
   width: 50px;
   height: 50px;
   border-radius: 10px;
+  overflow: hidden;
   flex-shrink: 0;
 }
 
@@ -91,3 +92,69 @@
     line-height: 17px;
   }
 }
+
+.collection {
+  width: 13px;
+  height: 12px;
+  margin-right: 8px;
+}
+
+.musicInfo {
+  padding-top: 23px;
+  padding-bottom: 23px;
+  margin-bottom: 10px;
+}
+
+.shareIcon {
+  display: flex;
+  width: 22px;
+  height: 19px;
+  margin-right: 14px;
+}
+
+.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;
+  }
+}

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

@@ -1,9 +1,18 @@
-import { CellGroup, Cell, Icon, Image, Popup, Tag } from 'vant'
+import { CellGroup, Cell, Icon, Image, Popup, Tag, Toast } from 'vant'
 import { defineComponent, PropType, ref } from 'vue'
 import styles from './index.module.less'
 import IconPlay from '@/common/images/icon-play.png'
 import IconMore from '@/common/images/icon_more.png'
 import { useRouter } from 'vue-router'
+import { state } from '@/state'
+import request from '@/helpers/request'
+import ColShare from '@/components/col-share'
+import MusicIcon from '../../list/icons/music-icon.png'
+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: {
@@ -31,6 +40,48 @@ export default defineComponent({
         text: '点播'
       }
     }
+
+    const toggleFavorite = async () => {
+      try {
+        await request.post('/music/sheet/favorite/' + moreData.value.id, {
+          prefix:
+            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
+        })
+        moreData.value.favorite = moreData.value.favorite ? 0 : 1
+        setTimeout(() => {
+          Toast(moreData.value.favorite ? '收藏成功' : '取消收藏成功')
+          isMore.value = false
+        }, 100)
+      } catch (error) {}
+    }
+
+    const shareStatus = ref(false)
+    const shareUrl = ref('')
+    const shareDiscount = ref(0)
+    // console.log(data)
+    const onShare = async () => {
+      try {
+        const res = await request.post('/api-teacher/open/musicShareProfit', {
+          data: {
+            bizId: moreData.value.id,
+            userId: state.user.data?.userId
+          }
+        })
+        let url =
+          location.origin +
+          `/accompany/colexiu-share.html?id=${moreData.value.id}&recomUserId=${state.user.data?.userId}`
+        // 判断是否有活动
+        if (res.data.discount === 1) {
+          url += `&activityId=${res.data.activityId}`
+        }
+        shareDiscount.value = res.data.discount || 0
+        shareUrl.value = url
+        isMore.value = false
+        shareStatus.value = true
+        return
+      } catch {}
+    }
+
     return () => (
       <div class={styles.theSong}>
         {props.list.map((n: any) => (
@@ -53,6 +104,12 @@ export default defineComponent({
                 </span>
               </div>
               <div class={styles.user}>
+                {n.favorite === 1 && (
+                  <Image
+                    src={getAssetsHomeFile('collection_active.png')}
+                    class={styles.collection}
+                  />
+                )}
                 {n.addName ? (
                   <span class={styles.name}>上传者：{n.addName}</span>
                 ) : (
@@ -85,6 +142,7 @@ export default defineComponent({
           <CellGroup border={false}>
             <Cell
               center
+              class={styles.musicInfo}
               v-slots={{
                 icon: () => (
                   <Image class={styles.pImg} src={moreData?.value.titleImg} />
@@ -112,13 +170,122 @@ export default defineComponent({
                 )
               }}
             />
-            <Cell border={false} size="large" title={'收藏曲目'} />
-            <Cell border={false} size="large" title={'分享曲目'} />
-            <Cell border={false} size="large" title={'作曲：xxx'} />
-            <Cell border={false} size="large" title={`上传：xxx`} />
-            <Cell border={false} size="large" title={'小酷Ai练习'} />
+            {state.platformType === 'STUDENT' && (
+              <Cell
+                border={false}
+                size="large"
+                title={moreData.value.favorite ? '取消收藏' : '收藏曲目'}
+                center
+                onClick={() => toggleFavorite()}
+                v-slots={{
+                  icon: () => (
+                    <div class={styles.shareIcon}>
+                      <Image
+                        src={
+                          moreData.value.favorite
+                            ? getAssetsHomeFile('collection_active.png')
+                            : getAssetsHomeFile('collection.png')
+                        }
+                      />
+                    </div>
+                  )
+                }}
+              />
+            )}
+            {state.platformType !== 'TEACHER' && (
+              <Cell
+                border={false}
+                size="large"
+                title={'分享曲目'}
+                onClick={() => onShare()}
+                v-slots={{
+                  icon: () => (
+                    <div class={styles.shareIcon}>
+                      <Image src={getAssetsHomeFile('icon_share.png')} />
+                    </div>
+                  )
+                }}
+              />
+            )}
+
+            <Cell
+              border={false}
+              size="large"
+              title={`作曲：${moreData.value?.composer}`}
+              v-slots={{
+                icon: () => (
+                  <div class={styles.shareIcon}>
+                    <Image src={getAssetsHomeFile('icon_author.png')} />
+                  </div>
+                )
+              }}
+            />
+            <Cell
+              border={false}
+              size="large"
+              title={`上传：${moreData.value?.addName || '--'}`}
+              v-slots={{
+                icon: () => (
+                  <div class={styles.shareIcon}>
+                    <Image src={getAssetsHomeFile('icon_uploader.png')} />
+                  </div>
+                )
+              }}
+            />
+            <Cell
+              border={false}
+              size="large"
+              title={'小酷Ai练习'}
+              isLink
+              style={{ marginBottom: '30px' }}
+              onClick={() => {
+                isMore.value = false
+                emit('detail', moreData.value)
+              }}
+              v-slots={{
+                icon: () => (
+                  <div class={styles.shareIcon}>
+                    <Image src={getAssetsHomeFile('icon_ai.png')} />
+                  </div>
+                )
+              }}
+            />
           </CellGroup>
         </Popup>
+
+        <Popup
+          v-model:show={shareStatus.value}
+          style={{ background: 'transparent' }}
+          teleport="body"
+        >
+          <ColShare
+            teacherId={moreData.value?.userId}
+            shareUrl={shareUrl.value}
+            shareType="music"
+          >
+            <div class={styles.shareMate}>
+              {shareDiscount.value === 1 && (
+                <div class={styles.tagDiscount}>专属优惠</div>
+              )}
+
+              <img
+                class={styles.icon}
+                crossorigin="anonymous"
+                src={
+                  moreData.value?.titleImg +
+                    `@base@tag=imgScale&h=80&w=80&m=1?t=${+new Date()}` ||
+                  MusicIcon
+                }
+              />
+              <div class={styles.info}>
+                <h4 class="van-multi-ellipsis--l2">
+                  {moreData.value?.musicSheetName}
+                </h4>
+                <p>作曲人：{moreData.value?.composer}</p>
+              </div>
+            </div>
+          </ColShare>
+        </Popup>
       </div>
     )
   }