mfyx_web/src/Material/components/BuyModel.tsx

import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request'

import { Button, Form, Input, message, Row, Modal, Upload } from 'antd'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
import type { UploadChangeParam } from 'antd/es/upload'
import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
import CheckboxSvg from 'assets/checkbox.svg'
import CheckedSvg from 'assets/checked.svg'

import NButton from 'components/NButton/NButton'
import { IGoodsListItem, MaterialService } from '../Material.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import { ITryType } from './NoPermission'
import styles from '../css/NoPermission.module.scss'
export enum PayType {
  Card = 1, // 畅销卡
  Single = 2 // 单场活动
}

interface IBuyModelProps {
  visible: boolean
  detailID?: number
  tryType?: ITryType
  payType?: PayType
  handleClose: () => void
}

/**
 * 付费报名弹框(畅销卡与单场活动购买)
 */
const BuyModel: React.FC<IBuyModelProps> = props => {
  const { visible, detailID, tryType, payType = PayType.Card, handleClose } = props
  const login2p = useLogin2p()
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState<string>()
  const [buyType, setBuyType] = useState<number>(1)

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传名片</div>
    </div>
  )

  const { run } = useRequest(MaterialService.postApplyTry, {
    manual: true,
    onSuccess: res => {
      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
      handleToClose()
      setImageUrl(undefined)
    }
  })
  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
    manual: true,
    onSuccess: res => {
      message.info(res.data.Msg)
      setImageUrl(res.data?.Data?.ResourceUrl)
      setLoading(false)
    }
  })
  useEffect(() => {
    return () => {
      form.resetFields()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [form])

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleFinish = (value: any) => {
    if (!imageUrl) {
      message.error('请上传名片')
      return
    }
    // 上传名片时，ApplyMethod为2，否则为1
    run({
      ApplyMethod: 2,
      BusinessCardUrl: imageUrl,
      CompanyName: value.CompanyName,
      DetailId: detailID,
      RealName: value.RealName,
      TryType: tryType
    })
  }
  const uploadProps: UploadProps = {
    name: 'file',
    multiple: false,
    listType: 'picture-card',
    showUploadList: false,
    withCredentials: true,
    customRequest: option => {
      uploadImg(option.file)
    },
    onChange: (info: UploadChangeParam<UploadFile>) => {
      if (info.file.status === 'uploading') {
        setLoading(true)
        return
      }
    }
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e
    }
    return e && e.fileList
  }
  const handleToClose = () => {
    // 关闭前把名片给清除了
    setImageUrl(undefined)
    handleClose()
  }
  const handleBackClose = () => {
    //
    handleClose()
  }
  const cardList: IGoodsListItem[] = [
    { CurrentPrice: '0.01', GoodsId: 1, GoodsName: '日卡', PopupPriceMsg: '¥99/日，', Price: '99.00' },
    {
      CurrentPrice: '0.01',
      GoodsId: 2,
      GoodsName: '月卡',
      PopupPriceMsg: '¥999/月',
      Price: '399.00'
    }
  ]
  return (
    <Modal
      open={visible}
      centered={true}
      onCancel={handleToClose}
      destroyOnClose={true}
      maskClosable={false}
      title="付费报名"
      footer={null}
    >
      <div
        className={styles['buymodel-content-wrapper']}
        style={{ textAlign: payType === PayType.Single ? 'center' : 'initial' }}
      >
        <div className="buymodel-card-wrapper">
          {cardList.map(item => (
            <div
              className={`buymodel-card-item ${buyType === item.GoodsId ? 'buymodel-card-act' : ''}`}
              key={item.GoodsId}
            >
              <span>{item.GoodsName}</span>
              <span className="buymodel-price-current">&nbsp;¥{item.CurrentPrice}</span>
              <span className="buymodel-price-undeline">&nbsp;¥{item.Price}</span>
            </div>
          ))}
        </div>
        <div className="buymodel-price-text" style={{ textAlign: payType === PayType.Single ? 'center' : 'initial' }}>
          <span>应付金额：</span>
          <span className="price-red">&nbsp;¥1299&nbsp;</span>
          <span className="price-undeline">¥1999.00</span>
        </div>
        <div className="buymodel-checkbox-wrapper m-t-md">
          <img src={CheckboxSvg} alt="图标" className="buymodel-icon" />
          <img src={CheckedSvg} alt="图标" className="buymodel-icon" />
          <span>我已阅读并同意</span>
          <span className="buymodel-text-orange">《研选平台服务协议》</span>
          <span className="buymodel-text-orange">《研选平台隐私政策》</span>
        </div>
      </div>
      <div className={styles['paymodel-footer-wrapper']}>
        {payType === PayType.Card ? (
          <NButton type="white" onClick={handleBackClose} size="large" className="pay-btn m-r-md">
            取消
          </NButton>
        ) : (
          <NButton type="white" onClick={handleBackClose} size="large" className="pay-btn m-r-md">
            申请试用
          </NButton>
        )}
        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn" disabled>
          确认支付
        </NButton>
      </div>
    </Modal>
  )
}

export default BuyModel