qc-gameDataStatistics/src/pages/gameDataStatistics/order/details.tsx

import { useAjax } from "@/Hook/useAjax"
import { PayStatus, PayType, gameClassifyEnum } from "@/components/QueryForm/const"
import Tables from "@/components/Tables"
import WidthEllipsis from "@/components/widthEllipsis"
import { CpLogListProps, getOrderCpNoticeApi } from "@/services/gameData/order"
import { Badge, Descriptions, Divider, Drawer, Statistic } from "antd"
import React, { useEffect, useState } from "react"
import columns from "./tableConfigRole"


interface Props {
    visible?: boolean
    onClose?: () => void
    initialValues?: any
}
const Details: React.FC<Props> = ({ visible, onClose, initialValues = {} }) => {


    /********************************/
    const [queryFrom, setQueryForm] = useState<CpLogListProps>({ pageNum: 1, pageSize: 20, orderId: initialValues?.orderId })
    const [logList, setLogList] = useState<any>()
    const getOrderCpNotice = useAjax((params) => getOrderCpNoticeApi(params))
    /********************************/

    useEffect(() => {
        if (initialValues?.orderStatus && initialValues?.orderStatus > 0) {
            getList()
        }
    }, [queryFrom])

    const getList = () => {
        getOrderCpNotice.run(queryFrom).then(res => {
            setLogList(res?.data)
        })
    }

    /** 分页 */
    let pageChange = (page: number, pageSize?: number) => {
        setQueryForm({ ...queryFrom, pageNum: page, pageSize: pageSize || queryFrom.pageSize })
    }

    return <Drawer title={'订单详情'} width={1180} placement="right" onClose={onClose} visible={visible}>
        <Divider orientation="left" style={{ marginTop: 0 }}>订单详情</Divider>
        <Descriptions title="" bordered column={3} size="small">
            <Descriptions.Item label="商户订单号" contentStyle={{ width: 240 }}>{initialValues?.orderId || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="CP订单号" contentStyle={{ width: 240 }}>{<WidthEllipsis value={initialValues?.cpOrderId || '<空>'}/>}</Descriptions.Item>
            <Descriptions.Item label="第三方支付订单号" contentStyle={{ width: 240 }}>{<WidthEllipsis value={initialValues?.merchantOrderNo || '<空>'} />}</Descriptions.Item>
            <Descriptions.Item label="CP名称" contentStyle={{ width: 240 }}>{initialValues?.cpName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="游戏名称" contentStyle={{ width: 240 }}>{initialValues?.gameName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="游戏应用类型" contentStyle={{ width: 240 }}>{gameClassifyEnum[initialValues?.classify] || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="产品ID" contentStyle={{ width: 240 }}>{initialValues?.productId || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="产品名称" contentStyle={{ width: 240 }}>{initialValues?.productName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="渠道" contentStyle={{ width: 240 }}>{initialValues?.agentName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="支付方式" contentStyle={{ width: 240 }}>{PayType[initialValues?.payway] || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="支付场景" contentStyle={{ width: 240 }}>{initialValues?.payScene || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="收款商户" contentStyle={{ width: 240 }}>{initialValues?.merchantName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="订单金额" contentStyle={{ width: 240 }}><Statistic value={initialValues?.amount || 0} precision={2} /></Descriptions.Item>
            <Descriptions.Item label="订单实付金额" contentStyle={{ width: 240 }}><Statistic value={initialValues?.realAmount || 0} precision={2} /></Descriptions.Item>
            <Descriptions.Item label="支付状态" contentStyle={{ width: 240 }}>{PayStatus[initialValues?.orderStatus]}</Descriptions.Item>
            <Descriptions.Item label="创建时间" contentStyle={{ width: 240 }}>{initialValues?.orderCreateTime || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="支付时间" contentStyle={{ width: 240 }}>{initialValues?.payTime || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="最后通知时间" contentStyle={{ width: 240 }}>{initialValues?.lastCpNotifyTime || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="CP通知状态" contentStyle={{ width: 240 }}>{{ '1': <Badge status="processing" text="待处理" />, '2': <Badge status="success" text="成功" />, '-1': <Badge status="error" text="失败" /> }[initialValues?.cpStatus]}</Descriptions.Item>
            <Descriptions.Item label="操作系统" contentStyle={{ width: 240 }}>{initialValues?.os || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="是否首充" contentStyle={{ width: 240 }}>{{ '1': '是', '0': '否' }[initialValues?.isFirstRecharge]}</Descriptions.Item>
        </Descriptions>
        <Divider orientation="left">玩家信息</Divider>
        <Descriptions title="" bordered column={3} size="small">
            <Descriptions.Item label="玩家ID" contentStyle={{ width: 240 }}>{initialValues?.gameUserId || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="玩家账号" contentStyle={{ width: 240 }}><WidthEllipsis value={initialValues?.username || '<空>'}/></Descriptions.Item>
            <Descriptions.Item label="玩家注册时间" contentStyle={{ width: 240 }}>{initialValues?.regTime || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="CP名称" contentStyle={{ width: 240 }}>{initialValues?.cpName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="归因投放人员" contentStyle={{ width: 240 }}>{initialValues?.zxPitcherName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="游戏区服" contentStyle={{ width: 240 }}>{initialValues?.serverName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="游戏角色" contentStyle={{ width: 240 }}>{initialValues?.roleName || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="角色等级" contentStyle={{ width: 240 }}>{initialValues?.roleLevel || '<空>'}</Descriptions.Item>
            <Descriptions.Item label="角色VIP" contentStyle={{ width: 240 }}>{initialValues?.roleVip}</Descriptions.Item>
        </Descriptions>
        <Divider orientation="left">CP通知记录</Divider>
        <Tables
            columns={columns()}
            dataSource={logList?.records}
            total={logList?.total}
            loading={getOrderCpNotice.loading}
            current={queryFrom.pageNum}
            pageChange={pageChange}
            sizeChange={pageChange}
            size="small"
            scroll={{ x: 1000 }}
            bordered
        />
    </Drawer>
}

export default React.memo(Details)