🐞 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,55 +159,147 @@ 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 && <>
+          {
+            showCancel && <View className={style.cancle} onClick={e => cancle?.(e)}>取消订单</View>
+          }
+          {
+            showBuy && <View className={style.nextBuy} onClick={e => nextBuy?.(e)}>再次购买</View>
+          }
+          {
+            canBuy && <View className={style.toBuy} onClick={e => toPay?.(e)}>去付款</View>
+          }
 
+        </>
       }
-      {
-        (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>
-      }
-      {
-        showBuy && <View className={style.nextBuy} onClick={e => nextBuy?.(e)}>再次购买</View>
-      }
-      {
-        canBuy && <View className={style.toBuy} onClick={e => toPay?.(e)}>去付款</View>
-      }
+
     </View>
   )
 }