添加会员显示

src/components/col-header/modals/index.module.less

@@ -4,15 +4,18 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+
   img {
     object-fit: cover;
   }
+
   .title {
     font-size: 16px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #ffffff;
   }
+
   .userHeader {
     width: 40px;
     height: 40px;
@@ -23,6 +26,7 @@
     background-color: #fff;
   }
 }
+
 .dropdownWrap {
   padding: 0 !important;
   width: 304px;
@@ -43,6 +47,7 @@
       // flex-direction: row;
       // align-items: center;
       padding: 28px 20px;
+
       .titleWrap {
         display: flex;
         flex-direction: row;
@@ -57,15 +62,18 @@
           font-weight: 600;
           margin-right: 10px;
         }
+
         .vipLogo {
           width: 42px;
-          height: 26px;
+          // height: 26px;
         }
       }
+
       .iconList {
         display: flex;
         flex-direction: row;
         margin-top: 9px;
+
         .teacherTag {
           width: 38px;
           height: 22px;
@@ -76,6 +84,7 @@
           color: #0089B9;
           text-align: center;
         }
+
         .studentTag {
           width: 38px;
           height: 22px;
@@ -86,6 +95,7 @@
           color: #ab5400;
           text-align: center;
         }
+
         .icon {
           margin-left: 10px;
           width: 26px;
@@ -103,30 +113,35 @@
       }
     }
   }
+
   img {
     width: 100%;
     position: relative;
     vertical-align: bottom;
     // border-radius: 10px 10px 0px 0px;
   }
+
   .dropdownInfo {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     text-align: center;
     margin-bottom: 42px;
+
     // margin-top: 10px;
     // margin-bottom: 10px;
     .dropdownItem {
       position: relative;
       width: 50%;
       cursor: pointer;
+
       &:nth-last-child(1) {
         &::after {
           width: 0px;
           border: 0px;
         }
       }
+
       &::after {
         content: '';
         width: 1px;
@@ -136,6 +151,7 @@
         bottom: 0;
         right: 0;
       }
+
       .dropdownItemTitle {
         font-size: 28px;
         font-family: PingFangSC-Medium, PingFang SC;
@@ -143,6 +159,7 @@
         color: #333;
         line-height: 40px;
       }
+
       .dropdownItemsubTitle {
         height: 22px;
         font-size: 16px;
@@ -151,6 +168,7 @@
         color: #999;
         line-height: 22px;
       }
+
       .dropdownImg {
         width: 24px;
         height: 24px;
@@ -158,9 +176,11 @@
     }
   }
 }
