🐞 fix(通用组件):修复组件展示更多按钮

src/components/BottomBtns/index.tsx

@@ -1,5 +1,6 @@
 import { View } from '@tarojs/components'
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import classnames from 'classnames'
 import style from './index.module.scss'
 
 interface prosObj {
@@ -158,46 +159,134 @@ const BottomBtns = (props: prosObj, ref) => {
   }, [obj])
 
   // 多的不显示别的按钮
-  // const currentNums = useRef<any>({ nums: 0 })
+  const [btnList, setbtnList] = useState<any[]>([])
   const itemNums = useMemo(() => {
+    const arr: any[] = []
     let nums = 0
-    if (showTake) {
-      nums = nums + 1
-    }
     if (showCancel) {
       nums = nums + 1
+      console.log('222')
+      arr.push({
+        key: 'showCancel',
+        label: '取消订单',
+        bgKind: 1,
+        sort: 1,
+      })
     }
     if (canBuy) {
       nums = nums + 1
+      console.log('333')
+      arr.push({
+        key: 'canBuy',
+        label: '去付款',
+        bgKind: 2,
+        sort: 20,
+      })
     }
     if (showBuy) {
       nums = nums + 1
+      console.log('444')
+      arr.push({
+        key: 'showBuy',
+        label: '再次购买',
+        bgKind: 3,
+        sort: 10,
+      })
     }
-
+    if (showTake) {
+      nums = nums + 1
+      console.log('111')
+      arr.push({
+        key: 'showTake',
+        label: '确认收货',
+        bgKind: 1,
+        sort: 9,
+      })
+    }
+    if (showCodeList) {
+      nums = nums + 1
+      console.log('555')
+      arr.push({
+        key: 'showCodeList',
+        label: '销售码单',
+        bgKind: 1,
+        sort: 12,
+      })
+    }
+    if (showTuikuan) {
+      nums = nums + 1
+      console.log('666')
+      arr.push({
+        key: 'showTuikuan',
+        label: '申请退款',
+        bgKind: 3,
+        sort: 3,
+      })
+    }
+    if (showTuihuo) {
+      nums = nums + 1
+      console.log('777')
+      arr.push({
+        key: 'showTuihuo',
+        label: '申请退货',
+        bgKind: 3,
+        sort: 2,
+      })
+    }
+    console.log(arr, 'arr')
+    const fiterArr = arr.sort((a, b) => a.sort - b.sort)
+    setbtnList([...fiterArr])
     return nums
   }, [obj])
 
   useImperativeHandle(ref, () => ({
     itemNums,
+    btnList,
   }))
 
+  const submitBtns = (e, key) => {
+    if (key === 'showTuihuo') {
+      handApplyGoods?.()
+    }
+    if (key === 'showTuikuan') {
+      handApplyMoney?.()
+    }
+    if (key === 'showCodeList') {
+      handShowCodeList?.()
+    }
+    if (key === 'showTake') {
+      handSureGoods?.()
+    }
+    if (key === 'showCancel') {
+      cancle?.(e)
+    }
+    if (key === 'showBuy') {
+      nextBuy?.(e)
+    }
+    if (key === 'canBuy') {
+      toPay?.(e)
+    }
+  }
+
   return (
     <View className={style.flexBox}>
 
       {
-        (showTuihuo && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>申请退货</View>
+        (showDetail || showTuiGoods) && <>
+          {
+            btnList.map((item, index) =>
+              btnList.length - 3 <= index && (
+                <View key={index} className={classnames(item.bgKind === 1 ? style.cancle : item.bgKind === 2 ? style.toBuy : style.nextBuy)} onClick={e => submitBtns(e, item.key)}>
+                  {item.label}
+                </View>
+              ),
+            )
+          }
+        </>
       }
 
       {
-        (showTuikuan && showDetail && itemNums < 4) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>申请退款</View>
+        !showDetail && !showTuiGoods && <>
-
-      }
-      {
-        (showCodeList && showDetail) && <View className={style.cancle} onClick={() => handShowCodeList?.()}>销售码单</View>
-      }
-      {
-        showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}>确认收货</View>
-      }
           {
             showCancel && <View className={style.cancle} onClick={e => cancle?.(e)}>取消订单</View>
           }
@@ -207,6 +296,10 @@ const BottomBtns = (props: prosObj, ref) => {
           {
             canBuy && <View className={style.toBuy} onClick={e => toPay?.(e)}>去付款</View>
           }
+
+        </>
+      }
+
     </View>
   )
 }

