专辑和曲谱添加对应标签的列表

src/components/albumItem/index.module.less

@@ -2,19 +2,36 @@
   margin-bottom: 25px;
   margin-right: 14px;
   position: relative;
-
+  .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;
+  }
   &:hover {
+    .albumType {
+      transform: translateY(-10px);
+      transition: linear 0.1s;
+    }
     .hold {
       transform: translateY(-10px);
       transition: linear 0.1s;
       .masker {
         // transition: all linear 0.2s;
         visibility: visible;
+        z-index: 99;
         img {
           width: 48px;
           height: 48px;
           animation-name: showPaly;
-          animation-duration: .6s;
+          animation-duration: 0.6s;
           animation-timing-function: linear;
           animation-fill-mode: forwards;
           // animation-delay: 1s;
@@ -22,12 +39,10 @@
       }
       @keyframes showPaly {
         0% {
-         transform: scale(.5);
-
+          transform: scale(0.5);
         }
         50% {
           transform: scale(1.2);
-
         }
         100% {
           transform: scale(1);
@@ -53,6 +68,7 @@
       align-items: center;
       justify-content: center;
       position: absolute;
+      z-index: 99;
       img {
         width: 48px;
         height: 48px;

src/components/albumItem/index.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
         topFlag: null,
         updateBy: 34,
         updateTime: '',
-        favorite:0
+        favorite: 0
       } as any
     }
   },
@@ -57,7 +57,14 @@ export default defineComponent({
             gotoAlbum()
           }}
         >
-          <img class={classes.startImage} src={state.detail.favorite?lineStart:start} alt="" />
+          {state.detail.paymentType === 'CHARGE' && (
+            <span class={classes.albumType}>付费</span>
+          )}
+          <img
+            class={classes.startImage}
+            src={state.detail.favorite ? lineStart : start}
+            alt=""
+          />
           <div class={classes.hold}>
             <div class={classes.masker}>
               <img src={player} alt="" />

src/components/musicLIstItem/index.module.less

@@ -176,7 +176,7 @@
         border: 1px solid #4ca751;
         display: flex;
         margin-left: 10px;
-        
+
         .touchButtonWrap {
           width: 54px;
           height: 100%;
@@ -234,3 +234,10 @@
   height: 22px;
   margin-right: 8px;
 }
+
+.iconAlbum {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}

src/components/musicLIstItem/index.tsx

@@ -11,6 +11,7 @@ import { useRouter } from 'vue-router'
 import start from '@/common/images/start.png'
 import lineStart from '@/common/images/lineStart.png'
 import iconFine from '@/common/images/icon_fine.png'
+import iconAlbum from '@/common/images/icon_album_active.png'
 import { isArray } from 'lib/tool'
 
 type Props = {
@@ -84,6 +85,10 @@ export default defineComponent({
                     <img src={iconFine} class={classes.iconFine} />
                   )}
 
+                  {state.item.albumNums > 0 && (
+                    <img src={iconAlbum} class={classes.iconAlbum} />
+                  )}
+
                   {state.item.musicSheetName}
                 </p>
                 <p class={classes.authorName}>作曲:{state.item.composer}</p>

src/views/albumDetail/index.module.less

@@ -15,7 +15,7 @@
   flex-direction: row;
   padding: 20px 0;
   .left {
-    border-right: 1px solid #E7E6E6;
+    border-right: 1px solid #e7e6e6;
     width: 629px;
     .albumInfo {
       padding: 0 25px;
@@ -42,6 +42,19 @@
         display: flex;
         flex-direction: row;
         margin-bottom: 66px;
+        .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: 999;
+        }
         .albumInfoTopImg {
           position: relative;
           width: 190px;
@@ -65,7 +78,7 @@
           // }
         }
         .albumInfoTopConent {
-          flex:1;
+          flex: 1;
           h2 {
             font-size: 24px;
             font-family: PingFangSC-Semibold, PingFang SC;

src/views/albumDetail/index.tsx

@@ -77,10 +77,14 @@ export default defineComponent({
         } else {
           state.isshowData = false
         }
-        state.musicList = Array.isArray(res.data.musicSheetList.rows) && res.data.musicSheetList.rows.map(n => {
-          if (typeof n.paymentType === "string") n.paymentType = n.paymentType.split(',')
-          return n
-        }) || []
+        state.musicList =
+          (Array.isArray(res.data.musicSheetList.rows) &&
+            res.data.musicSheetList.rows.map(n => {
+              if (typeof n.paymentType === 'string')
+                n.paymentType = n.paymentType.split(',')
+              return n
+            })) ||
+          []
         state.hotList = res.data.hotMusicAlbum
         state.hotTagList = res.data.musicTagNames.split(',') || []
         state.relatedMusicAlbum = res.data.relatedMusicAlbum
@@ -142,6 +146,9 @@ export default defineComponent({
 
                 <div class={classes.albumInfoTop}>
                   <div class={classes.albumInfoTopImg}>
+                    {state.details.paymentType === 'CHARGE' && (
+                      <span class={classes.albumType}>付费</span>
+                    )}
                     <img
                       src={
                         state.details.albumCoverUrl
@@ -167,8 +174,14 @@ export default defineComponent({
                           <span>共{state.details.musicSheetCount}首曲目</span>
                         </div>
                         <div class={classes.itemBottomR}>
-                          <img src={state.details.favorite ?oLineStart:oStart} alt=""     onClick={() => favoriteAlbum()}/>
-                          <span>共{state.details.albumFavoriteCount}人收藏</span>
+                          <img
+                            src={state.details.favorite ? oLineStart : oStart}
+                            alt=""
+                            onClick={() => favoriteAlbum()}
+                          />
+                          <span>
+                            共{state.details.albumFavoriteCount}人收藏
+                          </span>
                         </div>
                       </div>
                       {/* {state.userType == 'STUDENT' ? (
@@ -193,10 +206,9 @@ export default defineComponent({
               </div>
               <div class={classes.musicWrap}>
                 <div class={classes.title}>
-
                   <span>曲目列表</span>
                   <div class={classes.dot}>
-                      <img src={titleDot} alt="" />
+                    <img src={titleDot} alt="" />
                   </div>
                 </div>
                 <div class={classes.musicList}>

src/views/albumDetail/modals/albumItem/index.module.less

@@ -2,7 +2,19 @@
   margin-bottom: 20px;
   margin-right: 13px;
   position: relative;
-
+  .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;
+  }
   &:hover {
     .hold {
       // transform: translateY(-10px);
@@ -14,7 +26,7 @@
           width: 48px;
           height: 48px;
           animation-name: showPaly;
-          animation-duration: .6s;
+          animation-duration: 0.6s;
           animation-timing-function: linear;
           animation-fill-mode: forwards;
           // animation-delay: 1s;
@@ -22,12 +34,10 @@
       }
       @keyframes showPaly {
         0% {
-         transform: scale(.5);
-
+          transform: scale(0.5);
         }
         50% {
           transform: scale(1.2);
-
         }
         100% {
           transform: scale(1);

src/views/albumDetail/modals/albumItem/index.tsx

@@ -58,6 +58,9 @@ export default defineComponent({
             gotoAlbum()
           }}
         >
+          {state.detail?.paymentType === 'CHARGE' && (
+            <span class={classes.albumType}>付费</span>
+          )}
           <img
             class={classes.startImage}
             src={state.detail?.favorite ? lineStart : start}

src/views/home/index.tsx

@@ -43,9 +43,9 @@ export default defineComponent({
           data: {
             albumStatus: 1,
             page: 1,
-            rows: 8,
+            rows: 8
           },
-          params:{
+          params: {
             clientType: getUserType()
           }
         })
@@ -73,13 +73,13 @@ export default defineComponent({
         console.log(e)
       }
     }
-    const gotoSearch = (val: string,type:any) => {
-      router.push({ name: 'searchdetail', params: { search: val,type } })
+    const gotoSearch = (val: string, type: any) => {
+      router.push({ name: 'searchdetail', params: { search: val, type } })
     }
     const getTagTree = async () => {
       try {
         const res = await request.get('/api-website/open/MusicTag/tree', {})
-        state.tagTree = res.data.splice(0,2)
+        state.tagTree = res.data.splice(0, 2)
 
         // state.hotList = res.data
       } catch (e) {
@@ -87,11 +87,18 @@ export default defineComponent({
       }
     }
     const gotoVideoList = () => {
-      router.push({ path: '/videoDetailList',  })
+      router.push({ path: '/videoDetailList' })
     }
 
-    const gotoSearchTag = (tag:any) =>{
-      router.push({ name: 'searchdetail', params: { search: state.search,tag:tag.id,parentTagId:tag.parentTagId } })
+    const gotoSearchTag = (tag: any) => {
+      router.push({
+        name: 'searchdetail',
+        params: {
+          search: state.search,
+          tag: tag.id,
+          parentTagId: tag.parentTagId
+        }
+      })
     }
     //
     onMounted(() => {
@@ -118,7 +125,10 @@ export default defineComponent({
                       <h4>热门专辑</h4>
                       <img src={titleDot} class={styles.dotImg} alt="" />
                     </div>
-                    <div class={[styles.titleWrapMore]}    onClick={() => gotoSearch('','album')}>
+                    <div
+                      class={[styles.titleWrapMore]}
+                      onClick={() => gotoSearch('', 'album')}
+                    >
                       <span>更多</span>
                       <img src={moreArrow} alt="" />
                     </div>
@@ -135,7 +145,7 @@ export default defineComponent({
                     <img
                       src={searchIcon}
                       class={styles.searchIcon}
-                      onClick={()=>gotoSearch(state.search,'music')}
+                      onClick={() => gotoSearch(state.search, 'music')}
                       alt=""
                     />
                     <ElInput

src/views/muiscDetial/modals/musicItem.module.less

@@ -46,6 +46,12 @@
         height: 22px;
         margin-right: 8px;
       }
+      .iconAlbum {
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        margin-right: 8px;
+      }
       .authorInfo {
         display: flex;
         flex-direction: row;

src/views/muiscDetial/modals/musicItem.tsx

@@ -6,6 +6,7 @@ import arrow from '@/components/musicLIstItem/images/arrow.png'
 import { useRouter } from 'vue-router'
 import { ElTooltip } from 'element-plus'
 import iconFine from '@/common/images/icon_fine.png'
+import iconAlbum from '@/common/images/icon_album_active.png'
 type Props = {
   id?: Number
   addName: String
@@ -68,6 +69,10 @@ export default defineComponent({
                 {state.item.exquisiteFlag === 1 && (
                   <img src={iconFine} class={classes.iconFine} />
                 )}
+
+                {state.item.albumNums > 0 && (
+                  <img src={iconAlbum} class={classes.iconAlbum} />
+                )}
                 <ElTooltip placement="top" content={state.item.musicSheetName}>
                   {state.item.musicSheetName}
                 </ElTooltip>

src/views/musicLibrary/index.tsx

@@ -53,9 +53,9 @@ export default defineComponent({
             albumStatus: 1,
             page: 1,
             subjectIds: subjectId ? subjectId : null,
-            rows: 10,
+            rows: 10
           },
-          params:{
+          params: {
             clientType: getUserType()
           }
         })

src/views/musicLibrary/modals/albumItem/index.module.less

@@ -2,7 +2,19 @@
   margin-bottom: 30px;
   margin-right: 18px;
   position: relative;
-
+  .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;
+  }
   &:hover {
     .hold {
       // transform: translateY(-10px);
@@ -14,7 +26,7 @@
           width: 48px;
           height: 48px;
           animation-name: showPaly;
-          animation-duration: .6s;
+          animation-duration: 0.6s;
           animation-timing-function: linear;
           animation-fill-mode: forwards;
           // animation-delay: 1s;
@@ -22,12 +34,10 @@
       }
       @keyframes showPaly {
         0% {
-         transform: scale(.5);
-
+          transform: scale(0.5);
         }
         50% {
           transform: scale(1.2);
-
         }
         100% {
           transform: scale(1);

src/views/musicLibrary/modals/albumItem/index.tsx

@@ -59,6 +59,9 @@ export default defineComponent({
             gotoAlbum()
           }}
         >
+          {state.detail?.paymentType === 'CHARGE' && (
+            <span class={classes.albumType}>付费</span>
+          )}
           <img
             class={classes.startImage}
             src={state.detail?.favorite ? lineStart : start}

src/views/student-info/components/item/index.module.less

@@ -0,0 +1,13 @@
+.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: 999;
+}

src/views/student-info/components/item/index.tsx

@@ -4,6 +4,7 @@ import pan from '../../images/pan.png'
 import start from '../../images/start.png'
 import hold from '../../images/hold.png'
 import iconStart from '../../images/icon_start.png'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'item',
@@ -20,9 +21,15 @@ export default defineComponent({
   render() {
     const item = this.item
     return (
-      <div class="rounded-[10px] w-[156px] cursor-pointer overflow-hidden relative transition-all" onClick={() => {
-        this.onItemClick(item)
-      }}>
+      <div
+        class="rounded-[10px] w-[156px] cursor-pointer overflow-hidden relative transition-all"
+        onClick={() => {
+          this.onItemClick(item)
+        }}
+      >
+        {item.paymentType === 'CHARGE' && (
+          <span class={styles.albumType}>付费</span>
+        )}
         <ElImage src={iconStart} class="w-6 h-6 !absolute top-2 right-4 z-10" />
 
         <ElImage

src/views/student-info/my-score/album-my.tsx

@@ -0,0 +1,129 @@
+import ColEmpty from '@/components/col-empty'
+import Pagination from '@/components/pagination'
+import request from '@/helpers/request'
+import styles from './index.module.less'
+import { ElSkeleton, ElSkeletonItem } from 'element-plus'
+import { defineComponent } from 'vue'
+import Item from '../components/item'
+import { getUserType } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'list',
+  data() {
+    return {
+      clientType: '',
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      list: [] as any[],
+      loading: false,
+      dataShow: false // 是否有数据
+    }
+  },
+  mounted() {
+    const clientType = getUserType()
+    if (clientType === 'TEACHER') this.clientType = clientType
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      this.loading = true
+      try {
+        const { data } = await request.get(
+          '/api-website/music/album/purchased',
+          {
+            params: {
+              page: this.pageInfo.page,
+              rows: this.pageInfo.limit,
+              clientType: this.clientType
+            }
+          }
+        )
+        this.list = data.rows || []
+        this.pageInfo.total = data.total
+        if (data.total <= 0) {
+          this.dataShow = true
+        }
+      } catch {}
+      if (this.dataShow) {
+        this.loading = false
+      } else {
+        setTimeout(() => {
+          this.loading = false
+        }, 200)
+      }
+    }
+  },
+  render() {
+    return (
+      <>
+        <div class="flex flex-wrap">
+          <ElSkeleton
+            loading={this.loading}
+            animated
+            class="px-[14px] flex items-center flex-row justify-between"
+            count={4}
+            v-slots={{
+              template: () => (
+                <div class="flex items-center flex-col justify-between w-[156px]">
+                  <ElSkeletonItem
+                    variant="image"
+                    style={{ width: '156px', height: '156px' }}
+                  ></ElSkeletonItem>
+                  <ElSkeletonItem
+                    variant="p"
+                    style={{ width: '100%', margin: '4px 0' }}
+                  ></ElSkeletonItem>
+                  <div class="flex w-full justify-between">
+                    <ElSkeletonItem
+                      variant="p"
+                      style={{ width: '35%' }}
+                    ></ElSkeletonItem>
+
+                    <ElSkeletonItem
+                      variant="p"
+                      style={{ width: '35%' }}
+                    ></ElSkeletonItem>
+                  </div>
+                </div>
+              )
+            }}
+          >
+            {this.list.map((item: any) => (
+              <>
+                <div class="w-1/4 pb-5">
+                  <Item
+                    class="m-auto"
+                    item={item}
+                    onItemClick={(item: any) => {
+                      this.$router.push({
+                        path: '/albumDetail',
+                        query: {
+                          id: item.id
+                        }
+                      })
+                    }}
+                  />
+                </div>
+              </>
+            ))}
+          </ElSkeleton>
+        </div>
+
+        <Pagination
+          total={this.pageInfo.total}
+          v-model:page={this.pageInfo.page}
+          v-model:limit={this.pageInfo.limit}
+          pageSizes={this.pageInfo.page_size}
+          pagination={this.getList}
+        />
+
+        {this.dataShow && <ColEmpty />}
+      </>
+    )
+  }
+})

src/views/student-info/my-score/index.tsx

@@ -1,6 +1,7 @@
 import { ElTabPane, ElTabs } from 'element-plus'
 import { defineComponent } from 'vue'
 import AlbumList from './album-list'
+import AlbumMy from './album-my'
 import styles from './index.module.less'
 import List from './list'
 
@@ -21,6 +22,9 @@ export default defineComponent({
           <ElTabPane label="我的乐谱" name="MYSCORE">
             {this.activeName === 'MYSCORE' && <List auditStatus="MYSCORE" />}
           </ElTabPane>
+          <ElTabPane label="我的专辑" name="ALBUMMY">
+            {this.activeName === 'ALBUMMY' && <AlbumMy />}
+          </ElTabPane>
           <ElTabPane label="收藏乐谱" name="COLLECTION">
             {this.activeName === 'COLLECTION' && (
               <List auditStatus="COLLECTION" />

src/views/user-info/music-class/index.module.less

@@ -134,12 +134,12 @@
     width: 48px;
     height: 22px;
     background: #e1f0ff;
-    border-radius: 10px 0px 10px 0px;
+    border-radius: 6px;
     line-height: 22px;
     color: #fff;
     text-align: center;
     font-size: 14px;
-    margin-left: 6px;
+    margin-right: 6px;
     &.vip {
       background-color: #c8a430;
       color: #fff;
@@ -161,3 +161,10 @@
   height: 22px;
   margin-right: 8px;
 }
+
+.iconAlbum {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}

src/views/user-info/music-class/item.tsx

@@ -8,6 +8,7 @@ import { goodsType } from '@/constant'
 import { useRouter } from 'vue-router'
 import { ElButton } from 'element-plus'
 import iconFine from '@/common/images/icon_fine.png'
+import iconAlbum from '@/common/images/icon_album_active.png'
 
 type Props = {
   id?: number
@@ -73,10 +74,6 @@ export default defineComponent({
             </div>
             <div class={classes.textWrap}>
               <p>
-                {state.item.exquisiteFlag === 1 && (
-                  <img src={iconFine} class={classes.iconFine} />
-                )}
-                {state.item.musicSheetName}
                 {Array.isArray(state.item.paymentType) &&
                   state.item.paymentType.map((tag: string) => (
                     <div
@@ -88,6 +85,13 @@ export default defineComponent({
                       {chargeTypes[tag] ? chargeTypes[tag] : '点播'}
                     </div>
                   ))}
+                {state.item.exquisiteFlag === 1 && (
+                  <img src={iconFine} class={classes.iconFine} />
+                )}
+                {state.item.albumNums > 0 && (
+                  <img src={iconAlbum} class={classes.iconAlbum} />
+                )}
+                {state.item.musicSheetName}
               </p>
               <div class={classes.authorInfo}>
                 <span>作曲: {state.item.composer}</span>