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 ( return (
<Box minH="100vh" bg={forumColors.background.main} pt="80px" pb="20"> <Box minH="100vh" bg={forumColors.background.main} pt={{ base: "60px", md: "80px" }} pb={{ base: "6", md: "20" }}>
<Container maxW="container.xl"> <Container maxW="container.xl" px={{ base: "3", sm: "4", md: "6" }}>
{/* 头部：返回按钮 */} {/* 头部：返回按钮 */}
<Button <Button
variant="ghost" variant="ghost"
@@ -206,8 +206,8 @@ const PredictionTopicDetail = () => {
{/* 头部 */} {/* 头部 */}
<Box <Box
bg={forumColors.gradients.goldSubtle} bg={forumColors.gradients.goldSubtle}
px="6" px={{ base: "4", md: "6" }}
py="4" py={{ base: "3", md: "4" }}
borderBottom="1px solid" borderBottom="1px solid"
borderColor={forumColors.border.default} borderColor={forumColors.border.default}
> >
@@ -233,15 +233,16 @@ const PredictionTopicDetail = () => {
<Heading <Heading
as="h1" as="h1"
fontSize="2xl" fontSize={{ base: "lg", md: "2xl" }}
fontWeight="bold" fontWeight="bold"
color={forumColors.text.primary} color={forumColors.text.primary}
mt="4" mt={{ base: "3", md: "4" }}
lineHeight="1.4"
> >
{topic.title} {topic.title}
</Heading> </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} {topic.description}
</Text> </Text>
@@ -265,15 +266,15 @@ const PredictionTopicDetail = () => {
</Box> </Box>
{/* 市场数据 */} {/* 市场数据 */}
<Box p="6"> <Box p={{ base: "4", md: "6" }}>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing="6"> <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: "4", md: "6" }}>
{/* Yes 方 */} {/* Yes 方 */}
<Box <Box
bg="linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%)" bg="linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%)"
border="2px solid" border="2px solid"
borderColor="green.400" borderColor="green.400"
borderRadius="xl" borderRadius="xl"
p="6" p={{ base: "4", md: "6" }}
position="relative" position="relative"
> >
{yesData.lord_id && ( {yesData.lord_id && (
@@ -344,7 +345,7 @@ const PredictionTopicDetail = () => {
border="2px solid" border="2px solid"
borderColor="red.400" borderColor="red.400"
borderRadius="xl" borderRadius="xl"
p="6" p={{ base: "4", md: "6" }}
position="relative" position="relative"
> >
{noData.lord_id && ( {noData.lord_id && (
@@ -439,14 +440,14 @@ const PredictionTopicDetail = () => {
{/* 右侧：操作面板 */} {/* 右侧：操作面板 */}
<Box gridColumn={{ base: '1', lg: '3' }}> <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 <Box
bg={forumColors.background.card} bg={forumColors.background.card}
borderRadius="xl" borderRadius="xl"
border="1px solid" border="1px solid"
borderColor={forumColors.border.gold} borderColor={forumColors.border.gold}
p="6" p={{ base: "4", md: "6" }}
> >
<VStack spacing="4" align="stretch"> <VStack spacing="4" align="stretch">
<HStack justify="center" spacing="2"> <HStack justify="center" spacing="2">
@@ -457,7 +458,7 @@ const PredictionTopicDetail = () => {
</HStack> </HStack>
<Text <Text
fontSize="4xl" fontSize={{ base: "3xl", md: "4xl" }}
fontWeight="bold" fontWeight="bold"
color={forumColors.primary[500]} color={forumColors.primary[500]}
textAlign="center" textAlign="center"
@@ -499,7 +500,9 @@ const PredictionTopicDetail = () => {
color={forumColors.background.main} color={forumColors.background.main}
size="lg" size="lg"
w="full" w="full"
h={{ base: "12", md: "auto" }}
fontWeight="bold" fontWeight="bold"
fontSize={{ base: "md", md: "lg" }}
onClick={() => handleOpenTrade('buy')} onClick={() => handleOpenTrade('buy')}
_hover={{ _hover={{
transform: 'translateY(-2px)', transform: 'translateY(-2px)',
@@ -517,7 +520,9 @@ const PredictionTopicDetail = () => {
color={forumColors.text.primary} color={forumColors.text.primary}
size="lg" size="lg"
w="full" w="full"
h={{ base: "12", md: "auto" }}
fontWeight="bold" fontWeight="bold"
fontSize={{ base: "md", md: "lg" }}
onClick={() => handleOpenTrade('sell')} onClick={() => handleOpenTrade('sell')}
_hover={{ _hover={{
bg: forumColors.background.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 ( return (
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered> <Modal isOpen={isOpen} onClose={onClose} size={{ base: "full", sm: "lg" }} isCentered>
<ModalOverlay backdropFilter="blur(4px)" /> <ModalOverlay backdropFilter="blur(4px)" />
<ModalContent <ModalContent
bg={forumColors.background.card} bg={forumColors.background.card}
borderRadius="xl" borderRadius={{ base: "0", sm: "xl" }}
border="1px solid" border="1px solid"
borderColor={forumColors.border.default} borderColor={forumColors.border.default}
maxH={{ base: "100vh", sm: "90vh" }}
m={{ base: "0", sm: "4" }}
> >
<ModalHeader <ModalHeader
bg={forumColors.gradients.goldSubtle} bg={forumColors.gradients.goldSubtle}
borderTopRadius="xl" borderTopRadius={{ base: "0", sm: "xl" }}
borderBottom="1px solid" borderBottom="1px solid"
borderColor={forumColors.border.default} borderColor={forumColors.border.default}
py={{ base: "4", sm: "3" }}
> >
<HStack spacing="2"> <HStack spacing="2">
<Icon <Icon
as={mode === 'buy' ? Zap : DollarSign} as={mode === 'buy' ? Zap : DollarSign}
boxSize="20px" boxSize={{ base: "18px", sm: "20px" }}
color={forumColors.primary[500]} color={forumColors.primary[500]}
/> />
<Text color={forumColors.text.primary}> <Text color={forumColors.text.primary} fontSize={{ base: "md", sm: "lg" }}>
{mode === 'buy' ? '购买席位' : '卖出席位'} {mode === 'buy' ? '购买席位' : '卖出席位'}
</Text> </Text>
</HStack> </HStack>
</ModalHeader> </ModalHeader>
<ModalCloseButton color={forumColors.text.primary} /> <ModalCloseButton color={forumColors.text.primary} />
<ModalBody py="6"> <ModalBody py={{ base: "4", sm: "6" }} px={{ base: "4", sm: "6" }}>
<VStack spacing="5" align="stretch"> <VStack spacing="5" align="stretch">
{/* 话题标题 */} {/* 话题标题 */}
<Box <Box
bg={forumColors.background.hover} bg={forumColors.background.hover}
borderRadius="lg" borderRadius="lg"
p="3" p={{ base: "3", sm: "3" }}
border="1px solid" border="1px solid"
borderColor={forumColors.border.default} 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} {topic.title}
</Text> </Text>
</Box> </Box>
{/* 选择方向 */} {/* 选择方向 */}
<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> </Text>
<RadioGroup value={selectedOption} onChange={setSelectedOption}> <RadioGroup value={selectedOption} onChange={setSelectedOption}>
@@ -275,31 +278,32 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="2px solid" border="2px solid"
borderColor={selectedOption === 'yes' ? 'green.400' : forumColors.border.default} borderColor={selectedOption === 'yes' ? 'green.400' : forumColors.border.default}
borderRadius="lg" borderRadius="lg"
p="4" p={{ base: "3", sm: "4" }}
cursor="pointer" cursor="pointer"
onClick={() => setSelectedOption('yes')} onClick={() => setSelectedOption('yes')}
minH={{ base: "auto", sm: "auto" }}
> >
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<HStack spacing="3"> <HStack spacing={{ base: "2", sm: "3" }}>
<Radio value="yes" colorScheme="green" /> <Radio value="yes" colorScheme="green" size={{ base: "md", sm: "lg" }} />
<VStack align="start" spacing="0"> <VStack align="start" spacing="0">
<HStack spacing="2"> <HStack spacing="2">
<Icon as={TrendingUp} boxSize="16px" color="green.500" /> <Icon as={TrendingUp} boxSize={{ base: "14px", sm: "16px" }} color="green.500" />
<Text fontWeight="600" color="green.600"> <Text fontWeight="600" color="green.600" fontSize={{ base: "sm", sm: "md" }}>
看涨 / Yes 看涨 / Yes
</Text> </Text>
</HStack> </HStack>
<Text fontSize="xs" color={forumColors.text.secondary}> <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
{positions.yes.total_shares}份持仓 {positions.yes.total_shares}份持仓
</Text> </Text>
</VStack> </VStack>
</HStack> </HStack>
<VStack align="end" spacing="0"> <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)} {Math.round(positions.yes.current_price)}
</Text> </Text>
<Text fontSize="xs" color={forumColors.text.secondary}> <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
积分/份 积分/份
</Text> </Text>
</VStack> </VStack>
@@ -321,31 +325,32 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="2px solid" border="2px solid"
borderColor={selectedOption === 'no' ? 'red.400' : forumColors.border.default} borderColor={selectedOption === 'no' ? 'red.400' : forumColors.border.default}
borderRadius="lg" borderRadius="lg"
p="4" p={{ base: "3", sm: "4" }}
cursor="pointer" cursor="pointer"
onClick={() => setSelectedOption('no')} onClick={() => setSelectedOption('no')}
minH={{ base: "auto", sm: "auto" }}
> >
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<HStack spacing="3"> <HStack spacing={{ base: "2", sm: "3" }}>
<Radio value="no" colorScheme="red" /> <Radio value="no" colorScheme="red" size={{ base: "md", sm: "lg" }} />
<VStack align="start" spacing="0"> <VStack align="start" spacing="0">
<HStack spacing="2"> <HStack spacing="2">
<Icon as={TrendingDown} boxSize="16px" color="red.500" /> <Icon as={TrendingDown} boxSize={{ base: "14px", sm: "16px" }} color="red.500" />
<Text fontWeight="600" color="red.600"> <Text fontWeight="600" color="red.600" fontSize={{ base: "sm", sm: "md" }}>
看跌 / No 看跌 / No
</Text> </Text>
</HStack> </HStack>
<Text fontSize="xs" color={forumColors.text.secondary}> <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
{positions.no.total_shares}份持仓 {positions.no.total_shares}份持仓
</Text> </Text>
</VStack> </VStack>
</HStack> </HStack>
<VStack align="end" spacing="0"> <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)} {Math.round(positions.no.current_price)}
</Text> </Text>
<Text fontSize="xs" color={forumColors.text.secondary}> <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
积分/份 积分/份
</Text> </Text>
</VStack> </VStack>
@@ -358,11 +363,11 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
{/* 购买份额 */} {/* 购买份额 */}
<Box> <Box>
<Flex justify="space-between" mb="3"> <Flex justify="space-between" mb={{ base: "2", sm: "3" }}>
<Text fontSize="sm" fontWeight="600" color={forumColors.text.primary}> <Text fontSize={{ base: "sm", sm: "sm" }} fontWeight="600" color={forumColors.text.primary}>
{mode === 'buy' ? '购买份额' : '卖出份额'} {mode === 'buy' ? '购买份额' : '卖出份额'}
</Text> </Text>
<Text fontSize="sm" color={forumColors.text.secondary}> <Text fontSize={{ base: "sm", sm: "sm" }} color={forumColors.text.secondary}>
{shares} 份 {shares} 份
</Text> </Text>
</Flex> </Flex>
@@ -375,21 +380,21 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
step={1} step={1}
focusThumbOnChange={false} focusThumbOnChange={false}
> >
<SliderTrack bg={forumColors.background.hover}> <SliderTrack bg={forumColors.background.hover} h={{ base: "2", sm: "1.5" }}>
<SliderFilledTrack bg={forumColors.gradients.goldPrimary} /> <SliderFilledTrack bg={forumColors.gradients.goldPrimary} />
</SliderTrack> </SliderTrack>
<SliderThumb boxSize="6" bg={forumColors.primary[500]}> <SliderThumb boxSize={{ base: "7", sm: "6" }} bg={forumColors.primary[500]}>
<Box as={Icon} as={DollarSign} boxSize="12px" color="white" /> <Box as={Icon} as={DollarSign} boxSize={{ base: "14px", sm: "12px" }} color="white" />
</SliderThumb> </SliderThumb>
</Slider> </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>1份</Text>
<Text>{maxShares}份 (最大)</Text> <Text>{maxShares}份 (最大)</Text>
</HStack> </HStack>
{mode === 'sell' && userPosition && ( {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)}积分/份 你的持仓：{userPosition.shares}份 · 平均成本：{Math.round(userPosition.avg_cost)}积分/份
</Text> </Text>
)} )}
@@ -401,10 +406,10 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="1px solid" border="1px solid"
borderColor={forumColors.border.gold} borderColor={forumColors.border.gold}
borderRadius="lg" borderRadius="lg"
p="4" p={{ base: "3", sm: "4" }}
> >
<VStack spacing="2" align="stretch"> <VStack spacing={{ base: "1.5", sm: "2" }} align="stretch">
<Flex justify="space-between" fontSize="sm"> <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}> <Text color={forumColors.text.secondary}>
{mode === 'buy' ? '购买成本' : '卖出收益'} {mode === 'buy' ? '购买成本' : '卖出收益'}
</Text> </Text>
@@ -413,31 +418,31 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
</Text> </Text>
</Flex> </Flex>
<Flex justify="space-between" fontSize="sm"> <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>平均价格</Text> <Text color={forumColors.text.secondary}>平均价格</Text>
<Text fontWeight="600" color={forumColors.text.primary}> <Text fontWeight="600" color={forumColors.text.primary}>
{Math.round(avgPrice)} 积分/份 {Math.round(avgPrice)} 积分/份
</Text> </Text>
</Flex> </Flex>
<Flex justify="space-between" fontSize="sm"> <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>交易税 (2%)</Text> <Text color={forumColors.text.secondary}>交易税 (2%)</Text>
<Text fontWeight="600" color={forumColors.text.primary}> <Text fontWeight="600" color={forumColors.text.primary}>
{Math.round(tax)} 积分 {Math.round(tax)} 积分
</Text> </Text>
</Flex> </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"> <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' ? '总计' : '净收益'} {mode === 'buy' ? '总计' : '净收益'}
</Text> </Text>
<HStack spacing="1"> <HStack spacing="1">
<Icon as={DollarSign} boxSize="20px" color={forumColors.primary[500]} /> <Icon as={DollarSign} boxSize={{ base: "16px", sm: "20px" }} color={forumColors.primary[500]} />
<Text fontSize="2xl" fontWeight="bold" color={forumColors.primary[500]}> <Text fontSize={{ base: "xl", sm: "2xl" }} fontWeight="bold" color={forumColors.primary[500]}>
{Math.round(totalCost)} {Math.round(totalCost)}
</Text> </Text>
<Text fontSize="sm" color={forumColors.text.secondary}> <Text fontSize={{ base: "xs", sm: "sm" }} color={forumColors.text.secondary}>
积分 积分
</Text> </Text>
</HStack> </HStack>
@@ -445,14 +450,14 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
</Box> </Box>
{/* 余额提示 */} {/* 余额提示 */}
<Box borderTop="1px solid" borderColor={forumColors.border.default} pt="2"> <Box borderTop="1px solid" borderColor={forumColors.border.default} pt={{ base: "1.5", sm: "2" }}>
<Flex justify="space-between" fontSize="sm"> <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
<Text color={forumColors.text.secondary}>你的余额：</Text> <Text color={forumColors.text.secondary}>你的余额：</Text>
<Text fontWeight="600" color={forumColors.text.primary}> <Text fontWeight="600" color={forumColors.text.primary}>
{userAccount.balance} 积分 {userAccount.balance} 积分
</Text> </Text>
</Flex> </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}> <Text color={forumColors.text.secondary}>
{mode === 'buy' ? '交易后：' : '交易后：'} {mode === 'buy' ? '交易后：' : '交易后：'}
</Text> </Text>
@@ -483,11 +488,11 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
border="1px solid" border="1px solid"
borderColor="red.200" borderColor="red.200"
borderRadius="lg" borderRadius="lg"
p="3" p={{ base: "2.5", sm: "3" }}
> >
<HStack spacing="2"> <HStack spacing="2">
<Icon as={AlertCircle} boxSize="16px" color="red.500" /> <Icon as={AlertCircle} boxSize={{ base: "14px", sm: "16px" }} color="red.500" />
<Text fontSize="sm" color="red.600" fontWeight="600"> <Text fontSize={{ base: "xs", sm: "sm" }} color="red.600" fontWeight="600">
{tradeCheck.reason} {tradeCheck.reason}
</Text> </Text>
</HStack> </HStack>
@@ -496,13 +501,20 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
</VStack> </VStack>
</ModalBody> </ModalBody>
<ModalFooter borderTop="1px solid" borderColor={forumColors.border.default}> <ModalFooter
<HStack spacing="3"> 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 <Button
variant="ghost" variant="ghost"
onClick={onClose} onClick={onClose}
color={forumColors.text.secondary} color={forumColors.text.secondary}
_hover={{ bg: forumColors.background.hover }} _hover={{ bg: forumColors.background.hover }}
h={{ base: "10", sm: "auto" }}
fontSize={{ base: "sm", sm: "md" }}
> >
取消 取消
</Button> </Button>
@@ -519,6 +531,9 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
transform: 'translateY(-2px)', transform: 'translateY(-2px)',
}} }}
_active={{ transform: 'translateY(0)' }} _active={{ transform: 'translateY(0)' }}
h={{ base: "11", sm: "auto" }}
fontSize={{ base: "sm", sm: "md" }}
px={{ base: "6", sm: "4" }}
> >
{mode === 'buy' ? `购买 ${shares} 份` : `卖出 ${shares} 份`} {mode === 'buy' ? `购买 ${shares} 份` : `卖出 ${shares} 份`}
</Button> </Button>