142 lines
4.5 KiB
Vue
142 lines
4.5 KiB
Vue
<template>
|
|
<!-- Main Neon Green Card -->
|
|
<div class="flex h-[678px]">
|
|
<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>
|
|
<div class="mb-5 px-[20px] text-white">
|
|
<DeviceList :devices="devices" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="px-6 pt-8 pb-9">
|
|
<!-- <Button
|
|
variant="outline"
|
|
class="mb-[10px] h-[50px] w-full rounded-[32px] border-2 border-[#FF00B7] bg-transparent text-xl font-bold text-[#FF00B7] transition-all hover:bg-[#FF00FF]/90 active:scale-[0.98]"
|
|
>
|
|
注销账户
|
|
</Button>-->
|
|
|
|
<Button
|
|
variant="outline"
|
|
@click="logout"
|
|
class="h-[50px] w-full rounded-[32px] border-2 border-white bg-transparent text-xl font-bold text-white transition-all hover:bg-white/90 active:scale-[0.98]"
|
|
>
|
|
退出登录
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="text-center text-xs" :class="{ 'text-[#FF00B7]': expireDateInfo.highlight }">
|
|
{{ expireDateInfo.text }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
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" />
|
|
</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"
|
|
@pay="(id: number | string) => $emit('pay', id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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 { Button } from '@/components/ui/button'
|
|
import { toast } from 'vue-sonner'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const props = defineProps<{
|
|
devices: any[]
|
|
plans: any[]
|
|
payments: any[]
|
|
alreadySubscribed: any[]
|
|
userInfo: { email: string }
|
|
selectedPlanId: string
|
|
selectedPlan: any
|
|
}>()
|
|
|
|
const emit = defineEmits(['select-plan', 'pay'])
|
|
|
|
// --- Handlers ---
|
|
const handlePlanSelect = (id: string) => {
|
|
emit('select-plan', id)
|
|
}
|
|
const currentPlanIndex = computed(() => {
|
|
return props.plans.findIndex((p) => p.id === props.selectedPlanId)
|
|
})
|
|
|
|
const expireDateInfo = computed(() => {
|
|
const first = props.alreadySubscribed[0]
|
|
let text = ''
|
|
let highlight = false
|
|
|
|
if (!first || !first.expireDate) {
|
|
text = '尚未购买套餐'
|
|
highlight = true
|
|
} else {
|
|
// 尝试解析日期，兼容多种格式
|
|
const dateStr = first.expireDate.replace(/ /g, 'T')
|
|
const expireDateTime = new Date(dateStr)
|
|
|
|
if (isNaN(expireDateTime.getTime())) {
|
|
text = '套餐信息无效'
|
|
} else if (expireDateTime < new Date()) {
|
|
const year = expireDateTime.getFullYear()
|
|
const month = String(expireDateTime.getMonth() + 1).padStart(2, '0')
|
|
const day = String(expireDateTime.getDate()).padStart(2, '0')
|
|
text = `已于 ${year}/${month}/${day} 到期`
|
|
highlight = true
|
|
} else {
|
|
const year = expireDateTime.getFullYear()
|
|
const month = String(expireDateTime.getMonth() + 1).padStart(2, '0')
|
|
const day = String(expireDateTime.getDate()).padStart(2, '0')
|
|
const hour = String(expireDateTime.getHours()).padStart(2, '0')
|
|
const minute = String(expireDateTime.getMinutes()).padStart(2, '0')
|
|
const second = String(expireDateTime.getSeconds()).padStart(2, '0')
|
|
text = `到期时间：${year}/${month}/${day} ${hour}:${minute}:${second}`
|
|
highlight = false
|
|
}
|
|
}
|
|
|
|
return { text, highlight }
|
|
})
|
|
|
|
function logout() {
|
|
router.push('/')
|
|
localStorage.removeItem('Authorization')
|
|
toast.success('退出成功')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Simplified layout font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
|
|
|
|
.tracking-tight {
|
|
font-family: 'Inter', 'PingFang SC', sans-serif;
|
|
}
|
|
</style>
|