更新一波

web/src/index.tsx

@@ -23,7 +23,7 @@ const root = createRoot(container)
 const resFu = async () => {
   const res = await getvisit()
   if (res.code === 0) {
-    store.dispatch({ type: 'layout/visitSum', payload: res.data })
+    store.dispatch({ type: 'layout/visitSum', payload: res.data.pcs })
   }
 }
 resFu()

web/src/pages/A3goods/index copy.tsx

@@ -0,0 +1,296 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import LeftTopLogo from '@/components/LeftTopLogo'
+
+import { SearchOutline } from 'antd-mobile-icons'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import { FreeMode, Mousewheel } from 'swiper'
+// Import Swiper styles
+import 'swiper/css'
+import 'swiper/css/free-mode'
+import 'swiper/css/mousewheel'
+
+import classNames from 'classnames'
+import LazyImg from '@/components/LazyImg'
+import { Input } from 'antd-mobile'
+import { baseURL } from '@/utils/http'
+import { GoodsRow } from '@/types'
+import { getGoodsList } from '@/store/action/all'
+import { nameObj } from './data'
+
+// 图片导入
+import iconSImg from '@/assets/img/goods/iconS.png'
+import nullImg from '@/assets/img/goods/null.png'
+import A3look from './A3look'
+
+function A3goods() {
+  const [dataAll1, setDataAll1] = useState<GoodsRow[]>([])
+  const [dataAll2, setDataAll2] = useState<GoodsRow[]>([])
+  const [dataAll3, setDataAll3] = useState<GoodsRow[]>([])
+  const [loding, setLoding] = useState(false)
+
+  const getDataAll = useCallback(async () => {
+    const res = await getGoodsList({ dictId: '', pageNum: 1, pageSize: 99999, searchKey: '' })
+
+    if (res.code === 0) {
+      setLoding(true)
+      const dataZong: GoodsRow[] = res.data.records || []
+      const type1 = dataZong.filter(v => v.fileType === 'img')
+      const type2 = dataZong.filter(v => v.fileType === 'model')
+      const type3 = dataZong.filter(v => v.fileType === 'video')
+
+      setDataAll1(type1)
+      setDataAll2(type2)
+      setDataAll3(type3)
+
+      setData1(type1)
+      setData2(type2)
+      setData3(type3)
+
+      const types1 = type1.map(v => v.dictName)
+      setrowArr1(['全部', ...Array.from(new Set(types1))])
+
+      const types2 = type2.map(v => v.dictName)
+      setrowArr2(['全部', ...Array.from(new Set(types2))])
+
+      const types3 = type3.map(v => v.dictName)
+      setrowArr3(['全部', ...Array.from(new Set(types3))])
+    }
+  }, [])
+
+  useEffect(() => {
+    getDataAll()
+  }, [getDataAll])
+
+  const [data1, setData1] = useState<GoodsRow[]>([])
+  const [ac1, setAc1] = useState('全部')
+  const [rowArr1, setrowArr1] = useState<string[]>([])
+  const [txt1, setTxt1] = useState('')
+  const [txtFlag1, setTxtFlag1] = useState(false)
+
+  const [data2, setData2] = useState<GoodsRow[]>([])
+  const [ac2, setAc2] = useState('全部')
+  const [rowArr2, setrowArr2] = useState<string[]>([])
+  const [txt2, setTxt2] = useState('')
+  const [txtFlag2, setTxtFlag2] = useState(false)
+
+  const [data3, setData3] = useState<GoodsRow[]>([])
+  const [ac3, setAc3] = useState('全部')
+  const [rowArr3, setrowArr3] = useState<string[]>([])
+  const [txt3, setTxt3] = useState('')
+  const [txtFlag3, setTxtFlag3] = useState(false)
+
+  // 滚动到顶部
+  const sollrTop = useCallback((classKey: string) => {
+    const dom: HTMLDivElement = document.querySelector('.' + classKey)!
+    if (dom) dom.scrollTop = 0
+  }, [])
+
+  useEffect(() => {
+    if (loding) {
+    }
+  }, [loding])
+
+  // 切换顶部
+  const topCut = useCallback(
+    (name: string, acTxt: string, index: 1 | 2 | 3, classKey: string) => {
+      if (name === acTxt) return
+      index === 1 ? setAc1(name) : index === 2 ? setAc2(name) : setAc3(name)
+
+      index === 1 ? setTxt1('') : index === 2 ? setTxt2('') : setTxt3('')
+
+      const dataAll = index === 1 ? dataAll1 : index === 2 ? dataAll2 : dataAll3
+
+      let resData: GoodsRow[] = []
+
+      if (name === '全部') resData = dataAll
+      else resData = dataAll.filter(v => v.dictName === name)
+
+      index === 1 ? setData1(resData) : index === 2 ? setData2(resData) : setData3(resData)
+
+      sollrTop(classKey)
+    },
+    [dataAll1, dataAll2, dataAll3, sollrTop]
+  )
+
+  // 点击搜索
+  const searchFu = useCallback(
+    (val: string, acTxt: string, index: 1 | 2 | 3, classKey: string) => {
+      const dataAllTemp = index === 1 ? dataAll1 : index === 2 ? dataAll2 : dataAll3
+
+      const dataAll = acTxt === '全部' ? dataAllTemp : dataAllTemp.filter(v => v.dictName === acTxt)
+
+      let resData: GoodsRow[] = []
+
+      if (val === '') resData = dataAll
+      else resData = dataAll.filter(v => v.name.includes(val))
+
+      index === 1 ? setData1(resData) : index === 2 ? setData2(resData) : setData3(resData)
+
+      sollrTop(classKey)
+    },
+    [dataAll1, dataAll2, dataAll3, sollrTop]
+  )
+
+  // // 打开详情
+  // const [opInfo, setOpInfo] = useState({} as GoodsRow)
+  // const [opType, setOpType] = useState<any>('')
+
+  const rowBox = useCallback(
+    (index: 1 | 2 | 3) => {
+      const rowArr = index === 1 ? rowArr1 : index === 2 ? rowArr2 : rowArr3
+      const acTxt = index === 1 ? ac1 : index === 2 ? ac2 : ac3
+      const data = index === 1 ? data1 : index === 2 ? data2 : data3
+      const txtFlag = index === 1 ? txtFlag1 : index === 2 ? txtFlag2 : txtFlag3
+
+      return (
+        <div>
+          <div className='A2top'>
+            <div className='A2top1'>
+              <h1>{Reflect.get(nameObj, index).name}</h1> {Reflect.get(nameObj, index).name2}
+            </div>
+            <div className='A2top2'>
+              <Swiper
+                modules={[FreeMode, Mousewheel]}
+                className='appSw'
+                spaceBetween={0}
+                slidesPerView='auto'
+                freeMode={true}
+                mousewheel={true}
+                // onSlideChange={(e) => console.log("slide change", e)}
+                // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
+              >
+                {rowArr.map(v => (
+                  <SwiperSlide key={v}>
+                    <div
+                      onClick={() => topCut(v, acTxt, index, 'A2Sorrl' + index)}
+                      className={classNames('topRow', acTxt === v ? 'active' : '')}
+                    >
+                      <span>{v}</span>
+                    </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </div>
+          </div>
+
+          <div className='A2info'>
+            <div className={classNames('mySorrl', 'A2Sorrl' + index)}>
+              {data.length ? (
+                <>
+                  {data.map(v => (
+                    <div
+                      className='A2Irow'
+                      onClick={() => setLookId(v.id)}
+                      key={v.id}
+                      title={v.name}
+                    >
+                      <div className='A2Irow1'>
+                        <LazyImg src={baseURL + v.thumb} />
+                      </div>
+                      <div className='A2Irow2'>
+                        {v.name}
+                        <img src={iconSImg} alt='' />
+                      </div>
+                    </div>
+                  ))}
+                </>
+              ) : (
+                <div className='A2IrowNull' hidden={!loding}>
+                  <img src={nullImg} alt='' />
+                  <p>暂时没有数据</p>
+                  {/* <p>请试一下其他关键字</p> */}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 底部搜索 */}
+          <div className='A2Search'>
+            {txtFlag ? (
+              <Input
+                onEnterPress={() =>
+                  searchFu(
+                    index === 1 ? txt1 : index === 2 ? txt2 : txt3,
+                    acTxt,
+                    index,
+                    'A2Sorrl' + index
+                  )
+                }
+                placeholder='请输入搜索内容'
+                value={index === 1 ? txt1 : index === 2 ? txt2 : txt3}
+                onChange={value => {
+                  const txtRes = value.replace(/\s+/g, '')
+                  index === 1 ? setTxt1(txtRes) : index === 2 ? setTxt2(txtRes) : setTxt3(txtRes)
+                }}
+              />
+            ) : null}
+
+            <div
+              className='A2SearchIcon'
+              onClick={() => {
+                if (!txtFlag) {
+                  index === 1
+                    ? setTxtFlag1(true)
+                    : index === 2
+                    ? setTxtFlag2(true)
+                    : setTxtFlag3(true)
+                } else
+                  searchFu(
+                    index === 1 ? txt1 : index === 2 ? txt2 : txt3,
+                    acTxt,
+                    index,
+                    'A2Sorrl' + index
+                  )
+              }}
+            >
+              <SearchOutline />
+            </div>
+          </div>
+        </div>
+      )
+    },
+    [
+      rowArr1,
+      rowArr2,
+      rowArr3,
+      ac1,
+      ac2,
+      ac3,
+      data1,
+      data2,
+      data3,
+      txtFlag1,
+      txtFlag2,
+      txtFlag3,
+      loding,
+      txt1,
+      txt2,
+      txt3,
+      topCut,
+      searchFu
+    ]
+  )
+
+  const [lookId, setLookId] = useState(0)
+
+  return (
+    <div className={styles.A3goods}>
+      <LeftTopLogo />
+
+      <div className='A2main' hidden={!!lookId}>
+        {rowBox(1)}
+        {rowBox(2)}
+        {rowBox(3)}
+      </div>
+
+      {lookId ? <A3look id={lookId} closeFu={() => setLookId(0)} /> : null}
+    </div>
+  )
+}
+
+const MemoA3goods = React.memo(A3goods)
+
+export default MemoA3goods

web/src/pages/A3goods/index.module copy.scss

@@ -0,0 +1,160 @@
+.A3goods {
+  background-size: 100% 100%;
+  background-image: url('../../assets/img/goods/bg.jpg');
+  :global {
+    .A2main {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 80%;
+      height: 70%;
+      display: flex;
+      justify-content: space-around;
+      & > div {
+        width: 26%;
+        background-image: url('../../assets/img/goods/rowBg.png');
+        background-size: 100% 100%;
+        .A2top {
+          padding: 4% 6% 0;
+          height: 94px;
+          .A2top1 {
+            display: flex;
+            align-items: flex-end;
+            color: #fff;
+            & > h1 {
+              font-size: 20px;
+              font-weight: 600;
+              margin-right: 12px;
+            }
+          }
+          .A2top2 {
+            margin-top: 10px;
+            margin-bottom: 15px;
+            height: calc(100% - 32px);
+            width: 100%;
+            .swiper-slide {
+              width: auto !important;
+            }
+
+            .topRow {
+              cursor: pointer;
+              display: inline-block;
+              font-size: 16px;
+              color: #fff;
+              padding: 4px 14px;
+            }
+            .active {
+              border-radius: 15px;
+              background-color: var(--themeColor2);
+            }
+          }
+        }
+        .A2info {
+          padding: 20px 15px 20px 30px;
+          background-color: #faf3e6;
+          height: calc(100% - 134px);
+
+          & > div {
+            padding-right: 15px;
+            overflow-y: auto;
+            height: 100%;
+            width: 100%;
+            .A2Irow {
+              cursor: pointer;
+              height: 40%;
+              width: 100%;
+              border-radius: 10px;
+              overflow: hidden;
+              margin-bottom: 15px;
+              background-color: #fff;
+              .A2Irow1 {
+                width: 100%;
+                height: calc(100% - 36px);
+                img {
+                  object-fit: contain !important;
+                }
+              }
+              .A2Irow2 {
+                position: relative;
+                height: 36px;
+                line-height: 36px;
+                padding-right: 40px;
+                padding-left: 10px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                & > img {
+                  position: absolute;
+                  height: 26px;
+                  top: 5px;
+                  right: 10px;
+                }
+              }
+            }
+
+            // 没有搜到东西
+            .A2IrowNull {
+              pointer-events: none;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-direction: column;
+              text-align: center;
+              & > img {
+                width: 50%;
+              }
+              & > p {
+                font-size: 16px;
+                margin: 5px 0;
+              }
+            }
+          }
+        }
+        .A2Search {
+          width: 100%;
+          height: 38px;
+          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0 20px;
+          .A2SearchIcon {
+            cursor: pointer;
+            color: #fff;
+            font-size: 24px;
+          }
+          .adm-input {
+            width: 80%;
+            height: 100%;
+            input {
+              text-align: center;
+              color: #fff;
+            }
+            input::-webkit-input-placeholder {
+              /* WebKit browsers */
+              color: rgba(255, 255, 255, 0.6);
+            }
+
+            input:-moz-placeholder {
+              /* Mozilla Firefox 4 to 18 */
+              color: rgba(255, 255, 255, 0.6);
+            }
+
+            input::-moz-placeholder {
+              /* Mozilla Firefox 19+ */
+              color: rgba(255, 255, 255, 0.6);
+            }
+
+            input:-ms-input-placeholder {
+              /* Internet Explorer 10+ */
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
+        }
+      }
+    }
+  }
+}

web/src/pages/A3goods/index.module.scss

@@ -1,160 +1,162 @@
 .A3goods {
   background-size: 100% 100%;
+  padding: 5% 5% 4% 5%;
+  position: relative;
   background-image: url('../../assets/img/goods/bg.jpg');
   :global {
-    .A2main {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 80%;
-      height: 70%;
+    .A3top {
+      height: 90px;
       display: flex;
-      justify-content: space-around;
-      & > div {
-        width: 26%;
-        background-image: url('../../assets/img/goods/rowBg.png');
-        background-size: 100% 100%;
-        .A2top {
-          padding: 4% 6% 0;
-          height: 94px;
-          .A2top1 {
-            display: flex;
-            align-items: flex-end;
-            color: #fff;
-            & > h1 {
-              font-size: 20px;
-              font-weight: 600;
-              margin-right: 12px;
-            }
-          }
-          .A2top2 {
-            margin-top: 10px;
-            margin-bottom: 15px;
-            height: calc(100% - 32px);
-            width: 100%;
-            .swiper-slide {
-              width: auto !important;
-            }
+      justify-content: space-between;
 
-            .topRow {
-              cursor: pointer;
-              display: inline-block;
-              font-size: 16px;
-              color: #fff;
-              padding: 4px 14px;
-            }
-            .active {
-              border-radius: 15px;
-              background-color: var(--themeColor2);
-            }
-          }
+      .A3topll {
+        height: 100%;
+        pointer-events: none;
+      }
+      .A3toprr {
+        font-size: 16px;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        max-width: 1000px;
+        width: auto;
+        .appSw {
+          min-width: 60px;
+          width: calc(100% - 320px);
         }
-        .A2info {
-          padding: 20px 15px 20px 30px;
-          background-color: #faf3e6;
-          height: calc(100% - 134px);
-
-          & > div {
-            padding-right: 15px;
-            overflow-y: auto;
-            height: 100%;
-            width: 100%;
-            .A2Irow {
-              cursor: pointer;
-              height: 40%;
-              width: 100%;
-              border-radius: 10px;
-              overflow: hidden;
-              margin-bottom: 15px;
-              background-color: #fff;
-              .A2Irow1 {
-                width: 100%;
-                height: calc(100% - 36px);
-                img {
-                  object-fit: contain !important;
-                }
-              }
-              .A2Irow2 {
-                position: relative;
-                height: 36px;
-                line-height: 36px;
-                padding-right: 40px;
-                padding-left: 10px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                & > img {
-                  position: absolute;
-                  height: 26px;
-                  top: 5px;
-                  right: 10px;
-                }
-              }
-            }
-
-            // 没有搜到东西
-            .A2IrowNull {
-              pointer-events: none;
-              width: 100%;
-              height: 100%;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              flex-direction: column;
-              text-align: center;
-              & > img {
-                width: 50%;
-              }
-              & > p {
-                font-size: 16px;
-                margin: 5px 0;
-              }
-            }
-          }
+        .swiper-slide {
+          width: auto !important;
+        }
+        .A3trRow {
+          cursor: pointer;
+          padding: 0 14px;
+          height: 30px;
+          line-height: 30px;
         }
-        .A2Search {
-          width: 100%;
-          height: 38px;
+        .A3trRowAc {
+          pointer-events: none;
           color: #fff;
+          background-color: var(--themeColor2);
+          border-radius: 15px;
+        }
+
+        .A3trInp {
+          margin-left: 24px;
           display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 0 20px;
-          .A2SearchIcon {
-            cursor: pointer;
-            color: #fff;
-            font-size: 24px;
+          height: 32px;
+          border-radius: 0 8px 8px 0;
+          overflow: hidden;
+          width: 230px;
+          background-color: #fff;
+          .ant-input-affix-wrapper {
+            border-radius: 8px 0 0 8px;
+          }
+          input {
+            border-radius: 0;
+            width: 190px;
+            border: none;
+            outline: none;
+            outline: 0;
+            font-size: 16px;
+          }
+          input::-webkit-input-placeholder {
+            /* WebKit browsers */
+            color: rgba(0, 0, 0, 0.4);
           }
-          .adm-input {
-            width: 80%;
-            height: 100%;
-            input {
-              text-align: center;
-              color: #fff;
-            }
-            input::-webkit-input-placeholder {
-              /* WebKit browsers */
-              color: rgba(255, 255, 255, 0.6);
-            }
 
-            input:-moz-placeholder {
-              /* Mozilla Firefox 4 to 18 */
-              color: rgba(255, 255, 255, 0.6);
-            }
+          input:-moz-placeholder {
+            /* Mozilla Firefox 4 to 18 */
+            color: rgba(0, 0, 0, 0.4);
+          }
 
-            input::-moz-placeholder {
-              /* Mozilla Firefox 19+ */
-              color: rgba(255, 255, 255, 0.6);
-            }
+          input::-moz-placeholder {
+            /* Mozilla Firefox 19+ */
+            color: rgba(0, 0, 0, 0.4);
+          }
 
-            input:-ms-input-placeholder {
-              /* Internet Explorer 10+ */
-              color: rgba(255, 255, 255, 0.6);
+          input:-ms-input-placeholder {
+            /* Internet Explorer 10+ */
+            color: rgba(0, 0, 0, 0.4);
+          }
+          .A3trInpInco {
+            width: 40px;
+            background-color: var(--themeColor2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px;
+            color: #fff;
+          }
+        }
+      }
+    }
+    .A3main {
+      margin-top: 40px;
+      width: 100%;
+      height: calc(100% - 130px);
+      padding-bottom: 40px;
+      .A3mBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .A3mRow {
+          position: relative;
+          cursor: pointer;
+          width: calc(25% - 15px);
+          margin-right: 20px;
+          &:nth-of-type(4n) {
+            margin-right: 0;
+          }
+          height: calc(50% - 25px);
+          margin-bottom: 25px;
+          border-radius: 6px;
+          overflow: hidden;
+          .adm-image {
+            img {
+              object-fit: cover !important;
             }
           }
+
+          .A3mRowTxt {
+            z-index: 10;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            padding: 0 5px 0 8px;
+            font-size: 16px;
+            background-color: rgba(0, 0, 0, 0.6);
+            color: #fff;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
         }
       }
+
+      .A3mNull {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        & > img {
+          width: 240px;
+        }
+        & > p {
+          font-size: 24px;
+          margin: 10px 0;
+        }
+      }
+    }
+
+    .pageBox {
+      text-align: right;
     }
   }
 }

web/src/pages/A3goods/index.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import LeftTopLogo from '@/components/LeftTopLogo'
-
 import { SearchOutline } from 'antd-mobile-icons'
+import classNames from 'classnames'
+import LazyImg from '@/components/LazyImg'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 
@@ -12,281 +13,143 @@ import 'swiper/css'
 import 'swiper/css/free-mode'
 import 'swiper/css/mousewheel'
 
-import classNames from 'classnames'
-import LazyImg from '@/components/LazyImg'
-import { Input } from 'antd-mobile'
+import { getDictList, getExpertList, getGoodsList } from '@/store/action/all'
+import { DictType, ExpertType, GoodsRow } from '@/types'
+import { Input, Pagination } from 'antd'
 import { baseURL } from '@/utils/http'
-import { GoodsRow } from '@/types'
-import { getGoodsList } from '@/store/action/all'
-import { nameObj } from './data'
+import A3look from './A3look'
 
 // 图片导入
-import iconSImg from '@/assets/img/goods/iconS.png'
+import topBgImg from '@/assets/img/goods/topBg.png'
 import nullImg from '@/assets/img/goods/null.png'
-import A3look from './A3look'
+import { FromDataType } from '../A4expert/data'
 
 function A3goods() {
-  const [dataAll1, setDataAll1] = useState<GoodsRow[]>([])
-  const [dataAll2, setDataAll2] = useState<GoodsRow[]>([])
-  const [dataAll3, setDataAll3] = useState<GoodsRow[]>([])
-  const [loding, setLoding] = useState(false)
-
-  const getDataAll = useCallback(async () => {
-    const res = await getGoodsList({ dictId: '', pageNum: 1, pageSize: 99999, searchKey: '' })
+  const [topArr, setTopArr] = useState<DictType[]>([])
 
+  const getDictListFu = useCallback(async () => {
+    const res = await getDictList('goods')
     if (res.code === 0) {
-      setLoding(true)
-      const dataZong: GoodsRow[] = res.data.records || []
-      const type1 = dataZong.filter(v => v.fileType === 'img')
-      const type2 = dataZong.filter(v => v.fileType === 'model')
-      const type3 = dataZong.filter(v => v.fileType === 'video')
-
-      setDataAll1(type1)
-      setDataAll2(type2)
-      setDataAll3(type3)
-
-      setData1(type1)
-      setData2(type2)
-      setData3(type3)
-
-      const types1 = type1.map(v => v.dictName)
-      setrowArr1(['全部', ...Array.from(new Set(types1))])
-
-      const types2 = type2.map(v => v.dictName)
-      setrowArr2(['全部', ...Array.from(new Set(types2))])
-
-      const types3 = type3.map(v => v.dictName)
-      setrowArr3(['全部', ...Array.from(new Set(types3))])
+      setTopArr([{ id: null, name: '全部' }, ...res.data])
     }
   }, [])
 
   useEffect(() => {
-    getDataAll()
-  }, [getDataAll])
-
-  const [data1, setData1] = useState<GoodsRow[]>([])
-  const [ac1, setAc1] = useState('全部')
-  const [rowArr1, setrowArr1] = useState<string[]>([])
-  const [txt1, setTxt1] = useState('')
-  const [txtFlag1, setTxtFlag1] = useState(false)
-
-  const [data2, setData2] = useState<GoodsRow[]>([])
-  const [ac2, setAc2] = useState('全部')
-  const [rowArr2, setrowArr2] = useState<string[]>([])
-  const [txt2, setTxt2] = useState('')
-  const [txtFlag2, setTxtFlag2] = useState(false)
-
-  const [data3, setData3] = useState<GoodsRow[]>([])
-  const [ac3, setAc3] = useState('全部')
-  const [rowArr3, setrowArr3] = useState<string[]>([])
-  const [txt3, setTxt3] = useState('')
-  const [txtFlag3, setTxtFlag3] = useState(false)
-
-  // 滚动到顶部
-  const sollrTop = useCallback((classKey: string) => {
-    const dom: HTMLDivElement = document.querySelector('.' + classKey)!
-    if (dom) dom.scrollTop = 0
-  }, [])
-
-  useEffect(() => {
-    if (loding) {
-    }
-  }, [loding])
-
-  // 切换顶部
-  const topCut = useCallback(
-    (name: string, acTxt: string, index: 1 | 2 | 3, classKey: string) => {
-      if (name === acTxt) return
-      index === 1 ? setAc1(name) : index === 2 ? setAc2(name) : setAc3(name)
-
-      index === 1 ? setTxt1('') : index === 2 ? setTxt2('') : setTxt3('')
-
-      const dataAll = index === 1 ? dataAll1 : index === 2 ? dataAll2 : dataAll3
-
-      let resData: GoodsRow[] = []
-
-      if (name === '全部') resData = dataAll
-      else resData = dataAll.filter(v => v.dictName === name)
-
-      index === 1 ? setData1(resData) : index === 2 ? setData2(resData) : setData3(resData)
-
-      sollrTop(classKey)
+    getDictListFu()
+  }, [getDictListFu])
+
+  const [fromData, setFromData] = useState<FromDataType>({
+    searchKey: '',
+    dictId: null,
+    pageNum: 1,
+    pageSize: 8
+  })
+
+  // 输入框的输入
+  const timeRef = useRef(-1)
+  const txtChangeFu = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
+      clearTimeout(timeRef.current)
+      timeRef.current = window.setTimeout(() => {
+        setFromData({ ...fromData, [key]: e.target.value.replaceAll("'", ''), pageNum: 1 })
+      }, 500)
     },
-    [dataAll1, dataAll2, dataAll3, sollrTop]
+    [fromData]
   )
 
-  // 点击搜索
-  const searchFu = useCallback(
-    (val: string, acTxt: string, index: 1 | 2 | 3, classKey: string) => {
-      const dataAllTemp = index === 1 ? dataAll1 : index === 2 ? dataAll2 : dataAll3
-
-      const dataAll = acTxt === '全部' ? dataAllTemp : dataAllTemp.filter(v => v.dictName === acTxt)
-
-      let resData: GoodsRow[] = []
-
-      if (val === '') resData = dataAll
-      else resData = dataAll.filter(v => v.name.includes(val))
-
-      index === 1 ? setData1(resData) : index === 2 ? setData2(resData) : setData3(resData)
+  // 列表数据
+  const [listObj, setListObj] = useState<ExpertType>({ list: [], total: 0 })
+  const [loding, setLoding] = useState(false)
 
-      sollrTop(classKey)
-    },
-    [dataAll1, dataAll2, dataAll3, sollrTop]
-  )
+  const getListFu = useCallback(async () => {
+    const res = await getGoodsList(fromData)
+    if (res.code === 0) {
+      setLoding(true)
+      setListObj({ list: res.data.records || [], total: res.data.total })
+    }
+  }, [fromData])
 
-  // // 打开详情
-  // const [opInfo, setOpInfo] = useState({} as GoodsRow)
-  // const [opType, setOpType] = useState<any>('')
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
 
-  const rowBox = useCallback(
-    (index: 1 | 2 | 3) => {
-      const rowArr = index === 1 ? rowArr1 : index === 2 ? rowArr2 : rowArr3
-      const acTxt = index === 1 ? ac1 : index === 2 ? ac2 : ac3
-      const data = index === 1 ? data1 : index === 2 ? data2 : data3
-      const txtFlag = index === 1 ? txtFlag1 : index === 2 ? txtFlag2 : txtFlag3
+  const [editId, setEditId] = useState(0)
 
-      return (
-        <div>
-          <div className='A2top'>
-            <div className='A2top1'>
-              <h1>{Reflect.get(nameObj, index).name}</h1> {Reflect.get(nameObj, index).name2}
-            </div>
-            <div className='A2top2'>
-              <Swiper
-                modules={[FreeMode, Mousewheel]}
-                className='appSw'
-                spaceBetween={0}
-                slidesPerView='auto'
-                freeMode={true}
-                mousewheel={true}
-                // onSlideChange={(e) => console.log("slide change", e)}
-                // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
-              >
-                {rowArr.map(v => (
-                  <SwiperSlide key={v}>
-                    <div
-                      onClick={() => topCut(v, acTxt, index, 'A2Sorrl' + index)}
-                      className={classNames('topRow', acTxt === v ? 'active' : '')}
-                    >
-                      <span>{v}</span>
-                    </div>
-                  </SwiperSlide>
-                ))}
-              </Swiper>
-            </div>
-          </div>
+  return (
+    <div className={styles.A3goods}>
+      <LeftTopLogo />
 
-          <div className='A2info'>
-            <div className={classNames('mySorrl', 'A2Sorrl' + index)}>
-              {data.length ? (
-                <>
-                  {data.map(v => (
-                    <div
-                      className='A2Irow'
-                      onClick={() => setLookId(v.id)}
-                      key={v.id}
-                      title={v.name}
-                    >
-                      <div className='A2Irow1'>
-                        <LazyImg src={baseURL + v.thumb} />
-                      </div>
-                      <div className='A2Irow2'>
-                        {v.name}
-                        <img src={iconSImg} alt='' />
-                      </div>
-                    </div>
-                  ))}
-                </>
-              ) : (
-                <div className='A2IrowNull' hidden={!loding}>
-                  <img src={nullImg} alt='' />
-                  <p>暂时没有数据</p>
-                  {/* <p>请试一下其他关键字</p> */}
+      {/* 顶部 */}
+      <div className='A3top' hidden={!!editId}>
+        <img className='A3topll' src={topBgImg} alt='' />
+        <div className='A3toprr'>
+          类型：&nbsp;&nbsp;
+          <Swiper
+            modules={[FreeMode, Mousewheel]}
+            className='appSw'
+            spaceBetween={0}
+            slidesPerView='auto'
+            freeMode={true}
+            mousewheel={true}
+          >
+            {topArr.map(v => (
+              <SwiperSlide key={v.id}>
+                <div
+                  onClick={() => setFromData({ ...fromData, pageNum: 1, dictId: v.id })}
+                  className={classNames('A3trRow', fromData.dictId === v.id ? 'A3trRowAc' : '')}
+                  key={v.id}
+                >
+                  {v.name}
                 </div>
-              )}
-            </div>
-          </div>
-
-          {/* 底部搜索 */}
-          <div className='A2Search'>
-            {txtFlag ? (
-              <Input
-                onEnterPress={() =>
-                  searchFu(
-                    index === 1 ? txt1 : index === 2 ? txt2 : txt3,
-                    acTxt,
-                    index,
-                    'A2Sorrl' + index
-                  )
-                }
-                placeholder='请输入搜索内容'
-                value={index === 1 ? txt1 : index === 2 ? txt2 : txt3}
-                onChange={value => {
-                  const txtRes = value.replace(/\s+/g, '')
-                  index === 1 ? setTxt1(txtRes) : index === 2 ? setTxt2(txtRes) : setTxt3(txtRes)
-                }}
-              />
-            ) : null}
-
-            <div
-              className='A2SearchIcon'
-              onClick={() => {
-                if (!txtFlag) {
-                  index === 1
-                    ? setTxtFlag1(true)
-                    : index === 2
-                    ? setTxtFlag2(true)
-                    : setTxtFlag3(true)
-                } else
-                  searchFu(
-                    index === 1 ? txt1 : index === 2 ? txt2 : txt3,
-                    acTxt,
-                    index,
-                    'A2Sorrl' + index
-                  )
-              }}
-            >
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          <div className='A3trInp'>
+            <Input
+              placeholder='请输入搜索内容'
+              allowClear
+              onChange={e => txtChangeFu(e, 'searchKey')}
+            />
+            <div className='A3trInpInco'>
               <SearchOutline />
             </div>
           </div>
         </div>
-      )
-    },
-    [
-      rowArr1,
-      rowArr2,
-      rowArr3,
-      ac1,
-      ac2,
-      ac3,
-      data1,
-      data2,
-      data3,
-      txtFlag1,
-      txtFlag2,
-      txtFlag3,
-      loding,
-      txt1,
-      txt2,
-      txt3,
-      topCut,
-      searchFu
-    ]
-  )
-
-  const [lookId, setLookId] = useState(0)
+      </div>
 
-  return (
-    <div className={styles.A3goods}>
-      <LeftTopLogo />
+      {/* 中间主体 */}
+      <div className='A3main' hidden={!!editId}>
+        {listObj.list.length ? (
+          <div className='A3mBox'>
+            {listObj.list.map((v, i) => (
+              <div onClick={() => setEditId(v.id)} title={v.name} className='A3mRow' key={v.id}>
+                <LazyImg src={baseURL + v.thumb} />
+                <div className='A3mRowTxt'>{v.name}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className='A3mNull' hidden={!loding}>
+            <img src={nullImg} alt='' />
+            <p>暂时没有数据</p>
+            {/* <p>请试一下其他关键字</p> */}
+          </div>
+        )}
+      </div>
 
-      <div className='A2main' hidden={!!lookId}>
-        {rowBox(1)}
-        {rowBox(2)}
-        {rowBox(3)}
+      {/* 分页 */}
+      <div className='pageBox' hidden={!!editId}>
+        <Pagination
+          current={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+          total={listObj.total}
+          showSizeChanger={false}
+        />
       </div>
 
-      {lookId ? <A3look id={lookId} closeFu={() => setLookId(0)} /> : null}
+      {/* 查看详情 */}
+      {editId ? <A3look id={editId} closeFu={() => setEditId(0)} /> : null}
     </div>
   )
 }

web/src/pages/A4expert/index.tsx

@@ -163,8 +163,8 @@ function A4expert() {
           pageSize={fromData.pageSize}
           onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
           total={listObj.total}
+          showSizeChanger={false}
         />
-        ;
       </div>
 
       {/* 查看详情 */}

web/src/store/action/all.ts

@@ -4,7 +4,7 @@ import http from '@/utils/http'
  * 获取浏览量
  */
 export const getvisit = () => {
-  return http.get('show/visit/add')
+  return http.get('show/visit/add/visit')
 }
 
 /**