websopy-taro/src/admin/article/index.tsx

import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Cell, CellGroup, Empty, ConfigProvider, SearchBar, Tag, InfiniteLoading, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
import {Edit, Del, Eye} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {pageCmsArticle, removeCmsArticle} from "@/api/cms/cmsArticle";
import FixedButton from "@/components/FixedButton";
import dayjs from "dayjs";

const ArticleArticleManage = () => {
  const [list, setList] = useState<CmsArticle[]>([])
  const [loading, setLoading] = useState(false)
  // const [refreshing, setRefreshing] = useState(false)
  const [hasMore, setHasMore] = useState(true)
  const [searchValue, setSearchValue] = useState('')
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)

  const reload = async (isRefresh = false) => {
    if (isRefresh) {
      setPage(1)
      setList([])
      setHasMore(true)
    }

    setLoading(true)
    try {
      const currentPage = isRefresh ? 1 : page
      const res = await pageCmsArticle({
        page: currentPage,
        limit: 10,
        keywords: searchValue
      })

      if (res && res.list) {
        const newList = isRefresh ? res.list : [...list, ...res.list]
        setList(newList)
        setTotal(res.count || 0)

        // 判断是否还有更多数据
        setHasMore(res.list.length === 10) // 如果返回的数据等于limit，说明可能还有更多

        if (!isRefresh) {
          setPage(currentPage + 1)
        } else {
          setPage(2) // 刷新后下一页是第2页
        }
      } else {
        setHasMore(false)
        setTotal(0)
      }
    } catch (error) {
      console.error('获取文章失败:', error)
      Taro.showToast({
        title: '获取文章失败',
        icon: 'error'
      });
    } finally {
      setLoading(false)
    }
  }

  // 搜索功能
  const handleSearch = (value: string) => {
    setSearchValue(value)
    reload(true)
  }

  // 下拉刷新
  const handleRefresh = async () => {
    // setRefreshing(true)
    await reload(true)
    // setRefreshing(false)
  }

  // 删除文章
  const handleDelete = async (id?: number) => {
    Taro.showModal({
      title: '确认删除',
      content: '确定要删除这篇文章吗？',
      success: async (res) => {
        if (res.confirm) {
          try {
            await removeCmsArticle(id)
            Taro.showToast({
              title: '删除成功',
              icon: 'success'
            });
            reload(true);
          } catch (error) {
            Taro.showToast({
              title: '删除失败',
              icon: 'error'
            });
          }
        }
      }
    });
  }

  // 编辑文章
  const handleEdit = (item: CmsArticle) => {
    Taro.navigateTo({
      url: `/shop/shopArticle/add?id=${item.articleId}`
    });
  }

  // 查看文章详情
  const handleView = (item: CmsArticle) => {
    // 这里可以跳转到文章详情页面
    Taro.navigateTo({
      url: `/cms/detail/index?id=${item.articleId}`
    })
  }

  // 获取状态标签
  const getStatusTag = (status?: number) => {
    switch (status) {
      case 0:
        return <Tag type="success">已发布</Tag>
      case 1:
        return <Tag type="warning">待审核</Tag>
      case 2:
        return <Tag type="danger">已驳回</Tag>
      case 3:
        return <Tag type="danger">违规内容</Tag>
      default:
        return <Tag>未知</Tag>
    }
  }

  // 加载更多
  const loadMore = async () => {
    if (!loading && hasMore) {
      await reload(false) // 不刷新，追加数据
    }
  }

  useDidShow(() => {
    reload(true).then()
  });

  return (
    <ConfigProvider>
      {/* 搜索栏 */}
      <View className="py-2">
        <SearchBar
          placeholder="搜索关键词"
          value={searchValue}
          onChange={setSearchValue}
          onSearch={handleSearch}
        />
      </View>

      {/* 统计信息 */}
      {total > 0 && (
        <View className="px-4 py-2 text-sm text-gray-500">
          共找到 {total} 篇文章
        </View>
      )}

      {/* 文章列表 */}
      <PullToRefresh
        onRefresh={handleRefresh}
        headHeight={60}
      >
        <View className="px-4" style={{ height: 'calc(100vh - 160px)', overflowY: 'auto' }} id="article-scroll">
        {list.length === 0 && !loading ? (
          <View className="flex flex-col justify-center items-center" style={{height: 'calc(100vh - 200px)'}}>
            <Empty
              description="暂无文章数据"
              style={{backgroundColor: 'transparent'}}
            />
          </View>
        ) : (
          <InfiniteLoading
            target="article-scroll"
            hasMore={hasMore}
            onLoadMore={loadMore}
            loadingText={
              <View className="flex justify-center items-center py-4">
                <Loading />
                <View className="ml-2">加载中...</View>
              </View>
            }
            loadMoreText={
              <View className="text-center py-4 text-gray-500">
                {list.length === 0 ? "暂无数据" : "没有更多了"}
              </View>
            }
          >
            {list.map((item, index) => (
              <CellGroup key={item.articleId || index} className="mb-4">
                <Cell>
                  <View className="flex flex-col gap-3 w-full">
                    {/* 文章标题和状态 */}
                    <View className="flex justify-between items-start">
                      <View className="flex-1 pr-2">
                        <View className="text-lg font-bold text-gray-900 line-clamp-2">
                          {item.title}
                        </View>
                      </View>
                      {getStatusTag(item.status)}
                    </View>

                    {/* 文章概述 */}
                    {item.overview && (
                      <View className="text-sm text-gray-600 line-clamp-2">
                        {item.overview}
                      </View>
                    )}

                    {/* 文章信息 */}
                    <View className="flex justify-between items-center text-xs text-gray-500">
                      <View className="flex items-center gap-4">
                        <View>阅读: {item.actualViews || 0}</View>
                        {item.price && <View>价格: ¥{item.price}</View>}
                        <View>创建: {dayjs(item.createTime).format('MM-DD HH:mm')}</View>
                      </View>
                    </View>

                    {/* 操作按钮 */}
                    <View className="flex justify-end gap-2 pt-2 border-t border-gray-100">
                      <Button
                        size="small"
                        fill="outline"
                        icon={<Eye/>}
                        onClick={() => handleView(item)}
                      >
                        查看
                      </Button>
                      <Button
                        size="small"
                        fill="outline"
                        icon={<Edit/>}
                        onClick={() => handleEdit(item)}
                      >
                        编辑
                      </Button>
                      <Button
                        size="small"
                        type="danger"
                        fill="outline"
                        icon={<Del/>}
                        onClick={() => handleDelete(item.articleId)}
                      >
                        删除
                      </Button>
                    </View>
                  </View>
                </Cell>
              </CellGroup>
            ))}
          </InfiniteLoading>
        )}
        </View>
      </PullToRefresh>

      {/* 底部浮动按钮 */}
      <FixedButton
        text="发布文章"
        icon={<Edit />}
        onClick={() => Taro.navigateTo({url: '/shop/shopArticle/add'})}
      />
    </ConfigProvider>
  );

};

export default ArticleArticleManage;