+
 :global {
   .loginPopper {
-    border-radius: 10px!important;
+    border-radius: 10px !important;
+
     // overflow: hidden;
     .el-dropdown__popper.el-popper {
       border: none !important;
@@ -168,6 +188,7 @@
 
 
     }
+
     .loginPopper {
       background-color: #000;
       transform: translate(-35px, 0px) !important;
@@ -175,6 +196,7 @@
       box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
 
       position: relative;
+
       &::after {
         content: '';
         position: absolute;
@@ -187,6 +209,7 @@
         right: 15px;
       }
     }
+
     .el-dropdown-menu {
 
       .backItem {
@@ -194,6 +217,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
+
         .icon_back {
           width: 7px;
           height: 12px;
@@ -201,35 +225,42 @@
         }
       }
     }
+
     .el-dropdown-menu__item {
       line-height: 60px !important;
       color: #666666;
       padding: 0 18px;
       font-weight: 600;
       font-size: 16px;
+
       img {
         width: 24px;
         height: 24px;
         margin-right: 12px;
         margin-left: 5px;
       }
+
       .dropdownItemWrap {
         display: flex;
         flex-direction: row;
         align-items: center;
       }
+
       .changeWrap {
         display: flex;
         flex-direction: row;
-       align-items: center;
-       span {
-        margin-right: 20px;
-        color: #666;
-        font-weight: 400;
-       }
+        align-items: center;
+
+        span {
+          margin-right: 20px;
+          color: #666;
+          font-weight: 400;
+        }
       }
+
       .backWrap {
         color: #ff5151;
+
         .backIcon {
           width: 24px;
           height: 24px;
@@ -246,12 +277,14 @@
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
+
       .backWrap {
         display: flex;
         flex-direction: row;
         align-items: center;
       }
     }
+
     .el-popper__arrow {
       // display: none;
     }

src/components/col-header/modals/loganInfo.tsx

@@ -33,6 +33,7 @@ import styleIcon from '../images/styleIcon.png'
 import nostyleIcon from '../images/noStyleIcon.png'
 import videoIcon from '../images/videoIcon.png'
 import noVideoIcon from '../images/noVideoIcon.png'
+import sVipIcon from '../images/vipIcon.png'
 import vipIcon from '../images/vipIcon.png'
 import noVipIcon from '../images/noVipIcon.png'
 import icon_back from '@/common/images/icon_back.png'
@@ -75,6 +76,39 @@ export default defineComponent({
         setUser()
       })
     })
+
+    // 检验是否有对应徽章
+    const checkBadge = (type: string) => {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const userInfo = getUserInfo()
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.isVip > 0
+          break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    }
     const setUser = () => {
       states.user = getUserInfo()
       states.userType = getUserType()
@@ -92,27 +126,27 @@ export default defineComponent({
 
       if (states.userType == 'TEACHER') {
         states.iconList = []
-        if (states.user.isVip) {
+        if (checkBadge('VIP') || checkBadge('SVIP')) {
           states.iconList.push(memberIcon)
         } else {
           states.iconList.push(noMemberIcon)
         }
-        if (states.user.tag.indexOf('STYLE') != -1) {
+        if (checkBadge('STYLE')) {
           states.iconList.push(styleIcon)
         } else {
           states.iconList.push(nostyleIcon)
         }
-        if (states.user.tag.indexOf('VIDEO') != -1) {
+        if (checkBadge('VIDEO')) {
           states.iconList.push(videoIcon)
         } else {
           states.iconList.push(noVideoIcon)
         }
-        if (states.user.tag.indexOf('LIVE') != -1) {
+        if (checkBadge('LIVE')) {
           states.iconList.push(onlineIcon)
         } else {
           states.iconList.push(noOnlineIcon)
         }
-        if (states.user.tag.indexOf('MUSIC') != -1) {
+        if (checkBadge('MUSIC')) {
           states.iconList.push(ablumIcon)
         } else {
           states.iconList.push(noAblumIcon)
@@ -205,6 +239,7 @@ export default defineComponent({
       ...toRefs(states),
       gotoPage,
       changeRoute,
+      checkBadge,
       logout,
       changeState,
       gotoFans
@@ -234,12 +269,21 @@ export default defineComponent({
                       /> */}
                       <div class={classes.titleWrap}>
                         <p class={classes.title}>{this.user.username}</p>
-                        <img
-                          class={classes.vipLogo}
-                          src={this.user.isVip ? vipIcon : noVipIcon}
-                          style="object-fit: cover;"
-                          alt=""
-                        />
+                        {(this.checkBadge('VIP') ||
+                          this.checkBadge('SVIP')) && (
+                          <img
+                            class={classes.vipLogo}
+                            src={
+                              this.checkBadge('SVIP')
+                                ? sVipIcon
+                                : this.checkBadge('VIP')
+                                ? vipIcon
+                                : noVipIcon
+                            }
+                            style="object-fit: cover;"
+                            alt=""
+                          />
+                        )}
                       </div>
                       <div class={classes.iconList}>
                         {this.userType == 'TEACHER' ? (

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

@@ -24,6 +24,40 @@ export default defineComponent({
       memberStatus: false
     }
   },
+  methods: {
+    // 检验是否有对应徽章
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { userInfo } = this
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (userInfo.tag) {
+            status = userInfo.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = userInfo.isVip > 0
+          break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
+        default:
+          status = false
+          break
+      }
+      return status
+    }
+  },
   render() {
     return (
       <div class={['text-center pb-8 relative overflow-hidden', styles.users]}>
@@ -39,14 +73,26 @@ export default defineComponent({
         <p class="text-[#333] text-lg font-semibold pt-4 flex items-center justify-center">
           {this.userInfo.username}
 
-          <img
+          {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
+            <img
+              src={
+                this.checkBadge('SVIP')
+                  ? getAssetsHomeFile('icon_svip.png')
+                  : this.checkBadge('VIP')
+                  ? getAssetsHomeFile('icon_vip.png')
+                  : ''
+              }
+              class="w-[42px]"
+            />
+          )}
+          {/* <img
             src={
               this.userInfo.isVip
                 ? getAssetsHomeFile('icon_vip.png')
                 : getAssetsHomeFile('icon_vip_default.png')
             }
             class="h-[26px]"
-          />
+          /> */}
         </p>
 
         <div class={this.userInfo.isVip !== 1 ? 'mt-5' : ''}>

src/views/user-info/components/users/index.tsx

@@ -60,6 +60,11 @@ export default defineComponent({
         case 'VIP':
           status = userInfo.isVip > 0
           break
+        case 'SVIP':
+          status =
+            userInfo.userVip?.vipType === 'SVIP' ||
+            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
+          break
         default:
           status = false
           break
@@ -81,21 +86,25 @@ export default defineComponent({
         <p class="text-[#333] text-lg font-semibold pt-4 flex items-center justify-center">
           {this.userInfo.username}
 
-          <img
-            src={
-              this.checkBadge('VIP')
-                ? getAssetsHomeFile('icon_vip.png')
-                : getAssetsHomeFile('icon_vip_default.png')
-            }
-            class="h-[26px]"
-          />
+          {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
+            <img
+              src={
+                this.checkBadge('SVIP')
+                  ? getAssetsHomeFile('icon_svip.png')
+                  : this.checkBadge('VIP')
+                  ? getAssetsHomeFile('icon_vip.png')
+                  : ''
+              }
+              class="h-[26px]"
+            />
+          )}
         </p>
 
         <div class="flex items-center justify-center pt-2 pb-10">
           <span class="text-base text-[#999]">勋章</span>
           <img
             src={
-              this.checkBadge('VIP')
+              this.checkBadge('SVIP') || this.checkBadge('VIP')
                 ? getAssetsHomeFile('icon_member.png')
                 : getAssetsHomeFile('icon_member_default.png')
             }

src/views/user-info/my-fans/index.tsx

@@ -5,6 +5,7 @@ import { ElImage, ElSkeleton, ElSkeletonItem, ElTag } from 'element-plus'
 import { defineComponent } from 'vue'
 
 import iconVip from '../images/icon_vip.png'
+import iconSvip from '../images/icon_svip.png'
 import iconVipDefault from '../images/icon_vip_default.png'
 
 export default defineComponent({
@@ -104,10 +105,12 @@ export default defineComponent({
                         src={item.avatar}
                         class="w-12 h-12 rounded-full border-2 border-[#2DC7AA]"
                       />
-                      <ElImage
-                        src={item.isVip > 0 ? iconVip : iconVipDefault}
-                        class="h-7 -mt-4"
-                      />
+                      {item.vipType && (
+                        <ElImage
+                          src={item.vipType === 'SVIP' ? iconSvip : iconVip}
+                          class="h-5 -mt-4"
+                        />
+                      )}
                     </div>
 
                     <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center max-w-[120px] whitespace-nowrap overflow-hidden text-ellipsis">

vite.config.ts

@@ -15,7 +15,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://www.colexiu.com/';
-const proxyUrl = 'https://test.colexiu.com/'
+const proxyUrl = 'https://dev.colexiu.com/'
 export default defineConfig({
   base: './',
   plugins: [