更新ios

src/components/Subscription/SubscriptionContentNew.tsx

@@ -25,6 +25,10 @@ import {
   useBreakpointValue,
   Checkbox,
   Link as ChakraLink,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
 } from '@chakra-ui/react';
 import {
   Crown,
@@ -39,7 +43,7 @@ import {
   ExternalLink,
   Gem,
 } from 'lucide-react';
-import { AlipayCircleOutlined, WechatOutlined } from '@ant-design/icons';
+import { AlipayCircleOutlined, WechatOutlined, CustomerServiceOutlined } from '@ant-design/icons';
 
 import { logger } from '../../utils/logger';
 import { useAuth } from '../../contexts/AuthContext';
@@ -1561,6 +1565,48 @@ export default function SubscriptionContentNew() {
             </VStack>
           </Box>
         </motion.div>
+
+        {/* 客服联系 */}
+        <Box textAlign="center" mt={8}>
+          <Popover trigger="hover" placement="top">
+            <PopoverTrigger>
+              <HStack
+                as="span"
+                spacing={2}
+                color="rgba(255, 255, 255, 0.5)"
+                fontSize="sm"
+                cursor="pointer"
+                display="inline-flex"
+                transition="color 0.2s"
+                _hover={{ color: '#D4AF37' }}
+              >
+                <CustomerServiceOutlined style={{ fontSize: '16px' }} />
+                <Text>遇到问题？联系客服</Text>
+              </HStack>
+            </PopoverTrigger>
+            <PopoverContent
+              bg="rgba(30, 30, 30, 0.95)"
+              border="1px solid rgba(255, 255, 255, 0.1)"
+              borderRadius="xl"
+              w="auto"
+              _focus={{ boxShadow: 'none' }}
+            >
+              <PopoverBody p={4} textAlign="center">
+                <Image
+                  src="/img/service.jpg"
+                  alt="客服二维码"
+                  w="150px"
+                  h="150px"
+                  borderRadius="lg"
+                  mx="auto"
+                />
+                <Text color="rgba(255, 255, 255, 0.6)" fontSize="xs" mt={3}>
+                  扫码添加企业微信客服
+                </Text>
+              </PopoverBody>
+            </PopoverContent>
+          </Popover>
+        </Box>
       </Container>
 
       {/* 支付模态框 */}