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

update pay function

Browse Source
This commit is contained in:
zzlgreat
2025-11-24 07:21:02 +08:00
parent 8c372bbc89
commit c594650aa4
2 changed files with 85 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/ValueForum/PredictionTopicDetail.js
View File

@@ -174,8 +174,8 @@ const PredictionTopicDetail = () => {
};
return (
<Box minH="100vh" bg={forumColors.background.main} pt="80px" pb="20">
<Container maxW="container.xl">
<Box minH="100vh" bg={forumColors.background.main} pt={{ base: "60px", md: "80px" }} pb={{ base: "6", md: "20" }}>
<Container maxW="container.xl" px={{ base: "3", sm: "4", md: "6" }}>
{/* 头部：返回按钮 */}
<Button
variant="ghost"
@@ -206,8 +206,8 @@ const PredictionTopicDetail = () => {
{/* 头部 */}
<Box
bg={forumColors.gradients.goldSubtle}
px="6"
py="4"
px={{ base: "4", md: "6" }}
py={{ base: "3", md: "4" }}
borderBottom="1px solid"
borderColor={forumColors.border.default}
>
@@ -233,15 +233,16 @@ const PredictionTopicDetail = () => {
<Heading
as="h1"
fontSize="2xl"
fontSize={{ base: "lg", md: "2xl" }}
fontWeight="bold"
color={forumColors.text.primary}
mt="4"
mt={{ base: "3", md: "4" }}
lineHeight="1.4"
>
{topic.title}
</Heading>
<Text fontSize="md" color={forumColors.text.secondary} mt="3">
<Text fontSize={{ base: "sm", md: "md" }} color={forumColors.text.secondary} mt={{ base: "2", md: "3" }}>
{topic.description}
</Text>
@@ -265,15 +266,15 @@ const PredictionTopicDetail = () => {
</Box>
{/* 市场数据 */}
<Box p="6">
<SimpleGrid columns={{ base: 1, md: 2 }} spacing="6">
<Box p={{ base: "4", md: "6" }}>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: "4", md: "6" }}>
{/* Yes 方 */}
<Box
bg="linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%)"
border="2px solid"
borderColor="green.400"
borderRadius="xl"
p="6"
p={{ base: "4", md: "6" }}
position="relative"
>
{yesData.lord_id && (
@@ -344,7 +345,7 @@ const PredictionTopicDetail = () => {
border="2px solid"
borderColor="red.400"
borderRadius="xl"
p="6"
p={{ base: "4", md: "6" }}
position="relative"
>
{noData.lord_id && (
@@ -439,14 +440,14 @@ const PredictionTopicDetail = () => {
{/* 右侧：操作面板 */}
<Box gridColumn={{ base: '1', lg: '3' }}>
<VStack spacing="6" align="stretch" position="sticky" top="90px">
<VStack spacing={{ base: "4", md: "6" }} align="stretch" position={{ base: "relative", lg: "sticky" }} top={{ base: "0", lg: "90px" }}>
{/* 奖池信息 */}
<Box
bg={forumColors.background.card}
borderRadius="xl"
border="1px solid"
borderColor={forumColors.border.gold}
p="6"
p={{ base: "4", md: "6" }}
>
<VStack spacing="4" align="stretch">
<HStack justify="center" spacing="2">
@@ -457,7 +458,7 @@ const PredictionTopicDetail = () => {
</HStack>
<Text
fontSize="4xl"
fontSize={{ base: "3xl", md: "4xl" }}
fontWeight="bold"
color={forumColors.primary[500]}
textAlign="center"
@@ -499,7 +500,9 @@ const PredictionTopicDetail = () => {
color={forumColors.background.main}
size="lg"
w="full"
h={{ base: "12", md: "auto" }}
fontWeight="bold"
fontSize={{ base: "md", md: "lg" }}
onClick={() => handleOpenTrade('buy')}
_hover={{
transform: 'translateY(-2px)',
@@ -517,7 +520,9 @@ const PredictionTopicDetail = () => {
color={forumColors.text.primary}
size="lg"
w="full"
h={{ base: "12", md: "auto" }}
fontWeight="bold"
fontSize={{ base: "md", md: "lg" }}
onClick={() => handleOpenTrade('sell')}
_hover={{
bg: forumColors.background.hover,

117
src/views/ValueForum/components/TradeModal.js
View File

@@ -212,51 +212,54 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
};
return (
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
<Modal isOpen={isOpen} onClose={onClose} size={{ base: "full", sm: "lg" }} isCentered>
<ModalOverlay backdropFilter="blur(4px)" />
<ModalContent
bg={forumColors.background.card}
borderRadius="xl"
borderRadius={{ base: "0", sm: "xl" }}
border="1px solid"
borderColor={forumColors.border.default}
maxH={{ base: "100vh", sm: "90vh" }}
m={{ base: "0", sm: "4" }}
>
<ModalHeader
bg={forumColors.gradients.goldSubtle}
borderTopRadius="xl"
borderTopRadius={{ base: "0", sm: "xl" }}
borderBottom="1px solid"
borderColor={forumColors.border.default}
py={{ base: "4", sm: "3" }}
>
<HStack spacing="2">
<Icon
as={mode === 'buy' ? Zap : DollarSign}
boxSize="20px"
boxSize={{ base: "18px", sm: "20px" }}
color={forumColors.primary[500]}
/>
<Text color={forumColors.text.primary}>
<Text color={forumColors.text.primary} fontSize={{ base: "md", sm: "lg" }}>
{mode === 'buy' ? '购买席位' : '卖出席位'}
</Text>
</HStack>
</ModalHeader>
<ModalCloseButton color={forumColors.text.primary} />
<ModalBody py="6">
<ModalBody py={{ base: "4", sm: "6" }} px={{ base: "4", sm: "6" }}>
<VStack spacing="5" align="stretch">
{/* 话题标题 */}
<Box
bg={forumColors.background.hover}
borderRadius="lg"
p="3"
p={{ base: "3", sm: "3" }}
border="1px solid"
borderColor={forumColors.border.default}
>
<Text fontSize="sm" fontWeight="600" color={forumColors.text.primary}>
<Text fontSize={{ base: "xs", sm: "sm" }} fontWeight="600" color={forumColors.text.primary} lineHeight="1.5">
{topic.title}
</Text>
</Box>
{/* 选择方向 */}
<Box>
<Text fontSize="sm" fontWeight="600" color={forumColors.text.primary} mb="3">
<Text fontSize={{ base: "sm", sm: "sm" }} fontWeight="600" color={forumColors.text.primary} mb={{ base: "2", sm: "3" }}>
选择方向
</Text>
<RadioGroup value={selectedOption} onChange={setSelectedOption}>
@@ -275,31 +278,32 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="2px solid"
borderColor={selectedOption === 'yes' ? 'green.400' : forumColors.border.default}
borderRadius="lg"
p="4"
p={{ base: "3", sm: "4" }}
cursor="pointer"
onClick={() => setSelectedOption('yes')}
minH={{ base: "auto", sm: "auto" }}
>
<Flex justify="space-between" align="center">
<HStack spacing="3">
<Radio value="yes" colorScheme="green" />
<HStack spacing={{ base: "2", sm: "3" }}>
<Radio value="yes" colorScheme="green" size={{ base: "md", sm: "lg" }} />
<VStack align="start" spacing="0">
<HStack spacing="2">
<Icon as={TrendingUp} boxSize="16px" color="green.500" />
<Text fontWeight="600" color="green.600">
<Icon as={TrendingUp} boxSize={{ base: "14px", sm: "16px" }} color="green.500" />
<Text fontWeight="600" color="green.600" fontSize={{ base: "sm", sm: "md" }}>
看涨 / Yes
</Text>
</HStack>
<Text fontSize="xs" color={forumColors.text.secondary}>
<Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
{positions.yes.total_shares}份持仓
</Text>
</VStack>
</HStack>
<VStack align="end" spacing="0">
<Text fontSize="xl" fontWeight="bold" color="green.600">
<Text fontSize={{ base: "lg", sm: "xl" }} fontWeight="bold" color="green.600">
{Math.round(positions.yes.current_price)}
</Text>
<Text fontSize="xs" color={forumColors.text.secondary}>
<Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
积分/份
</Text>
</VStack>
@@ -321,31 +325,32 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="2px solid"
borderColor={selectedOption === 'no' ? 'red.400' : forumColors.border.default}
borderRadius="lg"
p="4"
p={{ base: "3", sm: "4" }}
cursor="pointer"
onClick={() => setSelectedOption('no')}
minH={{ base: "auto", sm: "auto" }}
>
<Flex justify="space-between" align="center">
<HStack spacing="3">
<Radio value="no" colorScheme="red" />
<HStack spacing={{ base: "2", sm: "3" }}>
<Radio value="no" colorScheme="red" size={{ base: "md", sm: "lg" }} />
<VStack align="start" spacing="0">
<HStack spacing="2">
<Icon as={TrendingDown} boxSize="16px" color="red.500" />
<Text fontWeight="600" color="red.600">
<Icon as={TrendingDown} boxSize={{ base: "14px", sm: "16px" }} color="red.500" />
<Text fontWeight="600" color="red.600" fontSize={{ base: "sm", sm: "md" }}>
看跌 / No
</Text>
</HStack>
<Text fontSize="xs" color={forumColors.text.secondary}>
<Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
{positions.no.total_shares}份持仓
</Text>
</VStack>
</HStack>
<VStack align="end" spacing="0">
<Text fontSize="xl" fontWeight="bold" color="red.600">
<Text fontSize={{ base: "lg", sm: "xl" }} fontWeight="bold" color="red.600">
{Math.round(positions.no.current_price)}
</Text>
<Text fontSize="xs" color={forumColors.text.secondary}>
<Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
积分/份
</Text>
</VStack>
@@ -358,11 +363,11 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
{/* 购买份额 */}
<Box>
<Flex justify="space-between" mb="3">
<Text fontSize="sm" fontWeight="600" color={forumColors.text.primary}>
<Flex justify="space-between" mb={{ base: "2", sm: "3" }}>
<Text fontSize={{ base: "sm", sm: "sm" }} fontWeight="600" color={forumColors.text.primary}>
{mode === 'buy' ? '购买份额' : '卖出份额'}
</Text>
<Text fontSize="sm" color={forumColors.text.secondary}>
<Text fontSize={{ base: "sm", sm: "sm" }} color={forumColors.text.secondary}>
{shares} 份
</Text>
</Flex>
@@ -375,21 +380,21 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
step={1}
focusThumbOnChange={false}
>
<SliderTrack bg={forumColors.background.hover}>
<SliderTrack bg={forumColors.background.hover} h={{ base: "2", sm: "1.5" }}>
<SliderFilledTrack bg={forumColors.gradients.goldPrimary} />
</SliderTrack>
<SliderThumb boxSize="6" bg={forumColors.primary[500]}>
<Box as={Icon} as={DollarSign} boxSize="12px" color="white" />
<SliderThumb boxSize={{ base: "7", sm: "6" }} bg={forumColors.primary[500]}>
<Box as={Icon} as={DollarSign} boxSize={{ base: "14px", sm: "12px" }} color="white" />
</SliderThumb>
</Slider>
<HStack justify="space-between" mt="2" fontSize="xs" color={forumColors.text.tertiary}>
<HStack justify="space-between" mt="2" fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.tertiary}>
<Text>1份</Text>
<Text>{maxShares}份 (最大)</Text>
</HStack>
{mode === 'sell' && userPosition && (
<Text fontSize="xs" color={forumColors.text.secondary} mt="2">
<Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary} mt="2">
你的持仓：{userPosition.shares}份 · 平均成本：{Math.round(userPosition.avg_cost)}积分/份
</Text>
)}
@@ -401,10 +406,10 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="1px solid"
borderColor={forumColors.border.gold}
borderRadius="lg"
p="4"
p={{ base: "3", sm: "4" }}
>
<VStack spacing="2" align="stretch">
<Flex justify="space-between" fontSize="sm">
<VStack spacing={{ base: "1.5", sm: "2" }} align="stretch">
<Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>
{mode === 'buy' ? '购买成本' : '卖出收益'}
</Text>
@@ -413,31 +418,31 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
</Text>
</Flex>
<Flex justify="space-between" fontSize="sm">
<Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>平均价格</Text>
<Text fontWeight="600" color={forumColors.text.primary}>
{Math.round(avgPrice)} 积分/份
</Text>
</Flex>
<Flex justify="space-between" fontSize="sm">
<Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>交易税 (2%)</Text>
<Text fontWeight="600" color={forumColors.text.primary}>
{Math.round(tax)} 积分
</Text>
</Flex>
<Box borderTop="1px solid" borderColor={forumColors.border.default} pt="2" mt="1">
<Box borderTop="1px solid" borderColor={forumColors.border.default} pt={{ base: "1.5", sm: "2" }} mt="1">
<Flex justify="space-between">
<Text fontWeight="bold" color={forumColors.text.primary}>
<Text fontWeight="bold" color={forumColors.text.primary} fontSize={{ base: "sm", sm: "md" }}>
{mode === 'buy' ? '总计' : '净收益'}
</Text>
<HStack spacing="1">
<Icon as={DollarSign} boxSize="20px" color={forumColors.primary[500]} />
<Text fontSize="2xl" fontWeight="bold" color={forumColors.primary[500]}>
<Icon as={DollarSign} boxSize={{ base: "16px", sm: "20px" }} color={forumColors.primary[500]} />
<Text fontSize={{ base: "xl", sm: "2xl" }} fontWeight="bold" color={forumColors.primary[500]}>
{Math.round(totalCost)}
</Text>
<Text fontSize="sm" color={forumColors.text.secondary}>
<Text fontSize={{ base: "xs", sm: "sm" }} color={forumColors.text.secondary}>
积分
</Text>
</HStack>
@@ -445,14 +450,14 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
</Box>
{/* 余额提示 */}
<Box borderTop="1px solid" borderColor={forumColors.border.default} pt="2">
<Flex justify="space-between" fontSize="sm">
<Box borderTop="1px solid" borderColor={forumColors.border.default} pt={{ base: "1.5", sm: "2" }}>
<Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>你的余额：</Text>
<Text fontWeight="600" color={forumColors.text.primary}>
{userAccount.balance} 积分
</Text>
</Flex>
<Flex justify="space-between" fontSize="sm" mt="1">
<Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }} mt="1">
<Text color={forumColors.text.secondary}>
{mode === 'buy' ? '交易后：' : '交易后：'}
</Text>
@@ -483,11 +488,11 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="1px solid"
borderColor="red.200"
borderRadius="lg"
p="3"
p={{ base: "2.5", sm: "3" }}
>
<HStack spacing="2">
<Icon as={AlertCircle} boxSize="16px" color="red.500" />
<Text fontSize="sm" color="red.600" fontWeight="600">
<Icon as={AlertCircle} boxSize={{ base: "14px", sm: "16px" }} color="red.500" />
<Text fontSize={{ base: "xs", sm: "sm" }} color="red.600" fontWeight="600">
{tradeCheck.reason}
</Text>
</HStack>
@@ -496,13 +501,20 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
</VStack>
</ModalBody>
<ModalFooter borderTop="1px solid" borderColor={forumColors.border.default}>
<HStack spacing="3">
<ModalFooter
borderTop="1px solid"
borderColor={forumColors.border.default}
py={{ base: "3", sm: "4" }}
px={{ base: "4", sm: "6" }}
>
<HStack spacing={{ base: "2", sm: "3" }} w="full" justify="flex-end">
<Button
variant="ghost"
onClick={onClose}
color={forumColors.text.secondary}
_hover={{ bg: forumColors.background.hover }}
h={{ base: "10", sm: "auto" }}
fontSize={{ base: "sm", sm: "md" }}
>
取消
</Button>
@@ -519,6 +531,9 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
transform: 'translateY(-2px)',
}}
_active={{ transform: 'translateY(0)' }}
h={{ base: "11", sm: "auto" }}
fontSize={{ base: "sm", sm: "md" }}
px={{ base: "6", sm: "4" }}
>
{mode === 'buy' ? `购买 ${shares} 份` : `卖出 ${shares} 份`}
</Button>