🎈 perf(购物页面): 新增下拉刷新数据

src/components/closeBtn/index.tsx

@@ -1,5 +1,6 @@
 import { View, Text } from "@tarojs/components"
 import { memo } from "react"
+import IconFont from "../iconfont/iconfont"
 import style from "./index.module.scss"
 
 type Params = {
@@ -9,12 +10,10 @@ type Params = {
 
 export default memo(({onClose, styleObj = {}}:Params) => {
     return (
-        <View 
-            style={styleObj}
-            className={style.icon_a_cuowuwrong_self}
-            onClick={onClose}
-        >
-            <Text className={`iconfont icon-guanbi ${style.icon_a_btn}`}></Text>
+      <View style={styleObj} className={style.icon_a_cuowuwrong_self} onClick={onClose}>
+        <View className={style.icon_a_btn}>
+          <IconFont name='icon-guanbi' size={30} color='#ccc'></IconFont>
+        </View>
       </View>
     )
 })

src/components/search/index.module.scss

@@ -19,7 +19,6 @@
       height: 60px;
       flex: 1 1 auto;
       padding-left: 60px;
-      padding-right: 30px;
       background: #eee;
       box-sizing: border-box;
       display: flex;

src/pages/shopping/index.tsx

@@ -59,12 +59,17 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   const { fetchData, state } = ShoppingCartListApi()
 
+  const [searchOptions, setSearchOptions] = useState({
+    short_name_or_phone: '',
+  })
+
+  useEffect(() => {
+    fetchData(searchOptions)
+  }, [searchOptions])
+
   // 输入了搜索关键字
   const getSearchData = useCallback(e => {
-    fetchData({ short_name_or_phone: e })
-    // pageNum.current.page = 1
-    // setOrderData(() => ({ list: [], total: 0 }))
-    // setSearchField((val) => ({ ...val, name: e, size: 10 }))
+    setSearchOptions(prev => ({ ...prev, short_name_or_phone: e }))
   }, [])
 
   const [shoppingCartData, setShoppingCartData] = useState<{ list: ShoppingCartData[]; total: number }>({ list: [], total: 0 })
@@ -153,6 +158,24 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     setColorStore(() => tempObject)
   }
 
+  // 加载刷新数据
+  const [refreshStatus, setRefreshStatus] = useState(false)
+
+  // 下拉刷新
+  const handleRefresh = async () => {
+    setRefreshStatus(true)
+    const res = await fetchData(searchOptions)
+    if (res.success) {
+      console.log('请求 成功')
+      setRefreshStatus(false)
+      Taro.showToast({ title: '刷新成功', icon: 'success' })
+    } else {
+      console.log('请求 失败')
+      Taro.showToast({ title: '刷新失败', icon: 'error' })
+      setRefreshStatus(false)
+    }
+  }
+
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
       <View className={styles['shopping--topBar']} id='topBar'>
@@ -168,7 +191,11 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
-          <InfiniteScroll statusMore={statusMore}>
+          <InfiniteScroll
+            statusMore={statusMore}
+            refresherEnabled={true}
+            selfOnRefresherRefresh={handleRefresh}
+            refresherTriggered={refreshStatus}>
             {!!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>