forgeplus-react/src/softbot/softBotList/index.jsx

import React, { useEffect, useState } from "react";
import { Button, Input, Pagination, Spin } from "antd";
import { getImageUrl } from 'educoder'
import './index.scss';
import { Link } from "react-router-dom";
import {getAllBotCategory, getContentsLikeNameAndFunc} from '../api.js';
import Nodata from '../../forge/Nodata'

function SoftBot(props){
  const {mygetHelmetapi} = props;
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [total, setTotal] = useState(500);
  const [activeKet, setActiveKey] = useState(-1);
  const [keyWord, setKeyWord] = useState(undefined);
  const [botList, setBotList] = useState([])
  const [navList, setNavList] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(()=>{
    // 获取分类列表
    getAllBotCategory().then(res=>{
      if(res && res.code === 200){
        setNavList(res.data && res.data.category_list);
      }
    })
  }, [])

  useEffect(()=>{
    // 获取softbot列表
    setLoading(true);
    getContentsLikeNameAndFunc({
      func: activeKet === -1 ? "" : activeKet,
      name: keyWord || "",
      page_no: current,
      page_size: pageSize
    }).then(res=>{
      if(res && res.code === 200){
        setTotal(res.data && res.data.total);
        setBotList(res.data && res.data.bot_list);
      }
      setLoading(false);
    })
  }, [activeKet, keyWord, pageSize, current])

  // 点击左侧类别导航栏
  function changeType(key){
    setActiveKey(key);
  }
  // 分页函数
  function onShowSizeChange(current, pageSize) {
    setCurrent(1);
    setPageSize(pageSize);
  }
  function onChange(pageNumber) {
    setCurrent(pageNumber);
  }
  return <div className="softbotBox">
    <div className="softbotHead">
      <div className="softheadContent">
        <img src={getImageUrl(mygetHelmetapi.login_logo_url)} alt="" width={180}/>
        <div className="bigTit mt30">欢迎来到Bot市场</div>
        <div className="bigTit">快来挑选一个心仪的Bot加入到您的项目吧!</div>
        <Button type="primary" style={{width: '152px', height:'40px'}} className="font-18 gotoRegister"><Link to={'/settings/exploitBot/new'}>立即注册<i className="iconfont icon-youjiantou font-15"></i></Link></Button>
      </div>
    </div>
    <div className="botListBox">
      <div className="botListNav">
        <div className={`navItem font-16 ${activeKet === -1 ? 'active' : ''}`} onClick={()=>changeType(-1)}>全部分类</div>
        {navList.map((item, index)=>{return <div className={`navItem font-16 ${activeKet === item ? 'active' : ''}`} key={index} onClick={()=>changeType(item)}>{item}</div>})}
      </div>
      <div className="botListCont">
        <Input.Search enterButton={<i className="iconfont icon-sousuo_icon"></i>} placeholder="请输入关键字搜索bot" className="botListSearch" onSearch={(value)=>{setKeyWord(value)}} allowClear style={{marginLeft: '33px', width: '96.5%'}}/>
        <div className="botList">
          {!loading && botList && botList.length > 0 && botList.map((item, index)=>{
            return <div className="oneBotItem mt30" key={index} onClick={()=>{window.location.href=`/softbot/${item.bot_id}`}}>
                <div className="oneItemHead">
                  <div className="oneBotImgBox"><img src={getImageUrl(item.logo)} alt="" className="oneBotImg"/></div>
                  <div className="oneBotLine">
                    <p className="font-16 oneBotName oneBotLine">{item.market_name}</p>
                    <p>{item.user}</p>
                  </div>
                </div>
                <div className="botIntro">{item.market_desc}</div>
                <div className="degreeBox font-16"><i className="iconfont icon-a-zu1404 mr5 font-16"></i>{item.install_num || 0}<span>&nbsp;次</span></div>
              </div>
          })}
          {!loading && botList && !botList.length && <Nodata _html="暂无数据"/>}
          {loading && <Spin size="large" className="botLoading"/>}
        </div>
      </div>
    </div>
    <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} showQuickJumper current={current} total={total} pageSize={pageSize} onChange={onChange} className="botListPagination mt30"/>
  </div>
}
export default SoftBot;