FEV2 / fw-cms

  import React from 'react';
  import { Button, Card, message, Upload } from 'antd';
  import CardDetailPreview from '../CardDetailPreview';

  import { UploadOutlined } from '@ant-design/icons';

  import { UploadProps, UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';

  import detailS from './index.less';
  import COS from "@/utils/COS";
  import { setFormData, stateTransforToStore, beforeUpload } from '@/pages/mkt/ActivityCreate/BasicInformation/entity';
  import ImgCropItem from '@/components/ImgCrop';
  import { getFidFile } from "@/utils";
  // import { useStore } from '../../index';
  import Form, { FormInstance } from 'antd/lib/form';
  
  interface Props {
    form: FormInstance,

    readOnly: boolean,
    bizType?: number

  }
  
  const FormItem = Form.Item;
  

  export default function Detail({ form, readOnly, bizType }: Props) {

    const uploadProps: UploadProps = {

      accept: "image/*",

      action: "/file/upload",
      // action: "/activity/util/file/uploadStatic",
      listType: "picture-card",

      showUploadList: { showPreviewIcon: true, showRemoveIcon: !readOnly },
      disabled: readOnly,

      // beforeUpload

    };

    const ImageUploadProps: UploadProps = {
      accept: "image/*",
      // action: "/file/upload",
      // action: "/activity/util/file/uploadStatic",

      listType: "picture-card",

      showUploadList: { showPreviewIcon: true, showRemoveIcon: !readOnly },
      customRequest: (data) => COS.cosUpload({ ...data, uploadPath: "/api/file/upload" }),
      disabled: readOnly,
      onPreview: (file) => onPreView(file, false),
      beforeUpload
    };

  
    const onPreView = (file: UploadFile, isFid?: boolean) => {
      getFidFile(file.response.data, isFid);
    };
  
    const videoProps: UploadProps = {
      accept: "video/mp4",

      listType: "text",

      disabled: readOnly,

      customRequest: (data) => COS.cosUpload({ ...data, uploadPath: "/api/file/upload" }),
      onPreview: (file) => onPreView(file, false),
      beforeUpload(file: any, fileList: any): boolean {
        if (file.type !== "video/mp4") {
          message.error("仅限传入 MP4 文件！");
          return false;
        }
        if (file.size / 1024 / 1024 > 50) {
          message.error("视频上传大小不能超过50MB！");
          return false;
        }
        return true;
      },
    };

  
    function valueFromEvent(e: any) {
      if (Array.isArray(e)) {
        return e;
      }

      const { status, response } = e.file;

      if (!e.file.status) {
        return [];
      }
      if (e.file.status == "error") {
        message.error("图片上传出错，请重新上传");
        return [];
      }

      if (status == "removed" && response) {
        COS.cosDelete({ filePath: response.data });
      }

      return e?.fileList;
    }
  
    const uploadButton = (
      <div>
        <Button icon={<UploadOutlined />}>上传</Button>
      </div>
    );

    return (
      <Card
        type="inner"

        title="活动图片"

        className={detailS.detailBox}
      >
        <div className={detailS.left}>

          <ImgCropItem

            // multiple

            required

            fidFile

            label="活动轮播图"

            name="bannerId"
            labelCol={{ span: 4 }}
            form={form}

            extra={
              <div style={{ fontSize: 10 }}>

                <p style={{ margin: 0 }}>(售前)建议宽高尺寸: 750*750;</p>

                <p style={{ margin: 0 }}>(售后)建议宽高尺寸: 670*240</p>
              </div>
            }

            aspectXY={bizType == 2 ? { width: 670, height: 240 } : { width: 750, height: 750 }}

            // setFormStorage={setFormStorage}
            {...uploadProps}
          >

            {!readOnly ? uploadButton : null}

          </ImgCropItem>
  
          <FormItem
            name="bgId"

            required

            label="活动主图"
            labelCol={{ span: 4 }}

            extra={
              <div style={{ fontSize: 10 }}>
                <div>活动概括，用于活动列表展示，(建议尺寸 750*520)</div>
                <div>图片格式要求png、jpg、gif、jpeg，大小限制 5 MB 以内</div>
              </div>
            }

            valuePropName="fileList"
            getValueFromEvent={valueFromEvent}
          >
            <Upload

              maxCount={1}
              {...ImageUploadProps}

            >

              {!readOnly ? uploadButton : null}

            </Upload>

          </FormItem>
  
          <FormItem
            labelCol={{ span: 4 }}

            name="videoId"
            label="活动视频"

            extra="视频格式要求 MP4，大小限制 50 MB 以内"
            valuePropName="fileList"
            getValueFromEvent={(e) => {
              if (Array.isArray(e)) {
                return e;
              }
              const { status, response } = e.file;
              if (!status) {
                return [];
              }
              if (status == "error") {
                message.error("视频上传出错，请重新上传");
                return [];
              }
              if (status == "removed" && response) {
                COS.cosDelete({ filePath: response.data });
              }
              return e && e.fileList;
            }}
          >

            <Upload maxCount={1} multiple {...videoProps}>

              {uploadButton}

            </Upload>
          </FormItem>
  
          <FormItem

            name="content"
            label="图文详情"

            required

            labelCol={{ span: 4 }}

            extra={
              <div style={{ fontSize: 10 }}>
                <div>图文详情一般上传活动规则，时间，流程等内容，可以多张(建议尺寸 750*任意高)</div>
                <div>图片格式要求png、jpg、gif、jpeg，大小限制 5 MB 以内</div>
              </div>
            }

            valuePropName="fileList"
            getValueFromEvent={valueFromEvent}
          >
            <Upload
              multiple

              maxCount={10}

              {...ImageUploadProps}

            >

              {!readOnly ? uploadButton : null}

            </Upload>
          </FormItem>
  
          <FormItem
            name="shareId"
            label="分享图"

            required

            labelCol={{ span: 4 }}

            extra={
              <>

                <span style={{ fontSize: 10 }}>建议尺寸 750*1206</span>

              </>
            }

            valuePropName="fileList"

            getValueFromEvent={valueFromEvent}

          >
            <Upload

              // accept="image/*"
              // listType="picture"
              // action="/api/file/upload"
              // beforeUpload={beforeUpload}
              // onPreview={(file: UploadFile) => onPreView(file, true)}

              maxCount={1}

              {...ImageUploadProps}

            >

              {!readOnly ? uploadButton : null}

            </Upload>
          </FormItem>

        </div>
        <div className={detailS.right}>

          <CardDetailPreview form={form} />

        </div>
      </Card>
    );
  }