pc_nuxt/app/components/InviteShareModal.vue

<template>
  <Teleport to="body">
    <Transition name="invite-modal">
      <div
        v-if="open"
        class="fixed inset-0 z-[1000] flex items-end justify-center bg-[var(--c-0b1a2b)]/45 p-0 backdrop-blur-sm sm:items-center sm:p-5"
        role="dialog"
        aria-modal="true"
        aria-labelledby="invite-share-title"
        @click.self="$emit('close')"
      >
        <div class="relative w-full rounded-t-3xl bg-[var(--c-ffffff)] px-5 pb-[calc(24px+env(safe-area-inset-bottom))] pt-5 shadow-2xl sm:max-w-md sm:rounded-3xl sm:p-6">
          <div class="flex items-start justify-between gap-4">
            <div>
              <h2 id="invite-share-title" class="text-lg font-extrabold text-[var(--c-172033)]">微信扫码接受邀请</h2>
              <p class="mt-1 text-xs leading-5 text-[var(--c-7b8797)]">好友使用微信扫描小程序码，即可进入邀请落地页。</p>
            </div>
            <button
              type="button"
              aria-label="关闭"
              class="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full bg-[var(--c-f3f6fa)] text-[var(--c-66758a)] transition-colors hover:bg-[var(--c-e8eef7)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)]"
              @click="$emit('close')"
            >
              <UIcon name="i-lucide-x" class="size-4.5" />
            </button>
          </div>

          <div class="mx-auto mt-5 flex aspect-square w-full max-w-[260px] items-center justify-center rounded-3xl border border-[var(--c-e8eef7)] bg-[var(--c-f8fbff)] p-4">
            <div v-if="loading" class="flex flex-col items-center gap-3 text-xs font-bold text-[var(--c-8a97a8)]" role="status">
              <span class="size-7 animate-spin rounded-full border-[3px] border-[var(--c-0b8cff)]/20 border-t-[var(--c-0b8cff)] motion-reduce:animate-none" />
              正在生成小程序码
            </div>
            <img
              v-else-if="qrcodeUrl"
              :src="qrcodeUrl"
              alt="邀请好友微信小程序码"
              class="size-full rounded-2xl bg-[var(--c-ffffff)] object-contain"
            >
            <div v-else class="text-center">
              <UIcon name="i-lucide-qr-code" class="mx-auto size-9 text-[var(--c-a0aabb)]" />
              <p class="mt-2 text-xs text-[var(--c-8a97a8)]">小程序码生成失败，请稍后重试</p>
            </div>
          </div>

          <div class="mt-5 rounded-2xl bg-[var(--c-f6f9fd)] p-3">
            <div class="text-[11px] font-bold text-[var(--c-8a97a8)]">网页邀请链接</div>
            <div class="mt-1.5 truncate text-xs text-[var(--c-4b5b70)]">{{ inviteUrl }}</div>
          </div>

          <div class="mt-4 grid grid-cols-2 gap-3">
            <button
              type="button"
              class="flex h-11 cursor-pointer items-center justify-center gap-1.5 rounded-full bg-[var(--c-eef7ff)] text-sm font-bold text-[var(--c-0b8cff)] transition-colors hover:bg-[var(--c-e0f0ff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2"
              @click="$emit('copy')"
            >
              <UIcon name="i-lucide-copy" class="size-4" />
              复制链接
            </button>
            <a
              v-if="qrcodeUrl"
              :href="qrcodeUrl"
              target="_blank"
              rel="noopener"
              class="flex h-11 items-center justify-center gap-1.5 rounded-full bg-[var(--c-0b8cff)] text-sm font-bold text-white transition-colors hover:bg-[var(--c-087dde)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--c-0b8cff)] focus-visible:ring-offset-2"
            >
              <UIcon name="i-lucide-maximize-2" class="size-4" />
              查看大图
            </a>
            <button
              v-else
              type="button"
              disabled
              class="flex h-11 cursor-not-allowed items-center justify-center rounded-full bg-[var(--c-e7edf5)] text-sm font-bold text-[var(--c-9aa5b5)]"
            >
              查看大图
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
defineProps({
  open: { type: Boolean, default: false },
  qrcodeUrl: { type: String, default: '' },
  inviteUrl: { type: String, default: '' },
  loading: { type: Boolean, default: false },
})

const emit = defineEmits(['close', 'copy'])

function onKeydown(event) {
  if (event.key === 'Escape') emit('close')
}

onMounted(() => document.addEventListener('keydown', onKeydown))
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
</script>

<style scoped>
.invite-modal-enter-active,
.invite-modal-leave-active {
  transition: opacity 0.2s ease;
}

.invite-modal-enter-from,
.invite-modal-leave-to {
  opacity: 0;
}
</style>