designer-hub/packages/app/src/pages/common/components/honor-dialog/honor-dialog.vue

<script setup lang="ts">
import { close } from '../../../../core/libs/svgs'
import { HonorDialogOptions, HonorDialogSymbol } 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'

const dialogOption = inject(HonorDialogSymbol, ref<HonorDialogOptions>({}))
const { push } = useRouter()
const lazyRender = ref<boolean>(true)
const modelValue = defineModel({ default: false, type: Boolean })
const themeVars: ConfigProviderThemeVars = {
  overlayBg: 'rgba(0,0,0,0.85)',
}
const title = ref('东方研习营')
const content = ref('获得东方研习营游学徽章')
const path = ref('')
const src = ref(
  'https://image.zhuchaohui.com/zhucaohui/e104215c64d39e4a0f8676c48b8e7221c891eade1c8d7f02b2a7f0be862e3f76.png',
)
const reset = (option) => {
  if (option) {
    modelValue.value = option.show
    lazyRender.value = option.lazyRender
    title.value = option.title || '东方研习营'
    content.value = option.content || '获得东方研习营游学徽章'
    path.value = option.path || ''
    src.value = option.image || src.value
  }
}
const jumpTo = () => {
  if (dialogOption.value?.type && dialogOption.value?.type === 'certificate') {
    push('/pages/mine/honors/index?active=certificate')
  }
  if (dialogOption.value?.type && dialogOption.value?.type === 'badge') {
    push('/pages/mine/honors/index?active=badge')
  }
}
const handleLoad = () => {
  console.log(1111)
  if (dialogOption.value?.onLoad && typeof dialogOption.value?.onLoad === 'function') {
    dialogOption.value.onLoad()
  }
}
watch(
  () => dialogOption.value,
  (newVal) => {
    reset(newVal)
  },
)
// provide(HonorDialogSymbol, { show })
</script>
<template>
  <wd-config-provider :themeVars="themeVars">
    <wd-popup
      v-model="modelValue"
      :lazy-render="lazyRender"
      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">
          <div class="w-100vw h-100vw absolute left-0 right-0 top--8">
            <wd-img
              custom-class="absolute! top-50% left-50% translate-[-50%,-50%] vertical-bottom"
              width="68%"
              height="68%"
              @load="handleLoad"
              :src="radiation"
            ></wd-img>
            <wd-img
              custom-class="absolute! left-16 top-4 vertical-bottom"
              width="58vw"
              mode="widthFix"
              :src="NetImages.Stars"
            ></wd-img>
            <wd-img
              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
              custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%]  vertical-bottom"
              width="40vw"
              mode="widthFix"
              :src="src"
            ></wd-img>
          </div>
        </div>
        <div class="text-center">
          <div class="text-white text-2xl font-normal font-['PingFang_SC'] uppercase">
            {{ title }}
          </div>
          <div class="mt-2 text-[#9f9b94] text-base font-normal font-['PingFang_SC'] uppercase">
            {{ content }}
          </div>
        </div>
        <div
          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
            class="text-center text-[#c7bdab] text-base font-normal font-['PingFang_SC'] leading-normal"
            @click.stop="jumpTo"
          >
            查看奖励
          </div>
        </div>
        <wd-img width="24" height="24" :src="close" @click="modelValue = false"></wd-img>
      </div>
    </wd-popup>
  </wd-config-provider>
</template>