src/pages/orderDetails/components/BottomApply/index.tsx

@@ -14,6 +14,10 @@ interface prosObj {
   }
   handApplyGoods?: () => void
   handApplyMoney?: () => void
+  nextBuy?: (any) => void
+  handSureGoods?: (any) => void
+  handShowCodeList?: (any) => void
+  cancle?: (any) => void
   goodsObj?: any
   // handSureGoods?: () => void,
 }
@@ -29,7 +33,11 @@ const BottomApply = (props: prosObj) => {
     },
     handApplyGoods,
     handApplyMoney,
+    handSureGoods,
+    cancle,
+    handShowCodeList,
     goodsObj = {},
+    nextBuy,
     // handSureGoods
   } = props
 
@@ -66,24 +74,215 @@ const BottomApply = (props: prosObj) => {
     else { return false }
   }, [obj])
 
-  return (
+  // 判断显示再次购买
-    < >
+  const showBuy = useMemo(() => {
+    if (
+      obj.sale_mode === 0
+            || (obj.sale_mode === 1 && obj.status !== 10)
+            || (obj.sale_mode === 2 && obj.status !== 10)
+    ) {
+      return true
+    }
+    else { return false }
+  }, [obj])
 
+  // 判断显示确认收货
+  const showTake = useMemo(() => {
+    if (
+      (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 1)
+            || (obj.sale_mode === 0 && obj.status == 8 && obj.collect_status == 2)
+            || (obj.sale_mode === 0 && obj.status == 8 && obj.settle_mode == 3)
+            || (obj.sale_mode === 1 && obj.status == 8)
+            || (obj.sale_mode === 2 && obj.status == 8)
+    ) {
+      return true
+    }
+    else { return false }
+  }, [obj])
+
+  // 判断是否显示码单
+  // 订单状态：待付款、待发货、待提货、待收货、已收货、已完成
+  const showCodeList = useMemo(() => {
+    if (obj.status == 3 || obj.status == 8 || obj.status == 11 || obj.status == 9 || obj.status == 4) {
+      return true
+    }
+    else { return false }
+  }, [obj])
+
+  // 判断显示取消订单
+
+  const showCancel = useMemo(() => {
+    if (
+      (obj.sale_mode === 0 && obj.status === 0)
+            || (obj.sale_mode === 0 && obj.status === 1)
+            || (obj.sale_mode === 0 && obj.status === 2 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status === 11 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status === 11 && obj.settle_mode == 3)
+            || (obj.sale_mode === 0 && obj.status === 3 && obj.settle_mode == 3)
+            || (obj.sale_mode === 1 && obj.status === 10)
+            || (obj.sale_mode === 2 && obj.status === 10)
+            || (obj.sale_mode === 2 && obj.status === 0 && (obj.collect_status == 1 || obj.collect_status == 2))
+            || (obj.sale_mode === 2 && obj.status === 0 && obj.collect_status == 0)
+            || (obj.sale_mode === 1 && obj.status === 10)
+            || (obj.sale_mode === 2 && obj.status === 10)
+             || (obj.sale_mode === 0 && obj.status === 13)
+    ) {
+      return true
+    }
+    else { return false }
+  }, [obj])
+
+  // 判断显示去付款
+  const canBuy = useMemo(() => {
+    if (
+      (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 1)
+            || (obj.sale_mode === 0 && obj.status === 7 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status === 7 && obj.settle_mode == 3)
+            || (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 1)
+            || (obj.sale_mode === 0 && obj.status === 3 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 1)
+            || (obj.sale_mode === 0 && obj.status === 8 && obj.collect_status == 0)
+            || (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 1)
+            || (obj.sale_mode === 0 && obj.status === 9 && obj.collect_status == 0)
+            || (obj.sale_mode === 2 && obj.status === 2)
+            || (obj.sale_mode === 2 && obj.status === 7)
+            || (obj.sale_mode === 1 && obj.status === 10)
+            || (obj.sale_mode === 2 && obj.status === 10)
+    ) {
+      return true
+    }
+    else { return false }
+  }, [obj])
+
+  const [btnList, setbtnList] = useState<any[]>([])
+  useMemo(() => {
+    const arr: any[] = []
+    let nums = 0
+    if (showCancel) {
+      nums = nums + 1
+      arr.push({
+        key: 'showCancel',
+        label: '取消订单',
+        bgKind: 1,
+        sort: 1,
+      })
+    }
+    if (canBuy) {
+      nums = nums + 1
+      arr.push({
+        key: 'canBuy',
+        label: '去付款',
+        bgKind: 2,
+        sort: 20,
+      })
+    }
+    if (showBuy) {
+      nums = nums + 1
+      arr.push({
+        key: 'showBuy',
+        label: '再次购买',
+        bgKind: 3,
+        sort: 10,
+      })
+    }
+    if (showTake) {
+      nums = nums + 1
+      arr.push({
+        key: 'showTake',
+        label: '确认收货',
+        bgKind: 1,
+        sort: 9,
+      })
+    }
+    if (showCodeList) {
+      nums = nums + 1
+      arr.push({
+        key: 'showCodeList',
+        label: '销售码单',
+        bgKind: 1,
+        sort: 12,
+      })
+    }
+    if (showTuikuan) {
+      nums = nums + 1
+      arr.push({
+        key: 'showTuikuan',
+        label: '申请退款',
+        bgKind: 3,
+        sort: 3,
+      })
+    }
+    if (showTuihuo) {
+      nums = nums + 1
+      arr.push({
+        key: 'showTuihuo',
+        label: '申请退货',
+        bgKind: 3,
+        sort: 2,
+      })
+    }
+    const fiterArr = arr.sort((a, b) => a.sort - b.sort)
+    setbtnList([...fiterArr])
+    return nums
+  }, [obj])
+
+  const submitBtns = (e, key) => {
+    if (key === 'showTuihuo') {
+      handApplyGoods?.()
+    }
+    if (key === 'showTuikuan') {
+      handApplyMoney?.()
+    }
+    if (key === 'showCodeList') {
+      handShowCodeList?.(e)
+    }
+    if (key === 'showTake') {
+      handSureGoods?.(e)
+    }
+    if (key === 'showCancel') {
+      cancle?.(e)
+    }
+    if (key === 'showBuy') {
+      nextBuy?.(e)
+    }
+    // if (key === 'canBuy') {
+    //   toPay?.(e)
+    // }
+  }
+
+  return (
+    <>
+      {/* {
+        showBuy && <View className={styles.title} onClick={e => nextBuy?.(e)}>再次购买</View>
+      }
       {
         showTuihuo && <View className={styles.title} onClick={() => handApplyGoods?.()}>申请退货</View>
       }
-
       {
-        showTuikuan && <View className={styles.tuikuan} onClick={() => handApplyMoney?.()}>申请退款</View>
+        showTake && <View className={styles.title} onClick={e => handSureGoods?.(e)}>确认收货</View>
+      }
+      {
+        showTuikuan && <View className={styles.title} onClick={() => handApplyMoney?.()}>申请退款</View>
 
       }
-      {/*
       {
-                showTake && <View className={styles.tuikuan} onClick={() => handSureGoods?.()}>确认收货</View>
+        showCodeList && <View className={styles.title} onClick={e => handShowCodeList?.(e)}>销售码单</View>
-            } */}
+
+      }
 
       {
-        !showTuihuo && !showTuikuan && <View className={styles.title} >暂无更多</View>
+        !showTuihuo && !showTuikuan && !showBuy && <View className={styles.title} >暂无更多</View>
+      } */}
+      {
+        btnList.map((item, index) =>
+          index < btnList.length - 3 && (
+            <View key={index} className={styles.title} onClick={e => submitBtns(e, item.key)}>
+              {item.label}
+            </View>
+          ),
+        )
       }
     </>
   )

src/pages/orderDetails/index.tsx

@@ -735,7 +735,7 @@ const OrderDetails = () => {
   const [showOther, setshowOther] = useState(false)
   useMemo(() => {
     Taro.nextTick(() => {
-      if (BottomBtnsRef.current?.itemNums >= 4) {
+      if (BottomBtnsRef.current?.btnList.length > 3) {
         setshowOther(true)
         return true
       }
@@ -874,6 +874,10 @@ const OrderDetails = () => {
                             goodsObj={infoObj}
                             handApplyGoods={() => handApplyGood?.()}
                             handApplyMoney={() => handApplyMoney?.()}
+                            nextBuy={e => nextBuy?.(e, infoObj)}
+                            handSureGoods={() => handSureGoods?.()}
+                            handShowCodeList={() => handShowCodeList?.()}
+                            cancle={e => cancle?.(e, infoObj)}
                           ></BottomApply>
                         </View>
                       }