pc-admin/src/pages/applicationList/detail.jsx

import React, { useState, useEffect } from 'react';
import { Card, Form, Button, Input, Image } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { getApplicationDetail } from '@/services/application'
import { history } from 'umi';

const { TextArea } = Input;
const FormItem = Form.Item;
const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
const goBack = () => {
  history.goBack();
};
export default (props) => {
  const { location } = props;
  const { id } = location.query;
  const [application, setApplication] = useState({});
  const [orderStatus, setOrderStatus] = useState();
  //已发证有快递 1
  //已发证无快递 2
  //审核驳回     3
  //待发证       4
  //待审核       5
  //待支付       6
  useEffect(() => {
    getApplicationDetail(id).then((res) => {
      setApplication(res)
      if (res?.status == 3) {
        if (res?.applyMethod == 2) {
          setOrderStatus(1)
        } else {
          setOrderStatus(2)
        }
      } else if (res.status == 2) {
        if (res?.verifyStatus == 2) {
          setOrderStatus(3)
        } else if (res?.verifyStatus == 1) {
          setOrderStatus(4)
        }
      }
      else if (res?.status == 0) {
        setOrderStatus(6)
      }
      else if (res?.status == 1) {
        setOrderStatus(5)
      }
    }).catch((err) => {
      console.log(err.message)
    });
  }, [id])
  return (
    <PageHeaderWrapper    >
      <Card>
        <Form {...formItemLayout}>
          <FormItem label="犬主">
            {application?.personName}
          </FormItem>
          {
            application?.isOrg &&
            <>
              <FormItem label="企业">
                {application?.orgName}
              </FormItem>
              <FormItem label="营业执照">
                <Image src={application?.orgLicense} width={100} />
              </FormItem>
            </>
          }
          <FormItem label="电话">
            {application?.phone}
          </FormItem>
          <FormItem label="犬名">
            {application?.petName}
          </FormItem>
          <FormItem label="性别">
            {
              application?.petSex == 1 ? '雄' :
                application?.petSex == 2 ? '雌' : '未说明性别'
            }
          </FormItem>
          <FormItem label="犬种">
            {application?.petType}
          </FormItem>
          <FormItem label="毛色">
            {application?.petColor}
          </FormItem>
          <FormItem label="照片">
            <Image src={application?.img1} width={100} />
          </FormItem>
          <FormItem label="养狗地址">
            {application?.address}
          </FormItem>
          <FormItem label="免疫证号">
            {application?.immunizationCode}
          </FormItem>
          <FormItem label="免疫证明">
            <Image src={application?.immunizationImg} width={100} />
          </FormItem>
          <FormItem label="最近免疫日期">
            {application?.immunizationDate}
          </FormItem>
          <FormItem label="申请类型">
            {
              application?.applyType == 'first' ? '办证' :
                application?.applyType == 'reissue' ? '补办' :
                  application?.applyType == 'renewal' ? '续期' : ''
            }
          </FormItem>
          {
            application?.applyType !== 'renewal' &&
            <FormItem label="申领方式">
              {
                application?.applyMethod == '1' ? '上门自取' :
                  application?.applyMethod == '2' ? '快递到家' : ''
              }
            </FormItem>
          }
          {
            application?.criminalInfo &&
            <FormItem label="伤人信息">
              <Image src={application.criminalInfo} width={100} />
            </FormItem>
          }
          {
            application?.penaltyInfo &&
            <FormItem label="处罚信息">
              <Image src={application.penaltyInfo} width={100} />
            </FormItem>
          }
          <FormItem label="订单状态">
            {
              (orderStatus === 1 || orderStatus === 2)
                ? '已发证'
                : orderStatus === 3
                  ? '审核驳回'
                  : orderStatus === 4
                    ? '待发证'
                    : orderStatus === 5
                      ? '待审核'
                      : '待支付'
            }
          </FormItem>
          {
            (orderStatus == 1 || orderStatus == 2) &&
            <FormItem label="证件号">
              {application.originCardNo}
            </FormItem>
          }
          {
            orderStatus == 1 &&
            <>
              <FormItem label="快递公司">
                {application.trackingType}
              </FormItem>
              <FormItem label="快递单号">
                {application.trackingNo}
              </FormItem>
            </>
          }
          {
            orderStatus == 3 &&
            <FormItem label="驳回原因">
              <TextArea placeholder='请输入驳回原因' rows='3'
                style={{ width: '360px' }}
                value={application.rejectReason}
                readOnly
              />
            </FormItem>
          }
          <FormItem label=" " colon={false}>
            <Button type="default" onClick={() => goBack()}>
              返回
            </Button>
          </FormItem>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};