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

<script setup lang="ts">
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">
    <div class="flex justify-end pt-2">
      <div class="w-[66px] h-[26px] relative" v-if="isCurrent">
        <div class="w-[66px] h-[22px] left-0 absolute bg-[#3c556b] rounded-md"></div>
        <div
          class="left-[10px] top-0.25 absolute text-center text-[#dfdfdf] text-xs font-normal font-['PingFang_SC'] leading-relaxed"
        >
          当前等级
        </div>
      </div>
    </div>
    <div class="flex-1"></div>
    <!--    {{ userInfo.level.point }}-->
    <!--    {{ userInfo.level.point }}-->
    <!--    {{ percentage }}-->
    <template v-if="userInfo">
		<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>
	</template>
  </div>
</template>