update pay function

src/components/Subscription/SubscriptionContentNew.tsx

@@ -253,12 +253,12 @@ export default function SubscriptionContentNew() {
         const data = await response.json();
         if (data.success) {
           setPaymentOrder(data.data);
-          setPaymentCountdown(300);
-          startAutoPaymentCheck(data.data.order_id);
+          setPaymentCountdown(30 * 60); // 30分钟
+          startAutoPaymentCheck(data.data.id);
 
           toast({
-            title: '订单已创建',
-            description: '请使用微信扫码支付',
+            title: '订单创建成功',
+            description: '请使用微信扫描二维码完成支付',
             status: 'success',
             duration: 3000,
             isClosable: true,
@@ -1027,30 +1027,101 @@ export default function SubscriptionContentNew() {
               </VStack>
             ) : (
               <VStack spacing={4}>
-                <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
+                <Text color="rgba(255, 255, 255, 0.7)" fontSize="lg" fontWeight="bold">
                   请使用微信扫描二维码完成支付
                 </Text>
+
+                {/* 倒计时 */}
+                <Box
+                  p={3}
+                  bg="rgba(255, 165, 0, 0.1)"
+                  borderRadius="lg"
+                  border="1px solid rgba(255, 165, 0, 0.3)"
+                  w="full"
+                >
+                  <HStack justify="center" spacing={2} mb={2}>
+                    <Icon as={FaClock} color="orange.400" />
+                    <Text color="orange.300" fontSize="sm">
+                      二维码有效时间: {formatTime(paymentCountdown)}
+                    </Text>
+                  </HStack>
+                  <Progress
+                    value={(paymentCountdown / (30 * 60)) * 100}
+                    colorScheme="orange"
+                    size="sm"
+                    borderRadius="full"
+                  />
+                </Box>
+
+                {/* 二维码 */}
+                <Box textAlign="center">
+                  {paymentOrder.qr_code_url ? (
+                    <Image
+                      src={paymentOrder.qr_code_url}
+                      alt="微信支付二维码"
+                      mx="auto"
+                      maxW="200px"
+                      border="2px solid"
+                      borderColor="rgba(255, 255, 255, 0.2)"
+                      borderRadius="lg"
+                      bg="white"
+                      p={2}
+                    />
+                  ) : (
+                    <Flex
+                      w="200px"
+                      h="200px"
+                      mx="auto"
+                      bg="rgba(255, 255, 255, 0.05)"
+                      alignItems="center"
+                      justifyContent="center"
+                      border="2px solid"
+                      borderColor="rgba(255, 255, 255, 0.2)"
+                      borderRadius="lg"
+                    >
+                      <Icon as={FaQrcode} color="rgba(255, 255, 255, 0.3)" boxSize={12} />
+                    </Flex>
+                  )}
+                </Box>
+
+                {/* 订单信息 */}
                 <Box
                   p={4}
-                  bg="white"
+                  bg="rgba(255, 255, 255, 0.05)"
                   borderRadius="lg"
-                  dangerouslySetInnerHTML={{ __html: paymentOrder.code_url_qr }}
-                />
-                <Text color="#D4AF37" fontSize="sm">
-                  剩余时间: {formatTime(paymentCountdown)}
+                  border="1px solid rgba(255, 255, 255, 0.1)"
+                  w="full"
+                >
+                  <Text fontSize="xs" color="rgba(255, 255, 255, 0.5)" mb={2}>
+                    订单号: {paymentOrder.order_no}
                   </Text>
-                <Progress value={(paymentCountdown / 300) * 100} w="full" colorScheme="yellow" />
+                  <Flex justify="space-between" align="baseline">
+                    <Text color="rgba(255, 255, 255, 0.7)">支付金额:</Text>
+                    <Text fontSize="xl" fontWeight="bold" color="#D4AF37">
+                      ¥{paymentOrder.amount}
+                    </Text>
+                  </Flex>
+                </Box>
+
+                {/* 操作按钮 */}
+                <VStack spacing={3} w="full">
                   <Button
                     w="full"
-                  variant="outline"
-                  borderColor="#D4AF37"
-                  color="#D4AF37"
+                    size="lg"
+                    bgGradient="linear-gradient(135deg, #D4AF37, #B8941F)"
+                    color="#000"
+                    fontWeight="bold"
+                    leftIcon={<Icon as={FaRedo} />}
                     onClick={handleForceUpdate}
                     isLoading={forceUpdating}
+                    _hover={{
+                      bgGradient: 'linear-gradient(135deg, #F4E3A7, #D4AF37)',
+                    }}
                   >
                     已完成支付
                   </Button>
                 </VStack>
+              </VStack>
             )}
           </ModalBody>
         </ModalContent>