|
|
@@ -1,11 +1,16 @@
|
|
|
<script setup lang="ts">
|
|
|
import { close } from '../../../../core/libs/svgs'
|
|
|
-import { HonorDialogOptions, HonorDialogSymbol } from '.'
|
|
|
+import { HonorDialogOptions, HonorDialogSymbol, HonorDialogType } from '.'
|
|
|
import earnBadgeTitle from '@designer-hub/assets/src/libs/assets/earnBadgeTitle'
|
|
|
import radiation from '@designer-hub/assets/src/libs/assets/radiation'
|
|
|
import { NetImages } from '@/core/libs/net-images'
|
|
|
import { ConfigProviderThemeVars } from 'wot-design-uni'
|
|
|
import { useRouter } from '@/core/utils/router'
|
|
|
+import earnCertificate from '@designer-hub/assets/src/libs/assets/earnCertificate'
|
|
|
+import envelopeFront from '@designer-hub/assets/src/libs/assets/envelopeFront'
|
|
|
+import envelopeBack from '@designer-hub/assets/src/libs/assets/envelopeBack'
|
|
|
+import ribbonTl from '@designer-hub/assets/src/libs/assets/ribbonTl'
|
|
|
+import ribbonBr from '@designer-hub/assets/src/libs/assets/ribbonBr'
|
|
|
|
|
|
const dialogOption = inject(HonorDialogSymbol, ref<HonorDialogOptions>({}))
|
|
|
const { push } = useRouter()
|
|
|
@@ -20,6 +25,8 @@ const path = ref('')
|
|
|
const src = ref(
|
|
|
'https://image.zhuchaohui.com/zhucaohui/e104215c64d39e4a0f8676c48b8e7221c891eade1c8d7f02b2a7f0be862e3f76.png',
|
|
|
)
|
|
|
+const isBadge = computed(() => dialogOption.value?.type === HonorDialogType.Badge)
|
|
|
+const isCertificate = computed(() => dialogOption.value?.type === HonorDialogType.Certificate)
|
|
|
const reset = (option) => {
|
|
|
if (option) {
|
|
|
modelValue.value = option.show
|
|
|
@@ -37,6 +44,7 @@ const jumpTo = () => {
|
|
|
if (dialogOption.value?.type && dialogOption.value?.type === 'badge') {
|
|
|
push('/pages/mine/honors/index?active=badge')
|
|
|
}
|
|
|
+ modelValue.value = false
|
|
|
}
|
|
|
const handleLoad = () => {
|
|
|
console.log(1111)
|
|
|
@@ -60,14 +68,18 @@ watch(
|
|
|
custom-class="bg-transparent! bg-[#f6f6f6]!"
|
|
|
>
|
|
|
<div class="flex flex-col items-center relative">
|
|
|
- <wd-img width="60vw" mode="widthFix" :src="earnBadgeTitle"></wd-img>
|
|
|
- <div class="w-[100vw] h-[68vw] pt-2 flex">
|
|
|
+ <wd-img
|
|
|
+ width="60vw"
|
|
|
+ mode="widthFix"
|
|
|
+ :src="isBadge ? earnBadgeTitle : earnCertificate"
|
|
|
+ ></wd-img>
|
|
|
+ <div v-if="isBadge" class="w-[100vw] h-[68vw] pt-2 flex">
|
|
|
<div class="w-100vw h-100vw absolute left-0 right-0 top--8">
|
|
|
<wd-img
|
|
|
+ v-if="isBadge"
|
|
|
custom-class="absolute! top-50% left-50% translate-[-50%,-50%] vertical-bottom"
|
|
|
width="68%"
|
|
|
height="68%"
|
|
|
- @load="handleLoad"
|
|
|
:src="radiation"
|
|
|
></wd-img>
|
|
|
<wd-img
|
|
|
@@ -77,20 +89,77 @@ watch(
|
|
|
:src="NetImages.Stars"
|
|
|
></wd-img>
|
|
|
<wd-img
|
|
|
+ v-if="isBadge"
|
|
|
custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%] vertical-bottom blur-60"
|
|
|
width="40vw"
|
|
|
mode="widthFix"
|
|
|
:src="src"
|
|
|
></wd-img>
|
|
|
<wd-img
|
|
|
+ v-if="isBadge"
|
|
|
custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%] vertical-bottom"
|
|
|
width="40vw"
|
|
|
mode="widthFix"
|
|
|
+ @load="handleLoad"
|
|
|
:src="src"
|
|
|
></wd-img>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="text-center">
|
|
|
+ <div v-if="isCertificate" class="relative mb-16">
|
|
|
+ <wd-img
|
|
|
+ v-if="isCertificate"
|
|
|
+ custom-class="absolute! bottom-0 left-7.5vw vertical-bottom"
|
|
|
+ width="85%"
|
|
|
+ mode="widthFix"
|
|
|
+ :src="envelopeBack"
|
|
|
+ ></wd-img>
|
|
|
+ <wd-img
|
|
|
+ custom-class="absolute! left-12 top--4 vertical-bottom"
|
|
|
+ width="58vw"
|
|
|
+ mode="widthFix"
|
|
|
+ :src="NetImages.Stars"
|
|
|
+ ></wd-img>
|
|
|
+ <div class="w-[100vw] center">
|
|
|
+ <wd-img
|
|
|
+ v-if="isCertificate"
|
|
|
+ custom-class="mt-9.5 mb-22 vertical-bottom"
|
|
|
+ width="80vw"
|
|
|
+ mode="widthFix"
|
|
|
+ @load="handleLoad"
|
|
|
+ :src="src"
|
|
|
+ ></wd-img>
|
|
|
+ </div>
|
|
|
+ <wd-img custom-class="absolute! top-0 left-0" width="114" height="114" :src="ribbonTl" />
|
|
|
+ <wd-img
|
|
|
+ v-if="isCertificate"
|
|
|
+ custom-class="absolute! bottom-0 left-7.5vw vertical-bottom"
|
|
|
+ width="85vw"
|
|
|
+ mode="widthFix"
|
|
|
+ :src="envelopeFront"
|
|
|
+ ></wd-img>
|
|
|
+ <wd-img
|
|
|
+ custom-class="absolute! bottom-0 right-0"
|
|
|
+ width="76"
|
|
|
+ height="56"
|
|
|
+ :src="ribbonBr"
|
|
|
+ />
|
|
|
+ <div class="absolute bottom-0 left-50% translate-[-50%,-50%]">
|
|
|
+ <div
|
|
|
+ class="w-[115.50px] h-[41.16px] bg-gradient-to-r from-[#f2b36f] to-[#ce995c] rounded-[28.68px] flex center"
|
|
|
+ @click="jumpTo"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="w-[110.71px] h-[37.17px] bg-gradient-to-r from-[#f1bf84] to-[#e6c99f] rounded-[28.19px] shadow shadow-inner flex center"
|
|
|
+ >
|
|
|
+ <div class="text-center text-[#242323] text-base font-normal font-['PingFang SC']">
|
|
|
+ 去查看
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="isBadge" class="text-center">
|
|
|
<div class="text-white text-2xl font-normal font-['PingFang_SC'] uppercase">
|
|
|
{{ title }}
|
|
|
</div>
|
|
|
@@ -99,6 +168,7 @@ watch(
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
+ v-if="isBadge"
|
|
|
class="my-10 w-[155px] px-5 py-2.5 rounded-full border border-solid border-[#c8beab] justify-center items-center gap-1 inline-flex"
|
|
|
>
|
|
|
<div
|
Jake
