HI-VPN/hi-landing-hero
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

骨架屏细节

Browse Source
This commit is contained in:
speakeloudest 2025-12-31 07:12:53 -08:00
parent 4d153b4149
commit 107d950771
4 changed files with 287 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/user-center/UserCenterSkeleton.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<div class="user-center-skeleton custom-pulse" :class="[layout === 'desktop' ? 'w-full' : '']">
<!-- --- Header Part --- -->
<template v-if="type === 'header'">
<div v-if="layout === 'mobile'" class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
<div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
<div class="flex flex-col gap-2">
<div class="h-5 w-40 rounded bg-[#A8FF53]/60"></div>
<div class="h-3 w-24 rounded bg-[#A8FF53]/40"></div>
</div>
</div>
<div v-else class="mb-3 flex flex-col items-center">
<div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
<div class="mt-2 h-6 w-32 rounded bg-[#A8FF53]/60"></div>
</div>
</template>
<!-- --- Devices Part --- -->
<template v-if="type === 'devices'">
<div v-if="layout === 'mobile'" class="h-[76px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
<div v-else class="h-[160px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
</template>
<!-- --- Plans Part --- -->
<template v-if="type === 'plans'">
<div class="space-y-4">
<div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
<div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
</div>
</template>
<!-- --- Payments Part --- -->
<template v-if="type === 'payments'">
<div class="h-[300px] w-full rounded-2xl bg-black/15"></div>
</template>
<!-- --- Full Layouts (Backward Compatibility) --- -->
<template v-if="!type">
<!-- Old Full Layout implementation if needed, but we'll use type-based now -->
</template>
</div>
</template>
<script setup lang="ts">
defineProps<{
type?: 'header' | 'devices' | 'plans' | 'payments'
layout?: 'mobile' | 'desktop'
}>()
</script>
<style scoped>
.custom-pulse {
animation: fast-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes fast-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
</style>

66
src/pages/UserCenter/DesktopLayout/index.vue
View File

@ -1,18 +1,26 @@
<template>
<!-- Main Neon Green Card -->
<div class="flex h-[678px]">
<div class="flex h-[678px] justify-center">
<div
class="flex w-[345px] flex-col justify-between rounded-4xl border-5 border-white py-[32px] pb-[22px]"
>
<div>
<div class="mb-3 flex flex-col items-center">
<img src="../avatar.png" class="size-[60px]" alt="" />
<div class="flex flex-col justify-center text-white">
<div class="text-xl font-semibold">{{ userInfo.email }}</div>
</div>
<div class="mb-3 flex min-h-[88px] flex-col items-center">
<Transition name="fade" mode="out-in">
<UserCenterSkeleton v-if="isUserLoading" type="header" layout="desktop" />
<div v-else class="flex flex-col items-center">
<img src="../avatar.png" class="size-[60px]" alt="" />
<div class="flex flex-col justify-center text-white">
<div class="text-xl font-semibold">{{ userInfo.email }}</div>
</div>
</div>
</Transition>
</div>
<div class="mb-5 px-[20px] text-white">
<DeviceList :devices="devices" @refresh="emit('refresh')" />
<Transition name="fade" mode="out-in">
<UserCenterSkeleton v-if="isUserLoading" type="devices" layout="desktop" />
<DeviceList v-else :devices="devices" @refresh="emit('refresh')" />
</Transition>
</div>
</div>
<div>
@ -43,18 +51,34 @@
class="ml-2.5 flex items-center overflow-hidden rounded-4xl bg-[#A8FF53] pt-[32px] pb-[22px]"
>
<div class="h-full w-[345px]">
<PlanCard :plans="plans" :currentPlanIndex="currentPlanIndex" @select="handlePlanSelect" />
<Transition name="fade" mode="out-in">
<div v-if="isPlansLoading" class="p-8">
<UserCenterSkeleton type="plans" layout="desktop" />
</div>
<PlanCard
v-else
:plans="plans"
:currentPlanIndex="currentPlanIndex"
@select="handlePlanSelect"
/>
</Transition>
</div>
<div
class="mx-[5px] h-[624px] w-[1px] bg-[url(@/pages/userCenter/DesktopLayout/Line-8.png)]"
></div>
<div class="h-full w-[345px]">
<PaymentMethod
:methods="payments"
:selectedPlan="selectedPlan"
:is-paying="isPaying"
@pay="(id: number | string) => $emit('pay', id)"
/>
<Transition name="fade" mode="out-in">
<div v-if="isPaymentsLoading" class="p-8">
<UserCenterSkeleton type="payments" layout="desktop" />
</div>
<PaymentMethod
v-else
:methods="payments"
:selectedPlan="selectedPlan"
:is-paying="isPaying"
@pay="(id: number | string) => $emit('pay', id)"
/>
</Transition>
</div>
</div>
</div>
@ -65,6 +89,7 @@ import { computed } from 'vue'
import PlanCard from '@/components/user-center/PlanCard.vue'
import DeviceList from '@/components/user-center/DeviceList.vue'
import PaymentMethod from '@/components/user-center/PaymentMethod.vue'
import UserCenterSkeleton from '@/components/user-center/UserCenterSkeleton.vue'
import { Button } from '@/components/ui/button'
import { toast } from 'vue-sonner'
import { useRouter } from 'vue-router'
@ -78,6 +103,9 @@ const props = defineProps<{
selectedPlanId: string
selectedPlan: any
isPaying: boolean
isUserLoading: boolean
isPlansLoading: boolean
isPaymentsLoading: boolean
}>()
const emit = defineEmits(['select-plan', 'pay', 'refresh'])
@ -139,4 +167,14 @@ function logout() {
.tracking-tight {
font-family: 'Inter', 'PingFang SC', sans-serif;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

66
src/pages/UserCenter/MobileLayout/index.vue
View File

@ -2,29 +2,53 @@
<!-- Main Neon Green Card -->
<div class="pt-[35px]">
<div class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
<img src="../avatar.png" class="size-[60px]" alt="" />
<div class="flex h-full flex-col justify-center text-white">
<div class="text-xl font-semibold">{{ userInfo.email }}</div>
<div class="text-xs" :class="{ 'text-[#FF00B7]': expireDateInfo.highlight }">
{{ expireDateInfo.text }}
<Transition name="fade" mode="out-in">
<UserCenterSkeleton v-if="isUserLoading" type="header" layout="mobile" />
<div v-else class="flex items-center gap-3 text-white">
<img src="../avatar.png" class="size-[60px]" alt="" />
<div class="flex h-full flex-col justify-center text-white">
<div class="text-xl font-semibold">{{ userInfo.email }}</div>
<div class="text-xs" :class="{ 'text-[#FF00B7]': expireDateInfo.highlight }">
{{ expireDateInfo.text }}
</div>
</div>
</div>
</div>
</Transition>
</div>
<div class="mb-5 pr-[25px] pl-[21px] text-white">
<DeviceList :devices="devices" @refresh="emit('refresh')" />
<Transition name="fade" mode="out-in">
<UserCenterSkeleton v-if="isUserLoading" type="devices" layout="mobile" />
<DeviceList v-else :devices="devices" @refresh="emit('refresh')" />
</Transition>
</div>
<div class="overflow-hidden rounded-4xl bg-[#A8FF53]">
<div class="pt-7">
<PlanCard :plans="plans" :currentPlanIndex="currentPlanIndex" @select="handlePlanSelect" />
<Transition name="fade" mode="out-in">
<div v-if="isPlansLoading" class="px-6">
<UserCenterSkeleton type="plans" layout="mobile" />
</div>
<PlanCard
v-else
:plans="plans"
:currentPlanIndex="currentPlanIndex"
@select="handlePlanSelect"
/>
</Transition>
</div>
<div class="pt-7">
<PaymentMethod
:methods="payments"
:selectedPlan="selectedPlan"
:is-paying="isPaying"
@pay="(id: number | string) => $emit('pay', id)"
/>
<Transition name="fade" mode="out-in">
<div v-if="isPaymentsLoading" class="px-6">
<UserCenterSkeleton type="payments" layout="mobile" />
</div>
<PaymentMethod
v-else
:methods="payments"
:selectedPlan="selectedPlan"
:is-paying="isPaying"
@pay="(id: number | string) => $emit('pay', id)"
/>
</Transition>
</div>
</div>
@ -52,6 +76,7 @@ import { computed } from 'vue'
import PlanCard from '@/components/user-center/PlanCard.vue'
import DeviceList from '@/components/user-center/DeviceList.vue'
import PaymentMethod from '@/components/user-center/PaymentMethod.vue'
import UserCenterSkeleton from '@/components/user-center/UserCenterSkeleton.vue'
import { Button } from '@/components/ui/button'
import { toast } from 'vue-sonner'
import { useRouter } from 'vue-router'
@ -65,6 +90,9 @@ const props = defineProps<{
selectedPlanId: string
selectedPlan: any
isPaying: boolean
isUserLoading: boolean
isPlansLoading: boolean
isPaymentsLoading: boolean
}>()
const emit = defineEmits(['select-plan', 'pay', 'refresh'])
@ -126,4 +154,14 @@ function logout() {
.tracking-tight {
font-family: 'Inter', 'PingFang SC', sans-serif;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

192
src/pages/UserCenter/index.vue
View File

@ -22,36 +22,46 @@
</div>
</div>
</div>
<!-- Main Neon Green Card -->
<div class="container md:hidden">
<MobileLayout
:already-subscribed="alreadySubscribed"
:devices="devices"
:plans="plans"
:payments="payments"
:user-info="userSubInfo"
:selected-plan-id="selectedPlanId"
:selected-plan="activePlan"
:is-paying="isPaying"
@select-plan="handlePlanSelect"
@pay="handlePay"
@refresh="init"
/>
</div>
<div class="container mx-auto hidden flex-1 items-center justify-center md:flex">
<DesktopLayout
:already-subscribed="alreadySubscribed"
:devices="devices"
:plans="plans"
:payments="payments"
:user-info="userSubInfo"
:selected-plan-id="selectedPlanId"
:selected-plan="activePlan"
:is-paying="isPaying"
@select-plan="handlePlanSelect"
@pay="handlePay"
@refresh="init"
/>
<div class="flex flex-1 flex-col">
<!-- Main Neon Green Card -->
<div class="container md:hidden">
<MobileLayout
:already-subscribed="alreadySubscribed"
:devices="devices"
:plans="plans"
:payments="payments"
: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"
@select-plan="handlePlanSelect"
@pay="handlePay"
@refresh="init"
/>
</div>
<div class="hidden flex-1 items-center justify-center md:flex md:pb-[50px]">
<div class="container mx-auto">
<DesktopLayout
:already-subscribed="alreadySubscribed"
:devices="devices"
:plans="plans"
:payments="payments"
: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"
@select-plan="handlePlanSelect"
@pay="handlePay"
@refresh="init"
/>
</div>
</div>
</div>
<OrderStatusDialog ref="orderStatusDialogRef" @close="handleStatusClose" @refresh="init" />
@ -64,6 +74,7 @@ import { useRoute, useRouter } from 'vue-router'
import MobileLayout from './MobileLayout/index.vue'
import DesktopLayout from './DesktopLayout/index.vue'
import OrderStatusDialog from '@/components/user-center/OrderStatusDialog.vue'
import UserCenterSkeleton from '@/components/user-center/UserCenterSkeleton.vue'
import Logo from '@/pages/Home/logo.svg?component'
import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
import request from '@/utils/request'
@ -73,6 +84,9 @@ const router = useRouter()
// --- 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 selectedPayment = ref('alipay')
@ -152,57 +166,77 @@ const handlePay = (methodId: number | string) => {
params.user_subscribe_id = already.id
}
isPaying.value = true
request.post(api, params).then((res: any) => {
request
.post('/api/v1/public/portal/order/checkout', {
orderNo: res.order_no,
returnUrl: `${window.location.origin}/user-center?order_no=${res.order_no}`,
})
.then((checkoutRes: any) => {
if (checkoutRes.type === 'url' && checkoutRes.checkout_url) {
localStorage.setItem('pending_order_no', res.order_no)
console.log('pending_order_no', res.order_no)
setTimeout(() => {
window.location.href = checkoutRes.checkout_url
})
}
})
.finally(() => {
isPaying.value = false
})
}).catch(() => {
isPaying.value = false
})
request
.post(api, params)
.then((res: any) => {
request
.post('/api/v1/public/portal/order/checkout', {
orderNo: res.order_no,
returnUrl: `${window.location.origin}/user-center?order_no=${res.order_no}`,
})
.then((checkoutRes: any) => {
if (checkoutRes.type === 'url' && checkoutRes.checkout_url) {
localStorage.setItem('pending_order_no', res.order_no)
console.log('pending_order_no', res.order_no)
setTimeout(() => {
window.location.href = checkoutRes.checkout_url
})
}
})
.finally(() => {
isPaying.value = false
})
})
.catch(() => {
isPaying.value = false
})
}
function init() {
// 用户信息 & 设备列表
request.get('/api/v1/public/user/info').then((res: any) => {
devices.value = res.user_devices
const emailInfo = res.auth_methods?.find((item: any) => item.auth_type === 'email')
if (emailInfo) {
userSubInfo.value.email = emailInfo.auth_identifier
}
})
async function init() {
// 1. 用户信息 & 设备列表
isUserLoading.value = true
request
.get('/api/v1/public/user/info')
.then((res: any) => {
devices.value = res.user_devices
const emailInfo = res.auth_methods?.find((item: any) => item.auth_type === 'email')
if (emailInfo) {
userSubInfo.value.email = emailInfo.auth_identifier
}
})
.finally(() => {
isUserLoading.value = false
})
// 已订阅列表
// 2. 已订阅列表 (非阻塞主要展示)
request.get('/api/v1/public/user/subscribe').then((res: any) => {
alreadySubscribed.value = res.list || []
})
// 订阅套餐列表
request.get('/api/v1/public/subscribe/list').then((res: any) => {
plans.value = mapPlans(res.list || [])
if (plans.value.length > 0) {
selectedPlanId.value = plans.value[0].id
}
})
// 3. 订阅套餐列表
isPlansLoading.value = true
request
.get('/api/v1/public/subscribe/list')
.then((res: any) => {
plans.value = mapPlans(res.list || [])
if (plans.value.length > 0) {
selectedPlanId.value = plans.value[0].id
}
})
.finally(() => {
isPlansLoading.value = false
})
// 获取支付方式
request.get('/api/v1/public/payment/methods').then((res: any) => {
console.log(res)
payments.value = res.list?.filter((p: any) => p.platform !== 'apple_iap') || []
})
// 4. 获取支付方式
isPaymentsLoading.value = true
request
.get('/api/v1/public/payment/methods')
.then((res: any) => {
payments.value = res.list?.filter((p: any) => p.platform !== 'apple_iap') || []
})
.finally(() => {
isPaymentsLoading.value = false
})
}
onMounted(() => {
@ -220,6 +254,18 @@ function handleStatusClose() {
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
<style scoped>
/* Simplified layout font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');