Browse Source

Merge branch 'vip' into dev

* vip:
  个人首页,添加vip标识
martin.ma 3 years ago
parent
commit
12239c6562

+ 42 - 7
assets/css/developer/index.scss

@@ -309,17 +309,35 @@
   cursor: pointer;
 }
 .developer-user-avatar {
-  width: 48px;
-  height: 48px;
-  margin-right: 6px;
+  width: 52px;
+  height: 52px;
+  margin-right: 8px;
   border-radius: 50px;
   background-color: rgba(0, 0, 0, 0.05);
+  position: relative;
   img {
-    width: 48px;
-    height: 48px;
+    width: 100%;
+    height: 100%;
     border-radius: 100%;
     overflow: hidden;
   }
+
+  .developer-flag{
+    position: absolute;
+    width:16px;
+    height:14px;
+    right:0;
+    bottom:0;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .developer-vip-flag{
+    background-image: url("~@/assets/img/developer/vip_flag.png");
+  }
+  .developer-notvip-flag{
+    background-image: url("~@/assets/img/developer/notvip_flag.png");
+  }
 }
 .developer-user-info {
   flex: 1;
@@ -327,11 +345,28 @@
   flex-direction: column;
   justify-content: space-around;
 }
+.developer-vip-btn-area{
+  display:block;
+  width: 54px;
+  height: 17px;
+  // background-color: #f00;
+  align-self: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+.developer-vip-renewal-btn{
+  background-image: url("~@/assets/img/developer/vip_btn.png")
+}
+.developer-vip-apply-btn{
+  background-image: url("~@/assets/img/developer/not_vip_btn.png")
+}
 .developer-user-name {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: #0b121a;
-  // line-height: 22px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  line-height: 20px;
 }
 .developer-user-level {
   font-size: 12px;

BIN
assets/img/developer/not_vip_btn.png


BIN
assets/img/developer/notvip_flag.png


BIN
assets/img/developer/vip_btn.png


BIN
assets/img/developer/vip_flag.png


+ 30 - 0
pages/frontend/developer/index.vue

@@ -225,9 +225,15 @@
             <!-- 工作台:start -->
             <section class="developer-workbench block">
                 <div class="developer-workbench-user" @click='linkToUser' :class="isLogin ? 'developer-workbench-user-logined' : ''">
+
                     <div class="developer-user-avatar">
                         <img :src="userInfo.icon_url || personalIcon" />
+                        <template v-if="isLogin">
+                          <span class="developer-flag" :class="isDeveloperVip ? 'developer-vip-flag':'developer-notvip-flag'"></span>
+                        </template>
                     </div>
+
+
                     <div class="developer-user-info">
                         <div v-if="isLogin" class="developer-user-name text-line-1">
                             {{ userInfo.nickname }}
@@ -244,6 +250,10 @@
                             </span>
                         </div>
                     </div>
+
+                    <a class="developer-vip-btn-area" :class="isDeveloperVip ? 'developer-vip-renewal-btn':'developer-vip-apply-btn'">
+
+                    </a>
                 </div>
                 <h5 class="user-title">工作台</h5>
                 <div class="developer-work-list">
@@ -468,6 +478,26 @@ export default {
         },
         isLogin() {
             return this.$store.getters.isLogin
+        },
+        isVipMode(){
+          if(!this.isLogin){
+            return false
+          }
+          const {is_vip} =  this.$store.state.userinfo || {}
+          return !!is_vip
+        },
+        isDeveloperVip(){
+          const { vip_type_id } =  this.$store.state.userinfo || {}
+          if(!this.isVipMode){
+            return false
+          }
+          // 1 初创会员
+          // 2 开发者会员
+          // 3 企业版会员
+          if(vip_type_id == 2){
+            return true
+          }
+          return false
         }
     },
     async asyncData({