H5/JiaShiDa.git

import { getRefundDetailById, refundAudit } from '../service';
import { Modal, Descriptions, Image, Table, Typography, Form, Input, Button, Radio, message } from 'antd';
import { useEffect, useState } from 'react';
import moment from 'moment';
 
const { Text } = Typography;
 
const RefundDetailModal = ({ visible, onCancel, id, onRefresh }) => {
  const [orderDetail, setOrderDetail] = useState(null);
  const [loading, setLoading] = useState(false);
  const [auditForm] = Form.useForm();
  const [auditLoading, setAuditLoading] = useState(false);
 
  // 订单状态映射
  const statusMap = {
    1: '待付款',
    2: '已付订金',
    3: '完成支付',
    4: '确认收货',
    5: '已退款',
  };
 
  // 审核状态映射
  const auditStatusMap = {
    1: '待审核',
    2: '审核通过',
    3: '审核驳回',
  };
 
  // 支付类型映射
  const paymentTypeMap = {
    1: '订金+尾款',
    2: '全款',
  };
 
  // 获取订单详情
  const fetchOrderDetail = async () => {
    if (!id) return;
 
    setLoading(true);
    try {
      const res = await getRefundDetailById(id);
      if (res.code === 200 && res.data) {
        setOrderDetail(res.data);
      }
    } catch (error) {
      console.error('获取订单详情失败:', error);
    } finally {
      setLoading(false);
    }
  };
 
  // 审核提交
  const handleAuditSubmit = async () => {
    try {
      const values = await auditForm.validateFields();
      setAuditLoading(true);
 
      const params = {
        id,
        auditStatus: values.auditStatus,
        auditRemark: values.auditRemark,
      };
 
      const res = await refundAudit(params);
 
      if (res.code === 200) {
        message.success('审核成功');
        // 关闭弹窗
        onCancel();
        // 触发父组件刷新列表
        if (onRefresh) {
          onRefresh();
        }
      } else {
        message.error(res.msg || '审核失败');
      }
    } finally {
      setAuditLoading(false);
    }
  };
 
  useEffect(() => {
    if (visible && id) {
      fetchOrderDetail();
    }
  }, [visible, id]);
 
  // 渲染商品信息表格
  const renderProductTable = () => {
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'bigGiftPackageName',
        width: 200,
      },
      {
        title: '封面图',
        dataIndex: 'bigGiftPackageCover',
        width: 100,
        render: (text) => (
          <Image
            width={60}
            height={60}
            src={text ? IMAGE_URL + text : null}
            style={{ objectFit: 'cover' }}
            placeholder={<div style={{ width: 60, height: 60, background: '#f5f5f5' }} />}
            fallback="/images/default-image.png"
          />
        ),
      },
      {
        title: '商品价格',
        dataIndex: 'bigGiftPackagePrice',
        width: 120,
        render: (text) => `¥${text || 0}`,
      },
      {
        title: '商品简介',
        dataIndex: 'bigGiftPackageIntro',
        ellipsis: true,
      },
      {
        title: '销量',
        dataIndex: 'bigGiftPackageSales',
        width: 80,
      },
    ];
 
    const dataSource = [{
      key: orderDetail?.id,
      ...orderDetail,
    }];
 
    return (
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        size="small"
      />
    );
  };
 
  // 渲染详情内容
  const renderDetailContent = () => {
    if (!orderDetail) return null;
 
    const { status, paymentType, refundStatus } = orderDetail;
 
    // 基础字段（所有状态都显示）
    const baseItems = [
      {
        label: '订单编号',
        children: orderDetail.code || '-',
      },
      {
        label: '下单时间',
        children: orderDetail.createTime ? moment(orderDetail.createTime).format('YYYY-MM-DD HH:mm:ss') : '-',
      },
      {
        label: '用户昵称',
        children: orderDetail.userName || '-',
      },
      {
        label: '用户手机号',
        children: orderDetail.phone || '-',
      },
      {
        label: '订单状态',
        children: statusMap[status] || '-',
      },
      {
        label: '审核状态',
        children: auditStatusMap[refundStatus] || '-',
      },
      {
        label: '订单金额',
        children: `¥${orderDetail.orderPrice || 0}`,
      },
      {
        label: '支付方式',
        children: paymentTypeMap[paymentType] || '-',
      },
    ];
 
    // 根据不同状态添加特定字段
    let specificItems = [];
 
    if (status >= 2) {
      // 已付定金或更高级状态
      specificItems = [
        {
          label: '定金',
          children: `¥${orderDetail.deposit || 0}`,
        },
        {
          label: '定金支付方式',
          children: '微信支付',
        },
        {
          label: '定金支付时间',
          children: orderDetail.depositTime ? moment(orderDetail.depositTime).format('YYYY-MM-DD HH:mm:ss') : '-',
        },
      ];
    }
 
    if (status === 3 && paymentType === 1) {
      // 已支付定金+尾款
      specificItems = [
        ...specificItems,
        {
          label: '已付尾款',
          children: `¥${orderDetail.finalPayment || 0}`,
        },
        {
          label: '尾款支付方式',
          children: '微信支付',
        },
        {
          label: '尾款支付时间',
          children: orderDetail.finalPaymentTime ? moment(orderDetail.finalPaymentTime).format('YYYY-MM-DD HH:mm:ss') : '-',
        },
      ];
    } else if (status === 3 && paymentType === 2) {
      // 已支付全款
      specificItems = [
        {
          label: '支付金额',
          children: `¥${orderDetail.paymentPrice || 0}`,
        },
        {
          label: '支付时间',
          children: orderDetail.depositTime ? moment(orderDetail.depositTime).format('YYYY-MM-DD HH:mm:ss') : '-',
        },
        {
          label: '支付方式',
          children: '微信支付',
        },
      ];
    }
 
    // 退款相关字段
    const refundItems = [
      {
        label: '退款金额',
        children: `¥${orderDetail.refundAmount || '0.00'}`,
      },
      {
        label: '申请退款原因',
        children: orderDetail.refundReason || '-',
      },
    ];
 
    // 审核相关字段
    const auditItems = [];
    if (refundStatus == 2) {
      auditItems.push(
        {
          label: '审核结果',
          children: refundStatus === 2 ? '审核通过' : '审核驳回',
        },
        {
          label: '审核时间',
          children: orderDetail.auditTime ? moment(orderDetail.auditTime).format('YYYY-MM-DD HH:mm:ss') : '-',
        },
      );
    }
    if (refundStatus == 3) {
      auditItems.push(
        {
          label: '驳回原因',
          children: orderDetail.auditRemark || '-',
        }
      );
    }
 
    return (
      <div>
        <Descriptions column={2} bordered loading={loading}>
          {[...baseItems, ...specificItems, ...refundItems, ...auditItems].map((item, index) => (
            <Descriptions.Item key={index} label={item.label}>
              {item.children}
            </Descriptions.Item>
          ))}
        </Descriptions>
 
        {/* 商品信息 */}
        <div style={{ marginTop: 24 }}>
          <Text strong>商品信息</Text>
          <div style={{ marginTop: 8 }}>
            {renderProductTable()}
          </div>
        </div>
 
        {/* 备注 */}
        {orderDetail.remark && (
          <div style={{ marginTop: 24 }}>
            <Text strong>备注</Text>
            <div style={{ marginTop: 8 }}>
              {orderDetail.remark}
            </div>
          </div>
        )}
 
        {/* 图片凭证 */}
        {orderDetail.refundImages && (
          <div style={{ marginTop: 24 }}>
            <Text strong>图片凭证</Text>
            <div style={{ marginTop: 8, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {orderDetail.refundImages.split(',').map((img, index) => (
                <Image
                  key={index}
                  width={80}
                  height={80}
                  src={img}
                  alt={`凭证${index + 1}`}
                  style={{ objectFit: 'cover' }}
                  fallback="/images/default-image.png"
                />
              ))}
            </div>
          </div>
        )}
 
        {/* 审核表单（仅待审核状态显示） */}
        {orderDetail?.refundStatus === 1 && (
          <div style={{ marginTop: 24 }}>
            <Text strong>审核操作</Text>
            <Form
              form={auditForm}
              style={{ marginTop: 16 }}
            >
              <Form.Item
                name="auditStatus"
                label="审核结果"
                rules={[
                  { required: true, message: '请选择审核结果' },
                ]}
              >
                <Radio.Group>
                  <Radio value={2}>审核通过</Radio>
                  <Radio value={3}>审核驳回</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) =>
                  prevValues.auditStatus !== currentValues.auditStatus
                }
              >
                {() => (
                  auditForm.getFieldValue('auditStatus') === 3 && (
                    <Form.Item
                      name="auditRemark"
                      label="驳回原因"
                      rules={[
                        { required: true, message: '请输入驳回原因' },
                      ]}
                    >
                      <Input.TextArea />
                    </Form.Item>
                  )
                )}
              </Form.Item>
 
              <Form.Item>
                <Button
                  type="primary"
                  loading={auditLoading}
                  onClick={handleAuditSubmit}
                  style={{ marginRight: 8 }}
                >
                  提交审核
                </Button>
              </Form.Item>
            </Form>
          </div>
        )}
      </div>
    );
  };
 
  return (
    <Modal
      title="订单详情"
      open={visible}
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      width={800}
      destroyOnHidden
    >
      {renderDetailContent()}
    </Modal>
  );
};
 
export default RefundDetailModal;