mcwl-pc/app/pages/login-success.vue

<script setup>
import { useRoute } from '#app'
import { onMounted, onUnmounted, ref } from 'vue'

const route = useRoute()
definePageMeta({
  layout: 'home',
})
const countdown = ref(3)
const countdownText = ref('页面即将关闭...')
let timer = null

let urlParams = null

// const urlParams = new URLSearchParams(window.location.search);
const isSuccess = ref(false)
async function handleAuthorization() {
  const uuid = route.query.uuid
  const code = route.query.code
  // const uuid = urlParams.get('uuid');
  // const code = urlParams.get('code');
  const url = `/wx/uuid/bind/openid?uuid=${uuid}&code=${code}`
  try {
    const res = await request.get(url)
    isSuccess.value = true
  }
  catch (err) {}
}

onMounted(() => {
  handleAuthorization()
  // urlParams = new URLSearchParams(window.location.search);
  // const uuid = urlParams.get('uuid');
  // console.log(uuid);
  //   timer = setInterval(() => {
  //     countdown.value--;
  //     countdownText.value = `${countdown.value}秒后自动关闭...`;
  //     if (countdown.value <= 0) {
  //       clearInterval(timer);
  //       // 关闭页面或跳转
  //       window.close();
  //       // 如果window.close()不生效，可以跳转到指定页面
  //       // window.location.href = '您的目标页面URL'
  //     }
  //   }, 1000);
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <div class="min-h-screen bg-white flex items-center justify-center px-4">
    <!-- <n-button @click="handleAuthorization" type="info">
        授权
    </n-button> -->
    <div v-if="isSuccess">
      <div class="text-center">
        <div
          class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-6 flex items-center justify-center animate-scale-in"
        >
          <svg
            class="w-8 h-8 text-white"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>

        <h2 class="text-xl font-medium text-gray-900 mb-2 animate-fade-in">
          登录成功
        </h2>
        <!-- <p class="text-sm text-gray-500 animate-fade-in-delay">
          {{ countdownText }}
        </p> -->
      </div>
    </div>
    <div v-else>
      <div class="wave-loading mb-8">
        <div class="wave-circle">
          <div class="wave" />
          <div class="wave" />
          <div class="wave" />
          <div class="logo-container">
            <!-- <svg class="logo-icon" viewBox="0 0 24 24" fill="none">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor"/>
            </svg> -->
            <!-- <svg class="logo-icon" viewBox="0 0 24 24">
              <defs>
                <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color: #60a5fa" />
                  <stop offset="100%" style="stop-color: #3b82f6" />
                </linearGradient>
              </defs>
              <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                fill="url(#logoGradient)"
              />
            </svg> -->
          </div>
        </div>
      </div>

      <!-- 加载文字动画 -->
      <div class="loading-text">
        <span class="dot-container">
          <span class="text-xl font-medium text-gray-700">登录中</span>
          <span class="dots">
            <span class="dot">.</span>
            <span class="dot">.</span>
            <span class="dot">.</span>
          </span>
        </span>
      </div>

      <!-- 提示信息 -->
      <div class="mt-4 space-y-2 animate-fade-in">
        <p class="text-gray-500 text-sm">
          正在验证您的身份
        </p>
        <div class="flex items-center justify-center space-x-2">
          <svg class="w-4 h-4 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle
              class="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              stroke-width="4"
            />
            <path
              class="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
          <span class="text-sm text-gray-400">请稍候片刻</span>
        </div>
      </div>

      <!-- 安全提示 -->
      <div class="mt-8 flex items-center justify-center text-gray-400 text-sm">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7a4 4 0 00-8 0v4h8z"
          />
        </svg>
        安全登录中
      </div>
    </div>
  </div>
</template>

<style>
@keyframes scale-in {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-scale-in {
  animation: scale-in 0.3s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-in-delay {
  animation: fade-in 0.3s ease-out 0.2s forwards;
  opacity: 0;
}
</style>