|
@@ -0,0 +1,134 @@
|
|
|
+<route lang="json">
|
|
|
+{
|
|
|
+ "style": {
|
|
|
+ "navigationBarTitleText": "等级规则",
|
|
|
+ "navigationBarBackgroundColor": "#fff"
|
|
|
+ }
|
|
|
+}
|
|
|
+</route>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { useMemberLevelsStore, useUserStore } from '@/store'
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import star from '@designer-hub/assets/src/libs/assets/star'
|
|
|
+import Card from '@/components/card.vue'
|
|
|
+import up from '@designer-hub/assets/src/libs/assets/up'
|
|
|
+import down from '@designer-hub/assets/src/libs/assets/down'
|
|
|
+
|
|
|
+const userStore = useUserStore()
|
|
|
+const { userInfo } = storeToRefs(userStore)
|
|
|
+const memberLevelsStore = useMemberLevelsStore()
|
|
|
+const { memberLevels } = storeToRefs(memberLevelsStore)
|
|
|
+const tab = ref(0)
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="flex-grow flex flex-col">
|
|
|
+ <!-- Header -->
|
|
|
+
|
|
|
+ <!-- Tabs -->
|
|
|
+ <wd-tabs v-model="tab">
|
|
|
+ <template v-for="item in ['等级介绍', '等级变更规则']" :key="item">
|
|
|
+ <wd-tab :title="item"></wd-tab>
|
|
|
+ </template>
|
|
|
+ </wd-tabs>
|
|
|
+ <template v-if="tab === 0">
|
|
|
+ <div class="flex-grow bg-white px-4">
|
|
|
+ <div class="mt-10 text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
|
|
|
+ 筑巢荟会员等级由用户当前积分数量决定,共分为以下4个等级
|
|
|
+ </div>
|
|
|
+ <!-- {{ memberLevels }}-->
|
|
|
+ <!-- {{ userInfo }}-->
|
|
|
+ <div class="mt-5 rounded-[10px] border border-solid border-[#b18957] overflow-hidden">
|
|
|
+ <div class="grid grid-cols-2 auto-rows-10 center">
|
|
|
+ <div
|
|
|
+ class="text-center text-[#bc8547] text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 会员等级
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-center text-[#bc8547] text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 积分值区间
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-for="(it, i) in memberLevels" :key="i">
|
|
|
+ <div
|
|
|
+ class="h-full flex center relative"
|
|
|
+ :class="['bg-[#fffcf6]', 'bg-[#fff8eb]', 'bg-[#fff6e3]', 'bg-[#fff3d9]'][i]"
|
|
|
+ >
|
|
|
+ <wd-img
|
|
|
+ v-if="it.id === userInfo.level.level"
|
|
|
+ custom-class="absolute! left-10vw "
|
|
|
+ width="14"
|
|
|
+ height="14"
|
|
|
+ :src="star"
|
|
|
+ ></wd-img>
|
|
|
+ <div
|
|
|
+ class="text-center text-[#bc8547] text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ {{ it.memberLevelName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="h-full flex center"
|
|
|
+ :class="['bg-[#fffcf6]', 'bg-[#fff8eb]', 'bg-[#fff6e3]', 'bg-[#fff3d9]'][i]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-center text-[#bc8547] text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ memberLevels[i + 1]?.points
|
|
|
+ ? `${it.points}(含)-${memberLevels[i + 1]?.points}`
|
|
|
+ : `${it.points}及以上`
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="flex items-center mt-4 text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 注:
|
|
|
+ <wd-img width="14" height="14" :src="star"></wd-img>
|
|
|
+ 表示您当前所在等级
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="tab === 1">
|
|
|
+ <div class="p-3.5 flex flex-col gap-6">
|
|
|
+ <Card>
|
|
|
+ <div class="flex items-center gap-1">
|
|
|
+ <wd-img width="14" height="15" :src="up"></wd-img>
|
|
|
+ <div
|
|
|
+ class="text-center text-black/40 text-base font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 升级
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="my-4 h-.25 bg-[#f1f1f1]"></div>
|
|
|
+ <div
|
|
|
+ class="w-[309px] h-[47px] text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 更新积分值后,如最新积分值达到更高等级门槛将立即提升至相应会员等级。
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <div class="flex items-center gap-1">
|
|
|
+ <wd-img width="14" height="15" :src="down"></wd-img>
|
|
|
+ <div
|
|
|
+ class="text-center text-black/40 text-base font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 降级
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="my-4 h-.25 bg-[#f1f1f1]"></div>
|
|
|
+ <div
|
|
|
+ class="w-[309px] h-[47px] text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 当前积分不满足当前会员等级,您将面临降级。
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|