帮助中心修改

src/views/user/HelpCenterPage.tsx

@@ -1,22 +1,50 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, ScrollView, Image, TouchableOpacity, Alert } from 'react-native';
+import { View, StyleSheet, ScrollView, Image, TouchableOpacity, Alert, Modal, Text, ImageBackground } from 'react-native';
-import { TopNavigation, TopNavigationAction, Icon, Text, Button } from '@ui-kitten/components';
+import { TopNavigation, TopNavigationAction, Icon, Button } from '@ui-kitten/components';
 import { apiService } from '../../utils/api';
 import { rpx } from '../../utils/rpx';
 
-const BackIcon = (props) => (
+const BackIcon = (props: any) => (
   <Icon {...props} name='arrow-back' />
 );
 
-const HelpCenterPage = ({ navigation }) => {
+const HelpCenterPage = ({ navigation }: { navigation: any }) => {
   const [showQrcode, setShowQrcode] = useState(false);
   const [phone, setPhone] = useState({ serverWx: '', serverPhone: '' });
   const [classifyList, setClassifyList] = useState([]);
   const [wordlist, setWordlist] = useState([]);
   const [tabindex, setTabindex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    fetchClassifyList();
+    const initData = async () => {
+      try {
+        setIsLoading(true);
+        const classifyResponse = await apiService.getClassifyList();
+        console.log('分类数据:', classifyResponse); // 添加日志
+        
+        if (classifyResponse?.data?.length > 0) {
+          setClassifyList(classifyResponse.data);
+          const firstClassifyId = classifyResponse.data[0].classifyId;
+          console.log('第一个分类ID:', firstClassifyId); // 添加日志
+          
+          const articleResponse = await apiService.getArticleList(firstClassifyId);
+          console.log('文章列表数据:', articleResponse); // 添加日志
+          
+          if (articleResponse?.rows) {
+            setWordlist(articleResponse.rows);
+          }
+        }
+      } catch (error) {
+        console.error('初始化数据失败:', error);
+        setClassifyList([]);
+        setWordlist([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    initData();
     fetchPhone();
   }, []);
 
@@ -29,21 +57,30 @@ const HelpCenterPage = ({ navigation }) => {
   );
 
   const fetchPhone = async () => {
-    // 模拟获取电话信息
     const response = await apiService.getServerPhone();
     setPhone(response.data);
   };
 
-  const fetchClassifyList = async () => {
+  const fetchArticleList = async (id: string) => {
-    const response = await apiService.getClassifyList();
+    if (!id) return;
-    console.log(response,'分类列表');
-    setClassifyList(response.data);
-    fetchArticleList(response.data[0].classifyId);
-  };
     
-  const fetchArticleList = async (id) => {
+    try {
+      setIsLoading(true);
+      console.log('获取文章列表，分类ID:', id); // 添加日志
       const response = await apiService.getArticleList(id);
-    setWordlist(response.data.rows);
+      console.log('获取到的文章列表:', response); // 添加日志
+      
+      if (response?.rows) {
+        setWordlist(response.rows);
+      } else {
+        setWordlist([]);
+      }
+    } catch (error) {
+      console.error('获取文章列表失败:', error);
+      setWordlist([]);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const showWechat = () => {
@@ -54,107 +91,226 @@ const HelpCenterPage = ({ navigation }) => {
     Alert.alert('拨打电话', `拨打电话: ${phone.serverPhone}`);
   };
 
-  const changeTab = (index, id) => {
+  const changeTab = (index: number, id: string) => {
     setTabindex(index);
     fetchArticleList(id);
   };
 
-  const topage = (item) => {
+  const topage = (item: any) => {
     navigation.navigate('ArticlePage', { id: item.articleId });
   };
 
+  const renderWordList = () => {
+    console.log('当前wordlist数据:', wordlist); // 添加日志
+    
+    if (isLoading) {
       return (
+        <View style={styles.wordListContainer}>
+          <Text style={styles.loadingText}>加载中...</Text>
+        </View>
+      );
+    }
+
+    if (!Array.isArray(wordlist) || wordlist.length === 0) {
+      return (
+        <View style={styles.wordListContainer}>
+          <Text style={styles.emptyText}>暂无数据</Text>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.wordListContainer}>
+        {wordlist.map((item, index) => {
+          console.log('渲染列表项:', item.title); // 添加日志
+          return (
+            <TouchableOpacity 
+              key={item.articleId || index} 
+              style={[
+                styles.qsLi,
+                index == wordlist.length - 1 && styles.lastQsLi
+              ]} 
+              onPress={() => topage(item)}
+            >
+              <Text style={styles.qsLiTxt} numberOfLines={1} ellipsizeMode="tail">
+                {item.title || '无标题'}
+              </Text>
+              <Icon name='arrow-forward' style={styles.icon} />
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  };
+
+  return (
+    <ImageBackground
+      source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3' }}
+      style={styles.background}
+    >
       <View style={styles.container}>
         <TopNavigation
           title='帮助中心'
           alignment='center'
           accessoryLeft={BackAction}
+          style={styles.navbar}
         />
-      <ScrollView contentContainerStyle={styles.content}>
+        <ScrollView>
-        <Text category='h5' style={styles.title}>Hi~有什么可以帮您！</Text>
+          <View style={styles.content}>
-        <Text category='s1' style={styles.text}>工作时间: 工作日8:30-11:30 13:30-18:00</Text>
+            <View style={styles.helpTime}>
+              <View style={styles.helpTimeLeft}>
+                <Text style={styles.helpTimeLeftTit}>Hi~有什么可以帮您！</Text>
+                <Text style={[styles.helpTimeLeftContent, { marginTop: rpx(28) }]}>工作时间:</Text>
+                <Text style={[styles.helpTimeLeftContent, { marginTop: rpx(10) }]}>工作日8:30-11:30 13:30-18:00</Text>
+              </View>
+              <View style={styles.helpTimeRight}>
+                <Image 
+                  source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uD8eJCmet0KN1WOEJBKZ' }} 
+                  style={styles.helpTimeRightImg} 
+                />
+              </View>
+            </View>
+
             <View style={styles.helpBtnBox}>
               <TouchableOpacity style={styles.helpBtnItem} onPress={showWechat}>
-            <View>
+                <View style={styles.helpBtnItemLeft}>
                   <Text style={styles.helpBtnItemLeftTit}>微信客服</Text>
                   <Text style={styles.helpBtnItemLeftContent}>为您解答疑惑</Text>
                 </View>
-            <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uP0sux01iWvHzofugDjW' }} style={styles.helpBtnItemRightImg} />
+                <View style={styles.helpBtnItemRight}>
+                  <Image 
+                    source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uP0sux01iWvHzofugDjW' }} 
+                    style={styles.helpBtnItemRightImg} 
+                  />
+                </View>
               </TouchableOpacity>
+
               <View style={styles.line}></View>
+
               <TouchableOpacity style={styles.helpBtnItem} onPress={callPhone}>
-            <View>
+                <View style={styles.helpBtnItemLeft}>
                   <Text style={styles.helpBtnItemLeftTit}>客服电话</Text>
                   <Text style={styles.helpBtnItemLeftContent}>欢迎您拨打提问</Text>
                 </View>
-            <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uKt6yZ7lMykYci7yITT5' }} style={styles.helpBtnItemRightImg} />
+                <View style={styles.helpBtnItemRight}>
+                  <Image 
+                    source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uKt6yZ7lMykYci7yITT5' }} 
+                    style={styles.helpBtnItemRightImg} 
+                  />
+                </View>
               </TouchableOpacity>
             </View>
+
             <View style={styles.qscard}>
               <View style={styles.cardTop}>
                 {classifyList.map((item, index) => (
-              <TouchableOpacity key={index} style={styles.li} onPress={() => changeTab(index, item.classifyId)}>
+                  <TouchableOpacity 
+                    key={item.classifyId || index} 
+                    style={styles.li} 
+                    onPress={() => changeTab(index, item.classifyId)}
+                  >
                     <Text style={styles.txt}>{item.classifyName}</Text>
-                <View style={tabindex === index ? styles.botBorActive : styles.botBor}></View>
+                    {/* <Text style={styles.txt}>{wordlist[0].title}</Text> */}
+                    <View style={[styles.botBor, tabindex === index && styles.botBorActive]}></View>
                   </TouchableOpacity>
                 ))}
               </View>
-          {wordlist.map((item, index) => (
+              <View style={styles.wordListWrapper}>
-            <TouchableOpacity key={index} style={styles.qsLi} onPress={() => topage(item)}>
+                {renderWordList()}
-              <Text style={styles.qsLiTxt}>{item.title}</Text>
+              </View>
-              <Icon name='arrow-forward' style={styles.icon} />
-            </TouchableOpacity>
-          ))}
             </View>
-        {showQrcode && (
-          <View style={styles.qrcodeContainer}>
-            <Text style={styles.qrcodeTitle}>微信客服</Text>
-            <Image source={{ uri: phone.serverWx }} style={styles.qrcodeImage} />
-            <Button onPress={() => setShowQrcode(false)}>关闭</Button>
           </View>
-        )}
         </ScrollView>
+
+        <Modal visible={showQrcode} transparent={true} animationType="fade">
+          <TouchableOpacity 
+            style={styles.mask} 
+            activeOpacity={1} 
+            onPress={() => setShowQrcode(false)}
+          >
+            <View style={styles.qrcodeBox}>
+              <Text style={styles.qrcodeTitle}>微信客服</Text>
+              <Image source={{ uri: phone.serverWx }} style={styles.qrcodeImg} />
+              <TouchableOpacity style={styles.qrcodeBtn}>
+                <Text style={styles.qrcodeBtnText}>保存二维码</Text>
+              </TouchableOpacity>
+              <TouchableOpacity 
+                style={styles.closeBtn} 
+                onPress={() => setShowQrcode(false)}
+              >
+                <Text style={styles.closeBtnText}>×</Text>
+              </TouchableOpacity>
             </View>
+          </TouchableOpacity>
+        </Modal>
+      </View>
+    </ImageBackground>
   );
 };
 
 const styles = StyleSheet.create({
+    wordListWrapper: {
+        flex: 1,
+        width: '100%',
+      },
+  background: {
+    flex: 1,
+  },
   container: {
     flex: 1,
-    backgroundColor: '#f5f5f5',
+  },
+  navbar: {
+    backgroundColor: 'transparent',
+    height: rpx(90),
   },
   content: {
-    padding: rpx(16),
+    paddingLeft: rpx(40),
+    paddingRight: rpx(64),
   },
-  title: {
+  helpTime: {
-    fontSize: rpx(36),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  helpTimeLeft: {
+    marginLeft: rpx(40),
+  },
+  helpTimeLeftTit: {
     fontWeight: '700',
+    fontSize: rpx(36),
     color: '#3D3D3D',
-    marginBottom: rpx(10),
   },
-  text: {
+  helpTimeLeftContent: {
-    fontSize: rpx(24),
     fontWeight: '400',
+    fontSize: rpx(24),
     color: '#3D3D3D',
-    marginVertical: rpx(8),
+  },
+  helpTimeRight: {
+    justifyContent: 'center',
+  },
+  helpTimeRightImg: {
+    width: rpx(168),
+    height: rpx(154),
   },
   helpBtnBox: {
     flexDirection: 'row',
     alignItems: 'center',
     marginTop: rpx(50),
+    width: rpx(644),
     padding: rpx(20),
+    paddingHorizontal: rpx(38),
     backgroundColor: '#FFFFFF',
-    borderRadius: rpx(20),
     shadowColor: '#000',
     shadowOffset: { width: 0, height: rpx(6) },
     shadowOpacity: 0.08,
     shadowRadius: rpx(64),
+    borderRadius: rpx(20),
   },
   helpBtnItem: {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  helpBtnItemLeft: {},
   helpBtnItemLeftTit: {
     fontWeight: '700',
     fontSize: rpx(28),
@@ -166,22 +322,24 @@ const styles = StyleSheet.create({
     fontSize: rpx(24),
     color: '#3D3D3D',
   },
+  helpBtnItemRight: {},
   helpBtnItemRightImg: {
     width: rpx(84),
     height: rpx(84),
   },
   line: {
+    marginHorizontal: rpx(20),
     width: rpx(2),
     height: rpx(128),
     backgroundColor: '#D8D8D8',
-    marginHorizontal: rpx(20),
   },
   qscard: {
-    width: '100%',
+    width: rpx(680),
     marginVertical: rpx(40),
     backgroundColor: '#FFFFFF',
     borderRadius: rpx(40),
     padding: rpx(28),
+    paddingHorizontal: rpx(30),
     shadowColor: '#2A82E4',
     shadowOffset: { width: 0, height: rpx(16) },
     shadowOpacity: 0.1,
@@ -190,67 +348,125 @@ const styles = StyleSheet.create({
   cardTop: {
     flexDirection: 'row',
     alignItems: 'center',
+    flexWrap: 'nowrap',
   },
   li: {
     minWidth: rpx(112),
     marginRight: rpx(20),
   },
   txt: {
+    width: rpx(150),
     fontWeight: '500',
     fontSize: rpx(28),
     color: '#3D3D3D',
+    zIndex: 1,
   },
   botBor: {
     marginTop: rpx(-20),
     width: '90%',
     height: rpx(26),
-    backgroundColor: '#fff',
+    backgroundColor: '#FFFFFF',
     borderRadius: rpx(20),
+    zIndex: 0,
   },
   botBorActive: {
-    marginTop: rpx(-20),
-    width: '90%',
-    height: rpx(26),
     backgroundColor: 'rgba(66, 151, 243, 0.55)',
-    borderRadius: rpx(20),
+  },
+  wordListContainer: {
+    marginTop: rpx(20),
+    paddingHorizontal: rpx(20),  // 添加水平内边距
   },
    qsLi: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
+    justifyContent: 'space-between',
     borderBottomWidth: rpx(2),
-    borderBottomColor: '#D8D8D870',
+    borderBottomColor: 'rgba(216, 216, 216, 0.44)',
     paddingVertical: rpx(26),
+    // 移除 width: '100%'
+  },
+  lastQsLi: {
+    borderBottomWidth: rpx(2),
+    borderBottomColor: '#FFFFFF',
   },
   qsLiTxt: {
+    flex: 1,  // 让文本占据剩余空间
     fontWeight: '400',
     fontSize: rpx(28),
     color: '#3D3D3D',
+    marginRight: rpx(20),  // 改用 marginRight 替代 paddingRight
   },
   icon: {
-    fontSize: rpx(32),
+    width: rpx(32),
-    color: '#3D3D3D',
+    height: rpx(32),
   },
-  qrcodeContainer: {
+  txtActive: {
-    position: 'absolute',
+    color: '#4297F3',
-    top: 0,
+    fontWeight: '500',
-    left: 0,
+  },
-    right: 0,
+  mask: {
-    bottom: 0,
+    flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
     justifyContent: 'center',
     alignItems: 'center',
   },
+  qrcodeBox: {
+    width: rpx(600),
+    backgroundColor: '#FFFFFF',
+    borderRadius: rpx(20),
+    padding: rpx(40),
+    position: 'relative',
+  },
   qrcodeTitle: {
     fontSize: rpx(32),
     fontWeight: '500',
-    color: '#333',
+    textAlign: 'center',
     marginBottom: rpx(30),
+    color: '#333',
   },
-  qrcodeImage: {
+  qrcodeImg: {
-    width: rpx(200),
+    width: rpx(400),
-    height: rpx(200),
+    height: rpx(450),
-    marginBottom: rpx(20),
+    alignSelf: 'center',
+  },
+  qrcodeBtn: {
+    width: rpx(400),
+    height: rpx(80),
+    backgroundColor: '#4297F3',
+    borderRadius: rpx(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: rpx(40),
+    alignSelf: 'center',
+  },
+  qrcodeBtnText: {
+    color: '#FFFFFF',
+    fontSize: rpx(28),
+  },
+  closeBtn: {
+    position: 'absolute',
+    right: rpx(20),
+    top: rpx(20),
+    width: rpx(60),
+    height: rpx(60),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeBtnText: {
+    fontSize: rpx(40),
+    color: '#999',
+  },
+  loadingText: {
+    textAlign: 'center',
+    padding: rpx(20),
+    color: '#666',
+    fontSize: rpx(28),
+  },
+  emptyText: {
+    textAlign: 'center',
+    padding: rpx(20),
+    color: '#999',
+    fontSize: rpx(28),
   },
 });