帮助中心修改

2024-12-31 11:11:53 +08:00 · 2024-12-31 11:11:53 +08:00 · 52c771c22a
commit 52c771c22a
parent 8a6f0fcffe
1 changed files with 314 additions and 98 deletions
--- a/src/views/user/HelpCenterPage.tsx
+++ b/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 { TopNavigation, TopNavigationAction, Icon, Text, Button } from '@ui-kitten/components';
+import { View, StyleSheet, ScrollView, Image, TouchableOpacity, Alert, Modal, Text, ImageBackground } from 'react-native';
+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 response = await apiService.getClassifyList();
-    console.log(response,'分类列表');
-    setClassifyList(response.data);
-    fetchArticleList(response.data[0].classifyId);
-  };
+  const fetchArticleList = async (id: string) => {
+    if (!id) return;
    
-  const fetchArticleList = async (id) => {
-    const response = await apiService.getArticleList(id);
-    setWordlist(response.data.rows);
+    try {
+      setIsLoading(true);
+      console.log('获取文章列表，分类ID:', id); // 添加日志
+      const response = await apiService.getArticleList(id);
+      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 });
  };

-  return (
-    <View style={styles.container}>
-      <TopNavigation
-        title='帮助中心'
-        alignment='center'
-        accessoryLeft={BackAction}
-      />
-      <ScrollView contentContainerStyle={styles.content}>
-        <Text category='h5' style={styles.title}>Hi~有什么可以帮您！</Text>
-        <Text category='s1' style={styles.text}>工作时间: 工作日8:30-11:30 13:30-18:00</Text>
-        <View style={styles.helpBtnBox}>
-          <TouchableOpacity style={styles.helpBtnItem} onPress={showWechat}>
-            <View>
-              <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} />
-          </TouchableOpacity>
-          <View style={styles.line}></View>
-          <TouchableOpacity style={styles.helpBtnItem} onPress={callPhone}>
-            <View>
-              <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} />
-          </TouchableOpacity>
+  const renderWordList = () => {
+    console.log('当前wordlist数据:', wordlist); // 添加日志
+    
+    if (isLoading) {
+      return (
+        <View style={styles.wordListContainer}>
+          <Text style={styles.loadingText}>加载中...</Text>
        </View>
-        <View style={styles.qscard}>
-          <View style={styles.cardTop}>
-            {classifyList.map((item, index) => (
-              <TouchableOpacity key={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>
-              </TouchableOpacity>
-            ))}
-          </View>
-          {wordlist.map((item, index) => (
-            <TouchableOpacity key={index} style={styles.qsLi} onPress={() => topage(item)}>
-              <Text style={styles.qsLiTxt}>{item.title}</Text>
+      );
+    }
+
+    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>
-        {showQrcode && (
-          <View style={styles.qrcodeContainer}>
-            <Text style={styles.qrcodeTitle}>微信客服</Text>
-            <Image source={{ uri: phone.serverWx }} style={styles.qrcodeImage} />
-            <Button onPress={() => setShowQrcode(false)}>关闭</Button>
+          );
+        })}
+      </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>
+          <View style={styles.content}>
+            <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 style={styles.helpBtnItemLeft}>
+                  <Text style={styles.helpBtnItemLeftTit}>微信客服</Text>
+                  <Text style={styles.helpBtnItemLeftContent}>为您解答疑惑</Text>
+                </View>
+                <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 style={styles.helpBtnItemLeft}>
+                  <Text style={styles.helpBtnItemLeftTit}>客服电话</Text>
+                  <Text style={styles.helpBtnItemLeftContent}>欢迎您拨打提问</Text>
+                </View>
+                <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={item.classifyId || index} 
+                    style={styles.li} 
+                    onPress={() => changeTab(index, item.classifyId)}
+                  >
+                    <Text style={styles.txt}>{item.classifyName}</Text>
+                    {/* <Text style={styles.txt}>{wordlist[0].title}</Text> */}
+                    <View style={[styles.botBor, tabindex === index && styles.botBorActive]}></View>
+                  </TouchableOpacity>
+                ))}
+              </View>
+              <View style={styles.wordListWrapper}>
+                {renderWordList()}
+              </View>
+            </View>
          </View>
-        )}
-      </ScrollView>
-    </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: {
-    fontSize: rpx(36),
+  helpTime: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  helpTimeLeft: {
+    marginLeft: rpx(40),
+  },
+  helpTimeLeftTit: {
    fontWeight: '700',
+    fontSize: rpx(36),
    color: '#3D3D3D',
-    marginBottom: rpx(10),
  },
-  text: {
-    fontSize: rpx(24),
+  helpTimeLeftContent: {
    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),
  },
-  qsLi: {
+  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),
-    color: '#3D3D3D',
+    width: rpx(32),
+    height: rpx(32),
  },
-  qrcodeContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+  txtActive: {
+    color: '#4297F3',
+    fontWeight: '500',
+  },
+  mask: {
+    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: {
-    width: rpx(200),
-    height: rpx(200),
-    marginBottom: rpx(20),
+  qrcodeImg: {
+    width: rpx(400),
+    height: rpx(450),
+    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),
  },
 });