订单列表对接

src/components/orderBtns/index.tsx

@@ -8,9 +8,12 @@ import styles  from './index.module.scss'
 type Param = {
     status?: number, //订单状态
     orderId: number, //订单id
+    payModel: number, //支付方式
+    realPayPrice: number, //实付金额
+    pendingPayPrice: number, //待付金额
     onClick?: (val: number) => void //点击后触发的事件，返回订单状态
 }
-export default memo(({status = 0, orderId = 0, onClick}:Param) => {
+export default memo(({status = 0, orderId = 0, onClick, realPayPrice = 0, pendingPayPrice = 0}:Param) => {
     //订单按钮按订单状态归类
     const orderBtnsList = useRef([
         {
@@ -49,15 +52,22 @@ export default memo(({status = 0, orderId = 0, onClick}:Param) => {
             label: '再次购买'
         }
     ])
+    //判断是否显示该按钮
     const orderBtnsShow = useCallback((item, status) => {
+        if(item.id == 1) {
+           return( realPayPrice == 0 && status <= 4) //在代发货之前没有付过款
+        } 
+        if(item.id == 2) {
+            return( pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款
+        }
         return item.value.includes(status)
+        
     },[])
 
     //点击按钮操作
     const submitBtns = (val) => {
         (val == 1)&&cancelOrder(); //取消订单按钮
         (val == 2)&&onClick?.(val); //去付款按钮
-        
     }
 
     //取消订单

src/pages/details/index.tsx

@@ -8,7 +8,7 @@ import ShopCart from '@/components/shopCart';
 import Preview,{colorItem} from './components/preview';
 import styles  from './index.module.scss'
 import { useEffect, useMemo, useState } from 'react';
-import {formatHashTag} from '@/common/fotmat'
+import {formatHashTag, formatImgUrl} from '@/common/fotmat'
 import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
 import { goLink } from '@/common/common';
 import useUserInfo from '@/use/useUserInfo';
@@ -147,7 +147,7 @@ export default (props:params) => {
               {productInfo?.product_color_list?.map(item => {
                 return <View className={styles.item} onClick={() => getColorItem(item)}>
                   <View className={styles.item_color}>
-                    <Image src={item.texture_url}></Image>
+                    <Image src={formatImgUrl(item.texture_url)}></Image>
                   </View>
                   <View className={styles.item_name}>{item.code}</View>
                 </View>

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

@@ -1,5 +1,5 @@
 import { Text, View } from "@tarojs/components";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import AmountShow from "../amountShow";
 import classnames from "classnames";
 import styles  from './index.module.scss'
@@ -15,7 +15,8 @@ import {alert} from "@/common/common"
 type Param = {
     show?: true|false,
     onClose?: () => void,
-    orderId?: number //应付单id
+    orderId?: number, //应付单id
+    onSubmitSuccess?: () => void //支付成功
 }
 
 type PayInfo = {
@@ -23,7 +24,7 @@ type PayInfo = {
 }
 
 type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
-export default memo(({show = false, onClose, orderId = 0}:Param) => {
+export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
 
     //提交参数
     const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
@@ -78,11 +79,19 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
         let res = await submitFetchData(submitData)
         if(res.success) {
             alert.success('支付成功')
+            onSubmitSuccess?.()
         } else {
             alert.none(res.msg)
         }
     }
 
+    const advance_payment = useMemo(() => {
+        const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)
+        return (
+            <View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
+        )
+    }, [payInfo])
+
     return (
         <View className={styles.payment_main}>
             <Popup show={show} showTitle={false} onClose={onClose} >
@@ -90,7 +99,7 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
                     <View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
                     <View className={styles.title}>订单支付</View>
                     <View className={styles.amount}>
-                        <AmountShow status={2} number={formatPriceDiv(payInfo?.amount)}/>
+                        <AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
                     </View>
                     <View className={styles.payment_list}>
                         <View className={styles.payment_list_top_border}></View>
@@ -99,11 +108,11 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
                             <View className={styles.payment_list_title_price}>
                                 <View className={styles.payment_list_title_price_item}>
                                     <Text>订单金额</Text>
-                                    <Text>¥6,001.00</Text>
+                                    <Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
                                 </View>
                                 <View className={styles.payment_list_title_price_item}>
                                     <Text>已付金额</Text>
-                                    <Text>¥1,801.00</Text>
+                                    <Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
                                 </View>
                             </View>
                         </View>
@@ -114,7 +123,7 @@ export default memo(({show = false, onClose, orderId = 0}:Param) => {
                                         <View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
                                         <View className={styles.payment_list_item_left_text}>预存款</View>
                                     </View>
-                                    <View className={styles.payment_list_item_left_price}>金额不足，剩余 ¥{payInfo?.advance_deposit_balance}</View>
+                                    {advance_payment}
                                 </View>
                                 <MCheckbox  status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
                             </View>

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

@@ -27,7 +27,7 @@ export default ({onBlur, onSave}:Param) => {
     }
     return (
         <View className={styles.order_popup}>
-            <View className={styles.order_popup_title}>添加备注</View>
+            <View className={styles.order_popup_title}>编辑备注</View>
             <View className={styles.order_popup_input}>
                 <Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
                 <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>

src/pages/order/index.module.scss

@@ -52,6 +52,7 @@
             color: $color_font_two;
             margin-right: 10px;
             flex:1;
+            word-break:break-all;
         }
         .order_desc_text_hint{
             text-align: right;

src/pages/order/index.tsx

@@ -151,6 +151,17 @@ import styles  from './index.module.scss'
         getSaleOrderPreView()
     })
 
+    //支付成功
+    const onPaySuccess = useCallback(() => {
+        getSaleOrderPreView()
+        closePayShow()
+    }, [orderDetail])
+
+    //关闭支付弹窗
+    const closePayShow = useCallback(() => {
+        setPayMentShow(() => false)
+    }, [orderDetail])
+
     return (
         <View className={styles.order_main}>
             {/* <View className={styles.weight_memo_con}>
@@ -191,7 +202,7 @@ import styles  from './index.module.scss'
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
                 <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
-            <Payment show={payMentShow} onClose={() => setPayMentShow(false)} orderId={orderDetail?.should_collect_order_id}/>
+            <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
             <View className="common_safe_area_y"></View>
         </View>
     )

src/pages/orderList/components/orderStatusList/index.module.scss

@@ -0,0 +1,18 @@
+.order_status_list{
+    font-size: $font_size;
+    color: #9E9E9E;
+    margin-top: 20px;
+    .order_status_item{
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .selected{
+        font-weight: 700;
+        color: #000;
+        border-bottom: 4px solid #707070;
+    }
+    .order_list_scroll{
+        white-space: nowrap;
+        display: flex;
+    }
+}

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

@@ -0,0 +1,46 @@
+import { ScrollView, View } from "@tarojs/components"
+import { memo, useEffect, useState } from "react"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+type Param = {
+    list: {id: number, name: string}[],
+    defaultId?: number|null,
+    onSelect?: (val: number) => void
+}
+export default memo(({list = [], defaultId = null, onSelect}: Param) => {
+    const [selectInfo, setSelectInfo] = useState({
+        selected: -1, //当前选中的id
+        tabId: '', //需要滚动到的id
+    })
+    useEffect(() => {
+        if(defaultId) {
+            const index = list?.findIndex(item => {
+                console.log(item.id, defaultId)
+                return item.id == defaultId 
+            })
+            if(index !== -1) {
+                const num = index > 0?( index - 1) : 0
+                setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
+            }
+        }
+    }, [defaultId])
+    const clickEvent = ({item, index}: {item:any, index:number}) => {
+        const num = index > 0?( index - 1) : 0
+        setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id}))
+        onSelect?.(item.id)
+    }
+
+    return (
+        <View className={styles.order_status_list}>
+          <ScrollView scrollX  scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+            <View className={styles.order_list_scroll}> 
+              {list.map((item, index) => {
+                return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})}  className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
+              })}
+            </View>
+          </ScrollView>
+        </View>
+    )
+})
+

src/pages/orderList/index.tsx

@@ -3,14 +3,13 @@ import useLogin from "@/use/useLogin"
 import { Image, ScrollView, Text, View } from "@tarojs/components"
 import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"
 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 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"
+import OrderStatusList from "./components/orderStatusList"
 
 export default () => {
   const {checkLogin} = useLogin()
@@ -44,6 +43,7 @@ export default () => {
   const getOrderList = async () => {
     let res = await listFetchData(getFilterData(searchField))
     setOrderData({list: res.data.list, total: res.data.total})
+    setRefresherTriggeredStatus(() => false)
   }
 
 
@@ -91,24 +91,17 @@ export default () => {
   const getRefresherRefresh = async () => {
     pageNum.current.size = 1
     setRefresherTriggeredStatus(true)
+    setSearchField((val) => ({...val, size:10}))
   }
   
   return (
     <View className={styles.order_list_main}>
       <View className={styles.title}>
         <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true}  changeOnSearch={getSearchData} debounceTime={300}/>
-        <View className={styles.order_status_list}>
+        <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
-          <ScrollView scrollX >
-            <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 statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} selfOnRefresherRefresh={getRefresherRefresh}>
+          <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
             {orderData?.list.map(item => {
               return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
             })}

src/use/useCheckAuthorize.tsx

@@ -8,7 +8,7 @@ type Param = {
     msg: string //检查不通过时警告
 }
 export default ({scope, msg}: Param) => {
-    //检查授权
+    //这个hook微信授权检查授权
     const check = useCallback(() => {
         return new Promise((reslove, reject) => {
             Taro.getSetting({

src/use/useHttp.ts

@@ -5,6 +5,8 @@ import { useEffect, useRef, useState } from 'react'
 import {BASE_URL, WX_APPID} from '@/common/constant'
 import useUserInfo from "./useUserInfo"
 import  qs from 'qs';
+import useLogin from './useLogin';
+import useLoginRequest from './useLoginRequest';
 
 
 type Params = {
@@ -122,6 +124,7 @@ export const useRequest = (options:option = {
     const stateRef = useRef({...params})
     const [state, setState] = useState({...stateRef.current})
     const {removeToken, removeSessionKey} = useUserInfo()
+    const {login} = useLoginRequest()
     
     useEffect(() => {
         console.log('变化::', state.loading)
@@ -176,9 +179,7 @@ export const useRequest = (options:option = {
                 if (statusCode === 401) {
                     removeToken()
                     removeSessionKey()
-                    // Taro.reLaunch({
+                    login()
-                    //     url: router.path +'?' + qs.stringify(router.params)
-                    // })
                 } else {
                     Taro.showToast({
                         title: `错误：${showStatus(statusCode)}`,

src/use/useLogin.ts

@@ -1,69 +1,31 @@
 import { useEffect, useState } from "react"
-import { WX_APPID } from "@/common/constant"
+import {BASE_URL, WX_APPID } from "@/common/constant"
 import useUserInfo from "./useUserInfo"
 import Taro, { useRouter } from "@tarojs/taro"
 import { LoginApi } from "@/api/login"
 import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user"
 import  qs from 'qs';
+import useLoginRequest from "./useLoginRequest"
 
 export default () => {
-    const {setToken, setSessionKey, setUserInfo, setAdminUserInfo, userInfo} = useUserInfo()
+    const {setUserInfo, setAdminUserInfo, userInfo} = useUserInfo()
     
     useEffect(() => {
         console.log('userInfo::',userInfo.token)
     }, [userInfo])
 
-    const router = useRouter()
+    //登录请求 (调用这个就不能再useHttp中使用，当前这个hook, 否则会死循环内存溢出)
+    // const {fetchData} = LoginApi()
+
     //登录请求
-    const {fetchData} = LoginApi()
+    const {login} = useLoginRequest()
-    
+    const wxLogin = async () => {
-    //微信登录
+        try {
-    const wxLogin = () => {
+            await login()
-        return new Promise((reslove, reject) => {
-            Taro.login({
-                success:  async (res) => {
-                    if (res.code) {
-                        const {data, success, msg} = await fetchData({js_code: res.code})
-                        if(success) {
-                                console.log('token::',data.token)
-                                setToken(data.token)
-                                setSessionKey(data.session_key)
-                                reslove(data)
-                                let params = router.params
-                                delete params.$taroTimestamp
-                                console.log('params::',params)
-                                if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
-                                    Taro.reLaunch({
-                                        url: router.path +'?' + qs.stringify(params)
-                                    })
-                                } else {
-                                    Taro.redirectTo({
-                                        url: router.path +'?' + qs.stringify(params)
-                                    })
-                                }
             getAdminUserInfo()
-
+        } catch(e) {
-                                //todo 删除本地授权用户信息，获取最新授权信息
+            console.log('登录失败::',e)
-                                
-                        } else {
-                            Taro.showToast({
-                                title:'登录失败',
-                                icon:"none"
-                            })
-                            reject(msg)
         }
-                    } else {
-                        console.log('登录失败！' + res.errMsg)
-                        reject(res.errMsg)
-                    }
-                },
-                fail: function(e) {
-                    console.log('登录失败！::',e)
-                    reject(e)
-                }
-            })
-        })
-        
     }
 
     //获取用户信息
@@ -83,6 +45,7 @@ export default () => {
                 Taro.checkSession({
                     success: async () => {
                         reslove(true)
+                       if(!userInfo.adminUserInfo)  getAdminUserInfo()
                     },
                     fail: async () =>  {
                         await wxLogin()
@@ -91,8 +54,6 @@ export default () => {
                 })
             }
         })
-        
-        
     }
 
     //获取用户头像等信息数据

src/use/useLoginRequest.ts

@@ -0,0 +1,106 @@
+import {BASE_URL, WX_APPID } from "@/common/constant"
+import Taro, { useRouter } from "@tarojs/taro"
+import { useRef, useState } from "react"
+import  qs from 'qs'
+import useUserInfo from "./useUserInfo"
+
+//开这个hook 主要是为了让useHttp 能够调用
+
+type Param = {success: true|false, data: any, msg: string, code: null|number, loading: false|true}
+export default () => {
+        let initData = {
+            success: false, 
+            data: null, 
+            msg: '', 
+            code: null,
+            loading: false
+        }
+        let loginData = useRef<Param>(initData)
+        const {setToken, setSessionKey} = useUserInfo()
+        const router = useRouter()
+        //微信登录请求v2
+        const fetchData = async (login_code) => {
+            const q = {
+                url: BASE_URL + '/v1/mall/login',
+                header: {
+                    "Platform": 6,
+                    "Appid": WX_APPID,
+                },
+                method: 'post',
+                data:{js_code: login_code}
+            }
+            try{
+                const result = await Taro.request(q as any)
+                const {code, data, msg} = result.data
+                if(result.statusCode === 200) {
+                    loginData.current.success = (code === 0 ? true : false)
+                    loginData.current.code = code
+                    loginData.current.msg = msg
+                    loginData.current.data = data
+                } else {
+                    Taro.showToast({
+                        title: `错误：登录失败`,
+                        icon: 'none'
+                    })
+                    console.log('登录错误：', result.errMsg)
+                    
+                }
+            }catch(e) {
+                Taro.showToast({
+                    title: `错误：登录失败`,
+                    icon: 'none'
+                })
+                console.log('登录错误：', e.errMsg)
+            }
+            return loginData.current
+        }
+
+        //微信登录
+        const login = () => {
+            return new Promise((reslove, reject) => {
+                Taro.login({
+                    success:  async (res) => {
+                        if (res.code) {
+                            const {data, success, msg} = await fetchData(res.code)
+                            if(success) {
+                                    setToken(data.token)
+                                    setSessionKey(data.session_key)
+                                    reslove(data)
+                                    let params = router.params
+                                    delete params.$taroTimestamp
+                                    if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
+                                        Taro.reLaunch({
+                                            url: router.path +'?' + qs.stringify(params)
+                                        })
+                                    } else {
+                                        Taro.redirectTo({
+                                            url: router.path +'?' + qs.stringify(params)
+                                        })
+                                    }
+                            } else {
+                                Taro.showToast({
+                                    title:'登录失败',
+                                    icon:"none"
+                                })
+                                reject(msg)
+                            }
+                        } else {
+                            console.log('登录失败！' + res.errMsg)
+                            reject(res.errMsg)
+                        }
+                    },
+                    fail: function(e) {
+                        console.log('登录失败！::',e)
+                        reject(e)
+                    }
+                })
+            })
+            
+        }
+
+        return {
+            login
+        }
+
+}
+

src/use/useManualPullDownRefresh.ts

@@ -1,24 +0,0 @@
-import Taro, { usePullDownRefresh } from "@tarojs/taro"
-import { useCallback, useState } from "react"
-
-type Arg = {[index:string]:any}
-export default (fn?:(val:Arg) => any, arg?:Arg) => {
-    const [data, setData] = useState({})
-
-    usePullDownRefresh(() => {
-        getData()
-    })
-
-    const getData = useCallback(() => {
-        setTimeout(() => {
-            const res = fn?.({...arg})
-            setData((e) => ({...e, res}))
-            Taro.stopPullDownRefresh()
-        }, 1000)
-    }, [])
-
-    return {
-        getData,
-        data
-    }
-}