feat(find): 将发现页面重构为网点查询功能

- 修改页面标题为"网点"并设置导航栏样式
- 替换原有文章列表功能为网点搜索和展示功能
- 添加搜索框组件支持城市名称查询
- 实现网点卡片布局显示城市、地址、电话等信息
- 集成模拟数据展示网点列表
- 添加距离计算和导航功能
- 优化页面样式和用户体验

src/pages/find/find.tsx

@@ -1,82 +1,130 @@
-import {useEffect, useState} from "react";
-import Taro from '@tarojs/taro';
-import {pageCmsArticle} from "@/api/cms/cmsArticle";
-import {CmsArticle} from "@/api/cms/cmsArticle/model";
-import {NavBar, Cell} from '@nutui/nutui-react-taro';
-import {Text} from '@tarojs/components';
-import {ArrowRight, ImageRectangle, Coupon, Follow} from '@nutui/icons-react-taro'
+import {useMemo, useState} from 'react'
+import Taro from '@tarojs/taro'
+import {Input, Text, View} from '@tarojs/components'
+import {Search} from '@nutui/icons-react-taro'
 import './find.scss'
-import navTo from "@/utils/common";
 
-/**
- * 文章终极列表
- * @constructor
- */
+type SiteItem = {
+  id: string
+  cityName: string
+  address: string
+  phone: string
+  contact: string
+  distanceMeter: number
+}
+
+const MOCK_SITES: SiteItem[] = [
+  {
+    id: '1',
+    cityName: '北京朝阳区网点',
+    address: '地安门西大街（南门）',
+    phone: '15878179339',
+    contact: '刘先生',
+    distanceMeter: 100
+  },
+  {
+    id: '2',
+    cityName: '兰州某某区网点',
+    address: '地安门西大街（南门）',
+    phone: '15878179339',
+    contact: '黄先生',
+    distanceMeter: 150
+  },
+  {
+    id: '3',
+    cityName: '合肥市某某区网点',
+    address: '地安门西大街（南门）',
+    phone: '15878179339',
+    contact: '黄先生',
+    distanceMeter: 250
+  },
+  {
+    id: '4',
+    cityName: '南宁市某某区网点',
+    address: '广西壮族自治区南宁市良庆区五象新区五象大道403号富雅国际金融中心G1栋高层6006',
+    phone: '15878179339',
+    contact: '柳先生',
+    distanceMeter: 1250
+  }
+]
+
 const Find = () => {
-  const [statusBarHeight, setStatusBarHeight] = useState<number>()
-  const [loading, setLoading] = useState<boolean>(false)
-  const [list, setList] = useState<CmsArticle[]>()
+  const [keyword, setKeyword] = useState<string>('')
 
-  const reload = async () => {
-    setLoading(true)
-    const article = await pageCmsArticle({categoryId: 4289, status: 0})
-    if (article) {
-      setList(article?.list)
-      setLoading(false)
-    }
+  const filtered = useMemo(() => {
+    const key = keyword.trim()
+    if (!key) return MOCK_SITES
+    return MOCK_SITES.filter((it) => it.cityName.includes(key))
+  }, [keyword])
+
+  const onNavigate = (item: SiteItem) => {
+    Taro.showToast({title: `导航至：${item.cityName}（示例）`, icon: 'none'})
   }
 
-  useEffect(() => {
-    Taro.getSystemInfo({
-      success: (res) => {
-        setStatusBarHeight(res.statusBarHeight)
-      },
-    })
-    reload().then(() => {
-      console.log('初始化完成')
-    })
-  }, [])
+  const onSearch = () => {
+    Taro.showToast({title: '查询（示例）', icon: 'none'})
+  }
 
   return (
-    <>
-      {loading && (<div>暂无数据</div>)}
-      <NavBar
-        fixed={false}
-        style={{marginTop: `${statusBarHeight}px`, backgroundColor: 'transparent'}}
-        onBackClick={() => {
-        }}
-      >
-        <span>发现</span>
-      </NavBar>
-      {list && (
-        <>
-          <Cell title={
-            <div style={{display: 'inline-flex', alignItems: 'center'}}>
-              <ImageRectangle size={18}/>
-              <Text className={'pl-3'} style={{fontSize: '16px'}}>好物推荐</Text>
-            </div>
-          } extra={<ArrowRight color="#cccccc" size={18}/>}/>
-          <Cell
-            title={
-              <div style={{display: 'inline-flex', alignItems: 'center'}}>
-                <Coupon size={18}/>
-                <span className={'pl-3'} style={{fontSize: '16px'}}>权益中心</span>
-              </div>
-            }
-            extra={<ArrowRight color="#cccccc" size={18}/>}
-            onClick={() => {
-              navTo('/shop/shopArticle/index', true)
-            }}
+    <View className='sitePage'>
+      <View className='searchArea'>
+        <View className='searchBox'>
+          <Input
+            className='searchInput'
+            value={keyword}
+            placeholder='请输入城市名称查询'
+            placeholderClass='searchPlaceholder'
+            confirmType='search'
+            onInput={(e) => setKeyword(e.detail.value)}
+            onConfirm={onSearch}
           />
-          <Cell title={
-            <div style={{display: 'inline-flex', alignItems: 'center'}}>
-              <Follow size={18}/>
-              <span className={'pl-3'} style={{fontSize: '16px'}}>我的收藏</span>
-            </div>
-          } extra={<ArrowRight color="#cccccc" size={18}/>}/>
-        </>
-      )}
-    </>
+          <View className='searchIconWrap' onClick={onSearch}>
+            <Search size={18} color='#b51616' />
+          </View>
+        </View>
+      </View>
+
+      <View className='siteList'>
+        {filtered.map((item) => (
+          <View key={item.id} className='siteCard'>
+            <View className='siteCardInner'>
+              <View className='siteInfo'>
+                <View className='siteRow siteRowTop'>
+                  <Text className='siteLabel'>城市名称：</Text>
+                  <Text className='siteValue siteValueStrong'>{item.cityName}</Text>
+                </View>
+                <View className='siteDivider' />
+                <View className='siteRow'>
+                  <Text className='siteLabel'>网点地址：</Text>
+                  <Text className='siteValue'>{item.address}</Text>
+                </View>
+                <View className='siteRow'>
+                  <Text className='siteLabel'>联系电话：</Text>
+                  <Text className='siteValue'>{item.phone}</Text>
+                </View>
+                <View className='siteRow'>
+                  <Text className='siteLabel'>联系人：</Text>
+                  <Text className='siteValue'>{item.contact}</Text>
+                </View>
+              </View>
+
+              <View className='siteSide' onClick={() => onNavigate(item)}>
+                <View className='navArrow' />
+                <Text className='distanceText'>距离{item.distanceMeter}米</Text>
+              </View>
+            </View>
+          </View>
+        ))}
+
+        {filtered.length === 0 && (
+          <View className='emptyWrap'>
+            <Text className='emptyText'>暂无网点</Text>
+          </View>
+        )}
+      </View>
+
+      <View className='bottomSafe' />
+    </View>
   )
 }
 export default Find