vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登陆状态调整

Browse Source
This commit is contained in:
zdl
2025-10-20 13:58:07 +08:00
parent b2681231b0
commit d695f8ff7b
8 changed files with 37 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/Subscription/SubscriptionContent.js
View File

@@ -24,12 +24,12 @@ import {
} from '@chakra-ui/react';
import React, { useState, useEffect } from 'react';
import { logger } from '../../utils/logger';
import { useAuth } from '../../contexts/AuthContext';
// Icons
import {
FaWeixin,
FaGem,
FaStar,
FaCheck,
FaQrcode,
FaClock,
@@ -38,6 +38,9 @@ import {
} from 'react-icons/fa';
export default function SubscriptionContent() {
// Auth context
const { user } = useAuth();
// Chakra color mode
const textColor = useColorModeValue('gray.700', 'white');
const borderColor = useColorModeValue('gray.200', 'gray.600');
@@ -50,7 +53,6 @@ export default function SubscriptionContent() {
// State
const [subscriptionPlans, setSubscriptionPlans] = useState([]);
const [currentUser, setCurrentUser] = useState(null);
const [selectedPlan, setSelectedPlan] = useState(null);
const [selectedCycle, setSelectedCycle] = useState('monthly');
const [paymentOrder, setPaymentOrder] = useState(null);
@@ -63,7 +65,7 @@ export default function SubscriptionContent() {
// 加载订阅套餐数据
useEffect(() => {
fetchSubscriptionPlans();
fetchCurrentUser();
// 不再需要 fetchCurrentUser(),直接使用 AuthContext 的 user
}, []);
// 倒计时更新
@@ -124,30 +126,8 @@ export default function SubscriptionContent() {
}
};
const fetchCurrentUser = async () => {
try {
const response = await fetch('/api/auth/session', {
credentials: 'include'
});
if (response.ok) {
const data = await response.json();
logger.debug('SubscriptionContent', '用户数据获取成功', { data });
if (data.success) {
setCurrentUser(data.user);
logger.debug('SubscriptionContent', '用户信息已更新', {
userId: data.user?.id,
subscriptionType: data.user?.subscription_type,
subscriptionStatus: data.user?.subscription_status
});
}
}
} catch (error) {
logger.error('SubscriptionContent', 'fetchCurrentUser', error);
}
};
const handleSubscribe = (plan) => {
if (!currentUser) {
if (!user) {
toast({
title: '请先登录',
status: 'warning',
@@ -287,25 +267,9 @@ export default function SubscriptionContent() {
}
};
const handleRefreshUserStatus = async () => {
try {
await fetchCurrentUser();
toast({
title: '用户状态已刷新',
description: '订阅信息已更新',
status: 'success',
duration: 3000,
isClosable: true,
});
} catch (error) {
toast({
title: '刷新失败',
description: '请稍后重试',
status: 'error',
duration: 3000,
isClosable: true,
});
}
const handleRefreshUserStatus = () => {
// 刷新页面以重新加载用户数据
window.location.reload();
};
const handleForceUpdatePayment = async () => {
@@ -459,7 +423,7 @@ export default function SubscriptionContent() {
return (
<VStack spacing={6} align="stretch" w="100%">
{/* 当前订阅状态 */}
{currentUser && (
{user && (
<Box
p={6}
borderRadius="xl"
@@ -487,8 +451,8 @@ export default function SubscriptionContent() {
<HStack spacing={2} mb={2}>
<Badge
colorScheme={
currentUser.subscription_type === 'max' ? 'purple' :
currentUser.subscription_type === 'pro' ? 'blue' : 'gray'
user.subscription_type === 'max' ? 'purple' :
user.subscription_type === 'pro' ? 'blue' : 'gray'
}
variant="subtle"
px={3}
@@ -496,29 +460,30 @@ export default function SubscriptionContent() {
borderRadius="full"
fontSize="sm"
>
{currentUser.subscription_type === 'free' ? '基础版' :
currentUser.subscription_type === 'pro' ? 'Pro 专业版' : 'Max 旗舰版'}
1SubscriptionContent {user.subscription_type}
{user.subscription_type === 'free' ? '基础版' :
user.subscription_type === 'pro' ? 'Pro 专业版' : 'Max 旗舰版'}
</Badge>
<Badge
colorScheme={currentUser.subscription_status === 'active' ? 'green' : 'red'}
colorScheme={user.subscription_status === 'active' ? 'green' : 'red'}
variant="subtle"
px={3}
py={1}
borderRadius="full"
>
{currentUser.subscription_status === 'active' ? '已激活' : '未激活'}
{user.subscription_status === 'active' ? '已激活' : '未激活'}
</Badge>
</HStack>
{currentUser.subscription_end_date && (
{user.subscription_end_date && (
<Text fontSize="sm" color={secondaryText}>
到期时间: {new Date(currentUser.subscription_end_date).toLocaleDateString('zh-CN')}
到期时间: {new Date(user.subscription_end_date).toLocaleDateString('zh-CN')}
</Text>
)}
</Box>
{currentUser.subscription_status === 'active' && currentUser.subscription_type !== 'free' && (
{user.subscription_status === 'active' && user.subscription_type !== 'free' && (
<Icon
as={currentUser.subscription_type === 'max' ? FaCrown : FaGem}
color={currentUser.subscription_type === 'max' ? 'purple.400' : 'blue.400'}
as={user.subscription_type === 'max' ? FaCrown : FaGem}
color={user.subscription_type === 'max' ? 'purple.400' : 'blue.400'}
boxSize={8}
/>
)}
@@ -665,16 +630,16 @@ export default function SubscriptionContent() {
variant="solid"
onClick={() => handleSubscribe(plan)}
isDisabled={
currentUser?.subscription_type === plan.name &&
currentUser?.subscription_status === 'active'
user?.subscription_type === plan.name &&
user?.subscription_status === 'active'
}
_hover={{
transform: 'scale(1.02)',
}}
transition="all 0.2s"
>
{currentUser?.subscription_type === plan.name &&
currentUser?.subscription_status === 'active'
{user?.subscription_type === plan.name &&
user?.subscription_status === 'active'
? '✓ 已订阅'
: `选择 ${plan.display_name}`
}