Merge branch 'fine-music-score'

src/components/TheMusicGrid/index.module.less

@@ -37,7 +37,20 @@
     border-radius: 6px;
     overflow: hidden;
     margin-bottom: 6px;
-    max-height: 355PX;
+    max-height: 355px;
+    .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;
+    }
     .model {
       position: absolute;
       left: 4px;
@@ -50,11 +63,11 @@
       padding: 4px 6px;
       border-radius: 20px;
       font-size: 12px;
-      color:#fff;
-      transform: scale(.9);
+      color: #fff;
+      transform: scale(0.9);
     }
-    .num{
-        margin-left: 3px;
+    .num {
+      margin-left: 3px;
     }
   }
 }

src/components/TheMusicGrid/index.tsx

@@ -13,8 +13,8 @@ export default defineComponent({
       default: () => [],
     },
   },
-  emits: ['goto'],
-  setup(props, {emit}) {
+  emits: ["goto"],
+  setup(props, { emit }) {
     const imageSlots = {
       loading: () => <TheLoading />,
       error: () => <TheLoading />,
@@ -24,8 +24,11 @@ export default defineComponent({
         <Grid border={false} columnNum={3}>
           {props.list.map((n: any) => (
             <GridItem>
-              <div class={styles.item} onClick={() => emit('goto', n)}>
+              <div class={styles.item} onClick={() => emit("goto", n)}>
                 <div class={styles.imgWrap}>
+                  {n.paymentType === "CHARGE" && (
+                    <span class={styles.albumType}>付费</span>
+                  )}
                   <TheImage src={n.albumCoverUrl} />
                   <div class={styles.model}>
                     <Icon name={IconXin} />

src/components/TheSong/index.module.less

@@ -19,6 +19,13 @@
     width: 16px;
     height: 20px;
     margin-left: 6px;
+    flex-shrink: 0;
+  }
+  .iconAlbum {
+    width: 15px;
+    height: 15px;
+    margin-left: 6px;
+    flex-shrink: 0;
   }
   .content {
     flex: 1;
@@ -40,6 +47,10 @@
         color: #999;
         line-height: 16px;
         margin-right: 12px;
+        max-width: 150px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
       }
       .tags {
         font-size: 12px;

src/components/TheSong/index.tsx

@@ -3,6 +3,7 @@ import { defineComponent, PropType } from "vue";
 import styles from "./index.module.less";
 import IconPlay from "@/assets/icon-play.png";
 import IconFine from "@/assets/icon_fine.png";
+import IconAlbum from "@/assets/icon_album_active.png";
 import { useRouter } from "vue-router";
 export default defineComponent({
   name: "TheSong",
@@ -51,6 +52,10 @@ export default defineComponent({
                   <Image src={IconFine} class={styles.iconFine} />
                 )}
 
+                {n.albumNums > 0 && (
+                  <Image src={IconAlbum} class={styles.iconAlbum} />
+                )}
+
                 <span class={[styles.title, "van-ellipsis"]}>
                   {n.musicSheetName}
                 </span>

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

@@ -1,12 +1,12 @@
-.musicAlbum .header{
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    backdrop-filter: none !important;
-    transition: all 0.3s;
-    background-color: transparent;
+.musicAlbum .header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  backdrop-filter: none !important;
+  transition: all 0.3s;
+  background-color: transparent;
 }
 .bgImg {
   position: absolute;
@@ -22,9 +22,9 @@
   height: 265px;
   padding-top: 55px;
   z-index: 10;
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(20px);
-  -webkit-backdrop-filter:blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .bg {
@@ -39,10 +39,23 @@
     width: 115px;
     height: 115px;
     flex-shrink: 0;
-    border-radius: 6px;
+    border-radius: 10px;
     overflow: hidden;
     margin-right: 14px;
   }
+  .albumType {
+    position: absolute;
+    left: 16px;
+    top: 16px;
+    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;
+  }
   .alumTitle {
     font-size: 18px;
     font-weight: 500;

src/views/music/album/index.tsx

@@ -70,6 +70,9 @@ export default defineComponent({
           <div class={styles.bg}>
             <div class={styles.alumWrap}>
               <div class={styles.img}>
+                {state.paymentType === "CHARGE" && (
+                  <span class={styles.albumType}>付费</span>
+                )}
                 <TheImage src={state.albumCoverUrl} />
               </div>
               <div class={styles.alumDes}>

vite.config.ts

@@ -8,8 +8,8 @@ import { createStyleImportPlugin } from "vite-plugin-style-import";
 import legacy from "@vitejs/plugin-legacy";
 import path from "path";
 
-// const proxyUrl = "https://dev.colexiu.com/";
-const proxyUrl = "https://online.colexiu.com/";
+const proxyUrl = "https://dev.colexiu.com/";
+// const proxyUrl = "https://online.colexiu.com/";
 
 const resolve = (dir: string) => path.join(__dirname, dir)