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

优惠码Bug修复

Browse Source
This commit is contained in:
zzlgreat
2025-11-07 08:13:12 +08:00
parent 83c6abdfba
commit a3810499cc
4 changed files with 247 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -757,49 +757,107 @@ export default function SubscriptionContent() {
)}
{/* 计费周期选择 */}
<Flex justify="center">
<HStack
spacing={0}
bg={bgAccent}
borderRadius="lg"
p={1}
border="1px solid"
borderColor={borderColor}
flexWrap="wrap"
>
{(() => {
// 获取第一个套餐的pricing_options作为周期选项（假设所有套餐都有相同的周期）
const firstPlan = subscriptionPlans.find(plan => plan.pricing_options);
const cycleOptions = firstPlan?.pricing_options || [
{ cycle_key: 'monthly', label: '按月付费', months: 1 },
{ cycle_key: 'yearly', label: '按年付费', months: 12, discount_percent: 20 }
];
<Box>
<Text textAlign="center" fontSize="sm" color={secondaryText} mb={3}>
选择计费周期 · 时长越长优惠越大
</Text>
<Flex justify="center" mb={2}>
<HStack
spacing={2}
bg={bgAccent}
borderRadius="xl"
p={2}
border="1px solid"
borderColor={borderColor}
flexWrap="wrap"
justify="center"
>
{(() => {
// 获取第一个套餐的pricing_options作为周期选项（假设所有套餐都有相同的周期）
const firstPlan = subscriptionPlans.find(plan => plan.pricing_options);
const cycleOptions = firstPlan?.pricing_options || [
{ cycle_key: 'monthly', label: '月付', months: 1 },
{ cycle_key: 'yearly', label: '年付', months: 12, discount_percent: 20 }
];
return cycleOptions.map((option, index) => {
const cycleKey = option.cycle_key || (option.months === 1 ? 'monthly' : option.months === 12 ? 'yearly' : `${option.months}months`);
const isSelected = selectedCycle === cycleKey;
return cycleOptions.map((option, index) => {
const cycleKey = option.cycle_key || (option.months === 1 ? 'monthly' : option.months === 12 ? 'yearly' : `${option.months}months`);
const isSelected = selectedCycle === cycleKey;
const hasDiscount = option.discount_percent && option.discount_percent > 0;
return (
<Button
key={index}
variant={isSelected ? 'solid' : 'ghost'}
colorScheme={isSelected ? 'blue' : 'gray'}
size="md"
onClick={() => setSelectedCycle(cycleKey)}
borderRadius="md"
>
{option.label || `${option.months}个月`}
{option.discount_percent && (
<Badge ml={2} colorScheme="red" fontSize="xs">
省{option.discount_percent}%
</Badge>
)}
</Button>
);
});
})()}
</HStack>
</Flex>
return (
<VStack
key={index}
spacing={0}
position="relative"
>
{/* 折扣标签 */}
{hasDiscount && (
<Badge
position="absolute"
top="-8px"
colorScheme="red"
fontSize="xs"
px={2}
borderRadius="full"
fontWeight="bold"
>
省{option.discount_percent}%
</Badge>
)}
<Button
variant={isSelected ? 'solid' : 'outline'}
colorScheme={isSelected ? 'blue' : 'gray'}
size="md"
onClick={() => setSelectedCycle(cycleKey)}
borderRadius="lg"
minW="80px"
h="50px"
position="relative"
_hover={{
transform: 'translateY(-2px)',
shadow: 'md'
}}
transition="all 0.2s"
>
<VStack spacing={0}>
<Text fontSize="md" fontWeight="bold">
{option.label || `${option.months}个月`}
</Text>
{hasDiscount && (
<Text fontSize="xs" color={isSelected ? 'white' : 'gray.500'}>
更优惠
</Text>
)}
</VStack>
</Button>
</VStack>
);
});
})()}
</HStack>
</Flex>
{/* 提示文字 */}
{(() => {
const firstPlan = subscriptionPlans.find(plan => plan.pricing_options);
const cycleOptions = firstPlan?.pricing_options || [];
const currentOption = cycleOptions.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
if (currentOption && currentOption.discount_percent > 0) {
return (
<Text textAlign="center" fontSize="sm" color="green.600" fontWeight="medium">
🎉 当前选择可节省 {currentOption.discount_percent}% 的费用
</Text>
);
}
return null;
})()}
</Box>
{/* 订阅套餐 */}
<Grid
@@ -991,15 +1049,50 @@ export default function SubscriptionContent() {
</Text>
</HStack>
</Flex>
<Flex justify="space-between" align="center">
<Text fontSize="xs" color={secondaryText} pl={11}>
<Flex justify="space-between" align="center" flexWrap="wrap" gap={2}>
<Text fontSize="xs" color={secondaryText} pl={11} flex={1}>
{plan.description}
</Text>
{getSavingsText(plan) && (
<Badge colorScheme="green" fontSize="xs" px={2} py={1}>
{getSavingsText(plan)}
</Badge>
)}
{(() => {
// 获取当前选中的周期信息
if (plan.pricing_options) {
const currentOption = plan.pricing_options.find(opt =>
opt.cycle_key === selectedCycle ||
(selectedCycle === 'monthly' && opt.months === 1) ||
(selectedCycle === 'yearly' && opt.months === 12)
);
if (currentOption && currentOption.discount_percent > 0) {
// 计算原价和节省金额
const monthlyOption = plan.pricing_options.find(opt => opt.months === 1);
if (monthlyOption) {
const originalPrice = monthlyOption.price * currentOption.months;
const savedAmount = originalPrice - currentOption.price;
return (
<VStack spacing={0} align="flex-end">
<Badge colorScheme="red" fontSize="xs" px={3} py={1} borderRadius="full">
立省 {currentOption.discount_percent}%
</Badge>
<Text fontSize="xs" color="gray.500" textDecoration="line-through">
原价¥{originalPrice.toFixed(0)}
</Text>
<Text fontSize="xs" color="green.600" fontWeight="bold">
省¥{savedAmount.toFixed(0)}
</Text>
</VStack>
);
}
return (
<Badge colorScheme="green" fontSize="xs" px={3} py={1} borderRadius="full">
{getSavingsText(plan)}
</Badge>
);
}
}
return null;
})()}
</Flex>
</VStack>
@@ -1249,7 +1342,7 @@ export default function SubscriptionContent() {
align="center"
>
<Text fontWeight="semibold" color={textColor}>
是否提供退款？
是否支持退款？
</Text>
<Icon
as={openFaqIndex === 4 ? FaChevronUp : FaChevronDown}
@@ -1258,9 +1351,29 @@ export default function SubscriptionContent() {
</Flex>
<Collapse in={openFaqIndex === 4}>
<Box p={4} pt={0} color={secondaryText}>
<Text>
我们提供7天无理由退款保证。如果您在订阅后7天内对服务不满意，可以申请全额退款。超过7天后，我们将根据实际使用情况进行评估。
</Text>
<VStack spacing={2} align="stretch">
<Text>
为了保障服务质量和维护公平的商业环境，我们<strong>不支持退款</strong>。
</Text>
<Text fontSize="sm">
建议您在订阅前：
</Text>
<Text fontSize="sm" pl={3}>
• 充分了解各套餐的功能差异
</Text>
<Text fontSize="sm" pl={3}>
• 使用免费版体验基础功能
</Text>
<Text fontSize="sm" pl={3}>
• 根据实际需求选择合适的计费周期
</Text>
<Text fontSize="sm" pl={3}>
• 如有疑问可联系客服咨询
</Text>
<Text fontSize="sm" color="blue.600" mt={2}>
提示：选择长期套餐（如半年付、年付）可享受更大折扣，性价比更高。
</Text>
</VStack>
</Box>
</Collapse>
</Box>