Browse Source

fix(app): 优化个人页面展示逻辑

EvilDragon 5 months ago
parent
commit
b5d87691f6
2 changed files with 19 additions and 7 deletions
  1. 18 7
      packages/app/src/pages/mine/index.vue
  2. 1 0
      packages/app/src/typings.ts

+ 18 - 7
packages/app/src/pages/mine/index.vue

@@ -37,6 +37,13 @@ const menus = ref([
   { title: '专属客服', icon: agent, path: '/pages/mine/agents/index' },
   { title: '个人设置', icon: setting, path: '/pages/mine/setting/index' },
 ])
+const levels = ref({
+  1: {
+    color: '#3b5369',
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/997de03a59d201c7b5dc124561925431abdc849cc7044ad4fb7c758bc12fafb2.png',
+  },
+})
 const pieces = ref([
   {
     title: '设计师成长计划',
@@ -224,29 +231,33 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
     <template v-else>
       <div class="relative top--36">
         <div
-          class="mx-3.5 absolute left-0 right-0 top--4 h-[180px] bg-gradient-to-r from-[#141414] to-[#4b4b49] rounded-tl-[10px] rounded-tr-[10px] p-3.5 box-border"
+          class="mx-3.5 absolute left-0 right-0 top--4 aspect-[1.93/1] rounded-2.5 p-3.5 box-border bg-[length:100%]"
           :class="['text-[#8FB8DB]']"
+          :style="{
+            backgroundImage: `url(${levels[userInfo.level.level].bgImg})`,
+            color: levels[userInfo.level.level].color,
+          }"
         >
           <div class="flex items-center">
-            <wd-img class="" width="20" height="20" :src="memberIconV1"></wd-img>
-            <wd-img class="" width="108" height="27" :src="memberTextV1"></wd-img>
             <div class="flex-1"></div>
             <div
-              class="h-[22px] bg-gradient-to-r from-[#333333] to-[#20201e] rounded-tl-[20px] rounded-bl-[20px] mr--3.5 px-2"
+              class="h-[22px] bg-gradient-to-r from-[#333333] to-[#20201e] rounded-tl-[20px] rounded-bl-[20px] mr--3.5 px-2 mt-3"
             >
-              <div class="text-xs font-normal font-['PingFang SC'] leading-relaxed">
+              <div class="text-xs font-normal font-['PingFang SC'] leading-relaxed color-[#f3f3f3]">
                 更多等级权益
               </div>
             </div>
           </div>
           <div class="flex items-end mt-10">
             <div>
-              <span class="text-4xl font-normal font-['D-DIN Exp']">{{ userInfo.point }}</span>
+              <span class="text-4xl font-normal font-['D-DIN Exp'] mr-1">
+                {{ userInfo.level.point }}
+              </span>
               <span class="text-center text-xs font-normal font-['PingFang SC']">积分</span>
             </div>
             <div class="flex-1"></div>
             <div class="text-sm font-normal font-['PingFang SC']">
-              会员号:{{ userInfo.userId }}
+              会员号:{{ userInfo.level.cardCode }}
             </div>
           </div>
         </div>

+ 1 - 0
packages/app/src/typings.ts

@@ -29,6 +29,7 @@ type IUserInfo = {
   expiresTime?: any
   userStatusEnabled?: boolean
   point?: number
+  level?: { cardCode: string; icon: string; level: number; name: string; point: number }
 }
 
 enum TestEnum {