TestRestructureWechatLymarketDist/src/components/afterOrderBtns/index.tsx

import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { AFTER_ORDER_STATUS, ORDER_STATUS, SALE_MODE } from "@/common/enum"
import {Text, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import {useRef, memo, useState, useMemo } from "react"
import classnames from "classnames";
import styles  from './index.module.scss'
import { ReturnApplyOrderCancelApi } from "@/api/salesAfterOrder"

type Param = {
    orderInfo: {
        stage: number, //售后状态
        orderId: number, //订单id
        sale_mode: number, //订单类型
        type: number, //1退货，2退款
        return_apply_order_id: number //售后申请单
    },
    onClick?: (val: number) => void, //点击后触发的事件，返回订单状态
    onBtnNull?: () => void //所有按钮都为空
}

export default memo(({orderInfo, onClick, onBtnNull}:Param) => {
    //售后订单状态
    const {
        ReturnStageApplying,                  
        ReturnStageWaitCheck,
        ReturnStageReturned,
        ReturnStageQualityCheckPendingRefund,
        ReturnStageServiceOrderPendingRefund,
    } = AFTER_ORDER_STATUS

    //订单类型
    // const {
    //     SaLeModeBulk,
    //     SaleModeLengthCut,
    //     SaLeModeWeightCut,
    // } = SALE_MODE
    
    //售后按钮按售后状态归类, value是该订单状态，可能该按钮会出现
    const orderBtnsList = useRef([
        {
            id: 8,
            big_value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value], 
            cut_value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value ],
            model_value: [],
            label: '申请记录'
        },
        {
            id: 1,
            big_value: [ReturnStageApplying.value, ReturnStageWaitCheck.value],
            cut_value: [],
            model_value: [],
            label: '取消退货'
        },
        {
            id: 2,
            big_value: [ReturnStageWaitCheck.value], 
            cut_value: [],
            model_value: [],
            label: '退货物流'
        },
        {
            id: 4,
            big_value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], 
            cut_value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value],
            model_value: [],
            label: '质检结果'
        },
        {
            id: 6,
            big_value: [ReturnStageApplying.value, ReturnStageServiceOrderPendingRefund.value], 
            cut_value: [ReturnStageWaitCheck.value, ReturnStageApplying.value],
            model_value: [ReturnStageApplying.value],
            label: '取消退款'
        },
        
    ])
    
    
    //判断是否显示该按钮
    const orderBtnsShow = (item) => {
        let key = ['big_value', 'model_value', 'cut_value']
        if(item.id == 1) {
            //取消退货
            return (orderInfo.type == 1)&&item[key[orderInfo?.sale_mode]]?.includes(orderInfo.stage)
        } else if (item.id == 6) {
            //取消退款
            return (orderInfo.type == 2)&&item[key[orderInfo?.sale_mode]]?.includes(orderInfo.stage)
        } else if (item.id == 4) {
            //质检结果
            return (orderInfo?.type == 1)&&item[key[orderInfo?.sale_mode]]?.includes(orderInfo.stage) //退货才有
        } else {
            return item[key[orderInfo?.sale_mode]]?.includes(orderInfo.stage)
        }
    }

    //显示的按钮数组
    const orderBtnsShowList: any[] = useMemo(() => {
        return orderBtnsList.current.filter(item => {
            return orderBtnsShow(item)
        })
    }, [orderInfo])



    //点击按钮操作
    const submitBtns = (val, index) => {
        if (val == 1) {
            cancelOrder({title:'要取消退货吗？'})
        } else if (val == 6) {
            cancelOrder({title:'要取消退款吗？'})
        } else {
            onClick?.(val)
        }
    }

    //取消退货/退款
    const {fetchData: returnApplyOrderCancelFetchData} = ReturnApplyOrderCancelApi()
    const cancelOrder = ({title = ''}) => { 
        Taro.showModal({
            title,
            success: async function (res) {
              if (res.confirm) {
                let res = await returnApplyOrderCancelFetchData({id: orderInfo?.return_apply_order_id})
                if(res.success) {
                    alert.success('取消成功')
                    onClick?.(1)
                } else {
                    alert.none(res.msg)
                }
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
        })
    }

    //显示更多按钮
    const [showMore, setShowMore] = useState(false)
    const styleTop = useMemo(() => {
        return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`}
    }, [orderBtnsShowList])

    return (
        <View className={styles.btns_list}>
            {(orderBtnsShowList.length > 3)&&<View className={styles.more}>
                <Text onClick={() => setShowMore(true)}>更多</Text>
                {showMore&&<View className={styles.more_con}>
                    <View className={styles.more_list} style={styleTop}>
                        {orderBtnsShowList.map((item, index) => {
                            return ((index >= 3) &&<View className={styles.more_item} key={item.id}  onClick={() => submitBtns(item.id, index)}>{item.label}</View>)
                        })}
                    </View>
                    <View className={styles.more_bg} catchMove  onClick={() => setShowMore(false)}></View>
                </View>}
            </View>}

            <View className={styles.list_scroll}>
                {orderBtnsShowList.map((item, index) => 
                    (index < 3)&&<View key={item.id} className={classnames(styles.btns_item)} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
                )}
            </View>
            
        </View>
    )
})