speakeloudest
e233c87fe6
Some checks failed
site-dist-deploy / build-and-deploy (push) Has been cancelled
97 lines
3.4 KiB
Vue
97 lines
3.4 KiB
Vue
<template>
|
|
<div class="flex min-h-screen flex-col bg-black text-white">
|
|
<!-- Full Width Header -->
|
|
<div class="h-[60px] md:h-[125px]">
|
|
<div class="fixed top-[20px] z-50 w-full md:top-[45px]">
|
|
<div class="container">
|
|
<header
|
|
class="lucid-glass-bar flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[60px] md:pr-[10px]"
|
|
>
|
|
<router-link to="/" class="flex items-center gap-2">
|
|
<!-- Desktop Logo -->
|
|
<Logo alt="Hi快VPN" class="h-[18px] w-auto md:ml-8 md:h-[29px]" />
|
|
<span class="font-black text-2xl ml-3">高能合伙人</span>
|
|
</router-link>
|
|
<div v-if="isLoggedIn" class="flex items-center">
|
|
<router-link
|
|
to="/user-center"
|
|
class="flex size-[30px] items-center justify-center rounded-full bg-[#78788029] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[40px] md:text-3xl"
|
|
>
|
|
{{ userLetter }}
|
|
</router-link>
|
|
</div>
|
|
<button
|
|
v-else
|
|
class="flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[40px] md:w-[220px] md:text-xl"
|
|
>
|
|
代理后台登录/注册
|
|
</button>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-1 flex-col">
|
|
<!-- Main Neon Green Card -->
|
|
<!-- <div class="container md:hidden">
|
|
|
|
</div>-->
|
|
<div class="hidden flex-1 items-center justify-center md:flex md:pb-[50px]">
|
|
<div class="container mx-auto">
|
|
<DesktopLayout
|
|
:user-info="userSubInfo"
|
|
:selected-plan-id="selectedPlanId"
|
|
:selected-plan="activePlan"
|
|
:is-paying="isPaying"
|
|
:is-user-loading="isUserLoading"
|
|
:is-plans-loading="isPlansLoading"
|
|
:is-payments-loading="isPaymentsLoading"
|
|
@pay="handlePay"
|
|
@show-order-details="orderDetailsModalRef?.show()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import DesktopLayout from './DesktopLayout/index.vue'
|
|
import OrderStatusDialog from '@/components/user-center/OrderStatusDialog.vue'
|
|
import OrderDetailsModal from './components/OrderDetails/index.vue'
|
|
import Logo from '@/pages/Home/logo.svg?component'
|
|
import request from '@/utils/request'
|
|
import { toast } from 'vue-sonner'
|
|
import { useLocalStorage } from '@vueuse/core'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const token = useLocalStorage('Authorization', '')
|
|
const userEmail = useLocalStorage('UserEmail', '')
|
|
|
|
const isLoggedIn = computed(() => !!token.value)
|
|
const userLetter = computed(() => {
|
|
if (!userEmail.value) return '?'
|
|
return userEmail.value.charAt(0).toUpperCase()
|
|
})
|
|
// --- State ---
|
|
const selectedPlanId = ref('p2')
|
|
const isPaying = ref(false)
|
|
const isUserLoading = ref(true)
|
|
const isPlansLoading = ref(true)
|
|
const isPaymentsLoading = ref(true)
|
|
const orderStatusDialogRef = ref<InstanceType<typeof OrderStatusDialog> | null>(null)
|
|
const orderDetailsModalRef = ref<InstanceType<typeof OrderDetailsModal> | null>(null)
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|
|
<style scoped>
|
|
</style>
|