pay-company/src/pages/bills/temporary/modals/QrCode.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyModalFormProps,
  renderTextHelper,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { BillPaymentsTypeEnum, BillsStatusEnum } from '@/gen/Enums';
import { BetaSchemaForm, ProDescriptions } from '@ant-design/pro-components';
import { Form, QRCode, Tabs } from 'antd';
import { useState } from 'react';

export default function ShowQrCode(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  const [activeTab, setActiveTab] = useState<string>('wechat');
  const [wechatQrCode, setWechatQrCode] = useState<string>('');
  const [alipayQrCode, setAlipayQrCode] = useState<string>('');

  const fetchQrCode = (type: 'wechat' | 'alipay') => {
    if (!props?.item?.id) return;
    const params = {
      id: props.item.id,
    };

    if (type === 'wechat') {
      Apis.Bill.Bills.GetPayCode(params).then((res: any) => {
        setWechatQrCode(res?.data?.qr_code || '');
      });
    } else {
      Apis.Bill.Bills.AlipayQrCode(params).then((res: any) => {
        setAlipayQrCode(res?.data?.payinfo || '');
      });
    }
  };

  return (
    <BetaSchemaForm<ApiTypes.Bill.Bills.GetPayCode>
      {...MyModalFormProps.props}
      title={props.title}
      width="500px"
      wrapperCol={{ span: 24 }}
      trigger={
        <MyButtons.Default
          type="primary"
          size="small"
          title={props.title}
          disabled={
            props?.item?.status === BillsStatusEnum.Paid.value ||
            props?.item?.status === BillsStatusEnum.Cancelled.value ||
            props?.item?.status === BillsStatusEnum.UnderApproval.value ||
            props?.item?.status === BillsStatusEnum.ToBeConfirmed.value
          }
        />
      }
      form={form}
      submitter={false}
      onOpenChange={(open: any) => {
        if (open) {
          setWechatQrCode('');
          setAlipayQrCode('');
          setActiveTab('wechat');
          fetchQrCode('wechat');
        }
      }}
      columns={[
        {
          title: '',
          colProps: { span: 24 },
          key: 'qrcode',
          renderFormItem() {
            return (
              <div style={{ textAlign: 'left' }}>
                <ProDescriptions
                  column={2}
                  size="small"
                  bordered
                  style={{ marginBottom: '16px' }}
                >
                  <ProDescriptions.Item label="项目" span={2}>
                    {props?.item?.asset_project?.name || '-'}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="费用类型">
                    <renderTextHelper.Tag
                      Enums={BillPaymentsTypeEnum}
                      value={props?.item?.type}
                      key="type"
                    />
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="支付金额">
                    ¥{props?.item?.amount || 0}
                  </ProDescriptions.Item>
                  <ProDescriptions.Item label="说明">
                    {props?.item?.remark || '-'}
                  </ProDescriptions.Item>
                </ProDescriptions>
                <Tabs
                  activeKey={activeTab}
                  onChange={(key) => {
                    setActiveTab(key);
                    fetchQrCode(key as 'wechat' | 'alipay');
                  }}
                  items={[
                    {
                      key: 'wechat',
                      label: '微信支付',
                      children: (
                        <div
                          style={{
                            display: 'flex',
                            padding: '20px 0',
                            justifyContent: 'center',
                          }}
                        >
                          {wechatQrCode ? (
                            <img
                              style={{ width: '220px', height: '220px' }}
                              src={wechatQrCode}
                              alt="微信支付二维码"
                            />
                          ) : (
                            <div
                              style={{
                                width: '220px',
                                height: '220px',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                              }}
                            >
                              加载中...
                            </div>
                          )}
                        </div>
                      ),
                    },
                    {
                      key: 'alipay',
                      label: '支付宝',
                      children: (
                        <div
                          style={{
                            display: 'flex',
                            padding: '20px 0',
                            justifyContent: 'center',
                          }}
                        >
                          {alipayQrCode ? (
                            <QRCode value={alipayQrCode} size={220} />
                          ) : (
                            <div
                              style={{
                                width: '220px',
                                height: '220px',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                              }}
                            >
                              加载中...
                            </div>
                          )}
                        </div>
                      ),
                    },
                  ]}
                />
              </div>
            );
          },
        },
      ]}
    />
  );
}