🌈 style:修改样式

src/components/BottomBtns/index.module.scss

@@ -1,4 +1,5 @@
 .flexBox {
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;

src/components/BottomBtns/index.tsx

@@ -1,5 +1,5 @@
 import { View } from "@tarojs/components"
-import { memo, useEffect, useState, useMemo } from "react"
+import { memo, useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from "react"
 import style from "./index.module.scss"
 interface prosObj {
     obj?: {
@@ -13,10 +13,13 @@ interface prosObj {
     nextBuy?: (any) => void,
     toPay?: (any) => void,
     handSureGoods?: () => void,
-    showTuiGoods?: boolean
+    showTuiGoods?: boolean,
+    handApplyGoods?: () => void,
+    handApplyMoney?: () => void,
+    showDetail?: boolean
 }
 
-export default memo((props: prosObj) => {
+export default memo(forwardRef((props: prosObj, ref) => {
     const {
         obj = {
             sale_mode: 0,
@@ -29,7 +32,10 @@ export default memo((props: prosObj) => {
         cancle,
         nextBuy,
         toPay,
-        handSureGoods
+        handSureGoods,
+        handApplyGoods,
+        handApplyMoney,
+        showDetail = false
     } = props
     //判断显示取消订单
 
@@ -97,8 +103,70 @@ export default memo((props: prosObj) => {
         } else return false
     }, [obj])
 
+
+
+
+    //判断显示申请退货
+    const showTuihuo = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status == 9 && 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 == 2) ||
+            (obj.sale_mode === 0 && obj.status == 9 && obj.settle_mode == 3) ||
+            (obj.sale_mode === 2 && obj.status == 9)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+    //判断显示申请退款
+    const showTuikuan = useMemo(() => {
+        if (
+            (obj.sale_mode === 0 && obj.status == 2 && obj.collect_status == 1) ||
+            (obj.sale_mode === 0 && obj.status == 7 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status == 11 && (obj.collect_status == 1 || obj.collect_status == 2)) ||
+            (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 0) ||
+            (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 2) ||
+            (obj.sale_mode === 0 && obj.status == 3 && obj.collect_status == 1) ||
+            (obj.sale_mode === 1 && obj.status == 0) ||
+            (obj.sale_mode === 1 && obj.status == 9) ||
+            (obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 1) ||
+            (obj.sale_mode === 2 && obj.status == 0 && obj.collect_status == 2)
+        ) {
+            return true
+        } else return false
+    }, [obj])
+
+    //多的不显示别的按钮
+    // const currentNums = useRef<any>({ nums: 0 })
+    const itemNums = useMemo(() => {
+        let nums = 0
+        if (showTake) {
+            nums = nums + 1
+        }
+        if (showCancel) {
+            nums = nums + 1
+        }
+        if (canBuy) {
+            nums = nums + 1
+        }
+        return nums
+    }, [obj])
+
+    useImperativeHandle(ref, () => ({
+        itemNums
+    }))
+
     return (
         <View className={style.flexBox}>
+
+            {
+                (showTuihuo && showDetail && itemNums === 0) && <View className={style.nextBuy} onClick={() => handApplyGoods?.()}>申请退货</View>
+            }
+
+            {
+                (showTuikuan && showDetail && itemNums === 0) && <View className={style.nextBuy} onClick={() => handApplyMoney?.()}>申请退款</View>
+
+            }
             {
                 showTake && showTuiGoods && <View className={style.cancle} onClick={() => handSureGoods?.()}>确认收货</View>
             }
@@ -114,4 +182,4 @@ export default memo((props: prosObj) => {
 
         </View>
     )
-})
+}))