订单列表对接

src/api/onlinePay.ts

@@ -6,7 +6,8 @@ import { useRequest } from "@/use/useHttp"
  export const GetPayCode = () => {
     return useRequest({
         url: `/`,
-        base_url: 'http://192.168.1.127:8081',
+        base_url: 'http://192.168.1.127:8081/caphtml',
         method: "post",
     })
-}
+}
+

src/api/order.ts

@@ -59,4 +59,24 @@ export const SaleOrderApi = () => {
         url: `/v1/mall/saleOrder/shipmentMode`,
         method: "put",
     })
+}
+
+/**
+ * 获取订单状态枚举
+ */
+ export const GetOrderStatusListApi = () => {
+    return useRequest({
+        url: `/v1/mall/enum/sale/order/status`,
+        method: "get",
+    })
+}
+
+/**
+ * 获取订单列表
+ */
+ export const GetOrderListApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/list`,
+        method: "get",
+    })
 }

src/pages/order/components/addressInfoDetail/index.module.scss

@@ -61,6 +61,7 @@
         position: absolute;
         bottom: 10px; 
         right: 10px;
+        z-index: 999;
         .updateBtn_list{
             position: absolute;
             display: flex;

src/pages/order/components/addressInfoDetail/index.tsx

@@ -2,7 +2,7 @@ import AddressList from "@/components/AddressList";
 import Popup from "@/components/popup";
 import { Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import styles  from './index.module.scss'
 
 export type AddressInfoParam = {
@@ -21,7 +21,7 @@ type Param =  {
     shipment_mode?: 1|2 //1自提 2物流
 }
 
-export default memo(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param) => {
+export default memo(forwardRef(({onSelect, defaultValue = null, disabled = false, shipment_mode = 1}: Param, ref) => {
     const [showAddressList, setShowAddressList] = useState(false)
 
     useEffect(() => {
@@ -48,12 +48,19 @@ export default memo(({onSelect, defaultValue = null, disabled = false, shipment_
     }
     //收货方法,1:自提，2物流
     const [receivingStatus, setReceivingStatus] = useState(1)
-    const onReceivingStatus = (val) => {  
+    const onReceivingStatus = (val, e) => {  
+        e.stopPropagation()
         setReceivingStatus(val)
+        console.log("e::::", e)
     }
     useEffect(() => {
         setReceivingStatus(() => shipment_mode)
     }, [shipment_mode])
+
+    //把内部方法提供给外部
+    useImperativeHandle(ref, () => ({
+        changeShow
+    }))
     return (
         <View>
             <View className={styles.order_address} onClick={() => changeShow()}>
@@ -70,18 +77,18 @@ export default memo(({onSelect, defaultValue = null, disabled = false, shipment_
                 </View>
                 <View className={styles.updateBtn}>
                     <View className={styles.updateBtn_list}>
-                        <View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={() => onReceivingStatus(1)}>自提</View>
+                        <View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
-                        <View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={() => onReceivingStatus(2)}>物流</View>
+                        <View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
                     </View>
                     <View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
                 </View>
             </View>
-            {!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
+            <Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
                 <View className={styles.order_address_list}>
                     <View className={styles.order_address_title}>请选择收货地址</View>
                     <AddressList onSelect={(item) => getAddress(item)}/>
                 </View>
-            </Popup>}
+            </Popup>
         </View>
     )
-})
+}))

src/pages/order/components/kindList/index.tsx

@@ -15,7 +15,6 @@ type OrderParam = {
     total_number: number
 }
 
-
 export default memo(({value}:{value:OrderParam|null}) => {
     //对应数量
     const formatCount = useCallback((item) => {
@@ -36,7 +35,7 @@ export default memo(({value}:{value:OrderParam|null}) => {
             <View className={styles.orders_list_title}>{numText}</View>
             <View className={styles.orders_list_con}>
                 {
-                    value?.list.map(item => {
+                    value?.list?.map(item => {
                         return <View key={item.product_code} className={styles.order_list}>
                             <View className={styles.order_list_title}>
                                 <View className={styles.tag}>{value.sale_mode_name}</View>

src/pages/order/components/orderState/index.tsx

@@ -2,7 +2,7 @@ import { Image, Text, View } from "@tarojs/components"
 import { memo, useState } from "react"
 import styles  from './index.module.scss'
 import classnames from "classnames";
-import { formatImgUrl } from "@/common/fotmat";
+import { formatDateTime, formatImgUrl } from "@/common/fotmat";
 type Param = {
     status: string,
     time: string,
@@ -24,7 +24,7 @@ export default memo(({list = []}:{list?:Param[]}) => {
                         {(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
                         <View className={styles.order_status_content}>
                             <View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
-                            <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
+                            <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
                             <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
                         </View>
                         <Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
@@ -35,7 +35,7 @@ export default memo(({list = []}:{list?:Param[]}) => {
                     <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
                 </View>}
                 <View className={styles.image_tag}>
-                    <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
+                    {/* <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/> */}
                 </View>
             </View>}
         </>

src/pages/order/components/scanPay/index.tsx

@@ -1,5 +1,5 @@
 import { Image, ScrollView, Text, View } from "@tarojs/components";
-import { memo, useEffect } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import classnames from "classnames";
 import styles  from './index.module.scss'
 import Popup from "@/components/popup";
@@ -14,32 +14,106 @@ type Param = {
     show?: true|false,
     onClose?: () => void
 }
+
+
+type Item = {
+    product_code: string,
+    product_name: string,
+    product_color_code: string,
+    product_color_name: string,
+    num: string,
+    weight: string,
+    sale_price: string,
+    total_price: string
+}
+type CodeParam = {
+    title: string,
+    company: string,
+    order_type: string,
+    sale_user: string,
+    order_created_time: string,
+    order_no: string,
+    department: string,
+    shipment_mode: string,
+    target_user_name: string,
+    target_address: string,
+    target_description: string,
+    pay_account: string,
+    bank_account_name: string,
+    bank_name: string,
+    pay_type: string,
+    client: string,
+    phone: string,
+    order_total_length: string,
+    order_total_price: string,
+    qrcode: string,
+    order_total_weight: string,
+    list: Item[]
+}
 export default memo(({show = true, onClose}:Param) => {
-    const base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEX///8AAABVwtN+AAACFElEQVR42uyaMbKzMAyExVC8kiNwFI5GjsZRcgRKCgb9I69sY+Ik7R+8O/OKF/N1Gnklr1AURVEURf2sBnUd+P9PZdxFpFddRaZ4uhEhAiR+euBznM2q+hCRacXpROSuiJ0vjphG1YfVkRXM2lm5ECFSR/QpYn+hw+hBhMgnRCScCxA0JSJE3t1i4XdrTPa5e5gvFx+R9pBseqdN9AnTO6+9Pobjq08m8ttIKUP02ZdT0GcRaQuxDhOKyWvMTK/VmMi8droMBxEiNUw6Xawhaagxm5LipGRe+KUpEWkVifMz2hDOXcHwHqV/IdI6IvH3U41JaEqhV6HGLhiRuyBhRj7yyIMrKXnhNYw7L0t7Is0i0mF7snW5w+xp17/4w8+1wxBpF4G79ZEIhbWn2yqY3ortIdIu0mHhYrcYxuqwhRvwkhi88HULR6R5xBd3mmwPmlIaqdGciBBJyKmQjEeNddH2VGuMyO8jeaGCeyfnlAzxLVwlp0SkUeTsbv0dedxlNh8TN7qVRyEizSJlFg4exn7Oo/Xy9zEJSaQt5KS0hzmnaWuml0jDSJm1LqakwbNw28X0ErkPUuaUxg0F40mV+FooRIjUs9Y4n31S8ljTS40RIYLgW1yoxAQkPMzbtC2RlpF0i0mekrwpESFSn5IUq9vYkJba2pbIfZBT1trfkUNSpc/BNiJEKIqiKIqi/gv9CwAA//9IKiY1VjApygAAAABJRU5ErkJggg=='
-
 
+    //获取支付二维码
+    const [payCodeImage, setPayCodeImage] = useState<string>('')
+    const fileData = useRef({
+        filePath: '',
+        base64: ''
+    })
+    const {fetchData} = GetPayCode()
+    const getCore = async () => {
+        let res = await fetchData({
+            title: "面料销售电子确认单",
+            company: "什么什么公司123",
+            order_type: "散剪",
+            sale_user: "小崔",
+            order_created_time:"2022/02/01 12:32:13",
+            order_no:"XS-211005888",
+            department:"嘻嘻嘻",
+            shipment_mode:"自提",
+            target_user_name:"大崔",
+            target_address:"阿斯顿发斯蒂芬",
+            target_description:"无",
+            pay_account:"1234567890123450001",
+            bank_account_name:"佛山市浩川长盛科技有限公司",
+            bank_name:"招商银行佛山分行禅城支行",
+            pay_type:"现结",
+            client:"客户名称",
+            phone:"15818085802",
+            order_total_length:"12",
+            order_total_price:"63000",
+            qrcode:"www.zzfzyc.com/checkorder/XS-211005888",
+            order_total_weight:"300.00",
+            list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
+        })
+        const base64 = res.data.base64
+        setPayCodeImage(() => base64)
+        const time = new Date().valueOf()
+        const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
+        let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
+        fileData.current.filePath = filePath
+        fileData.current.base64 = bodyData
+    }
+    useEffect(() => {
+        getCore()
+    }, [])
 
+    //检查是否开启保存图片权限
     const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
     const saveImageCheck = async () => {
         const res = await check()
         res&&saveImage()
     }
+
     //保存图片
     const saveImage = () => {
         const save = Taro.getFileSystemManager()
-        const number = Math.random();
-        const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
-        let filePath = Taro.env.USER_DATA_PATH +'/pic.'+ format
         alert.loading('正在保存图片')
         save.writeFile({
-            filePath: filePath,
+            filePath: fileData.current.filePath,
-            data: base64,
+            data: fileData.current.base64,
             encoding: 'base64',
             success: function (res) {
-                console.log('aa::',res)
-                console.log('aa2::',filePath)
                 Taro.saveImageToPhotosAlbum({
-                    filePath: filePath,
+                    filePath: fileData.current.filePath,
                     success: function (res) {
                         alert.success('图片保存成功')
                     },
@@ -50,42 +124,14 @@ export default memo(({show = true, onClose}:Param) => {
             }
         })
     }
+
     //预览图片
     const showImage = () => {
         Taro.previewImage({
-            current: formatImgUrl(''), // 当前显示图片的http链接
+            current: fileData.current.filePath, // 当前显示图片的http链接
-            urls: [formatImgUrl('')] // 需要预览的图片http链接列表
+            urls: [fileData.current.filePath] // 需要预览的图片http链接列表
         })
     }
-
-    // const {fetchData} = GetPayCode()
-    // useEffect(() => {
-    //     fetchData({
-    //         title: "面料销售电子确认单",
-    //         company: "什么什么公司123",
-    //         order_type: "散剪",
-    //         sale_user: "小崔",
-    //         order_created_time:"2022/02/01 12:32:13",
-    //         order_no:"XS-211005888",
-    //         department:"嘻嘻嘻",
-    //         shipment_mode:"自提",
-    //         target_user_name:"大崔",
-    //         target_address:"阿斯顿发斯蒂芬",
-    //         target_description:"无",
-    //         pay_account:"1234567890123450001",
-    //         bank_account_name:"佛山市浩川长盛科技有限公司",
-    //         bank_name:"招商银行佛山分行禅城支行",
-    //         pay_type:"现结",
-    //         client:"客户名称",
-    //         phone:"15818085802",
-    //         order_total_length:"12",
-    //         order_total_price:"23000",
-    //         qrcode:"www.zzfzyc.com/checkorder/XS-211005888",
-    //         order_total_weight:"300.00",
-    //         list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
-    //     })
-    // }, [])
-    
     
     //复制功能
     return (
@@ -99,7 +145,7 @@ export default memo(({show = true, onClose}:Param) => {
                         扫码支付成功后，自动更新状态
                     </View>
                     <ScrollView scrollY className={styles.scanPay_list}>
-                        <Image mode="widthFix" src={base64} onClick={showImage}></Image>
+                        <Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
                     </ScrollView>
                     <View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
                 </View>

src/pages/order/index.module.scss

@@ -89,6 +89,10 @@
                 margin-left: 34px;
             }
         }
+        .order_btn_select{
+            color: $color_main;
+            border: 2px solid $color_main;
+        }
         .order_number_desc{
             font-size: $font_size_medium;
             color: $color_font_two;

src/pages/order/index.tsx

@@ -109,6 +109,10 @@ import styles  from './index.module.scss'
     const toPay = () => {
         setPayMentShow(true)
     }
+
+    //打开地址修改
+    const addressRef = useRef<any>(null)
+
     return (
         <View className={styles.order_main}>
             {/* <View className={styles.weight_memo_con}>
@@ -116,7 +120,7 @@ import styles  from './index.module.scss'
             </View> */}
             <OrderState list={orderDetail?.logistics_details}/>
             <View >
-                <AddressInfoDetail defaultValue={defaultAddress} disabled={true} shipment_mode={orderDetail?.shipment_mode}/>
+                <AddressInfoDetail ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
             </View>
             <KindList value={formatPreViewOrderMemo}/>
             <View className={styles.order_info} >
@@ -143,9 +147,9 @@ import styles  from './index.module.scss'
                 <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
             </View>
             <View className={styles.submit_order}>
-                <View className={styles.order_btn}>申请退货</View>    
+
-                <View className={styles.order_btn}>查看物流</View>    
+                {(orderDetail?.status == 0)&&<View className={styles.order_btn}>取消订单</View>}       
-                <View className={styles.order_btn}>确认收货</View>    
+                {(orderDetail?.status == 0)&&<View className={classnames(styles.order_btn, styles.order_btn_select)} onClick={() => addressRef.current.changeShow()}>修改地址</View>}       
                 <View className={styles.order_btn} onClick={() => toPay()}>去支付</View>    
             </View>        
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >

src/pages/orderList/components/order/index.tsx

@@ -1,11 +1,33 @@
-import { formatImgUrl } from "@/common/fotmat";
+import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
 import { useSelector } from "@/reducers/hooks";
 import { Image, Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import { memo } from "react";
+import { memo, useCallback } from "react";
 import styles  from './index.module.scss'
-export default memo(() => {
+
+type Param = {
+    value?: {
+        order_no: string,
+        sale_mode: number,
+        sale_mode_name: string,
+        status_name: string,
+        shipment_mode_name: string,
+        product_list: any[],
+        total_fabrics: number,
+        total_colors: number,
+        total_number: number
+    }
+}
+export default memo(({value}: Param) => {
     const userInfo = useSelector(state => state.userInfo)
+    //对应数量
+    const formatCount = useCallback((item, sale_mode) => {
+        return sale_mode == 0? item.roll : Number(item.length / 100)
+    }, [value])
+    //对应单价
+    const standardPrice = useCallback((price, sale_mode) => {
+        return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
+    }, [value])
     return (
         <View className={styles.order_item}>
             <View className={styles.header}>
@@ -14,41 +36,43 @@ export default memo(() => {
                 <Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
                 </View>
                 <View className={styles.order_num}>
-                <Text>订单号：LY2278204399678</Text>
+                <Text>订单号：{value?.order_no}</Text>
                 <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
                 </View>
-                <View className={styles.tag}>自提</View>
+                <View className={styles.tag}>{value?.shipment_mode_name}</View>
             </View>
-            <View className={styles.product_title}>
+            <View className={styles.product_con}>
-                <View className={styles.product_tag}>大货</View>
+                <View className={styles.product_title}>
-                <View className={styles.product_name}>0770# 21S单面平纹(食毛)</View>
+                    <View className={styles.product_tag}>{value?.sale_mode_name}</View>
-                <View className={styles.product_status}>待接单</View>
+                    <View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
+                    <View className={styles.product_status}>{value?.status_name}</View>
+                </View>
+                <View className={styles.product_list}>
+                    <View className={styles.image}>
+                    <Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
+                    <View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
+                    </View>
+                    <View className={styles.color_list}>
+                        {value?.product_list[0].product_colors.map((itemColor, index) => {
+                                return (
+                                    (index <= 1)&&<View className={styles.color_item}>
+                                        <View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
+                                        <View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
+                                        <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
+                                    </View>
+                                )
+                            
+                            })
+                        }
+                        <View className={styles.color_item}>
+                            <View className={styles.color_more}>……</View>
+                            <View className={styles.color_more}>……</View>
+                            <View className={styles.color_more}>……</View>
+                        </View>
+                    </View>
+                </View>
+                <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
             </View>
-            <View className={styles.product_list}>
-                <View className={styles.image}>
-                <Image src={formatImgUrl('')}/>
-                <View className={styles.color_num}>24色</View>
-                </View>
-                <View className={styles.color_list}>
-                <View className={styles.color_item}>
-                    <View className={styles.color_title}>1# 薄荷绿</View>
-                    <View className={styles.color_price}>¥40/kg</View>
-                    <View className={styles.color_num}>×2条</View>
-                </View>
-                <View className={styles.color_item}>
-                    <View className={styles.color_title}>1# 薄荷绿</View>
-                    <View className={styles.color_price}>¥40/kg</View>
-                    <View className={styles.color_num}>×2条</View>
-                </View>
-                <View className={styles.color_item}>
-                    <View className={styles.color_more}>……</View>
-                    <View className={styles.color_more}>……</View>
-                    <View className={styles.color_more}>……</View>
-                </View>
-                
-                </View>
-            </View>
-            <View className={styles.color_count_num}>2种面料，3种颜色，共6条</View>
             <View className={styles.btns_list}>
                 <View className={styles.btns_item}>取消订单</View>
                 <View className={styles.btns_item}>修改地址</View>

src/pages/orderList/index.module.scss

@@ -9,28 +9,30 @@
         box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
         border-bottom: 2px solid #e2e2e2;
         .order_status_list{
-            display: flex;
-            justify-content: space-between;
             font-size: $font_size;
             color: #9E9E9E;
             margin-top: 20px;
             .order_status_item{
-                padding: 20px 10px;
+                padding: 20px;
                 box-sizing: border-box;
             }
             .selected{
                 font-weight: 700;
                 color: #000;
                 border-bottom: 4px solid #707070;
-                // border-radius: 4px;
+            }
+            .order_list_scroll{
+                white-space: nowrap;
+                display: flex;
             }
         }
     }
     .order_list{
         flex:1;
         height: 0;
-        .order_item{
+        .order_item_con{
             margin-top: 20px;
+            padding: 0 20px;
         }
     }
 }

src/pages/orderList/index.tsx

@@ -1,15 +1,16 @@
 import Search from "@/components/search"
 import useLogin from "@/use/useLogin"
-import { Image, Text, View } from "@tarojs/components"
+import { Image, ScrollView, Text, View } from "@tarojs/components"
-import { useDidShow, useRouter } from "@tarojs/taro"
+import Taro, { useDidShow, useRouter } from "@tarojs/taro"
-import { useCallback, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {ORDER_STATUS} from '@/common/enum'
 import styles  from './index.module.scss'
 import classnames from "classnames";
-import { useSelector } from "@/reducers/hooks"
-import { formatImgUrl } from "@/common/fotmat"
 import Order from "./components/order"
 import InfiniteScroll from "@/components/infiniteScroll"
+import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
+import { dataLoadingStatus, getFilterData } from "@/common/util"
+import Tabs from "@/components/tabs"
 
 export default () => {
   const {checkLogin} = useLogin()
@@ -17,46 +18,89 @@ export default () => {
     await checkLogin()
   })
 
-  const router = useRouter()
   //搜索参数
   const [searchField, setSearchField] = useState({
-    shipment_mode:'',
+    status: -1,
     page : 1,
     size : 10,
-    key:''
+    Name:''
   })
 
-  //订单状态
+  //获取订单状态
-  type orderStatusParam = {value:number, label:string}[] 
+  const {fetchData: statusFetchData} = GetOrderStatusListApi()
-  const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)]
+  const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
-  const [selectStatus, setSelectStatus] = useState(-1)
+  const getOrderStatusList = async () => {
-  const changeStatus = useCallback((e) => {
+    let res = await statusFetchData()
-    setSelectStatus(() => e)
+    let list = [...statusList, ...res.data.list||[]]
+    setStatusList(() => list)
+  }
+  useEffect(() => {
+    getOrderStatusList()
   }, [])
 
+  //获取订单列表
+  const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
+  const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
+  const getOrderList = async () => {
+    let res = await listFetchData(getFilterData(searchField))
+    setOrderData({list: res.data.list, total: res.data.total})
+    Taro.stopPullDownRefresh()
+  }
+
+
+  //监听筛选条件变化
+  useEffect(() => {
+      getOrderList()
+  }, [searchField])
+
+  //上拉加载数据
+  const pageNum = useRef({size: searchField.size, page: searchField.page})
+  const getScrolltolower = useCallback(() => {
+      if(orderData.list.length < orderData.total) {
+          pageNum.current.page++
+          const size = pageNum.current.size * pageNum.current.page
+          setSearchField({...searchField, size })
+      }
+  }, [orderData])
+
+  //状态改变
+  const changeStatus = useCallback((e) => {
+    pageNum.current.page = 1
+    setSearchField((value) => ({...value, status:e,  size:10}))
+    setOrderData(() => ({list:[], total:0}))
+  }, [])
+
+
+  //数据加载状态
+  const statusMore = useMemo(() => {
+    return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
+  }, [orderData, orderState])
+
   //输入了搜索关键字
   const getSearchData = useCallback((e) => {
-    // setMaterialList(() => ({list:[], total:0}))
+    pageNum.current.page = 1
-    setSearchField((val) => ({...val, code_or_name:e, size:10}))
+    setOrderData(() => ({list:[], total:0}))
+    setSearchField((val) => ({...val, name:e, size:10}))
   }, [])
-
   
-
   return (
     <View className={styles.order_list_main}>
       <View className={styles.title}>
-        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
+        <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true}  changeOnSearch={getSearchData} debounceTime={300}/>
         <View className={styles.order_status_list}>
-          {order_status.map(item => {
+          <ScrollView scrollX >
-            return <View key={item.value} onClick={() => changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label}</View>
+            <View className={styles.order_list_scroll}> 
-          })}
+              {statusList.map(item => {
+                return <View key={item.id} onClick={() => changeStatus(item.id)} className={classnames(styles.order_status_item, (searchField.status==item.id)&&styles.selected)}>{item.name}</View>
+              })}
+            </View>
+          </ScrollView>
         </View>
       </View>
       <View className={styles.order_list}>
-          <InfiniteScroll>
+          <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} >
-            {new Array(10).fill('').map(item => {
+            {orderData?.list.map(item => {
-              return <View className={styles.order_item}> <Order/></View>
+              return <View className={styles.order_item_con}> <Order value={item}/></View>
-              
             })}
           </InfiniteScroll>
       </View>

src/use/useHttp.ts

@@ -1,7 +1,7 @@
 
 
 import Taro, { useRouter } from '@tarojs/taro'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {BASE_URL, WX_APPID} from '@/common/constant'
 import useUserInfo from "./useUserInfo"
 import  qs from 'qs';
@@ -122,10 +122,15 @@ export const useRequest = (options:option = {
     const stateRef = useRef({...params})
     const [state, setState] = useState({...stateRef.current})
     const {removeToken, removeSessionKey} = useUserInfo()
+    
+    useEffect(() => {
+        console.log('变化::', state.loading)
+    }, [state.loading])
     // 请求函数  
     const fetchData = async (sub_options?:any) => {
         stateRef.current.loading = true
         setState((e) => ({...e, loading:true}))
+        console.log('tf:::', stateRef.current.loading)
         stateRef.current.query = {
             ...sub_options,
             ...options.pagination && {
@@ -153,6 +158,7 @@ export const useRequest = (options:option = {
                 }
             }
             const result = await Taro.request(q as any)
+           
             const { statusCode } = result
             const {
                 code,
@@ -189,7 +195,7 @@ export const useRequest = (options:option = {
         }
         stateRef.current.error = false
         stateRef.current.loading = false
-        setState(() => stateRef.current)
+        setState(() => ({...stateRef.current}))
         return stateRef.current
     }