修改样式与类型

src/constant/index.ts

@@ -2,7 +2,8 @@ export const goodsType = {
   LIVE: '直播课',
   PRACTICE: '陪练课',
   VIDEO: '视频课',
-  VIP: '开通会员',
+  VIP: '开通VIP会员',
+  SVIP: '开通SVIP会员',
   MUSIC: '单曲点播',
   ALBUM: '专辑购买',
   PIANO_ROOM: '琴房时长充值',

src/views/creation/index-share.tsx

@@ -343,19 +343,30 @@ export default defineComponent({
         <Cell class={styles.userSection} center border={false}>
           {{
             icon: () => (
-              <Image class={styles.userLogo} src={state.musicDetail.avatar} />
+              <div
+                class={[
+                  styles.userLogoSection,
+                  (state.musicDetail.vipType === 'SVIP' ||
+                    state.musicDetail.vipType === 'PERMANENT_SVIP') &&
+                    styles.userSVip,
+                  state.musicDetail.vipType === 'VIP' && styles.userVip
+                ]}
+              >
+                <Image class={styles.userLogo} src={state.musicDetail.avatar} />
+                <i class={styles.showMemeber}></i>
+              </div>
             ),
             title: () => (
               <div class={styles.userInfo}>
                 <p class={styles.name}>
                   <span>{state.musicDetail.username}</span>
-                  {state.musicDetail.vipType === 'VIP' && (
+                  {/* {state.musicDetail.vipType === 'VIP' && (
                     <img src={iconVip} class={styles.iconMember} />
-                  )}
-                  {(state.musicDetail.vipType === 'SVIP' ||
+                  )} */}
+                  {/* {(state.musicDetail.vipType === 'SVIP' ||
                     state.musicDetail.vipType === 'PERMANENT_SVIP') && (
                     <img src={iconSVip} class={styles.iconMember} />
-                  )}
+                  )} */}
                 </p>
                 <p class={styles.sub}>
                   {state.musicDetail.subjectName}{' '}

src/views/creation/index.module.less

@@ -221,14 +221,49 @@
   padding: 15px 12px !important;
   background-color: transparent !important;
 
-  .userLogo {
+  .userLogoSection {
     width: 44px;
     height: 44px;
     border: 1px solid #FFFFFF;
     margin-right: 10px;
     border-radius: 50%;
-    overflow: hidden;
     flex-shrink: 0;
+    position: relative;
+
+    .showMemeber {
+      position: absolute;
+      bottom: 1px;
+      right: -3px;
+      width: 18px;
+      height: 18px;
+    }
+
+    &.userVip {
+      border: 1px solid #F0AF88;
+
+      .showMemeber {
+        background: url('./images/icon-vip.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+
+    &.userSVip {
+
+      border: 1px solid #F0AF88;
+
+      .showMemeber {
+        background: url('./images/icon-svip.png') no-repeat center;
+        background-size: contain;
+      }
+
+    }
+  }
+
+  .userLogo {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    overflow: hidden;
   }
 
   .userInfo {
@@ -573,4 +608,4 @@
       line-height: 14px;
     }
   }
-}
+}

src/views/creation/index.tsx

@@ -350,19 +350,30 @@ export default defineComponent({
         <Cell class={styles.userSection} center border={false}>
           {{
             icon: () => (
-              <Image class={styles.userLogo} src={state.musicDetail.avatar} />
+              <div
+                class={[
+                  styles.userLogoSection,
+                  (state.musicDetail.vipType === 'SVIP' ||
+                    state.musicDetail.vipType === 'PERMANENT_SVIP') &&
+                    styles.userSVip,
+                  state.musicDetail.vipType === 'VIP' && styles.userVip
+                ]}
+              >
+                <Image class={styles.userLogo} src={state.musicDetail.avatar} />
+                <i class={styles.showMemeber}></i>
+              </div>
             ),
             title: () => (
               <div class={styles.userInfo}>
                 <p class={styles.name}>
                   <span>{state.musicDetail?.username}</span>
-                  {state.musicDetail.vipType === 'VIP' && (
+                  {/* {state.musicDetail.vipType === 'VIP' && (
                     <img src={iconVip} class={styles.iconMember} />
                   )}
                   {(state.musicDetail.vipType === 'SVIP' ||
                     state.musicDetail.vipType === 'PERMANENT_SVIP') && (
                     <img src={iconSVip} class={styles.iconMember} />
-                  )}
+                  )} */}
                 </p>
                 <p class={styles.sub}>
                   {state.musicDetail.subjectName}{' '}