tabar增加 基地生活

src/app.config.ts

@@ -1,5 +1,6 @@
 export default {
   pages: [
+    'pages/cms/category/index',
     'pages/index/index',
     'pages/cart/cart',
     'pages/find/find',
@@ -108,9 +109,9 @@ export default {
         text: "首页",
       },
       {
-        pagePath: "pages/find/find",
-        iconPath: "assets/tabbar/find.png",
-        selectedIconPath: "assets/tabbar/find-active.png",
+        pagePath: "pages/cms/category/index",
+        iconPath: "assets/tabbar/tv.png",
+        selectedIconPath: "assets/tabbar/tv-active.png",
         text: "基地生活",
       },
       {

src/pages/cms/category/components/ArticleList.tsx

@@ -0,0 +1,25 @@
+import {Image, Cell} from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
+
+const ArticleList = (props: any) => {
+
+  return (
+    <>
+      <div className={'px-3'}>
+        {props.data.map((item, index) => {
+          return (
+            <Cell
+              title={item.title}
+              extra={
+                <Image src={item.image} mode={'aspectFit'} lazyLoad={false} width={100} height="100"/>
+              }
+              key={index}
+              onClick={() => Taro.navigateTo({url: '/cms/detail/index?id=' + item.articleId})}
+            />
+          )
+        })}
+      </div>
+    </>
+  )
+}
+export default ArticleList

src/pages/cms/category/components/ArticleTabs.tsx

@@ -0,0 +1,59 @@
+import {useEffect, useState} from "react";
+import {Tabs, Loading} from '@nutui/nutui-react-taro'
+import {pageCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import ArticleList from "./ArticleList";
+
+const ArticleTabs = (props: any) => {
+  const [loading, setLoading] = useState<boolean>(true)
+  const [tab1value, setTab1value] = useState<string | number>('0')
+  const [list, setList] = useState<CmsArticle[]>([])
+
+  const reload = async (value) => {
+    const {data} = props
+    pageCmsArticle({
+      categoryId: data[value].navigationId,
+      page: 1,
+      status: 0,
+      limit: 10
+    }).then((res) => {
+      res && setList(res?.list || [])
+    })
+      .catch(err => {
+        console.log(err)
+      })
+      .finally(() => {
+        setTab1value(value)
+        setLoading(false)
+      })
+  }
+
+  useEffect(() => {
+    reload(0).then()
+  }, []);
+
+  if (loading) {
+    return (
+      <Loading className={'px-2'}>加载中</Loading>
+    )
+  }
+
+  return (
+    <>
+      <Tabs
+        value={tab1value}
+        onChange={(value) => {
+          reload(value).then()
+        }}
+      >
+        {props.data?.map((item, index) => {
+          return (
+            <Tabs.TabPane title={item.categoryName} key={index}/>
+          )
+        })}
+      </Tabs>
+      <ArticleList data={list}/>
+    </>
+  )
+}
+export default ArticleTabs

src/pages/cms/category/components/Banner.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import { Swiper } from '@nutui/nutui-react-taro'
+import {CmsAd} from "@/api/cms/cmsAd/model";
+import {Image} from '@nutui/nutui-react-taro'
+import {getCmsAd} from "@/api/cms/cmsAd";
+
+const MyPage = () => {
+  const [item, setItem] = useState<CmsAd>()
+  const reload = () => {
+    getCmsAd(439).then(data => {
+      setItem(data)
+    })
+  }
+
+  useEffect(() => {
+    reload()
+  }, [])
+
+  return (
+    <>
+      <Swiper defaultValue={0} height={item?.height} indicator style={{ height: item?.height + 'px', display: 'none' }}>
+        {item?.imageList?.map((item) => (
+          <Swiper.Item key={item}>
+            <Image width="100%" height="100%" src={item.url} mode={'scaleToFill'} lazyLoad={false} style={{ height: item.height + 'px' }} />
+          </Swiper.Item>
+        ))}
+      </Swiper>
+    </>
+  )
+}
+export default MyPage

src/pages/cms/category/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '文章列表',
+  navigationBarTextStyle: 'black'
+})

src/pages/cms/category/index.tsx

@@ -0,0 +1,71 @@
+import Taro from '@tarojs/taro'
+import {useShareAppMessage} from "@tarojs/taro"
+import {Loading} from '@nutui/nutui-react-taro'
+import {useEffect, useState} from "react"
+import {useRouter} from '@tarojs/taro'
+import {getCmsNavigation, listCmsNavigation} from "@/api/cms/cmsNavigation";
+import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
+import {pageCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model";
+import ArticleList from './components/ArticleList'
+import ArticleTabs from "./components/ArticleTabs";
+import './index.scss'
+
+function Category() {
+  const {params} = useRouter();
+  const [categoryId, setCategoryId] = useState<number>(0)
+  const [category, setCategory] = useState<CmsNavigation[]>([])
+  const [loading, setLoading] = useState<boolean>(true)
+  const [nav, setNav] = useState<CmsNavigation>()
+  const [list, setList] = useState<CmsArticle[]>([])
+
+  const reload = async () => {
+    // 1.加载远程数据
+    const id = Number(params.id || 4328)
+    const nav = await getCmsNavigation(id)
+    const categoryList = await listCmsNavigation({parentId: id})
+    const shopGoods = await pageCmsArticle({categoryId: id})
+
+    // 2.赋值
+    setCategoryId(id)
+    setNav(nav)
+    setList(shopGoods?.list || [])
+    setCategory(categoryList)
+    Taro.setNavigationBarTitle({
+      title: `${nav?.categoryName}`
+    })
+  };
+
+  useEffect(() => {
+    reload().then(() => {
+      setLoading(false)
+    })
+  }, []);
+
+  useShareAppMessage(() => {
+    return {
+      title: `${nav?.categoryName}_时里院子市集`,
+      path: `/shop/category/index?id=${categoryId}`,
+      success: function () {
+        console.log('分享成功');
+      },
+      fail: function () {
+        console.log('分享失败');
+      }
+    };
+  });
+
+  if (loading) {
+    return (
+      <Loading className={'px-2'}>加载中</Loading>
+    )
+  }
+
+  if(category.length > 0){
+    return <ArticleTabs data={category}/>
+  }
+
+  return <ArticleList data={list}/>
+}
+
+export default Category

src/pages/cms/detail/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '文章详情'
+})

src/pages/cms/detail/index.tsx

@@ -0,0 +1,53 @@
+import Taro from '@tarojs/taro'
+import {useEffect, useState} from 'react'
+import {useRouter} from '@tarojs/taro'
+import {Loading} from '@nutui/nutui-react-taro'
+import {View, RichText} from '@tarojs/components'
+import {wxParse} from "@/utils/common";
+import {getCmsArticle} from "@/api/cms/cmsArticle";
+import {CmsArticle} from "@/api/cms/cmsArticle/model"
+import Line from "@/components/Gap";
+import './index.scss'
+
+function Detail() {
+  const {params} = useRouter();
+  const [loading, setLoading] = useState<boolean>(true)
+  // 文章详情
+  const [item, setItem] = useState<CmsArticle>()
+  const reload = async () => {
+    const item = await getCmsArticle(Number(params.id))
+
+    if (item) {
+      item.content = wxParse(item.content)
+      setItem(item)
+      Taro.setNavigationBarTitle({
+        title: `${item?.categoryName}`
+      })
+    }
+  }
+
+  useEffect(() => {
+    reload().then(() => {
+      setLoading(false)
+    });
+  }, []);
+
+  if (loading) {
+    return (
+      <Loading className={'px-2'}>加载中</Loading>
+    )
+  }
+
+  return (
+    <div className={'bg-white'}>
+      <div className={'p-4 font-bold text-lg'}>{item?.title}</div>
+      <div className={'text-gray-400 text-sm px-4 '}>{item?.createTime}</div>
+      <View className={'content p-4'}>
+        <RichText nodes={item?.content}/>
+      </View>
+      <Line height={44}/>
+    </div>
+  )
+}
+
+export default Detail