优化细节

src/user/about/index.tsx

@@ -1,15 +1,30 @@
 import {useEffect, useState} from "react";
 import {CmsArticle} from "@/api/cms/cmsArticle/model";
 import {listCmsArticle} from "@/api/cms/cmsArticle";
-import {Collapse} from '@nutui/nutui-react-taro'
-import {ArrowDown} from '@nutui/icons-react-taro'
+import {Collapse, Avatar, Cell, Divider} from '@nutui/nutui-react-taro'
+import {ArrowRight} from '@nutui/icons-react-taro'
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+import {listCmsNavigation} from "@/api/cms/cmsNavigation";
+// 显示html富文本
+import {View, RichText} from '@tarojs/components'
 
 
 const Helper = () => {
   const [list, setList] = useState<CmsArticle[]>([])
+  const [nav, setNav] = useState<CmsNavigation>()
+  const [category, setCategory] = useState<CmsNavigation[]>([])
 
-  const reload = () => {
-    listCmsArticle({model: 'help'}).then(res => {
+  const reload = async () => {
+    const navs = await listCmsNavigation({model: 'page', parentId: 0});
+    if (navs.length > 0) {
+      const nav = navs[0];
+      setNav(nav);
+      // 查询子栏目
+      const category = await listCmsNavigation({parentId: nav.navigationId})
+      setCategory(category)
+    }
+
+    listCmsArticle({model: 'page'}).then(res => {
       setList(res)
     }).catch(error => {
       console.error("Failed to fetch goods detail:", error);
@@ -17,25 +32,55 @@ const Helper = () => {
   }
 
   useEffect(() => {
-    reload()
+    reload().then()
   }, []);
 
   return (
-    <div className={'p-3'}>
-      {list.map((item, index) => (
-        <Collapse defaultActiveName={['1', '2']} expandIcon={<ArrowDown/>}>
-          <Collapse.Item
-            title={
-              <div className={'flex items-center'}>
-                <div className={'text-sm'}>{item.title}</div>
-              </div>
-            }
-            name={`${index}`}
-          >
-            <div className={'text-sm'}>{item.comments}</div>
-          </Collapse.Item>
-        </Collapse>
+    <div className={'px-3'}>
+      <Cell>
+        {nav && (
+          <View className={'flex flex-col justify-center items-center w-full'}>
+            <Avatar
+              src={nav?.icon}
+              size={'100'}
+            />
+            <View className={'font-bold text-sm'}>
+              {nav?.comments}
+            </View>
+            <View className={'text-left py-3 text-gray-600'}>
+              <RichText
+                nodes={'时里院子市集是一家B2C模式的会员电商平台，以健康安全食品，中国国家地理标志产品，药食同源产品等为主线，愿景是守护5亿家庭餐桌健康;选品原则是健康，好吃，方便，实惠。通过严格的筛选供货商，从选品、采购发货、仓储物流产品检测、售前售后等各环节严格把控，提升用户满意度。平台采取透明公开化，以持续为用户提供物美价廉的好产品为准准则，为用户创造价值为唯一宗旨，倡导终身用户，终身服务的经营理念。'}/>
+            </View>
+          </View>
+        )}
+      </Cell>
+      {category.map((item, index) => (
+        <Cell
+          title={(
+            <div className={'font-bold'} id={`${index}`}>
+              {item.categoryName}
+            </div>
+          )}
+          description={(
+            <>
+              <Divider/>
+              <View className={'item flex justify-between items-center my-2'}>
+                <View>{item.categoryName}</View>
+                <ArrowRight size={16} className={'text-gray-400'}/>
+              </View>
+              <View className={'item flex justify-between items-center my-2'}>
+                <View>{item.categoryName}</View>
+                <ArrowRight size={16} className={'text-gray-400'}/>
+              </View>
+            </>
+          )}
+        >
+        </Cell>
       ))}
+      <Cell className={'flex flex-col'}>
+        <span>服务热线：0771-88888888</span>
+        <span>工作日：9:00-18:00</span>
+      </Cell>
     </div>
   );
 };