feat(mine): 会员等级组件增强

- 在 LevelCard 组件中添加用户等级相关计算逻辑
- 增加进度条显示用户距下一级别的积分情况
- 优化会员等级页面的交互和用户体验
- 根据用户当前等级显示不同的提示信息

packages/app/src/pages/mine/levels/components/level-card.vue

@@ -1,5 +1,37 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ isCurrent: boolean }>(), { isCurrent: false })
+import { useUserStore } from '@/store'
+import { storeToRefs } from 'pinia'
+
+const props = withDefaults(
+  defineProps<{
+    isCurrent: boolean
+    option?: any[]
+    index?: number
+  }>(),
+  { isCurrent: false },
+)
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+const percentage = computed(() => {
+  const currentLevel = userInfo.value?.level?.level
+  const targetLevel = props.option[props.index + 1]
+  if (targetLevel) {
+    return (userInfo.value?.level?.point / targetLevel.points) * 100
+  }
+  return 0
+})
+// 是否最高的等级
+const isMaxLevel = computed(() => {
+  return userInfo.value?.level?.level === props.option?.[props.option.length - 1]?.memberLevel
+})
+// 是否高于当前等级
+const isHigherThanCurrent = computed(() => {
+  return userInfo.value?.level?.level > props.option[props.index]?.memberLevel
+})
+// 是否低于当前等级
+const isLowerThanCurrent = computed(() => {
+  return userInfo.value?.level?.level < props.option[props.index]?.memberLevel
+})
 </script>
 <template>
   <div class="w-full h-full box-border p-4 flex flex-col">
@@ -14,6 +46,36 @@ withDefaults(defineProps<{ isCurrent: boolean }>(), { isCurrent: false })
       </div>
     </div>
     <div class="flex-1"></div>
-    <wd-progress :percentage="30" hide-text />
+    <!--    {{ userInfo.level.point }}-->
+    <!--    {{ userInfo.level.point }}-->
+    <!--    {{ percentage }}-->
+    <template v-if="isHigherThanCurrent">
+      <div class="text-[#61311b] text-xs font-normal font-['PingFang SC'] leading-relaxed">
+        <!--        还差{{ props.option[props.index]?.points - userInfo.level.point }}积分升级-->
+        当前高于该等级
+      </div>
+    </template>
+    <template v-else-if="isLowerThanCurrent">
+      <div class="text-[#61311b] text-xs font-normal font-['PingFang SC'] leading-relaxed">
+        <!--        还差{{ props.option[props.index]?.points - userInfo.level.point }}积分升级-->
+        距{{ option[index].memberLevelName }}会员还需{{
+          option[index].points - userInfo.level.point
+        }}积分
+      </div>
+      <wd-progress :percentage="(userInfo.level.point / option[index].points) * 100" hide-text />
+    </template>
+    <template v-else-if="isMaxLevel">
+      <div class="text-[#61311b] text-xs font-normal font-['PingFang SC'] leading-relaxed">
+        当前积分{{ userInfo.level.point }}
+      </div>
+    </template>
+    <template v-else>
+      <div class="text-[#61311b] text-xs font-normal font-['PingFang SC'] leading-relaxed">
+        距{{ option[index + 1].memberLevelName }}会员还需{{
+          option[index + 1].points - userInfo.level.point
+        }}积分
+      </div>
+      <wd-progress :percentage="percentage" hide-text />
+    </template>
   </div>
 </template>

packages/app/src/pages/mine/levels/index.vue

@@ -74,7 +74,11 @@ onMounted(async () => {
                   class="w-full h-full bg-[length:100%_100%]"
                   :style="{ backgroundImage: `url(${it.memberBgImage})` }"
                 >
-                  <LevelCard :is-current="userInfo.level?.level === it.memberLevel"></LevelCard>
+                  <LevelCard
+                    :option="levelConfigs"
+                    :index="i"
+                    :is-current="userInfo.level?.level === it.memberLevel"
+                  ></LevelCard>
                 </div>
               </div>
             </swiper-item>